{"id":22052667,"url":"https://github.com/viijay-kr/react-ts-css","last_synced_at":"2025-07-25T19:34:32.397Z","repository":{"id":60989021,"uuid":"547131203","full_name":"Viijay-Kr/react-ts-css","owner":"Viijay-Kr","description":"VS Code Extension for CSS modules in typescript based react projects","archived":false,"fork":false,"pushed_at":"2024-12-26T07:14:14.000Z","size":26622,"stargazers_count":56,"open_issues_count":15,"forks_count":5,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-05-11T07:09:47.967Z","etag":null,"topics":["css","cssmodules-react","less","reactjs","scss","typescript","vscode","vscode-extension"],"latest_commit_sha":null,"homepage":"https://marketplace.visualstudio.com/items?itemName=viijay-kr.react-ts-css","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Viijay-Kr.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-10-07T07:22:16.000Z","updated_at":"2025-05-07T05:23:59.000Z","dependencies_parsed_at":"2023-02-17T10:16:07.993Z","dependency_job_id":"f90e29f1-467b-4d1a-ae3c-17034be4a891","html_url":"https://github.com/Viijay-Kr/react-ts-css","commit_stats":null,"previous_names":[],"tags_count":75,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Viijay-Kr%2Freact-ts-css","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Viijay-Kr%2Freact-ts-css/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Viijay-Kr%2Freact-ts-css/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Viijay-Kr%2Freact-ts-css/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Viijay-Kr","download_url":"https://codeload.github.com/Viijay-Kr/react-ts-css/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253528970,"owners_count":21922636,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","cssmodules-react","less","reactjs","scss","typescript","vscode","vscode-extension"],"created_at":"2024-11-30T15:13:51.406Z","updated_at":"2025-05-11T07:09:57.106Z","avatar_url":"https://github.com/Viijay-Kr.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1\u003eReact CSS modules\u003c/h1\u003e\n\n![build](images/build.png)\n![tests](images/tests.png)\n![license](images/license.png)\n![version](images/version.png)\n\nVS Code extension that enables CSS modules IntelliSense for your React projects written in TypeScript/JavaScript.\nCurrently supports CSS, SCSS, Less modules\n\nThis extension also supports CSS language features which are not supported by built-in VS Code [code CSS language features](https://github.com/microsoft/vscode-css-languageservice). Check [CSS language features](#cssscssless-language-features) for more info\n\n## Capabilities\n\n\u003e This extension is unique in terms of support for major types of [Casings](#casings) and different types of CSS class selectors\n\u003e\n\u003e Different types of selectors are supported\n\u003e\n\u003e - Root selectors\n\u003e - Nested selectors\n\u003e - Suffixed selectors ([SCSS only](https://sass-lang.com/documentation/style-rules/parent-selector#adding-suffixes))\n\u003e - Deeply nested suffix selectors\n\u003e - Pseudo Classes\n\u003e - Pseudo Class functions\n\u003e\n\u003e 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](https://github.com/Viijay-Kr/react-ts-css/issues/68).\n\u003e\n\u003e This extension gives you an option to eliminate the useless results by using the TypeScript plugin [typescript-cleanup-defs](https://www.npmjs.com/package/typescript-cleanup-definitions) that can filter out those definitions results. Check the plugin for more details.\n\u003e\n\u003e Override this plugin using the setting `reactTsScss.tsCleanUpDefs`\n\nSee how it compares with **CSS modules**\n\n| Features                  |                                                 React CSS Modules                                                 |                                                    CSS modules                                                    |\n| ------------------------- | :---------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------: |\n| Definition                | Camel Case selectors - ✅\u003cbr\u003eSnake Case selectors - ✅\u003cbr\u003ePascal Case selectors - ✅\u003cbr\u003eKebab Case selectors - ✅ | Camel Case selectors - ✅\u003cbr\u003eSnake Case selectors - ❌\u003cbr\u003ePascal Case selectors - ❌\u003cbr\u003eKebab Case selectors - ❌ |\n| Completion                | Camel Case selectors - ✅\u003cbr\u003eSnake Case selectors - ✅\u003cbr\u003ePascal Case selectors - ✅\u003cbr\u003eKebab Case selectors - ✅ | Camel Case selector - ✅\u003cbr\u003eSnake Case selectors - ✅\u003cbr\u003ePascal Case selectors - ✅\u003cbr\u003eKebab Case selectors - ✅  |\n| Hover                     |                                     Supported for all types of selectors - ✅                                     |                                                        ❌                                                         |\n| SCSS Suffix Selectors     |                                                        ✅                                                         |                                                        ❌                                                         |\n| Psuedo Classes            |                                                        ✅                                                         |                                                        ✅                                                         |\n| Psuedo Class Functions    |                                                        ✅                                                         |                                                        ✅                                                         |\n| Less suffix selectors     |                                                        ✅                                                         |                                                        ❌                                                         |\n| Selector Diagnostics      |                                                        ✅                                                         |                                                        ❌                                                         |\n| Selector References       |                                                        ✅                                                         |                                                        ❌                                                         |\n| Code lenses               |                                                        ✅                                                         |                                                        ❌                                                         |\n| Rename selector           |                                                        ✅                                                         |                                                        ❌                                                         |\n| Mixin Selector            |                                                        ✅                                                         |                                                        ❌                                                         |\n| Mixin Reference selectors |                                                        ✅                                                         |                                                        ❌                                                         |\n| Code actions              |                                                        ✅                                                         |                                                        ❌                                                         |\n| CSS Definitions           |                                                        ✅                                                         |                                                        ❌                                                         |\n| CSS Variables Completions |                                                        ✅                                                         |                                                        ❌                                                         |\n| CSS Color Presentation    |                                                        ✅                                                         |                                                        ❌                                                         |\n\n## Langauge Features\n\n- [TS/TSX|JS/JSX Language Features](#tstsxjsjsx-language-features)\n  - [Definitions](#definitions)\n  - [Hover](#hover)\n  - [Completions](#completions)\n  - [Diagnostics](#diagnostics)\n  - [Code Actions](#code-actions)\n- [CSS/SCSS/Less Language Features](#cssscssless-language-features)\n  - [Rename Provider](#rename-provider)\n  - [Reference Provider](#reference-provider)\n  - [Code Lens (**Default OFF**)](#code-lens)\n  - [Variable Completion - **\\[Only CSS\\]**](#variable-completion---only-css)\n  - [Variable Definitions - **\\[Only CSS\\]**](#variable-definitions---only-css)\n  - [Syntax Colors and Presentation - **\\[Only CSS\\]**](#syntax-colors-and-presentation---only-css)\n- [Casings](#casings)\n- [Settings](#settings)\n- [Roadmap](#roadmap)\n- [Contribution](#contribution)\n\n## TS/TSX|JS/JSX Language Features\n\n### [Definitions](https://code.visualstudio.com/api/references/vscode-api#DefinitionProvider)\n\n- Go to any type of selector definition from your React components - [demo](https://github.com/Viijay-Kr/react-ts-css/tree/main/assets/definitions.gif)\n  - `reactTsScss.definition` - setting for this feature\n\n### [Hover](https://code.visualstudio.com/api/references/vscode-api#HoverProvider)\n\n- Peek CSS properties of a selector on hover - [demo](https://github.com/Viijay-Kr/react-ts-css/tree/main/assets/hover.gif)\n  - `reactTsScss.peekProperties` - setting for this feature\n\n### [Completions](https://code.visualstudio.com/api/references/vscode-api#HoverProvider)\n\n- Completion of selectors - [demo](https://github.com/Viijay-Kr/react-ts-css/tree/main/assets/autocomplete.gif)\n- Completion of style identifiers with automatic import of closest (S)CSS module - [demo](https://github.com/Viijay-Kr/react-ts-css/tree/main/assets/auto-import.gif)\n  - `reactTsScss.autoComplete` - setting for this feature\n\n### [Diagnostics](https://microsoft.github.io/language-server-protocol/specifications/lsp/3.17/specification/#diagnostic)\n\n- Useful diagnostics information are provided for missing selector - [demo](https://github.com/Viijay-Kr/react-ts-css/tree/main/assets/missing-selector.png)\n- Module not found error is also provided for non existing CSS modules - [demo](https://github.com/Viijay-Kr/react-ts-css/tree/main/assets/missing-module.png)\n- Hints for un used selectors inside CSS/SCSS documents - [demo](/assets/css-diagnostics.gif)\n- Settings to change diagnostics\n  - `reactTsScss.diagnostics` - Toggle to turn off diagnostics\n  - `reactTsScss.tsconfig` - Base TS Config path in the project. Useful for resolving path aliases. Defaults to './tsconfig.json'\n  - `reactTsScss.baseDir` - Root directory of your project. Useful if tsconfig doesn't have information about path aliases. Defaults to 'src'\n\n### [Code Actions](https://code.visualstudio.com/docs/editor/refactoring#_code-actions-quick-fixes-and-refactorings)\n\n- Code Action to quick fix misspelled selectors\n- Code Action to add a non existing selector to the corresponding CSS/SCSS module\n- Code Action to ignore warnings temporarily\n- [demo](https://github.com/Viijay-Kr/react-ts-css/tree/main/assets/code-actions.gif)\n  - `reactTsScss.diagnostics` - setting for this feature\n\n## CSS/SCSS/Less Language Features\n\n### [Rename Provider](https://code.visualstudio.com/api/language-extensions/programmatic-language-features#rename-symbols)\n\n- Rename all the references of a selector across various component files - [Demo](assets/rename-selector.gif)\n- Currently rename only work for the modules that are imported in tsx/jsx files\n\n  - `reactTsScss.renameSelector` - setting for this feature\n\n### [Reference Provider](https://code.visualstudio.com/docs/languages/typescript#_code-navigation)\n\n- Find all the references of a selector across various component files - [Demo](assets/references.gif)\n- Currently references only work for the modules that are imported in tsx/jsx files\n\n  - `reactTsScss.references` - setting for this feature\n\n### [Code Lens](https://code.visualstudio.com/api/language-extensions/programmatic-language-features#codelens-show-actionable-context-information-within-source-code)\n\n- Useful Code Lens context for selectors based on their references across component files - [Demo](assets/code-lens.gif)\n- A quick alternative to [reactTsScss.references](#reference-provider)\n- Currently lenses only work for the modules that are imported in tsx/jsx files\n  - `reactTsScss.codelens` - setting for this feature\n  - This setting is `OFF` by default\n\n### Variable Completion - **[Only CSS]**\n\n[Demo](https://github.com/Viijay-Kr/react-ts-css/tree/main/assets/css-variables.gif)\n\n- Completion of variables across all the css modules\n  - `reactTsScss.cssAutoComplete` - setting for this feature\n\n### [Variable Definitions](https://code.visualstudio.com/docs/languages/css#_go-to-declaration-and-find-references) - **[Only CSS]**\n\n- Definition of variables across all the css modules\n  - `reactTsScss.cssDefinitions` - setting for this feature\n\n### [Syntax Colors and Presentation](https://code.visualstudio.com/docs/languages/css#_syntax-coloring-color-preview) - **[Only CSS]**\n\n- Color Presentations and color information for variables across all the css modules\n  - `reactTsScss.cssSyntaxColor` - setting for this feature\n    \u003e 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\n\n## Casings\n\nThis extensions supports selectors written in:\n\n1. snake_case\n2. PascalCase\n3. camelCase\n4. kebab-case\n\n## Settings\n\nDefaults\n\n```json\n{\n  \"reactTsScss.peekProperties\": true,\n  \"reactTsScss.autoComplete\": true,\n  \"reactTsScss.autoImport\": true,\n  \"reactTsScss.definition\": true,\n  \"reactTsScss.references\": true,\n  \"reactTsScss.tsconfig\": \"./tsconfig.json\",\n  \"reactTsScss.baseDir\": \"src\",\n  \"reactTsScss.diagnostics\": true,\n  \"reactTsScss.cssAutoComplete\": true,\n  \"reactTsScss.cssDefinitions\": true,\n  \"reactTsScss.cssSyntaxColor\": true,\n  \"reactTsScss.tsCleanUpDefs\": true,\n  \"reactTsScss.cleanUpDefs\": [\n    \"*.module.css\",\n    \"*.module.scss\",\n    \"*.module.sass\",\n    \"*.module.less\",\n    \"*.module.styl\"\n  ],\n  \"reactTsScss.codelens\": false,\n  \"reactTsScss.renameSelector\": true\n}\n```\n\n## Roadmap\n\n1. Plain selectors without any reference is a `no op` in the current version and is expected to be added in coming versions\n2. Support for stylus will be added in the future versions\n\n## Contribution\n\nCheck out the contribution [guide](CONTRIBUTING.md)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fviijay-kr%2Freact-ts-css","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fviijay-kr%2Freact-ts-css","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fviijay-kr%2Freact-ts-css/lists"}