feat: Implement pure mode lints for CSS Modules

[kdy1]

Relevant code: https://github.com/css-modules/postcss-modules-local-by-default/blob/5eeb3053bc40061022ebc6f41cd207a405484de1/src/index.js#L518-L520

[timneutkens]

Can you add some more tests, the current test only covers the top level but there's other case where it shouldn't error.

Examples:

• div .my-class -> should not error
• .my-class div -> should not error
• div.my-class -> should not error

These are the cases I tried that compile fine with webpack CSS Modules

div.my-class {
  color: red;
}

a .my-class {
  color: red;
}

.my-class a {
  color: red;
}

[timneutkens]

Looks good to me now, thanks for adding the additional tests 💯

[timneutkens]

Realized this is not documented yet, can you make sure there's documentation added as well, it's in this repo in the website folder 👍

[jantimon]

Could we please also add tests for nesting?
Because that's buggy right now in https://github.com/css-modules/postcss-modules-local-by-default

should not error:

div {
  .my-class {
     color: red; 
  }
}

div {
  .my-class {
     span {
       color: red; 
     }
  }
}

should error:

div {
  .my-class {
     color: red; 
  }
  color: blue
}

[devongovett]

What should happen for cases like .my-class:is(a)? Currently that errors, presumably while parsing the inner selector inside the :is. If this selector had been written as a.my-class it would not error so seems like it probably shouldn't in the :is case also?

[kdy1]

I introduced a new selector state flag and I resolved the test case you mentioned.

[kdy1]

I think html { .foo { span { color: red; } } } is nearly impossible to handle with the current model

[kdy1]

We are detecting from selector passer, not AST visitor

[jantimon]

I see - checking only the selector has worked very well for many years
Unfortunately css nesting changed that..

this test case works in nextjs using postcss but never will in lightningcss
https://stackblitz.com/edit/stackblitz-starters-ywc6pu?file=app%2Fpage.module.css

[devongovett]

I think this should not be allowed:

html {
  .foo {
    /* ... */
  }
}

because it's easy to start adding declarations to the root html rule itself which is not pure.

However the inverse seems ok:

.foo {
  div {
    /* ... */
  }
}

[devongovett]

Updated to implement this in the transform pass rather than in the selector parser, which enables handling of nesting as shown above.

[jantimon]

thanks @kdy1 and @devongovett for all your work!

[timneutkens]

Thanks @kdy1 @devongovett @jantimon, great collaboration 😌