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

[phoenisx]

@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.

[phoenisx]

Parsing CSS in node_modules is still possible using extension settings, but parsing remote CSS files isn't possible yet.

[jjenzz]

Parsing CSS in node_modules is still possible using extension settings

@phoenisx curious how to do this?

i am trying to use open props with this extension and the only way i could figure out how to recognise the files was by removing node_modules from cssvar.ignore which gave me a lot of duplicated variables.

is there a more efficient way?

p.s. i love what you're doing here. it has motivated me to write normal css again (instead of css-in-js) for the first time in yeeears!

[phoenisx]

Thanks for your kind words and support @jjenzz, and also for bringing this issue to my notice.

To summarize your statement above, you are saying the extension works, but there are too many duplicates, am I correct?

I have a working example for open-props, here: https://github.com/willofindie/vscode-cssvar/tree/main/examples/css-in-node-modules and while testing even I found duplicate declarations that shouldn't have been there.

Let me fix this by today, and I was also thinking to add a config that when enabled, will dedupe all duplicate declarations parsed from all source files, keeping just their location references to navigate to the definition.

[phoenisx]

Adding more context here, for visibility:

• The custom properties provided by open-props actually have duplicates in them

• I tried a quick fix locally, to hide duplicates in a single file, and it works, but I am not sure if it is the right way to move forward with, reasons:

  • Single CSS file can have duplicate custom properties, but have different values, like properties defined in @media queries or duplicate props to support theming.
  • Keeping the above in mind, I am thinking to:
    • Create a separate issue for the same
    • Take some time to find a good solution that does not break current support for variables used for theming.

[jjenzz]

I have a working example for open-props, here

thanks for that! not sure why i hadn't looked there before 🙈 sorry.

i have tried the following configuration today which doesn't have any duplicates but i only get colours in my inteilisense (not sizes etc):

{
  "cssvar.themes": ["dark"],
  "cssvar.disableSort": true,
  "cssvar.ignore": ["**/build"],
  "cssvar.files": ["app/**/*.css", "node_modules/open-props/open-props.min.css"],
  "cssvar.excludeThemedVariables": true,
}

intellisense:

i am using pnpm if that helps at all. would you like me to raise a GH issue for this or is there something i am missing?

[phoenisx]

Hi @jjenzz I tested your configurations on my system, and couldn't replicate the issue.

https://user-images.githubusercontent.com/11786283/188285280-49f52a2a-272c-482e-8cd0-1350052df6df.mp4

Can you try disabling all installed extensions and enabling just this one to validate if some other extension is not causing any conflict?

---

If the issue still persists, please do raise an issue with the following details:

• OS and VSCode details
• Extension and open-props version
• Also provide if there are any error logs in the devtools console. Details on how to look for console logs provided here

[jjenzz]

i figured out what it was. i had seen in another GH issue that adding the following to extensions.json would help reduce variable duplication but it was actually causing variables to go missing entirely for me:

"[css]": {
  "editor.suggest.showVariables": false
},

removing this configuration fixes it :)

thanks for all your time on this, if there is any way i can send a donation of support please do let me know. i'd love to help you to continue maintaining the extension.

[phoenisx]

@jjenzz great to hear that you solved the issue. I pinned this issue today, to track conflicts with default VSCode settings. The setting that you mentioned above used to work in VSCode prior to v1.71 or v1.70, not sure exactly which one.

thanks for all your time on this, if there is any way i can send a donation of support please do let me know. i'd love to help you to continue maintaining the extension.

I appreciate your support 🙏🏽 🙇🏽 🙌🏽. ~~I've never given a thought to this, so not sure how exactly it works. I read some blogs about Github Sponsors and would be linking my Sponsors account to this project, once it's approved.~~ DONE 🙌

[jjenzz]

@phoenisx you can add a .github/funding.yml file with your username from your funding provider of choice and it will display a "sponsor this project" link on the repo. details here.