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

[karlhorky]

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:

[Viijay-Kr]

@karlhorky Thanks for reporting this

IMO This is a good to have feature.
Although the scope of this extension is to give you information about selectors based on css/scss modules and I would consider this feature to be trivial considering the arbitrary nature of the css modules you could have in your project.

[Viijay-Kr]

@karlhorky A Basic version of this feature is published in 1.3.2

Let me know how it works.

Unlike React Style Helper extension:

React TS CSS would give suggestions of various css modules in your workspace. On selection the module will be imported automatically.

Some improvements I already noted down

1. On selection the auto import is not so obvious.
2. The path of the imported module is currently absolute. Some improvements could be done here based on tsconfig settings

[karlhorky]

Thanks for the first version! 🙌 It is a bit unusable in this first version, some points and a video:

1. The import path should be a relative path from the file where it's being imported - eg. if I'm in app/page-1/page.tsx and I import app/page-1/page.module.scss the import path should be './page.module.scss'
2. There are multiple entries with the same path in the autocomplete options
3. The suggested import names are styles_styles, style_styles, etc. Maybe just call it styles?
4. There are sometimes also broken import names such as github-gist_styles, which is not a valid identifier in JavaScript / TypeScript
5. There are a LOT of entries in the autocomplete - not sure where all of these are coming from, but I guess we do have a lot of css files in our project (it's a monorepo with multiple packages)
   1. maybe it should be filtered to the current directory (or current directory + parent directory + grandparent directory)?
   2. maybe there can be a custom filter option (eg. a glob) that the user can select
   3. another consideration - maybe only allow module.css/scss/sass files?
6. It seems like some of the entries may be duplicated as well...
7. Some of the paths are in node_modules, which I guess could be filtered out?

react-css-modules-vs-code-extension-auto-import.mp4

[Viijay-Kr]

@karlhorky I went a little ambitious on this one.

Looks like your suggestions are very much valuable

maybe it should be filtered to the current directory (or current directory + parent directory + grandparent directory)?

This alone would solve many issues.
For the first version I can ship the support only in the current directory.

I tried React Style helper , the auto import along with auto complete never works for me.
Also some times auto complete wont work inside className={}.

[Viijay-Kr]

#20 (comment)

This has been shipped with 1.3.5

Closing this thread . If anything a new thread can be opened :)

[karlhorky]

This is working well with v1.3.5 🙌 Nice work, thanks so much!

Going to remove the React Style Helper extension from the student instructions and switch completely over here!

[Viijay-Kr]

@karlhorky

Thanks a lot for the feedback .

I would be so pleased if you could participate in a small survey

https://forms.gle/rcGxv2hUbwU4rRX18
It has only three questions .
Please feel free to pass on to your students as well.

Thanks

[karlhorky]

Great, filled the survey out, hope my feedback is useful for you! I also wrote a review for the extension on the VS Code extension marketplace: https://marketplace.visualstudio.com/items?itemName=viijay-kr.react-ts-css&ssr=false#review-details

[Viijay-Kr]

Thanks a lot @karlhorky