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

css nesting support #64

Merged
merged 2 commits into from
Dec 21, 2023

Conversation

jantimon
Copy link
Contributor

@jantimon jantimon commented Sep 24, 2023

today ~76% of all browsers support for css nesting: https://caniuse.com/css-nesting

therefore this pr adds tests:

  • a test for .foo { &:hover { a_value: some-value; } } which is pure
  • a test for .foo { html &:hover { a_value: some-value; } } which is pure
  • a test for .foo { &:global(.bar) { a_value: some-value; } } which is pure
  • a test for :global(.foo) { &:hover { a_value: some-value; } } which is not pure

this pr also adds logic to localizeNode to make the tests above pass

fixes #65

Copy link
Member

@alexander-akait alexander-akait left a 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

@alexander-akait alexander-akait merged commit a8c3d77 into css-modules:master Dec 21, 2023
@jantimon
Copy link
Contributor Author

jantimon commented Jan 8, 2024

thank you for merging :)

would it be possible to release a new version?

@alexander-akait
Copy link
Member

Yeah, today/tomorrow, want to add more tests for other CSS modules plugins and css-loader to ensure everything is covered

@jantimon
Copy link
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

![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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

add support for nesting selector
2 participants