Skip to content

Conversation

@jantimon
Copy link
Contributor

@jantimon jantimon commented Aug 6, 2024

I created a small next.js demo project with the following css code:

.page {
  button {
    color: green;
  }
}

Stackblitz without postcss-nesting
without postcss-nesting .page { button { .. } } is not pure:

shot-MPwBLLsD@2x

however the same css code works once you add postcss-nesting

Stackblitz with postcss-nesting
shot-mTFxVBKN@2x

I took a look and found out the reason:

without postcss-nesting the selector is button (which is not pure)
with postcss-nesting the selector is .page button (which IS pure according to postcss-modules-local-by-default)

To proof that I added a new passing test case without modifying the logic:

 {
    name: "consider global inside local as pure",
    input: ".foo button { a_value: some-value; }",
    options: { mode: "pure" },
    expected: ":local(.foo) button { a_value: some-value; }",
  },

@alexander-akait alexander-akait merged commit a73b700 into css-modules:master Oct 31, 2024
@jantimon jantimon deleted the feature/add-pure-test branch November 5, 2024 07:51
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.

2 participants