React CSS modules

build tests license version

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

Capabilities

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

Pseudo Classes

Pseudo Class functions

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 inside node_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 Code Go 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	✅	❌
Psuedo Classes	✅	✅
Psuedo Class Functions	✅	✅
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	✅	❌

TS/TSX|JS/JSX Language Features

Definitions

Go to any type of selector definition from your React components - demo
- reactTsScss.definition - setting for this feature

Hover

Peek CSS properties of a selector on hover - demo
- reactTsScss.peekProperties - setting for this feature

Completions

Completion of selectors - demo
Completion of style identifiers with automatic import of closest (S)CSS module - demo
- reactTsScss.autoComplete - setting for this feature

Diagnostics

Useful diagnostics information are provided for missing selector - demo
Module not found error is also provided for non existing CSS modules - demo
Hints for un used selectors inside CSS/SCSS documents - demo
Settings to change diagnostics
- reactTsScss.diagnostics - Toggle to turn off diagnostics
- reactTsScss.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'

Code Actions

Code Action to quick fix misspelled selectors
Code Action to add a non existing selector to the corresponding CSS/SCSS module
Code Action to ignore warnings temporarily
demo
- reactTsScss.diagnostics - setting for this feature

CSS/SCSS/Less Language Features

Rename Provider

Rename all the references of a selector across various component files - Demo
Currently rename only work for the modules that are imported in tsx/jsx files
- reactTsScss.renameSelector - setting for this feature

Reference Provider

Find all the references of a selector across various component files - Demo
Currently references only work for the modules that are imported in tsx/jsx files
- reactTsScss.references - setting for this feature

Code Lens

Useful Code Lens context for selectors based on their references across component files - Demo
A quick alternative to reactTsScss.references
Currently lenses only work for the modules that are imported in tsx/jsx files
- reactTsScss.codelens - setting for this feature
- This setting is OFF by default

Variable Completion - [Only CSS]

Demo

Completion of variables across all the css modules
- reactTsScss.cssAutoComplete - setting for this feature

Variable Definitions - [Only CSS]

Definition of variables across all the css modules
- reactTsScss.cssDefinitions - setting for this feature

Syntax Colors and Presentation - [Only CSS]

Color Presentations and color information for variables across all the css modules
- reactTsScss.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

Casings

This extensions supports selectors written in:

snake_case
PascalCase
camelCase
kebab-case

Settings

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
}

Roadmap

Plain selectors without any reference is a no op in the current version and is expected to be added in coming versions
Support for stylus will be added in the future versions

Contribution

Check out the contribution guide