clinyong / vscode-css-modules Goto Github PK
View Code? Open in Web Editor NEWHome Page: https://marketplace.visualstudio.com/items?itemName=clinyong.vscode-css-modules
License: MIT License
Home Page: https://marketplace.visualstudio.com/items?itemName=clinyong.vscode-css-modules
License: MIT License
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?
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.
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?
Could we get support for .js files as well ? Out react project is configured to not use the jsx extension
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 :)
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
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';
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.
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.
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:
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
my-app\src\pages\index.tsx
and try going to existing classes and autocomplete - it does not work.import styles from '../styles/Home.module.css'
- it starts working.Why did you remove support for .ts
files?
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.
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 {
}
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.
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
ๆไปถๅ/Extension: CSS Modules
If the className scope exists, you cannot jump to the className under the corresponding scope, as shown in the following figure
You should jump to test1 under container3 instead of container1
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 :)
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
my.css
#myEl {
}
my.js
import css from 'my.css'
css.myEl
myEl
isn't completed
Is it possible to use "go to definition" with absolute import?
import styles from 'styles/myAwesomeStyles.css';
(projectFolder/src/styles)
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
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.
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
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
.
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
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% |
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
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.
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
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
.help-me{
color:red;
}
when i write,styles['help-me'],it can intelligent,but can not jump to the css class
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
.
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
Performance
vscode-css-modules
0.4.1
Linux x64 5.11.0-46-generic
1.63.2
/tmp/clinyong.vscode-css-modules-unresponsive.cpuprofile.txt
Find more details here: https://github.com/microsoft/vscode/wiki/Explain-extension-causes-high-cpu-load
Hi, it's really good to see the autocomplete coming to import
ed 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.
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}/>
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.
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.
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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.