css nesting support#64
Merged
alexander-akait merged 2 commits intocss-modules:masterfrom Dec 21, 2023
Merged
Conversation
alexander-akait
approved these changes
Dec 21, 2023
Member
alexander-akait
left a comment
alexander-akait
left a comment
There was a problem hiding this comment.
Thank you, I will add more tests and check other plugins too
Contributor
Author
|
thank you for merging :) would it be possible to release a new version? |
Member
|
Yeah, today/tomorrow, want to add more tests for other CSS modules plugins and css-loader to ensure everything is covered |
Contributor
Author
|
thanks for releasing as 4.0.4 🎉 |
samcx
added a commit
to vercel/next.js
that referenced
this pull request
Feb 29, 2024
today ~83% of all browsers support css nesting: https://caniuse.com/css-nesting  https://caniuse.com/css-nesting https://developer.mozilla.org/en-US/docs/Web/CSS/Nesting_selector therefore this pr upgrades postcss-modules-local-by-default which fixes a bug in css-modules/postcss-modules-local-by-default#64) - `.foo { &:hover { a_value: some-value; } }` is pure - `.foo { html &:hover { a_value: some-value; } }` is pure - `.foo { &:global(.bar) { a_value: some-value; } }` is pure - `:global(.foo) { &:hover { a_value: some-value; } }` is **not** pure upgrading the package will allow using css nestings with or **without** postcss compilation it fixes the following error: ``` CssSyntaxError: postcss-modules-local-by-default: <css input>:1:8: Selector "&:hover" is not pure (pure selectors must contain at least one local class or id) ``` Fixes #55053 Fixes #33734 Fixes #10475 Co-authored-by: Sam Ko <sam@vercel.com>
1 task
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
today ~76% of all browsers support for css nesting: https://caniuse.com/css-nesting
therefore this pr adds tests:
.foo { &:hover { a_value: some-value; } }which is pure.foo { html &:hover { a_value: some-value; } }which is pure.foo { &:global(.bar) { a_value: some-value; } }which is pure:global(.foo) { &:hover { a_value: some-value; } }which is not purethis pr also adds logic to
localizeNodeto make the tests above passfixes #65