willofindie / vscode-cssvar

VSCode extension to support CSS Variables Intellisense

CSS Variables

Please vote/rate and star this project to show your support. ❤️

     
  

💡 Features:

This extension helps provide autocompletion IntelliSense for globally shared CSS Variables and more.

How the extension works:

• When adding a new CSS declaration property value, press --.
• This opens a completion list dropdown, with all the CSS variables in the list.
• Select and add the variable of your choice, to autocomplete.

Auto Completion, Color swatches, Goto Definition

This extension has in-built support for parsing: css, scss, less, js, jsx, ts, tsx source file extensions and providing CSS variable suggestions from them.

Details can be read in Customization Doc.

Customization

If your project uses sass or styl or some other custom source file extension, and you are facing issues to setup this VSCode extension, please read Customization Doc.

Theme Support

Read more about Theming here

CSS Level 4 color spec support

Limited support to keep bundle size small.
Except for color() api, every other CSS color is supported. Please find details for CSS colors here in MDN Docs

🔖 Appendix:

• Extension setting details
• Extension Customization
• Theming Support
• Debugging the extension

vscode-cssvar's Issues

Can't get it to work with svelte

Hello,
I'm trying to use Open Props in my sveletekit project and this extension is recommended in the the docs of Open Props to get easy IntelliSense. The extension looks awesome and I've gotten it to work with a css file so i know how great it is.

Not sure how much work it would take to work with Svelte but I would love to be able to use it in my project.

I'll try to look at the code to contribute, but I haven't done an extension before so there is a little ramping up.

Thanks for the great work.

Add JS/TS as defaults to extensions property in settings

Glob support

It would be really usefull to have glob support for config propreties, especially cssvar.files

To clarify, we could go from
cssvar.files: [ "css/foo.css", "css/bar.css" ]
to
cssvar.files: [ "css/**/*.css" ]

Intellisense doesn't trigger for multi-line functions

multiline-issue.mp4

[Bug] Remove duplicates in file intelligently

Requirements:

Ref: #63 (comment)

• CSS variable duplicates should not be displayed to the end user.
• Backwards compatibility for theme support
  • Should not affect the current flow for filtering CSS variables, for themes and excludeThemedVariables settings.

I can work on improving this theming system on the next major release.

Command to generate a config file

People don't tend to read the docs, and writing config files is always a pain for anyone.

After noticing the trend on Reddit and comments by users in CSS Variable Autocomplete, I feel something needs to be done.

Make everything auto-configured

Something which CSS Variable Autocomplete is doing, but I feel auto-configuring the project has its downsides:

• It might parse too many unnecessary CSS files in a large project if not configured by the user.
• Every user has a different setup to get CSS Variables, and there's no easy way to intelligently auto-configure files for lookup.
• Users are not limited to containing global CSS Variables in only CSS like file types, at least in legacy projects.

Provide a command to ease user experience

If this can be done, it's much better than auto-configuration. Auto-Configuration can also have hidden issues if not done right, as seen in the extension mentioned above's issues.

• Command will guide the user to provide details to set up a very minimal configuration that suits their needs.
• It can also automatically download postcss@8 and the required syntax plugin for the user if their project has CSS variables defined in a CSS extension file.

Let's see if this is possible!

Doesn't work for second variable in a declaration

The extension doesn't provide intellisense autocomplete if using a second variable in a CSS rule, eg:

padding: var(--size-4) var(--size-7);

Autocomplete works when writing the first variable (--size-4), but nothing pops up when writing the second variable (--size-7).

Using CSS-in-JS in .tsx files if it matters.

SCSS support if limited

As postcss-scss parser only parses the syntax and does not evaluate it, some of the SCSS variable might get missed if they are present inside SCSS at-rules. For e.g. the following variables will be skipped by the plugin, because they are never evaluated:

@mixin variables {
  --size-sm: 12px;
  --size-md: 18px;
  --size-lg: 2rem;

  --color-red-50: #ffebee;
  --color-red-100: rgb(255, 205, 210);
  --color-purple-300: hsl(291.25, 46.6%, 59.61%);
  --color-purple-500-alpha: hsla(277.32, 70.17%, 35.49%, 0.67);
}

:root {
  @include variables;
}

