bmatcuk / eslint-plugin-postcss-modules

Checks that you are using the classes exported by your css modules using postcss.
MIT License
21 stars 7 forks source link

Reports the CSS Modules `values` variables are unused #10

Open bz-stripe opened 3 years ago

bz-stripe commented 3 years ago

For context: CSS Modules values variables docs: https://github.com/css-modules/css-modules/blob/master/docs/values-variables.md

Taking the example from the docs

colors.css

@value blue: #0c77f8;
@value red: #ff0000;
@value green: #aaf200;

demo.css

/* import your colors... */
@value colors: "./colors.css";
@value blue, red, green from colors;

.button {
  color: blue;
  display: inline-block;
}

I'll see

warning   Classes colors, blur, red and green are exported but unused   postcss-modules/no-unused-class

Possibly related to https://github.com/bmatcuk/eslint-plugin-postcss-modules/issues/7

bz-stripe commented 3 years ago

@bmatcuk happy to take first cut at a PR if you can point me in the right direction 😄

bmatcuk commented 3 years ago

Hey @bz-stripe, so sorry it's taken me a long time to get to this! It's been a crazy busy month, but I haven't forgotten about you!

So, eslint-plugin-postcss-modules runs your css through a couple postcss plugins to figure out what gets exported. I picked the same plugins css-loader uses for compatibility. One plugin, eslint-plugin-values, is responsible for handling @values. Unfortunately, in addition to marking them for export, it also substitutes any usage of the @values with the @values' values. So, it's hard to figure out which @values have already been used.

I think I'll need to basically rewrite eslint-plugin-values to give me the information I need. Shouldn't be hard, looks like a fairly simple plugin, just need to find the time. Hopefully this weekend. But I wanted to let you know that I haven't forgot about this in the meantime!

bz-stripe commented 3 years ago

Awesome, thanks for the update! Let me know if I can help in any way 😄

bmatcuk commented 3 years ago

Hi @bz-stripe, I've added support for @values! Could you give it a try? You'll need to use the master branch at the moment - I want to make sure all my recent changes work without causing issues before I officially release on npm.

You can specify the master branch like this in your package.json:

{
  "devDependencies": {
    "eslint-plugin-postcss-modules": "bmatcuk/eslint-plugin-postcss-modules"
  }
}
bmatcuk commented 3 years ago

I've had confirmation that the new code doesn't break, so I've officially published v1.2.0 to npm - you can update to the latest version instead of trying the master branch. But, let me know if you still have trouble with @values