Evaluate typescript-plugin-css-modules

[amannn]

https://www.npmjs.com/package/typescript-plugin-css-modules

[amannn]

The editor integration is quite nice:

The big drawback is unfortunately that TypeScript plugins are not run at compilation time. Therefore you only see the errors in the IDE, not for example when linting on CI. See https://github.com/microsoft/TypeScript/issues/16607. I also tried running the type checks with ttsc, but not luck unforunately.

So probably for now the ESLint plugin is still the better option.

[barak007]

This plugin provides one of the best experiences of css-modules in a typescript project and the draw back of not having the errors in build time is huge. One additional drawback of this plugin is that it uses monkey patching on the typescript module. This plugin patches createLanguageServiceSourceFile and updateLanguageServiceSourceFile and this is another reason why we avoid this approach for our project. I would like to here feedback about this approach or suggest a cleaner alternative.

[amannn]

Oh hi @barak007, thanks for chiming in! Are you a user of eslint-config-molindo? I'd also be interested in a way to get the errors from this plugin at build time.

[barak007]

I'm not aware of eslint-config-molindo. I wanted to achieve the same goals for our library Stylable. We looked at solutions and typescript-plugin-css-modules was doing the closest to what we want. (We are competing in the same domain)

[amannn]

Oh ok, I was just curious since you commented on this repo! I unfortunately don't have a solution here yet. But if you have any link to follow along on your progress I'd be curious.

[barak007]

I got here from the typescript issue and honestly thought this issue is in the Typescript repo 😭😯.

[amannn]

Not integrated with TypeScript, but this also improves DX with CSS Modules without introducing complexity: https://marketplace.visualstudio.com/items?itemName=clinyong.vscode-css-modules