Create-react-app: Create React App should throw warnings when an unavailable class in a module is used

[kevindelsh]

This is a feature/enhancement request, although I think it's a must-have-one.

I'm using version: "2.1.1".

When using the built-in module feature for CSS by adding .module to the CSS file and importing the CSS file into a JS variable you won't get a warning or error if the class that you use as the variable's property name is not available (say because you mistyped the class name) .

It is gracefully ignored and no class name is added to the final HTML file.

I think it should properly warn one about such a thing and also allow us to disable/enable such warnings.

BTW, I'm still new to this business, so if there are any problems/ways of improvement to what I've submitted, please educate me.

[mrmckeb]

Hi @kevindelsh, there is some discussion about this amongst our TypeScript users, but we haven't really looked into this for JavaScript yet.

This has been [requested as a css-loader feature[(https://github.com/webpack-contrib/css-loader/issues/326), which would be ideal and I think we can use that if the feature lands.

_In the meantime..._

If you use TypeScript, you can use an IDE plugin or TypeScript plugin to _help_ with this, but they'll only give errors in your IDE, not during build. The TypeScript team have been asked about this, but don't currently have an API to run plugins during build.

Similarly, with JavaScript, most IDEs have plugins that can do the same for JavaScript. But again, these don't stop builds, they just warn in the IDE.

There's also an ESLint plugin, but I haven't tried this.
https://www.npmjs.com/package/eslint-plugin-css-modules

Let us know how you go! I'll close this off for now, but be assured that we'd love to get this in as soon as there's a good option available.

[kevindelsh]

Hey @mrmckeb, thank you for your prompt, detailed and friendly response.

I understand, create react app uses webpack for the build heavy lifting and should be implemented there (Hope I got it right).

I use JS and VS Code and ended up using a plugin VS Code CSS Modules which enables Intellisense and find definition. That's half the value and good enough for now.

I leave that here. May it help a wanderer in the wild.

[mrmckeb]

Thanks @kevindelsh!

[a7madgamal]

looking for somethink like npmjs.com/package/eslint-plugin-css-modules for tslint :(