viijay-kr/react-ts-css

VS Code Extension for CSS modules in typescript based react projects

React CSS modules

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

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	✅	❌
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	✅	❌

Langauge Features

• TS/TSX|JS/JSX Language Features
  • Definitions
  • Hover
  • Completions
  • Diagnostics
  • Code Actions
• CSS/SCSS/Less Language Features
  • Rename Provider
  • Reference Provider
  • Code Lens (Default OFF)
  • Variable Completion - [Only CSS]
  • Variable Definitions - [Only CSS]
  • Syntax Colors and Presentation - [Only CSS]
• Casings
• Settings
• Roadmap
• Contribution

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.peek - 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:

1. snake_case
2. PascalCase
3. camelCase
4. kebab-case

Settings

Defaults

{
  "reactTsScss.peek": 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

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

Contribution

Check out the contribution guide

react-ts-css's Issues

Extension Fails to Find Nested Selectors

Describe the bug
The library's own readme states:

Different types of selectors are supported

Root selectors
Nested selectors

However, nested selectors are not supported, or at least not fully. When you create a nested selector in a CSS file, the extension shows it as not-existing in the JS(/JSX/TS):

As you can see on the left side of the screenshot, my JSX file has a yellow line under the secondParagraph, because (as you can see on the right) the style is defined as a nested style. But if I remove the nesting, the extension recognizes the selector just fine:

To Reproduce
Steps to reproduce the behavior:

1. Create a nested selector
2. Reference that selector in JSX
3. See VS Code add a yellow squiggly line to the selector reference
4. Remove the nesting of the selector
5. See VS Code not add a line under the selector (now)

Expected behavior
It doesn't matter if the selector is nested or not; under the React CSS Modules standard the selector should be reference-able from the JSX.

Screenshots
See above

Desktop (please complete the following information):
I assume this is irrelevant, but

• OS: Mac OS Sonoma 14.3

CSS Language features for SASS and LESS

Extend the css language features to SASS and Less Modules.

1.6.0 shipped CSS language support for css variables.

The goal of this task to extend the support for sass and less

Optimisations v1.0.0

• Storage Mechanism
  • Cache selectors based on files
  • Try to cache the parsed Nodes per file
  • Update the above on document change

Concept

A Storage bucket that can store the following artifacts

• A Map of workspace files (Only css and scss files )
  • Key should be the full Uri of the file
• A Map of Node that stores the result of TSX parser based on file path
• A Map of Symbols that stores the result of CSS parser based on file path

Missing support for `.parent { &__child {...} }`

The extension isn't able to resolve SCSS selectors composed with suffix selectors starting with &__, which is commonly used by BEM.

To Reproduce

1. Create a SCSS Modules file: styles.module.scss
2. Write the following selector

.parent {
  &__child {
  color: blue;  
  }
}

3. Import the SCSS Modules file in a React file: import styles from "./styles.module.scss";
4. Add the selector to an element

<div className={styles["parent__child"]} />

Expected behavior
The extension shows

Selector 'parent__child' does not exist in "./styles.module.scss"

Desktop (please complete the following information):

• OS: Windows
• Version: 11

Additional context
Is it a matter of adding a parser in the utils?

This is a great extension, keep up the great work ✌️

Feature Set v2.0.0

• Refactor Symbol
• Reference provider
• Plain Selectors support
  • No Module identifier
• Symbol Not found warning
• Dynamic selectors
• Compile Sass Code blocks for peek

Multiple Entries on Go to Definition

In the app/page.tsx file in the Next.js app dir example cmd-clicking on the styles.code property to trigger Go to Definition in VS Code shows an extra entry of the node_modules/next/types/global.d.ts file with the *.module.css type definition.

This makes it no longer a one-click Go to Definition interaction. It would be great to get rid of these generic *.module.css / *.module.scss / *.module.sass entries so that it's a single click again.

This is also a problem with other extensions:

• clinyong/vscode-css-modules#63

Potential approach

It seems that @zardoy has found a potentially interesting approach in his extension TypeScript Essential Plugins (repo). Some interesting parts of the code:

    proxy.getDefinitionAndBoundSpan = (fileName, position) => {
      const prior = info.languageService.getDefinitionAndBoundSpan(fileName, position)
      // ...
      prior.definitions = prior.definitions.filter(({ fileName, containerName, containerKind, kind, name, ...rest }) => {
        // ...
        if (moduleDeclaration?.name.text === '*.module.css') return false
        return true
      })
      // ...
    })

