clinyong / vscode-css-modules

VSCode CSS Modules

Extension for CSS Modules, which supports

• Autocomplete
• Go to definition

Demo

Installation

Search css modules on the VS Code Marketplace.

Usage

Currently, this extension only support React project.

Settings

CamelCase for autocomplete

If you write kebab-case classes in css files, but want to get camelCase complete items, set following to true.

{
  "cssModules.camelCase": true
}

Path Alias

Create aliases to import or require modules. (In combination with webpack resolve options.)

{
  "cssModules.pathAlias": {
    "@styles1": "${workspaceFolder}/src/styles1",
    "styles2": "${workspaceFolder}/src/styles2"
  }
}

If there is a jsconfig or tsconfig in your project, the compilerOptions.paths will become aliases. For example

{
  "baseUrl": "./src",
  "paths": {
    "@styles1/*": "styles1/*"
  }
}

would allow to type

import * as styles1 from "@styles1/demo.css";

Feedback

Feel free to submit any issues or pull request.

License

 _________________
< The MIT License >
 -----------------
        \   ^__^
         \  (oo)\_______
            (__)\       )\/\
                ||----w |
                ||     ||

vscode-css-modules's Issues

Can not jump to the classname under the corresponding scope

插件名/Extension: CSS Modules

您的本地环境信息/Your local environment information

• 操作系统及其版本/System and Version: win10
• Node version: 14.19.2
• npm version: 6.14.17

您遇到的问题及复现步骤/What are your problems and how to reproduce them

If the className scope exists, you cannot jump to the className under the corresponding scope, as shown in the following figure

您期待的正确结果/The right result you're looking forward to

You should jump to test1 under container3 instead of container1

Autocompletion doesnt work with dollar character

When using a dollar character when importing the styles autocmpletion doesnt work, It only works when importing styles as a string name.

Doesnt work:
import $ from './SomeComponent.module.scss';

<SomeComponent className={$.someClassName}/>

Does not work with tsconfig paths on nextjs

Windows 11 22H2
VS Code 1.84.2
CSS Modules extension 0.5.1

Not sure if it is a bug or I am just missing some additional config. It works without alias.

Steps:

1. Open new vscode window.
2. Create empty vscode profile (File - Preferences - Profiles - Create Profile) and switch to it.
3. Create nextjs project with src dir and without app router and tailwind:

