Toolchain: Warn about undefined CSS Module classes in TypeScript #4387
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
Show a warning in your code editor if you use an undefined CSS module class in a TypeScript file.
Details
To help catch issues like the wrong class name being used.
One caveat: It's a TypeScript Language Server plugin, so it'll work in editors but not with
tsc
,webpack
, or anything we run in CI.Notes for reviewer
There used to be an ESLint plugin that did this, but it's currently unmaintained, and it didn't work when I tried it.
There's some talk in the
typescript-plugin-css-modules
repo of adding an ESLint plugin, so if that happens we could perhaps use it.To test this PR,
npm install
, then open thekpi.code-workspace
in VS Code. See what happens when you modify something likeclassName={styles.root}
in a TypeScript file.Further config might be needed to get this functionality in other editors (Sublime, coc.nvim).
Changes in this PR:
node_modules
- Installtypescript-plugin-css-modules
- the TypeScript server plugintsconfig.json
- Settypescript-plugin-css-modules
as a pluginkpi.code-workspace
: Configure VS Code to use the TypeScript version in node_modules, which will use the plugin in ourtsconfig.json
.