Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(css): remove ?direct in id for postcss process #10514

Merged
merged 5 commits into from
Oct 20, 2022
Merged

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
@patak-dev patak-dev merged commit 67e7bf2 into main Oct 20, 2022
@patak-dev patak-dev deleted the css-id-clean branch October 20, 2022 07:38
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
3 participants