VS Code extension that enables CSS modules IntelliSense for your React projects written in TypeScript/JavaScript. Currently supports CSS, SCSS, Less modules
This extension also supports CSS language features which are not supported by built-in VS Code code CSS language features. Check CSS language features for more info
This extension is unique in terms of support for major types of Casings and different types of CSS class selectors
Different types of selectors are supported
- Root selectors
- Nested selectors
- Suffixed selectors (SCSS only)
- Deeply nested suffix selectors
Almost all project scaffolders such as Vite, Next.js and CRA add css module declaration to the project by injecting it in a
.d.ts
file (for instance insidenode_modules/vite/client.d.ts
added by Vite). TypeScript treats these definitions as definition provider for Style properties. This results in a useless definition result when VS CodeGo to Definition
is triggered. Check this issue.This extension gives you an option to eliminate the useless results by using the TypeScript plugin typescript-cleanup-defs that can filter out those definitions results. Check the plugin for more details.
Override this plugin using the setting
reactTsScss.tsCleanUpDefs
See how it compares with CSS modules
Features | React CSS Modules | CSS modules |
---|---|---|
Definition | Camel Case selectors - ✅ Snake Case selectors - ✅ Pascal Case selectors - ✅ Kebab Case selectors - ✅ |
Camel Case selectors - ✅ Snake Case selectors - ❌ Pascal Case selectors - ❌ Kebab Case selectors - ❌ |
Completion | Camel Case selectors - ✅ Snake Case selectors - ✅ Pascal Case selectors - ✅ Kebab Case selectors - ✅ |
Camel Case selector - ✅ Snake Case selectors - ✅ Pascal Case selectors - ✅ Kebab Case selectors - ✅ |
Hover | Supported for all types of selectors - ✅ | ❌ |
SCSS Suffix Selectors | ✅ | ❌ |
Less suffix selectors | ✅ | ❌ |
Selector Diagnostics | ✅ | ❌ |
Selector References | ✅ | ❌ |
Code lenses | ✅ | ❌ |
Rename selector | ✅ | ❌ |
Mixin Selector | ✅ | ❌ |
Mixin Reference selectors | ✅ | ❌ |
Code actions | ✅ | ❌ |
CSS Definitions | ✅ | ❌ |
CSS Variables Completions | ✅ | ❌ |
CSS Color Presentation | ✅ | ❌ |
reactTsScss.definition
- setting for this featurereactTsScss.peekProperties
- setting for this featurereactTsScss.autoComplete
- setting for this featurereactTsScss.diagnostics
- Toggle to turn off diagnosticsreactTsScss.tsconfig
- Base TS Config path in the project. Useful for resolving path aliases. Defaults to './tsconfig.json'reactTsScss.baseDir
- Root directory of your project. Useful if tsconfig doesn't have information about path aliases. Defaults to 'src'reactTsScss.diagnostics
- setting for this featureCurrently rename only work for the modules that are imported in tsx/jsx files
reactTsScss.renameSelector
- setting for this featureCurrently references only work for the modules that are imported in tsx/jsx files
reactTsScss.references
- setting for this featurereactTsScss.codelens
- setting for this featureOFF
by defaultreactTsScss.cssAutoComplete
- setting for this featurereactTsScss.cssDefinitions
- setting for this featurereactTsScss.cssSyntaxColor
- setting for this feature
VS codes built in support for CSS Language is limited to the current active file.So the above features are limited to active file and hence any access to variables from different modules won't work until you install React CSS modules
This extensions supports selectors written in:
Defaults
{
"reactTsScss.peekProperties": true,
"reactTsScss.autoComplete": true,
"reactTsScss.autoImport": true,
"reactTsScss.definition": true,
"reactTsScss.references": true,
"reactTsScss.tsconfig": "./tsconfig.json",
"reactTsScss.baseDir": "src",
"reactTsScss.diagnostics": true,
"reactTsScss.cssAutoComplete": true,
"reactTsScss.cssDefinitions": true,
"reactTsScss.cssSyntaxColor": true,
"reactTsScss.tsCleanUpDefs": true,
"reactTsScss.cleanUpDefs": [
"*.module.css",
"*.module.scss",
"*.module.sass",
"*.module.less",
"*.module.styl"
],
"reactTsScss.codelens": false,
"reactTsScss.renameSelector": true
}
no op
in the current version and is expected to be added in coming versionsCheck out the contribution guide