• https://github.com/zardoy/typescript-vscode-plugins/blob/a102a76786a0292aa8a9a46fb6cc43595e8871a7/typescript/src/definitions.ts#L7-L8
• https://github.com/zardoy/typescript-vscode-plugins/blob/a102a76786a0292aa8a9a46fb6cc43595e8871a7/typescript/src/definitions.ts#L123
• https://github.com/zardoy/typescript-vscode-plugins/blob/a102a76786a0292aa8a9a46fb6cc43595e8871a7/typescript/src/definitions.ts#L141

If I'm understanding correctly, this is filtering out previous definitions if they have the name *.module.css, which could also be extended to include *.module.scss and *.module.sass.

fix module resolution issue when two files contains a substring of same name

When two css modules have names with one having a subset of the other

for instance

1. HeaderImage.module.css
2. Image.module.css

The resultant selector resolution is incorrect as it takes the first resolved module into account

Selectors inside media queries are not picked up by the parser

Any type of selector defined inside media queries are not picked up by the parser.

Solution should be straight forward .

Just like how selectors are obtained from Mixins
They need to obtained from either Media or MediaQuery

Suggest to classes

Is your feature request related to a problem? Please describe.

In there should be suggest to container(class name) .

VS Code Auto-Import for `styles` default export from `*.module.css/scss/sass`

Hi @Viijay-Kr! 👋

Would you consider allowing auto-import for the styles default export from *.module.css, *.module.scss and *.module.sass files?

Similar to the feature implemented in apptools-lab/AppWorks#961 for the React Style Helper extension:

Reference provider

do no start showing diagnostic warning for empty string

When a style identifier tries to access a selector with empty string , showing diagnostic warning is unnecessary

So get rid of this message on empty string

Resolve selectors using AST of language service

During the investigation of #18 , it's quite evident that the selectors resolution namely the suffix selectors resolution doesn't seem to be 100% bullet proof.

It encounters various issues besides the conflicting names with other selectors in the module.

Approach 1

Custom Tree traversal Algorithm

With the AST available (generated by vcode-css-langaugeservice) it should be possible to create an algorithm that traverses the AST and computes the nested selectors on every entry.

So on start up , a custom data structure that can hold the following information

1. Selector
2. Sibling Selectors
3. Child Selectors: [Suffixes,Normal Selectors]
   in one single HashMap would be ideal and quick for resolution inside the tsx modules.

Challenges

To traverse the AST, there is no function/utility provided by vscode-language-service
Ideally a traverse mechanism should be written from scratch , that should also include type definitions.

Deprecated module informations

Describe the bug
As soon as i alter a style, add a new css class or remove a existing one, the autocomplete and tooltip still shows the data before my code changes. I assume the extension does not recognize any code changes and therefor does not update its data.

To Reproduce
Steps to reproduce the behavior:

1. Define a css class with any CSS property
2. Assign this class to a element
3. Verify the peek CSS on hover is correct
4. Change the CSS property to a different value

Expected behavior
The peek CSS on hover should always display the correct value even after i changed it.

Screenshots

Desktop (please complete the following information):

• OS: Windows 11 Enterprise
• VS-Code Version: 1.81.1
• Extension Version: v2.0.0

Additional context
I assume the extension does not recognize any code changes and therefor can't update its store data. The issue extends to the fact that the auto-complete window shows deprecated information as well. Removing a existing CSS Class and adding a new one does not translate to the autocomplete window:

It even underlines a newly created CSS class:

Support dynamic access of CSS module classes

Is your feature request related to a problem? Please describe.
Admittedly this is an edge case and probably hard to implement, but if I do something like

classNames[size]

, VSCode flags it as a "problem":

Selector 'size' does not exist in 'src/styles/Container.module.css'.

Describe the solution you'd like
Ideal solution:

Probably you'd need to use VSCode's TypeScript language server to try and statically analyze if the given
string corresponds to a valid selector. This might be overly expensive or hard to implement, I'm not sure.

Pragmatic solution
Detect dynamic property access and print a different or no warning in this case. Also, the warning seems to assume size is used as a literal property name in my example, which it definitely is not.

Differentiating dynamic and static access would allow me to disable the warning for dynamic property access, but still benefit from the warning for a static selector.

Describe alternatives you've considered

