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

[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 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 😌