Toolchain: Warn about undefined CSS Module classes in TypeScript #4387
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Install `typescript-plugin-css-modules` as a TypeScript Language Server
plugin.
This won't run in our build or `npm run check-types`, but it will show
alongside other TypeScript feedback when you're editing files in
supported editors.
More info here: npmjs.com/package/typescript-plugin-css-modules
Other changes:
- Upgrade TypeScript to 5.0.2
- TypeScript doesn't use semver, so 5.0.0 wasn't a big breaking change
- (vscode - kpi.workspace) Configure TypeScript SDK to use our
TypeScript from npm (instead of the built-in VS Code version)
- This allows us to configure plugins in tsconfig.json
Notes:
- Q: Why a TypeScript plugin, not an ESLint plugin?
- A: eslint-plugin-css-modules didn't work when I tried it, and is
no longer maintained.
- Q: Why won't it run in our build, or `npm run check-types`?
- A: At this time, TypeScript doesn't support plugins during compilation
https://github.com/mrmckeb/typescript-plugin-css-modules
noliveleger
force-pushed
the
beta
branch
2 times, most recently
from
d0b0d13
to
fd5246d
Compare
|
According to Leszek, this works in Sublime if you have these plugins:
|
|
@magicznyleszek Thanks for merging! |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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-modulesrepo of adding an ESLint plugin, so if that happens we could perhaps use it.To test this PR,
npm install, then open thekpi.code-workspacein 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-modulesas a pluginkpi.code-workspace: Configure VS Code to use the TypeScript version in node_modules, which will use the plugin in ourtsconfig.json.