[css] Use CSS custom properties imported via @import

[fluxxus]

Is it possible for VS code to recognize CSS variables declared in a separate CSS file that is imported with @import ?

For example, I would like to have a variables.css file that is all about declaring CSS custom properties. Then I would import that file on top of my main css file, and be able to have intellisense support for those variables.

The way things work now, VSCode is not able to recognize those variables. Or maybe I am missing something obvious?

[aeschli]

Currently, the css support does not follow any references

[fluxxus]

@aeschli Just checking to see if maybe this is planned for a future release?

Also, do you maybe know if some plugins offer this functionality?

p.s. I am a bit of a noob with all things github, does it mean that this will be implemented when the milestone green bar becomes full?

[aeschli]

@Madebym We currently have no plans to implement the requested feature. When the issue gets a lot of votes, we would plan it for a milestone. Until then it stays on the backlog.

Sorry, I don't know if there's an extension that adds this.

[fluxxus]

@aeschli Thanks for the reply and the explanation. I understand this is not a big deal, hence the low number of people requesting this.

Once again, thanks for the info.

[mttmccb]

It'd really be nice to see this as browser support for custom properties is pretty good now

[jfhector]

I'd love to see this happening too.

[VitalyKrenel]

I vote for the feature too. It's quite confusing when you can not find a variable within suggestions popup while it's declared in one of the linked files, especially when it's in :root pseudo-class (so it's available throughout your project). Right now it's appeared in suggestions popup only in the file where the custom property is defined.

It would be great if the popup could show on typing -- not only the variable's name and value but also some kind of modifier that explains where the variable is declared: in :root, inherited from parent or it comes right from this selector where it's used (probably in terms of sorting this kind of custom properties should have higher priority). Also, the modifier mentioning overriding ('Root value is overridden in 'name' selector' or something like this) would be useful.

[philerck]

Good idea, I need this too.

[osmanc777]

I would also be delighted if this was implemented in vs code since it would be very helpful and would be the cherry on the cake for this great editor, and it would also be great if it worked both in css and sass since you can also use varialbes css in sass and as in sass we can use partial ( _example.scss ) and in that file also recognize the varibles css or sass 👨🏻‍💻😁👨🏻‍💻

[kieranjohn]

Great idea! Seems like a possible duplicate of this item https://github.com/Microsoft/vscode/issues/6734

[thewashingtonhua]

Vote for this feature too. I'm trying to migrate from SCSS to PostCSS and there's this trouble: There's no autocompletion for CSS variables across files. I'll have to manually make sure I'm typing the variable name correctly, or copy & paste every time. (Currently, this is the only thing stands between me and adopting CSS variables.)

Currently VSCode only supports autocompletion for CSS variables defined in the same file. But it won't work if I put all my variables in variables.css and @import in app.modules.css

For SCSS there's scss-scan for autocompleting variables across files. It searches for all variables defined in the project. I've been using it for a long time and I'm feel lucky to have it. It would be really nice if there's something like this for CSS.

[JoshMayberry]

How do I cast my vote for this feature? I am very interested in it as well.

[fictivecreations]

Consider this another vote for this feature.

[mondedelotus]

Vote for this!

[wilsoniwano]

Please! 😁

[holtjohnson]

Google search about this issue led me here. I'm interested in this feature!

[mmdevcodes]

Another vote from me. Very important.

[ronilaukkarinen]

This is literally the only thing that is missing in VSCode for me. I always have to check out the variables by looking at the files under variables directory... would save so much time to have this. So consider this as another vote. There's also a similar issue here.

[gmvoliveira]

Also interested in this feature. +1

[salmanmaqsoodlive]

this is the only thing missing in VS Code

[goooseman]

Maybe a configuration property can be introduced, which can be used in the project's .vscode/setting.json to specify variables .css files, which should be imported by VS Code's Intellisense project-wise?

[goooseman]

There is a plugin to do that: https://github.com/be5invis/vscode-custom-css. But it modifies VS Code's files, so I'm not sure it is safe to use.

[thewashingtonhua]

So far I been using yanai101/css-var-hint. works for me.

[ennio-tomas]

Very required feature! +1

[temideep79]

Yes please autocomplete for custom properties

[onetrev]

This extension: CSS Variables now seems the most reliable and functional for supporting this crucial functionality for anyone using CSS Custom Properties.

[BlackSparowYT]

needs to be something included in vscode! +1

[tinynow]

How do I cast my vote for this feature? I am very interested in it as well.

Yes - is this the proper venue to vote for this feature??