Discussion: Comparison with typescript-plugin-css-modules

[strlns]

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 Dynamic Selector Resolution #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.

[Viijay-Kr]

@strlns This plugin never came to my attention.

The plugin does bring in most of the features supported by this extension.

However It has the following problems.

1. Suffix selectors are not working in Less and Sass
2. Go to Definition is a bit inconsistent for nested selectors.
3. Hover on classes doesn't give useful information
4. Quick fixes using VS code API to add non existing selector , suggestion if mispelled a selector.

I ran the above tests using the example folder in this repo which covers various use cases.

Although some of them are not conventional but just to test the scenarios out.

Things that are planned in this Extension.

1. Reference Provider which is turned off at the moment
2. Code Lens inspired by Volar for vue projects also turned off due to Performance issues.
3. Rename Selector is also pretty frequent operation.
   • These features are possible only inside VS code context
   • They can be enabled after improving the performance.

I think the plugin is doing most of the job for best case scenarios pretty well,

However I see some inconsistencies with SASS and LESS and also CSS in some places.

if you come from Sass or Less world , nested rules become more prominent and thus intellisense to cover them would be useful at least for me.

The goal of this extension when I started was to solve the problems I had been facing with other extension and to add useful features on top of existing known features.

May be I'm speaking a bit naively ,

I also think that some of the work is redudant however it helps to solve the problems more effectively.

Thanks for opening this issue.

EDIT: I tried the plugin in one of my projects which is a bit huge SCSS project. Unfortunately I can't get the plugin to work with the said options , and using workspace typescript version.

[strlns]

@Viijay-Kr Thank you for the explanation, indeed I did not try SCSS and the project that I tried was also quite small. Feel free to close this if you consider the approaches sufficiently different.
It seems TS language plugin cannnot cover all use cases this extension can, but it's a matter of priorities.

So maybe there is potential to learn from the other TS language server plugin for implementing ideas in #88 and resolving #68 .

I'm not a big fan of SCSS/LESS anymore but fact is there is a lot of existing code in it. Also I like to use nested selectors in PostCSS sometimes, I'll have to try and compare myself how both approaches work there.

Hope you have a great week, thanks for taking time to answer!

[Viijay-Kr]

So maybe there is potential to learn from the other TS language server plugin for implementing ideas in #88 and resolving #68 .

In deed , I will close this issue for now and re open it later if needed