Global custom properties no longer showing up

[djmtype]

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:

[phoenisx]

It clearly looks like the parser is failing to parse the CSS file, which shouldn't be the case, as I released a safe-parser which should work for any type of file.

Can you help with the following details:

• Extension version you are using right now?
• Are you using VSCode's multi-root workspace?
• Provide VSCode logs. Please follow this doc to provide log details.
  • I would need contents from the file which is failing to get parsed. The line number and file name details can be seen in the log.

Also, to understand your cssvar settings:

• Supported CSS syntaxes for cssvar.postcssSyntax are:
  • postcss-scss (for scss)
  • postcss-sass (for sass)
  • postcss-less (for less)

In your config, I am not sure what does "@tokencss/postcss" do. Is it a supported postcss syntax parser.

[phoenisx]

You can also refer to the examples, if your vscode settings are correctly set or not 👍🏾

[djmtype]

Thanks @phoenisx

I have a bunch of errors like these:

Currently, it's now working but only within css files. However, between the <style> in .astro files it's only picking up currently existing custom properties via Intellisense.

I did the obvious thing and restarted my computer. That made no difference.
Using Workspaces or not made no difference.
I removed the TokenCSS from cssvar settings – made no difference

[djmtype]

I tried on VS Codium too. No errors, but doesn't work with Astro files either.

I just saw a previously closed issue regarding Open-Props. SO, it seems it's not picking up Open-Props custom props in .astro files, but it picks them up in .css files.

According to the Open-Props' VS Code instructions (https://open-props.style/#getting-started), it should be set up as:

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

Is that correct? I already tried that.

[phoenisx]

Is this the project: https://github.com/djmtype/astro-xenon that fails to parse the main.css files??

Anyways, I need to raise a PR to update Open-Props docs, because there has been some recent changes that by default ignores scanning node_modules files.

Due to this you will have to provide:

{
  // Do not ignore node_modules, which is ignored by default
  "cssvar.ignore": []
}

You can refer to this example for better understanding.

[djmtype]

@phoenisx That's the repo, but it's the open-props branch. https://github.com/djmtype/astro-xenon/tree/open-props

It's still not offering css variables suggestions.
I also tried adding a Vue component to an Astro project and that didn't provided suggestions to Open-Props or my local css variables either. It seems to only provide suggestions among other css files.

In conclusion works well with css files. But, files where css exists inside a <style> tag, Intellisense, not CSS Vars, will only provide suggestions of css custom properties that pre-exist in the same file.

[phoenisx]

Hi @djmtype

What is the extension of the file where you are not seeing any intellisense?

Can you share a short video clip or a reproduction of the issue that you are facing?
This would help me understand your problem better

[djmtype]

@phoenisx CSS Vars currently isn't showing suggestions from local css files or node modules on any .astro file within a <style> tag. I'll gladly share a screencast clip. I'll get to it a bit later today.

[djmtype]

@phoenisx I figured out my issue – me, or my muscle memory.
Without I realizing, I'm so use to typing var first. But CSS Var expects -- (the beginning of the prop) from the start which so much better as it saves a lot of typing.

In CSS files, it works either way by typing var or by typing --. Frameworks like Astro and Vue, within a style tag, it only works by typing -- first.

However, I wouldn't change a thing. I just need to train my brain.

I still don't why I get the errors as seen above. #52 (comment)
It might be another extension conflict?
I have these 2 related CSS extensions installed:
PostCSS Intellisense and Highlighting: https://marketplace.visualstudio.com/items?itemName=vunguyentuan.vscode-postcss
CSS Navigation: https://marketplace.visualstudio.com/items?itemName=pucelle.vscode-css-navigation

I'll try doing more debugging with these.

[phoenisx]

I feel the issue is with using PostCSS plugin, as raised earlier #38 (comment)

Can you try disabling the PostCSS plugin and try once 👍

[phoenisx]

Hi @djmtype

Were u able to find details on the issue? Was any other extension causing conflict with this one?

Also, I wanted to know, Are you working on a local file system or a remote file system project?

[djmtype]

Hey @phoenisx
Thanks again, it seems the PostCSS Intellisense plugin was creating the conflict with CSS Vars enabled.

I'm just working on a local project.