npx create-next-app@latest
√ What is your project named? ... my-app
√ Would you like to use TypeScript? ... Yes
√ Would you like to use ESLint? ... Yes
√ Would you like to use Tailwind CSS? ... No
√ Would you like to use src/ directory? ... Yes
√ Would you like to use App Router? (recommended) ... No
√ Would you like to customize the default import alias (@/*)? ... No

Generated project will have:
tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"]
}

and import styles from '@/styles/Home.module.css' in my-app\src\pages\index.tsx

4. Install CSS modules extension
5. Go to my-app\src\pages\index.tsx and try going to existing classes and autocomplete - it does not work.
6. Change import to import styles from '../styles/Home.module.css' - it starts working.

Absolute imports?

Is it possible to use "go to definition" with absolute import?

import styles from 'styles/myAwesomeStyles.css';
(projectFolder/src/styles)

License Information

Please add license information to this repository. Some institutions require a license for use.
You may find this resource helpful
https://github.com/blog/1530-choosing-an-open-source-license

No autocomplete when there is a leading parentheses

Autocompletion works when doing something like theme._____ however, when writing classnames(theme.____), there is no popup after the .

This can be confirmed by doing classnames( theme.____). Adding a space before the parentheses fixes the issue.

Feature request: Jump to last CSS property when clicking on a class name

Suggestion for a small improvement. Currently if you CMD click on a specific classname (styles.classname), it takes you to that class in the CSS modules file.

The cursor is placed at the very start of that class, just after the dot, before the class name, like so:

For me it would be an improvement if the cursor were automatically placed at the end of the last property of that class, like so:

This way, you can instantly start adding new properties to the class, making it a bit faster workflow.

support sass or less

feature request: show warning on non-existent classes

basicly, something like this https://github.com/Jimdo/typings-for-css-modules-loader
I want this badly so I can even consider opening a PR with some help from you :)

Improvement to autocomplete for camelization of classnames

Hi, it's really good to see the autocomplete coming to imported css-modules. I'm using a flag in my css-loader named camelCase which lets me write camelCase class names in my javascript, but still let me write kebab-case classes in my css file. Can this plugin support that usecase? I can submit a PR if you'd like to include it in the plugin.

bracket syntax cannot jump

.help-me{
    color:red;
}

when i write,styles['help-me'],it can intelligent,but can not jump to the css class

Id Support

my.css

#myEl {
 
}

my.js

import css from 'my.css'
css.myEl

myEl isn't completed

Open VSX support

Hi there.
First of all, thank you for this plugin.
I just started using Onivim 2 and found out that I can install extensions from https://open-vsx.org/.
I've used this plugin in my VS Code and thought that it would be nice to have it available in Open VSX marketplace as well.

I would like to request this plugin to be published there as well if you don't mind. I found some instructions here https://onivim.github.io/docs/configuration/extensions#publishing-an-extension. Let me know how I can help.

Not working on next.js project

I installed this extension and it's not doing anything, navigation and autocomplete don't work.

I found a couple issues here where it appears that it should work on next.js (not react-only).

VSCode 1.73.1
Next 12.3.0

Support styleName="blah" from babel-plugin-react-css-modules

The "babel-plugin-react-css-modules" npm package allows you to write CSS module references using styleName="my-css-class" instead of className={styles.MyCssClass}. It would be really neat to have vscode-css-modules understand such styleName="" attributes.

Details:
https://github.com/gajus/babel-plugin-react-css-modules

Support for .js files

Could we get support for .js files as well ? Out react project is configured to not use the jsx extension

"Go to definition" goes to d.ts file first, then to source

It shouldn't bring up the .d.ts in the first place IMO, or at least focus on the source file instead of the .d.ts first.

Can you point me to how might I fix this?

Class names showing after non-existent properties (named suggestions).

Hello and thanks for making this extension, it's very helpful. There is one small bug that I can see.

When initiating autocomplete, the class names are showing after non-existent property names. You can see in this screenshot:

On a plain object in the same file, you can see that the properties are listed in the correct order:

Is there anything that I can do to fix this?

My VS Code info:

Version: 1.66.1
Commit: 8dfae7a5cd50421d10cd99cb873990460525a898
Date: 2022-04-06T14:51:26.173Z
Electron: 17.2.0
Chromium: 98.0.4758.109
Node.js: 16.13.0
V8: 9.8.177.11-electron.0
OS: Linux x64 5.4.184-1-MANJARO

autocomplete issues when using optional chaining

Whenever I use optional chaining in my code, it seems the extension adds all the css class in the autocomplete choices.
Sometimes my css file will have a lot of classes adding a lot of them.

Example:

/* ReportingSummarySchedule.css */
.section {
  width: 33%;
}
.otherclass {}

compose

I saw that you responded to a (vscode issue thread)[https://github.com/microsoft/vscode/issues/13003] saying that this module fixed linting errors on the compose keyword. I still have an issue with linting in a SCSS syntax CSS module. I can't even get vscode to ignore the single line so that's not an option and I really do not want to disable all validation.

I reformatted this SCSS file to be CSS and still got the issue, albeit a warning instead of an error. Have you seen this?

Access properties like `styles['test']`

Support for nested classes (ampersand)

Add support for nested classes using with postcss, scss plugins.

Sometimes you need to separate the styles for the child container and add prefix for it.

Example

.root { ... }

.label {
    font-size: 1rem;

    &_primary {
        color: green;
    }

    &_sizeSmall {
        font-size: 0.875rem;
    }
}

Expected result autocomplete

styles.label
       label_primary
       label_sizeSmall    

P.S. This case works in WebStorm

Intellisense priority issues breaks Go to definition

Hi,

I've been using this extension really fine on JS projects. It's great and really useful!

However on TS projects, it seems this extension is "fighting" for priority against the TS Intellisense provider. Unfortunately, the TS provider trumps this extension, and when using "Go to definition", it leads to the very generic type definition used to make the compiler happy instead of the actual class in the style module file.

This is rather annoying.

I've never developed a language server extension, but I was wondering if it was possible to increase priority of the suggestions/sources provided by this extension, so that even in case Intellisense matches 2 different definitions, the "chosen" one will always be the one from the extension?

As I've tried to work this out, I discovered that enabling the extension after the JS/TS language features are initialised, then the Go to definition works great. However when I quit and reopen VSCode, the default definition is reverted back to the generic TS one.

Note: I tried all of this without any TS plugin, using VSCode's bundled TS runtime, and on a Next.js project.

not working with tsconfig paths aliases

Hi,

I am having issues to get the plugin working with the compilerOptions.paths in tsconfig.json.

My tsconfig.json looks like this:

{
  "compilerOptions": {
    "strict": true,
    "target": "ESNext",
    "module": "ESNext",
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "jsx": "preserve",
    "jsxImportSource": "solid-js",
    "types": ["vite/client"],
    "baseUrl": ".",
    "paths": {
      "@/components/*": ["src/components/*"],
      "@/contexts/*": ["src/contexts/*"],
      "@/lib/*": ["src/lib/*"],
      "@/styles/*": ["src/styles/*"],
      "@/types/*": ["src/types/*"]
    }
  }
}

And I'm importing in some Component.tsx (located in src/components) like this:

import styles from '@/styles/Component.module.scss';

When doing this the plugin doesn't seem to work and I get no auto-complete for the styles variable.

However, it does work when I change the import to be relative like this:

import styles from '../styles/Component.module.scss';

Feature to create new style class, when class is not yet existing.

When creating new html or jsx, eg <div className={styles.myNewClass}></div> where `styles.myNewClass' is a new style, it would be great if this extension could suggest to automatically add this class to the css module.

eg. automatically append

.myNewClass {

}

Support for stylus (or any pre-compiled css)

Hello guys, not sure if there's any related issue here.

It would be great to have a support for stylus or any pre-compiled css that ended up being load as modules.

Thank you :)

Access properties like `styles['test']`

Is there any plan to support accessing styles like styles['test'] ?

styles.test;
string | undefined
Property 'test' comes from an index signature, so it must be accessed with ['test'].ts(4111)

this check is coming from "noPropertyAccessFromIndexSignature": true in tsconfig.

Typescript support

Why did you remove support for .ts files?

Feature request: Typescript type-checking

Hi @clinyong thank you so much for this plugin. 👏 I found it after many frustrating hours trying to get Gatsby + Typescript to play well with scss modules, including gatsby-plugin-scss-typescript and typescript-plugin-css-modules. This plugin adds both code-completion and jump-to-class-definition, hooray! 😅

There are a few other issues and PRs open for absolute-path support and curly-brace module import support for styles, both things that our team would welcome!

There's also one feature that would make this really feel complete with Typescript: the ability to see an error on the class name if it's incorrect. For example, if you change a class name in the scss file, currently it does not show an error in VS Code on the lookup like className={styles.staleClass}.

I'm not sure if that would require the TS language plugin (typescript-plugin-css-modules) to make work, but at least for me I can't currently use that plugin with Gatsby 3 import * as styles syntax.

Support Sass (.sass or .scss files)

Example:

// text.module.scss
$font-stack: Helvetica, sans-serif;
$primary-color: #333;

.text {
  font: 100% $font-stack;
  color: $primary-color;
}

import style from 'text.module.scss'
style.text

require bug

as I use it as suggestion, some trouble things descend.
like below:

but when serving:

however, as I try to use styles.defaut.<cssName>, it does work

and I lose the intellisense in this way
what' wrong ::sad

Incorrect commented import is used in completion

If there is a commented import before the correct one, it will be recognized as the expected module:

If commented one is after the correct one:

Should be relative to genImportRegExp() in src/utils/path.ts

autocomplete does not work with path alias

hello
when importing styles with an alias, such as import fonts from '@styles/fonts.module.css'; the autocomplete does not work

any chance to make it work ?
i'm currently using Vite to resolve alias

Support for Rename refactoring option

It would be a very nice addition to this plugin if we could do F2 and change the name of a class which would change the name of that class in all files where it is used

Support for es module style imports

CSS modules lets you import like so as well:

import { myClass } from "./MyComponent.module.css";

it would be nice if the plugin offered autocomplete for this case as well.

Autocomplete for imports

I'm not sure if this is out of scope for this module, but it would be nice to have autocomplete when importing css modules.
At the moment I have code like this

import styles from './Block.module.scss';

But vscode will never offer any suggestions when writing the import. Suggestions work just fine when actually using styles.

Extension causes high cpu load

• Issue Type: Performance
• Extension Name: vscode-css-modules
• Extension Version: 0.4.1
• OS Version: Linux x64 5.11.0-46-generic
• VS Code version: 1.63.2

⚠️ Make sure to attach this file from your home-directory:
⚠️/tmp/clinyong.vscode-css-modules-unresponsive.cpuprofile.txt

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

add support for .js

Hi, could you add support for .js files as well? we could write jsx codes in .js file within vs-code, it'll be nice if we could have css-modules supported for .js file as well.

Go to definition is broken

Issue Type: Bug

Hit go to definition on some symbols, sometimes it will say that the file you're looking for is actually a folder.

I get around 30% error rate.

Extension version: 0.4.1
VS Code version: Code 1.68.1 (Universal) (30d9c6cd9483b2cc586687151bcbcd635f373630, 2022-06-14T12:52:13.188Z)
OS version: Darwin arm64 21.4.0
Restricted Mode: No

System Info

Item	Value
CPUs	Apple M1 Max (10 x 24)
GPU Status	2d_canvas: enabled canvas_oop_rasterization: disabled_off direct_rendering_display_compositor: disabled_off_ok gpu_compositing: enabled metal: disabled_off multiple_raster_threads: enabled_on oop_rasterization: enabled opengl: enabled_on rasterization: enabled raw_draw: disabled_off_ok skia_renderer: enabled_on video_decode: enabled video_encode: enabled webgl: enabled webgl2: enabled
Load (avg)	6, 5, 4
Memory (System)	32.00GB (0.76GB free)
Process Argv	--crash-reporter-id 2dd43353-4556-49ec-b851-40de40d71dc1
Screen Reader	no
VM	0%

A/B Experiments

vsliv368cf:30146710
vsreu685:30147344
python383cf:30185419
vspor879:30202332
vspor708:30202333
vspor363:30204092
vswsl492cf:30256860
vslsvsres303:30308271
pythonvspyl392:30443607
vserr242cf:30382550
pythontb:30283811
vsjup518:30340749
pythonptprofiler:30281270
vshan820:30294714
vstes263:30335439
vscorecescf:30445987
pythondataviewer:30285071
vscod805cf:30301675
binariesv615:30325510
bridge0708:30335490
bridge0723:30353136
vsaa593:30376534
vsc1dst:30438360
pythonvs932:30410667
wslgetstarted:30449410
vscscmwlcmt:30465135
cppdebug:30492333
vscaat:30438848
vsclangdf:30486550
841h4636:30513947

Go to definition no longer works

When I try to Go to definition I get the message: 'No definition found for className'
My version of visual studio code is 1.11.2, previously it did work for me.

feature request: CSS Module support in Emmet

Since Emmet is building into vscode, maybe this package is the right place to support css-module in emmet.

Related Atom Package:
https://github.com/ambethia/emmet-jsx-css-modules

Any idea how to do this?

Path Alias Doesn't Work With Wildcard

Hello. There is no way to have a path alias with no prefix.

"cssModules.pathAlias": { "*": "${workspaceFolder}/frontend/styles" }

"paths": { "*": ["styles/*"] },

import cssModule from "Style.module.css"

This setup results in no autocomplete.