Errors and warnings don't go away once fixed

[jaydenseric]

For some reason I can't figure out, errors and warnings don't go away once they are fixed by changes to the imported CSS file.

This happens when using the ESLint CLI, so it's not just an issue with the VS Code ESLint extension.

Is there some sort of caching going on, that is not being updated after the first lint?

[bmatcuk]

So when you run eslint on the command line, the errors and warnings still appear? That's very strange. Sounds like an issue with your eslint setup - you should try asking over there.

I believe there are caching options, but I'm not sure how it works.

[jaydenseric]

None of the other ESLint plugins exhibit this issue, only this one.

[bmatcuk]

But the errors and warnings still appear if you manually run eslint on the command line?

[jaydenseric]

Yes, it doesn't seem to be related to any editor extensions because I get identical results with the CLI.

[bmatcuk]

Ya, that's the part that makes me think it's a caching problem with eslint itself - my plugin wouldn't affect the CLI. Or, it could be an issue with postcss caching...

[bmatcuk]

hmm, I don't see anything in the postcss documentation about caching... eslint-plugin-postcss-modules does not explicitly implement or enable any caching, so, I'm kind of at a loss at why this is happening =(

[bmatcuk]

Can you copy/paste your postcss config?

[jaydenseric]

.postcssrc.json:

{
  "plugins": {
    "postcss-import": {},
    "postcss-url": {},
    "postcss-custom-properties": {},
    "postcss-flexbugs-fixes": {},
    "autoprefixer": {}
  }
}

[bmatcuk]

Hmm, nothing suspicious there... I'll try to dig into this more over the weekend.

[bmatcuk]

I can't reproduce the issue locally... this may be a big ask, but, is it possible for you to build a minimal git repo that reproduces the issue? Some kind of minimal app with a similar configuration to the project you're working on.

[jaydenseric]

I took a break from coding yesterday (Saturday), but today I'll try to figure this one out.

[jaydenseric]

Ok, so I've narrowed a few things down.

Today I can't reproduce the issue purely using the ESLint CLI - I'm not sure if this is due to recent changes in my project or if I was initially mistaken.

This issue is reproducible with the VS Code ESLint extension:

1. Have a component correctly import and use a class from CSS module file.
2. Rename the class in the CSS file.
3. Reopen the JS file, and note that it doesn't lint the incorrect use of the old class name as an error.

Basically, once the VS Code project has been opened eslint-plugin-postcss-modules caches the classes in a CSS module file until VS Code is restarted, at which point it constructs a fresh cache the first time the JS file importing the CSS file is opened.

I'm quite sure the bug relates to the internal caching eslint-plugin-postcss-modules has; it's not a problem with the VS Code ESLint extension.

If you change this line to disable caching, the problem can be "fixed":

https://github.com/bmatcuk/eslint-plugin-postcss-modules/blob/ab99590b8a3d1e5bfdb80f876408247aab22c424/lib/rules/common/cache.ts#L156

     const classes =
       Cache.filenameToClasses[filename] !== undefined
-        ? Cache.filenameToClasses[filename]
+        ? this.parser.parse(filename)
         : this.parser.parse(filename)

[bmatcuk]

Aha! That makes sense! I'll see about putting together a fix. Thanks!

[bmatcuk]

Ok, I cut a new version of eslint-plugin-postcss-modules (v1.1.4)... could you give it a try and let me know if it solves your problem?

[jaydenseric]

That seems to have solved the problem; thanks for sorting it out!

[bmatcuk]

Yay! That's great =) Glad we were able to get to the bottom of it.