Additional context

Module Not found 'pages/giftshop/giftshop.module.scss'React TS CSS

Describe the bug
Every styles import throws an error. It says that the module is not found although it is there and the styling is applied. The settings of your extension are default.

To Reproduce
Steps to reproduce the behavior:
As soon as a file is opened, the import shows an error. Running yarn, restarting the server or reloading the developer window doesn't help.

Expected behavior
There should not be an error, because the file is there.

Screenshots

Desktop (please complete the following information):

• OS: macOS
• Version 13.5.2

Additional context
Running the latest version of React CSS Modules and played around with older versions - didn't help unfortunately. Thanks for the great extension nonetheless!

if tsconfig set absolute path, not working goto file

Describe the bug
I use nextjs, typescript, scss. and tsconfig-paths.
example import GridPage from '@f/src/elements/grid/grid_page'; goto file is working.
but, import styles from '@f/public/styles/pages/payment/subscription/pricing.module.scss'; is not working goto scss file.

however It works on a relative path.
import styles from ../../public/styles/pages/payment/subscription/pricing.module.scss'; is working goto scss file.
but, I want to use absolute path..

tsconfig set

"paths": {
      "@f/*": ["./frontend/*"],
    },

next.config.js

  sassOptions: {
    includePaths: [path.join(__dirname, './frontend/public/styles')],
  },

Screenshots

Show diagnostics information in status bar

After the introduction of Diagnostics API, it might be useful to have diagnostic information shown in the status bar on activate.

So on active the diagnostics should run inside the workspace in the background

Once the diagnostics is complete the list of diagnostics should be displayed in the status bar

Set up automated publishing via CI

Follow this guide to setup automated publishing using github actions

https://code.visualstudio.com/api/working-with-extensions/continuous-integration#github-actions-automated-publishing

Extension causes high cpu load

• Issue Type: Performance
• Extension Name: react-ts-css
• Extension Version: 2.3.0
• OS Version: Darwin x64 22.1.0
• VS Code version: 1.81.1

⚠️ Make sure to attach this file from your home-directory:
⚠️file:///var/folders/3f/z8mscz_x22vbgmwrjlpr8vgc0000gn/T/viijay-kr.react-ts-css-unresponsive.cpuprofile.txt

Find more details here: https://github.com/microsoft/vscode/wiki/Explain-extension-causes-high-cpu-load

Linting ability

Some 'linting' capabilities could be a great addition to the extension

A few linting opportunities which are already brain stormed are as follows

1. Show a warning with highlight when a module is imported incorrectly
2. Show a warning with highlight when a non existing selector is being referenced by the corresponding style identifier.

improve import related diagnostics by providing adequate code actions

1. In the event of a mis spelled module provide an action to correct the spelling
2. In the event of a non existing css module create a new module

Rename Provider for selectors

Is your feature request related to a problem? Please describe.
Sometimes renaming selectors is needed to improve readability.

However this operation comes with the cost of changing multiple references of the selector.

With the ability of References, it would be possible to integrate renameProvider to selector symbols and have all the references updated.

Describe the solution you'd like
With the locations obtained from reference provider it's possible to rename selectors and have all the references updated

Some things to look
It's quite critical to handle this provider delicately since updating multiple documents can be risky.

Multiple use cases should be handled by the rename such as

1. StringLiteral
2. Identier

The range of each should be carefully handled.

Loading VS Code with Broken TS File Causes Extension Not to Load

Loading VS Code with a TypeScript error in it causes the extension not to load with the error message "Something went wrong while activating React-TS-CSS extension":

Eg. this code, which results in an Identifier expected. error from TypeScript:

// page.tsx
import styles from './page.module.scss';

export default function Login() {
  return <div className={styles.} />; // 💥 "Identifier expected." error (because of the dot without any property)
}

And the CSS:

// page.module.scss
.bodyBold {
  display: flex;
  flex-direction: column;
  align-items: center;

  & h2 {
    padding: 0 40px;
  }
}

Provide Code Lens for references to class selectors

Idea

Code lenses to class selectors would be a great addition to #9.

Reference Provider is quite useful. However its not easily accessible.

Volar Language provider for Vuejs does this amazingly well.

Eg :

In a project will more classes its good to have this behaviour embedded to react-ts-css

Solution

Solution is to integrate CodeLens API

JSX Support

Is your feature request related to a problem? Please describe.
The extension supports only TSX modules .

