-
Notifications
You must be signed in to change notification settings - Fork 13
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
css nesting support #64
css nesting support #64
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thank you, I will add more tests and check other plugins too
thank you for merging :) would it be possible to release a new version? |
Yeah, today/tomorrow, want to add more tests for other CSS modules plugins and css-loader to ensure everything is covered |
thanks for releasing as 4.0.4 🎉 |
today ~83% of all browsers support css nesting: https://caniuse.com/css-nesting ![CSS Nesting Browser Support](https://github.com/css-modules/postcss-modules-local-by-default/assets/4113649/141f8dce-a8bd-4df4-b2bd-210252189711) 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>
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
localizeNode
to make the tests above passfixes #65