Since most of the projects using SASS already uses SASS variables, I am not sure if support for this should be added to this extension, as it adds to complexity and support for the entirety of SASS was never my intention in the first place.

This issue will be reference, and has a very low priority for now.

extension not working at all - how to solve it?

I have a simple styled component file, where I tried to see the extension in action. But when typing var(-- , nothing happens from the extension, none of the vars shows in the popup list, no color next to existing vars typed, nada. It was a .ts file.

Also tried on a .css file, with plain css, and it's the same, nothing happens from the extension.

Tried to close VS code, reinstall extension, but still no go. Ideas ?

Doesn't work with styled-components typescript

Hi, I can't make this work with styled-components and typescript. I tried solution from #9 but no success.

My use case:

const StyledTime = styled.div`
  margin-top: var(--space-medium);
  margin-bottom: var(--space-xSmall);
  color: var(--moss-green-100);
  font-weight: var(--fontWeight-light);
`

Current settings:

"cssvar.files": [ "./web/styles/settings.ts"],
"cssvar.extensions": ["typescript", "typescriptreact", "tsx", "ts", "css", "less"],

Unable to load `@stylelint/postcss-css-in-js` parser

Need to test if this issue: https://github.com/stylelint/postcss-css-in-js/issues/294#issue-1331267970 is because of this extension or an issue with postcss parser itself.

If it's the latter, will close the issue here, as minimal JS parsing support has already been added to this extension, and added parsing features are entirely up to the external JS syntax parsers for postcss.

TypeScript and styled-components

Heya,

I've been spending more time than I'd like to admit getting the extension working with TS and styled-components, without success. Maybe what I'm trying to achieve is not possible, otherwise I'd love to hear what I'm doing wrong.

The issue I'm getting is "Failed to parse CSS variables in files" .

This is the config:
"cssvar.extensions": ["ts", "tsx"],
"cssvar.files": ["src/Styles/Global.ts"]

This is how I'm declaring the variables in Global.ts

import { createGlobalStyle } from "styled-components";

export default createGlobalStyle`
:root {
  --h1: 44px;
  --h2: 32px;
  --h3: 24px;
}
`

I've done some troubleshooting getting it working with css, so the issue lies with the styled-components and typescript, is there a potential solution to this?

Really cool extension and thanks in advance🤗

Way to limit parsing to currently open CSS file?

Is there a way to limit the parsing so it only looks at the currently open file?

[Feat] Add a new settings to enable dynamic language support

TailwindCSS provides a setting called includeLanguages. This provides a dynamic behaviour in the extension and users can enable/disable the extension IntelliSense for whichever language they want, instead of raising an Issue or PR to fix it in the code.

Not working

Inside Test.com folder I have:

.vscode/settings.json
{ "cssvar.extensions": [ "css", "scss", "sass", "less" ], "cssvar.files": [ "css/variables.less" ] }

Inside css/variables.less:
:root { --textColor: #000000; }

and when I try in css/style.less file white:
.test { background: --te }

where is no autocompletion for --textColor variable. What I am doing wrong? Thanks

CSS Level 4 color parsing throws error

Check this thread: https://www.reddit.com/r/vscode/comments/t7thko/comment/hzl2spv/?utm_source=share&utm_medium=web2x&context=3 for details

Add support for excluding source files/folders

Improve extension settings compatibility with vscode's defaults

Currently, this extension does not integrate properly with VSCode's Settings UI. We need to at least support properties which can use the Settings UI.

Tracker for Release v1.0.0

Features to Support:

Minimal Basic Support

Status: [DONE]

• Show variable values in imported CSS Files, in Editor Line Bar.
  • This will help to get details on CSS Variable being used in different files.
• Both the below changes require heavy changes. Will do it when I have time.
  • Add support for var to trigger the completion prompt. Not so important, will not support this.
  • Intelligently add semicolon. Add only if the line does not contain any Semicolon.
    • This also includes cases like SASS variable declarations: ("white", $white, var(--grey800)),
• Fix: Filter Regex, to support variable triggers inside brackets. For eg. var(--), this does not trigger the intellisense
• Support JS/TS extensions as well. Eg. "var(--color)"
• Support Theming, using theme classname. defaults to empty string "".
  • Eg. body.dark {} or body.light {} rules.
• Support short extension names like ts, tsx as mentioned in #3
• Support glob pattern for files config.

Advance Support

Status: [Pending]

Below mentioned tasks require a complete re-write of the code, to support Language Servers (LSP).

Reference for LSP support can be taken from CSS Peek

• Make the variable control clickable, for the dev to redirect to it's source. To support this I will have to maintain the precedence order of each variable
  • Need support for - DefinitionProvider
• Show Error status (linting), if an unknown css variable is being used.
  • Since the plugin works with Global CSS Variables and locally defined CSS variables are not read, adding a linter
    without acknowledging local variables can have bad side-effects. Will not support this feature, unless I find
    some simpler solution for this.
• Show only Color values from CSS variable, for all CSS *color properties, and for any non-color CSS properties (like padding) to show only other kinds of variables.
  • This should be made optional, as there might be users, who want to see all the variables in dropdown.

---

Not Interested, just keeping a note of stuff:

• Support SASS?? (Still unsure on this, as SASS/LESS etc. seems overrated now-a-days).

Lint active tabs in the editor, when opened or modified.

One question, i noticed that i need to open (and focus) the erroring file in order to find the errors. i had suggested the problems tab idea because i was hoping i would be able to see errors in closed workspace files so that i know which files i need to open and fix. is that impossible?

CleanShot.2022-09-20.at.22.46.28.mp4

Originally posted by @jjenzz in #73 (comment)

[Feature] Add support for CSS variables present in remote `@import` urls

@import can support a lot of types of CSS functions, and when used with url function, it can also be used to fetch CSS from remote URLs. E.g.

@import 'https://www.somewebsite.com/variables.css'

Ref:

• https://developer.mozilla.org/en-US/docs/Web/CSS/@import
• https://developer.mozilla.org/en-US/docs/Web/CSS/url

---

TODO

• Support remote URLs
• When using postcss plugins like postcss-import, we can also import from node_modules.

intellisense regex should support `,` before `--` and autocomplete should not insert `;` if we have `,` as next character

Examples

Following Works but adds a terminator if not present

---

This works I don't remember why I added it here!!!

---

This has been fixed

Following are not valid cases 😅

Not working with, @media queries as well:

This is invalid cause simple var() cannot be placed inside @media statements.
To make this work, I need to support env(), which I feel shouldn't be handled by this plugin.

No var colour swatches show up in the code

It's a regular .css file, and only using hex colours defined within the same file.

My settings.json is as follows:

{
    "workbench.colorTheme": "Quiet Light",
    "security.workspace.trust.untrustedFiles": "open",
    "security.workspace.trust.startupPrompt": "never",
    "security.workspace.trust.banner": "never",
    "security.workspace.trust.enabled": false,
    "editor.acceptSuggestionOnEnter": "off",
    "editor.stickyTabStops": true,
    "editor.detectIndentation": false,
	"editor.insertSpaces": false,
	"editor.parameterHints.enabled": false,
	"editor.hover.enabled": false,
	"css.format.spaceAroundSelectorSeparator": true,
	"inline-bookmarks.default.words.purple": "",
	"inline-bookmarks.default.words.red": "@attention[\\s], @todo[\\s]",
	"inline-bookmarks.default.words.green": "",
	"inline-bookmarks.default.words.blue": "@note[\\s], @notice[\\s], @remind[\\s]",
	"inline-bookmarks.view.words.hide": true,
	"telemetry.telemetryLevel": "off",
	"workbench.enableExperiments": false,
	"workbench.settings.enableNaturalLanguageSearch": false,
	"cssvar.extensions": [
		"css"
	]
}

(Added that last bit to try to fix the issue, but didn't achieve anything.)

Support for auto-scanning files

Would be nice to have an auto scanning all style files for variables in the project.

Reason: we have a lot of components with custom css properties in separate files.
Therefore maintaining the list manually in the settings doesn't work well in that case..

Solution: chokidar + glob (to limit directories for performance if needed). Wdyt?

Enable to extension for postcss files

Hello,

VSCode has a postcss-language extension.

This extension add support for some @ rules like @import-glob which avoid having a warning in the file.

I tried to make the extension works for postcss language by adding onLanguage:postcss but it doesn't seems to be enough.

Do you know if there is another places that need to be updated for the extension to work with postcss files?

Edit: Of course, my question is only valid if you are ok to support that language activation :)

Breaks on css files when postcss language installed

If the PostCSS language support extension is installed (to allow postcss style syntax in .css files), this extension stops working in css files, but still works in other files.

[Feat] ability to run linter in pre-commit / pre-push hook

in the absence of a build step that can fail if there are type errors, it would be useful to be able to run the linter in a pre-commit / pre-push hook that can block the commit / push when errors are found.

(this is not a super important feature tho, definitely a nice to have / low priority)

Show variable color with alternative method of defining HSL colors

The color swatch works fine with your extension.
But If you define HSL colors like this

my-element {
--gray-3-hsl: 210 14% 89%;

color: hsl(var(--gray-3-hsl));
background-color: hsl(var(--gray-3-hsl) / 30%);
}

than the color is not shown. The method has the advantage that you can use the Alpha channel very easily without defining further variables.

Do you think it's possible to make the color swatch work with this method of defining css variables for hsl colors?

Publish extension on Open VSX

Would you mind considering cross-publishing vscode-cssvar to https://open-vsx.org/?

I do most of my development on https://www.gitpod.io/ and from within their VS Code I do not have access to the VS Code marketplace, only Open VSX.

You can find more information on how to publish your extension to Open VSX here: https://github.com/eclipse/openvsx/wiki/Publishing-Extensions.

Color preview forwarding does not work for SCSS vars

I use a mix of SCSS and CSS vars in order not to bloat my CSS files.

Here is what it looks like:

As you can see, the color preview forwarding does work for bare variables which is invalid syntax, but not for interpolated variables.

I would like the color preview to work for simple interpolations #{$var}. Reading #37 I understood you'd like not to embed a SCSS parser.

Thanks in advance.

Global custom properties no longer showing up

I don't know if the update broke something. But, 2 days ago, this extension was working great. It was able to pick up all my css custom properties. Now, it doesn't seem to work. Only intellisense picks up on the custom properties I've used within the same file.

I tried re-enabling the extension and rechecking its settings. I just added "cssvar.files": ["**/*.css"], but it made no difference.

Here are my settings:

"cssvar.postcssPlugins": ["postcss-preset-env"],
	"cssvar.extensions": [
		"css",
		"scss",
		"sass",
		"less",
		"postcss",
		"vue",
		"svelte",
		"astro",
		"jsx"
	],
	"cssvar.postcssSyntax": [
		"@tokencss/postcss",
		"postcss-preset-env",
		"open-props"
	],
	"cssvar.files": ["**/*.css"],

It fails in .astro files without an alert. Within .css files, I get the screenshot attached:

Problem - SCSS/CSS Using Variables in Media Queries

Couldn't output Value and Definition due to Media Queries.

See video screenshot.

Can you fix it please.

video-10217479-c77b66e82c1e949ba7aead3daed79822.mp4

Colours not shown in they include alpha component

When adding an alpha component to hsl the color isn't shown in the intellisense window, or beside the CSS selector.

    --col-test-white: hsl(0 0% 100%);
    --col-test-hsl-with-alpha: hsl(0 0% 100% / 1);
    --col-test-hsla: hsla(0, 0%, 100%, 1);
    --col-test-rbg-with-alpha: rgb(255 255 255 / 1);
    --col-test-rgba: rgba(255, 255, 255, 1);
    --col-test-rgb-no-alpha: rgb(255, 255, 255);

Actually it seems to be an issue with parsing, because that last variable doesn't have the white shown either

And it seems to generate duplicate entries in the intellisense window

Changing all the variables to use , separated values doesn't help. Indeed it makes it slightly worse as color: var(--col-test-hsl-with-alpha); no longer shows a color.

    --col-test-white: hsl(0, 0%, 100%);
    --col-test-hsl-with-alpha: hsl(0, 0%, 100%, 1);
    --col-test-hsla: hsla(0, 0%, 100%, 1);
    --col-test-rbg-with-alpha: rgb(255, 255, 255, 1);
    --col-test-rgba: rgba(255, 255, 255, 1);
    --col-test-rgb-no-alpha: rgb(255, 255, 255);

---

I am using VS Code 1.65.2 (on macOS 12.3), and 1.30 of your extension.

Doesn't work with .tsx file

Is it normal that this only works with .css files? I added this to my settings:

{
  "cssvar.files": ["src/components/global-css.tsx"]
}

but I don't get any auto complete

Support VSCode hover action on variables

Similar to TailwindCSS:

TODO:

• Add a vscode setting enableHover to keep this feature optional.
• Should be available only for CSS variables.
• Should work with JS and CSS alike, point to right source value.

[FAQ] Open conflicts with VSCode default configuration

This issue keeps a track of all the conflicting behaviour between this extension and VSCode, which are unsolvable or hard to resolve.

Variable duplicates in the same file.

If in a single CSS source file, there are no duplicates, this extension will not show any duplicates. If somehow you do see duplicates, it's possible due to a conflict with VSCode's internal support for CSS variables.

• Details for this can be found here: #28 (comment)

Updating editor settings used to work, but during my recent development, it stopped working. Since VSCode v1.70 or v1.71 no matter what configuration I change, variables defined in the same CSS file always get shown in autocomplete list making them duplicates.

-- trigger does not open the autocomplete dropdown

This is not a bug. Pressing - will open the autocomplete list. If it doesn't, press ESC and press - again when writing a CSS declaration.

In cases where the autocomplete list was already opened due to VSCode or some other extensions, there are chances that CSS variable property names are getting filtered out and are not getting displayed.
You can find a detailed discussion regarding this here: microsoft/vscode-extension-samples#335 (comment)

Support CSS `env` function

This is very new and not supported in browsers as of now.

Specification for this can be found here - https://drafts.csswg.org/css-env-1/

Though PostCSS plugins have started supporting this function. Check postcss-env-function.

What I need to do is, support JS files, that will contain few variable exports, which should be added to cssvar intellisense.

Ordering variables incorreclty

Thanks for the excellent extension! I've added it to the official recommendation for my CSS library, Pollen 🙂

Just a minor issue I noticed, the variable ordering/alphabetising in the autocomplete popup is incorrect when it comes to numbers. Eg:

[Bug] Nested color values does not work for Multi-Root WS

Describe the bug
Nested variable declarations do not get evaluated for color values, where one of the parent CSS source file is present in multiple folder settings.

To Reproduce
Steps to reproduce the behavior:

1. Create a Multi Root project, and define two folders (f1 and f2) in it.
2. cssvar settings for both these folders would look something like the following:

// f1/.vscode/settings.json
{
  "cssvar.files": ["../node_modules/open-props/open-props.min.css"],
  "cssvar.ignore": []
}

// f2/.vscode/settings.json
{
  "cssvar.files": ["../node_modules/open-props/open-props.min.css", "theme*.css"],
  "cssvar.ignore": [],
}

4. As you can see both f1 and f2 folders depend on variables provided by open-props.css and are defined in both folder's settings
5. Intellisense for CSS variables in one of these folders (f2 for example) is not provided, even though open-props is declared in f2 folder's settings.

Expected behavior
Intellisense should work in both f1 and f2 folders, for open-props CSS variables.

Additional context
This is happening because a CSS source file is evaluated only once, unless it is modified later. Since open-props is served from node-modules, and is less likely to get updated, it isn't added to f2 intellisense providers.

[Feat] Add examples for Tailwindcss setup with PostCSS plugins

This extension already supports a minimal setup, i.e.

  "cssvar.postcssPlugins": [
    "tailwindcss/nesting",
    "tailwindcss"
  ]

This works and it also detects CSS variables dynamically created by TailwindCSS plugins:

---

Improvement

A complex setup where users have custom options passed to plugins is not yet supported. E.g.:

  "cssvar.postcssPlugins": [
    "tailwindcss/nesting", // No way to pass options to this plugin
    "tailwindcss"  // No way to pass options to this plugin
  ]

Support to pass options to each plugin will be added as part of this feature: #61.

Once the above enhancement is added and released, the following syntax should work, keeping a check on backwards compatibility, resembling ESLint array syntax to pass options to a plugin, as follows:

  "cssvar.postcssPlugins": [
//  ["plugin-name", { plugin: options }]
    ["tailwindcss/nesting", { options }],
    ["tailwindcss", { tailwindOpts }]
  ]

Does not work on multi root workspaces.

Thanks for the EXT. very handy.

That said, I believe it does not work on multi-root workspaces. (@see: VsCode Multi-root Workspaces )e.g.:

To which I tried all the possible combinations and the only way the EXT. does not complain is the following syntax:

my-project.code-workspace

{
  "folders": [
    {
      "path": "/rootA"
    },
    {
      "path": "/rootB"
    }
  ],
  "settings": {
    "cssvar.files": {
      "path": "${workspaceFolder}/.../styles/base/pollen/colors.scss"
    }
  }
}

This also works on your main user-settings.json to remove the notification error popup on vscode. But it still makes the EXT to provide no intellisense/autocompletions.

With that explained, I'll love to ask if I may:

• Implement this capability if it is not currently supported as I assume.
• IF` this works but it needs a special config/syntax, could you please document it?

Thank you.

Best,

Support postcss plugin array syntax

Default way of defining plugins using postcss.config file:

{
  "plugins: {
    "autoprefixer": {} // Pass Options as object property value.
  }
}

Below is a syntax that Eslint accepts in its rules property, where options are passed as second value in an array:

{
  "plugins: [
    ["tailwindcss", {}], // Array to pass options
    "autoprefixer" // Plain string works as is
  ]
}

This syntax is to support backwards compatibility. I can remove this syntax once the extension version reaches to v3.

[Feat] Suport `.gitignore` and `.eslintignore` files to populate ignore list

cssvar.ignore can be tedious to maintain, and ignore list can be random for different projects.
Adding support for .gitignore and .eslintignore files opens an opportunity to keep less things inside the extension config and re-use config files that are widely used.

Gotchas:

• If a folder (like node_modules) is ignored in .gitignore and later user wants to import a css file from node_modules, the extension should not ignore such CSS imports from node_modules.
  • I guess this should be possible using !node_modules glob pattern in cssvar.ignore settings, which will supersede all other ignore patterns.

Works in css files but not in tsx

Hi,

Thanks for your plugin, I'm using styled component and looking for a css var completion.
It's working well in css files but can't manage to make it work in typescript files as announced in your last commit.

Thanks for your help !

Support for astro extension

Hi! I very much enjoy this extension but unfortunately there's no support for astro files yet. I tried adding the astro extension locally, tested it and works like a charm! I don't mind to create a PR :)

The extension does not work

Hi!
I installed the extension, and it didn't work right away, I went to the settings to specify the path to the files, and it still doesn't work. I am more than sure that I am doing something wrong, but there is not much instruction on how to run this extension. Furthermore, I attach screenshots and an explanation of what I did.

1. Here is my project folder. I write all the code in the styles.scss file. The styles.css file is the final file into which all SCSS files merge. The variables.scss file contains the very variables that I plan to call.
   
2. Here are the contents of the variables.scss file.
   
3. And actually here is the main styles.scss file in it, I'm trying to call a variable and there are absolutely no hints. As if he just doesn't see this variable :(. Actually, it was exactly the same before installing this extension. Nothing changed after that.
   

---

In settings.json I didn't prescribe anything.
I honestly don't know what the problem is. Therefore, I hope you can tell me how to make this extension work.
Maybe I didn't understand the meaning of this extension, but it seems to me that it just doesn't work for me :)

[Feat] Syntax highlighting for CSS variables that cannot be found

it would be great if the extension added error syntax highlighting to any lines referencing a CSS var that doesn't exist and listed them in the vscode problems tab, to aid refactoring. that is one of the only benefits of css-in-js that i miss while using this extension.

thanks for your continued work on this, really enjoying playing with it.

`ignore` overrides explicit mentions of `node_modules` in `files` even when set to `[]`

The recent addition of the ignore option has caused a breaking change where files that point to node_modules are not accounted for.
Moreover, explicitly setting ignore to [] has no effect.

Can't run

Looks simple, but didn't work. Watch screenshot.

The extension stopped working again

This extension will soon make me hysterical :)
Then everything worked, but now I have deployed a larger project and everything has apparently broken…
Did everything exactly the same as then, but it still issues a warning:

Here are my settings in the global file — setting.json

I also attach screenshots from the package.json file and node_modules folder with proof that I have installed the necessary packages:

The funny thing is that everything works well with CSS files, but as soon as I move into a project where variables are written in SCSS files, everything immediately stops working and knocks out a warning, which is shown in the very first screenshot.
Running VS Code as an administrator didn't solve the problem either.
Maybe I forgot to do something, but that's just not clear to me yet. Either, I did everything right, and it's already about expansion.