Support for JSX is nice to have

A newly created selector is rendered but gets a warning "selector does not exist"

Describe the bug
A newly created ruleset is rendered on the React page but VS Code gives a warning that that selector does not exist.

To Reproduce
Steps to reproduce the behavior:

1. Create a React project using create-react-app and add sass. Run the command pnpm start to start the localhost.
2. Create a CSS module (e.g. "App.module.scss").
3. Import it into the App.js component for rendering (e.g. "import styles from "./App.module.scss").
4. Create a new ruleset in App.module.scss.
5. In App.js, add a className with that newly created selector (e.g. <div className={styles.newSelector}></div>).
6. Check the rendered page: the element is styled with the newly created rule.
7. In App.js, a yellow squiggly line appears under the name of the new selector. When hovered over, it says "Selector does not exist".
8. Try changing focus and going to a different file - the warning remains.
9. Try pressing Ctrl + Shift + P and choosing Typescript: Restart TS Server - the warning remains.
10. Ctrl + Shift + P, choose "Reload Window" - the warning disappears.

Expected behavior
After the step 6 above, there shouldn't be a warning from VS Code ("selector does not exist") since the selector exists and is rendered on the page.

Screenshot and video

Desktop (please complete the following information):

• OS: Windows 10 Enterprise
• Version 21H2

Additional context
The problem seems to be linked to Windows. My fellow students who use MacOS haven't encountered the issue, but the others with Windows have. Also, it doesn't always get reproduced: in the GIF I added two selectors before getting the warning on the third one.

Classes with suffixes added via SCSS parent selector aren't picked up by the extension

Description
Classes with suffixes added via SCSS parent selector aren't picked up by the extension

Steps to reproduce the behavior:
fresh VSCode with just React CSS modules installed

1. npx create-react-app@latest . --template typescript
2. npm i sass
3. mv src/App.css src/App.module.scss
4. replace import './App.css'; with import styles from './App.module.scss'; in App.tsx
5. place declare module '*.module.scss'; in scss.d.ts
6. change class names in App.tsx to styles.name and styles['dashed-name'] format
7. add a new class containing a parent selector adding a suffix
8. use both classes in the tsx
9. see error on suffixed class, it is neither previewed on hover nor autocompleted

Expected behavior
The suffixed class should be picked up by the extension.

Screenshots

Desktop

• OS: Windows 10 21H2 and latest Manjaro Linux
• VSCode 1.75.1

Additional context
I've also seen some minor grievances (the hover preview and error messages only update on file save, new classes in the SCSS module aren't picked up until Code is restarted), but this one is critical to me. Maybe I'm missing some obvious thing I'm supposed to do here (I've recently started learning React), but I haven't been able to find a solution. I've also tried React Style Helper and it works fine for suffixed classes but doesn't provide any error message for invalid class names at all, so I'd rather use this extension.

Discussion: Comparison with typescript-plugin-css-modules

By accident (looking for a component library), I stumbled upon this TypeScript language service plugin:

https://www.npmjs.com/package/typescript-plugin-css-modules

It seems to cover very similar use cases.

https://www.npmjs.com/package/typescript-plugin-css-modules#visual-studio-code

Things that work when configuring VSCode to use the workspace TS version as described in the README above:

• Reporting non-existing classes as problems
• Jump-to-definition for both classes and CSS module file names
• Suggesting classes from CSS module in IntelliSense, as it parses the whole CSS module into a type definition
• This also works when using square brackets, typing in quotes in square brackets yields suggestions for existing classes, and because the plugin treats CSS modules as TS code, it also type-checks static identifiers that resolve to CSS classes (see #88)
• I haven't tried SCSS as I don't use it anymore, but according to the docs it's supported as well

So there seems to be a lot of overlap and at the moment, the TS server language plugin seems to have all the features discussed here in place already.

This is a discussion issue, I hope it doesn't come across as dismissive or rude!

Are there unique advantages to this extension that typescript-plugin-css-modules can't offer?

Otherwise, I'm afraid all the work has already been done. Performance of the TS language server plugin seems great as well.

Diagnostics for Selectors

Diagnostics for typescript is live since #42

This feature could be extended for CSS documents where in selectors with 0 references could be marked.

Un used selectors could be hinted

Remove unnecessary start up message on activate

The extension shows an un wanted start up message.

This is a bit annoying as users have to close this manually .

Get rid of this message.

Diagnostics shows for modules included from node modules

Diagnostics info is shown for module from a third party library

Node modules should not be considered for diagnostics as a first step.

CSS variables does not auto complete from variable file - Next JS

@karlhorky Can you add more details to this one ?

I can't reproduce this

Syntax highlighting missing in hover with *.module.scss file

Hi there, first of all, thanks for this extension, really great! 🙌

In the readme, it shows syntax highlighting in the hover of a class imported from a *.module.scss file.

However, the syntax highlighting does not appear for me:

I also tried it with the square brackets syntax, but this also did not help:

Also simplifying the CSS did not help:

The syntax highlighting does however work here with the React Style Helper extension (repo):

Code

// page.module.scss
.bodyBold {
  display: flex;

  & h2 {
    // abc
    padding: 0 40px;
  }
}

// page.tsx
import styles from './page.module.scss';

export default function Login() {
  return (
    <div className={styles.bodyBold}>

Remove node_modules from published extension?

Hi, I'm not sure if I am completely misunderstanding something here, but it seems like you are including your node_modules folder in the published extension, which - AFAIK - should never be necessary.

https://code.visualstudio.com/api/working-with-extensions/bundling-extension#run-webpack

Related:
Viijay-Kr/typescript-cleanup-defs#1 (comment)
#90 (comment)

I'm not sure if or why this is necessary?

I'll look if I can provide a PR for this later.

Originally posted by @strlns in #89 (comment)

Dynamic Selector Resolution

Is your feature request related to a problem? Please describe.
As mentioned in #86 dynamic selectors are not supported by the extension and were considered for future releases but eventually marked as trivial since there were no proper brainstorming or ideas.

dynamic selectors usually are common in UI libraries , Component frameworks etc. It's not a bad feature to atleast brainstorm.

Describe the solution you'd like
First solution mentioned in #86 can be elaborated as follows.
When accessing a dynamic selector one of the following patterns is probable to occur

At least In Typescript/Typescript react

Dynamic selectors in typescript can be accessed through the following type of syntaxes

1. String Literal
   • concatenated string with a run time value . styles["mx_w"+"_"+width] -> can be evaluated to styles["max_w_320"] for instance
2. Template Literal
   • The same principle of string literal but a using template literal syntax . styles[max_w_${width}]
3. Identifier
   • Classic approach styles[width] -> width can be a prop that can hold values in the form of string or a named union.
   • in the case of string , computing value from inside the extension context will be challenging / no op.
   • if its a typed union , extension context can leverage with the typescript server and find out the possibles values using a typescript plugin at a given position for a given identifier.
   • worst case if the plugin doesn't work , babel parser could also be used but walking the tree and finding the node might be tricky.

After determining the type of dynamic selector , not all providers can be give useful intellisense.
The possible providers are

1. Definition Provider
2. Hover Provider
3. Diagnostics

Definition Provider.

Definition provider can provide multiple definitions for a given position in the document.
In the case of dynamic selectors each inferred value at the given position can be collected by the definition provider

for instance in the use case mentioned in #86 the size prop can hold three values.sm | md | lg.
Now if the classes that correspond to these values are defined in the accessing style module , then three definition references will be provided.

Hover Provider

Hover takes the same approach as definitions , but will combine all the three code blocks into one large hover content.

for instance

.sm {
  // some properties
}
.md {
 // some properties
}
.lg {
 // some properties
}

It can get messy if the possibilities are long.

Diagnostics

Diagnostics should warn about missing selectors, the same way it does for static selectors except the fact it should consider the inferred types.

If the types are not able to be inferred , then the accessor at the position should be ignored.

Describe alternatives you've considered
Treat dynamic selectors as trivial and not support them.

Additional context
The probable solutions mentioned here in this ticket and in #86 are only feasible if one of the two approaches are realistic to implement

1. A typescript server plugin . Should be the most viable option.
2. Babel Parser . If possible then its easy to integrate since the whole extension is based on babel parser's AST

Conflicting suffix selectors

Problem happens when there are more than one suffix selector with the same name

for instance

.grid {
   &-column {
   
   }
}
.flex {
   &-column {
    
   }
}

After file renamed then not module found.

When file renamed to module.css instead .ts then go to other .tsx file then try to import module.css file giving module not found error.

improve selector related diagnostics by supplying adequate code actions

With the Diagnostics now available for missing selectors and incorrect modules,

there are few enhancements that can be done to improve the Diagnostics experience

1. In the event of a mis spelled selector provide an action to correct the spelling
2. In the event of accessing a non existing selector provide an code action to declare the selector in the respective css module

Reference Provider For Selectors

Is your feature request related to a problem? Please describe.

Most often you end up in a css file checking your selectors in your css modules and wonder where they are being used/referenced.

One quick way to check this is by doing a search.
This does help however it cannot do anything more than what a reference provider could do.

Describe the solution you'd like

Reference Provider is the solution to this problem.

vscode-csslanguage-service offers the references of variables/mixins/and functions within the scope CSS language features

Providing references to selectors will be so much useful when dealing with large projects.
So any selector inside a module should be able to refer to its references across ts/tsx files.

In order to achieve this , there are certain things that needs to be considered before implementing this.

To be able to find all the references of a selector across all the ts/tsx modules its important to find out the files that references the entire module.

for instance

// in some_component.tsx
import styles from './some_module.css'

With this knowledge its easy to link a module with its references, there by storing the babel parser result of the referencing module (if it's not already parsed)

NOTE: Its quite critical not to have any cyclic references between a TS and CSS module

Root version in package-lock.json is outdated

Describe the bug
For contributors, running npm install using the latest Node LTS leads to a change in package-lock.json because the root version field is not up to date.

To Reproduce
Steps to reproduce the behavior:

1. Follow contributing guidelines
2. Run npm install
3. git diff

Expected behavior
No changes.

Publish on Open VSX

Could you add the extension to Open VSX as well please?
It will make it easier for us that use other non-Microsoft builds of VSCode like VSCodium to install and update the extension.

Some links:

• About Open VSX
• Who's using it? ^source

  As an open alternative to the Visual Studio Marketplace, the Open VSX Registry offers free access to extensions that can be used with any technology or tool that supports them. These include many open source solutions like Eclipse Che and Eclipse Theia, as well as Salesforce Code Builder, Google Cloud Workstations, Gitpod, SAP Business Application Studio and other applications based on Eclipse projects.

• How to publish

CSS Language Support

Currently this extension is limited to Typescript language since typescript modules are the entry point for the extension to be useful

However in order to achieve a few rich set of features such as

1. References of all selectors across various modules
2. Rename symbol that affects the references
3. CSS variables support requested by @karlhorky

the extension should extend the language features and include

1. CSS
2. SCSS
3. SASS
4. LESS

As a first step , it is good to have CSS variables support included to be part of CSS language support as that gives a better edge over the other features plus it's been requested already

Feature Set v1.0.0

• Selection Decoration
• Auto completion provider
• camel case support
• CSS support
• Support nested selectors
• Support siblings selectors
• Support suffixed selectors
• Support Cyclic selectors
• Configuration Changeable
• Test the providers

Support for tsconfig paths in monorepo

Is your feature request related to a problem? Please describe.
Quite frustrated with module resolution using @aliases in a nextjs app with this monorepo structure:

/
	/apps
		/web
		/api
		...

I tried a lot of things with the settings, changing the tsconfig resolution, changing the base directory, etc etc. I can't seem to figure out how on earth to get it to resolve properly.

Describe the solution you'd like
Either a solution on how to get this to actually work properly in the extension, or, if it doesn't work at all, having it work properly.

Describe alternatives you've considered
I've tried disabling the diagnostics but that removes too many features.

Additional context
I've only been trying this for a few hours, but it's been taking a lot of my time up recently so I'm just going to give up for the time being.

extension does not work in windows

The extension does not work in windows.

This needs to be fixed ASAP

Less Support

Currently the extension only supports CSS and Sass.

Support for less however not being requested but would be nice to have

Add ignore option to ignore Diagnostics

Currently there is no option to ignore diagnostics warnings.

Add an ignore option as quick fix to ignore diagnostics warning

.sass file extension does not work

Global CSS class support

Is your feature request related to a problem? Please describe.

Global css classes are not supported by the extension. Global css selectors are added without any style module identifiers so it would be a completely different logical behaviour inside the context of this extension.

Describe the solution you'd like

1. Along with the captured css/scss modules ,capture normal css and scss/less files
2. Keep them in the map of modules
3. If any typescript module imports one of the normal files , the feature set of the extension should work without any style identifier.
4. This will involve finding and matching with the className prop of the AST representation