Skip to content

Conversation

@bluwy
Copy link
Member

@bluwy bluwy commented Oct 18, 2022

Description

Fix #5097

If a CSS module is loaded via client and server, the id may differ in ?direct due to import/fetch limitations.

A custom generateScopedName may be used that derives from the file name, but because of ?direct, it generates a different hash even if the content is the same.

This PR cleans the id before passing to postcss.

Additional context

I'm not sure if there are postcss plugins out there that rely on the query params to do something special, but that sounds hacky in the first place 🤔 And if so, this PR would break those usecase.


What is the purpose of this pull request?

  • Bug fix
  • New Feature
  • Documentation update
  • Other

Before submitting the PR, please make sure you do the following

  • Read the Contributing Guidelines.
  • Read the Pull Request Guidelines and follow the Commit Convention.
  • Check that there isn't already a PR that solves the problem the same way to avoid creating a duplicate.
  • Provide a description in this PR that addresses what the PR is solving, or reference the issue that it solves (e.g. fixes #123).
  • Ideally, include relevant tests that fail without this PR but pass with it.

@bluwy bluwy added feat: css p3-minor-bug An edge case that only affects very specific usage (priority) labels Oct 18, 2022
Comment on lines -49 to -54
describe('css path resolutions', () => {
const mockedProjectPath = path.join(process.cwd(), '/foo/bar/project')
const mockedBarCssRelativePath = '/css/bar.module.css'
const mockedFooCssRelativePath = '/css/foo.module.css'

test('cssmodule compose/from path resolutions', async () => {
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

reviewer note: There's a lot of change in this test file. The gist of what I did is that I extracted the CSS plugin transform setup for this old test so that I can reuse it for the newly added test.

@bluwy
Copy link
Member Author

bluwy commented Oct 18, 2022

Whadaya know we indeed have test to prevent the breaking change 😄

@bluwy bluwy marked this pull request as draft October 18, 2022 10:05
@bluwy
Copy link
Member Author

bluwy commented Oct 18, 2022

Wait I was the one who approve #7827 too 🙈 Was thinking of just removing the ?direct part. cc @sapphi-red

@sapphi-red
Copy link
Member

Yeah, I think we could remove ?direct as long as we preserve the other parts.

@bluwy bluwy changed the title fix(css): clean id for postcss process fix(css): remove ?direct in id for postcss process Oct 19, 2022
@bluwy bluwy marked this pull request as ready for review October 19, 2022 05:26
sapphi-red
sapphi-red previously approved these changes Oct 20, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

feat: css p3-minor-bug An edge case that only affects very specific usage (priority)

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Using generateScopedName with vite.css.modules breaks CSS, even if classes are correctly outputted

4 participants