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

[jjenzz]

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.

[phoenisx]

Hi @jjenzz

Thanks for raising this request, and for your support 🙇🏽. I will try to add this feature in v2.3.0. 💯

[phoenisx]

Hi @jjenzz

This will be released in 2.3.0

Also do keep a note of the following while using this feature:

---

Since CSS variables are global in nature by default and can be used even without them being declared, an ideal CSS linter for CSS variables might not exist. This feature enables strict checks for undeclared variables, thus variables which are undeclared or dynamically created will be considered as lint warn/errors.

For e.g. all the following CSS examples are valid:

body {
  /* The following `--undeclared` variable does not exist */
  /* but its usage is completely valid, even though this extension */
  /* shows it as an error after enabling this feature */
  color: var(--undeclared, #333);
}

• In the following example variable is declared dynamically in CSS-in-JS

// source.js
const foo = (index, value) => (
  css`
    --color-${index}: ${value};
  `
);

/* index.css */
body {
  color: var(--color-1);
}

To fix the above cases, you can pass a list of variable names in the extension settings to ignore them, as follows:

// settings.json
{
  "cssvar.mode": ["warn", {
    "ignore": [
      "^--undeclared",
      "--color-\\w+?"
    ]
  }]
}

For details check the examples folder

[jjenzz]

@phoenisx this is amazing. thank you so much!!

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?

https://user-images.githubusercontent.com/175330/191370815-4049e181-32b0-4c7c-b931-d421d29e3fc8.mp4

[phoenisx]

TLDR; Yes, it should be possible.

Explanation:

• The extension needs to activate, which happens only once when one of the supported lang/extension file is opened.
  • Before activation, this extension cannot process anything.
• This implementation was kept similar to how other extensions like ESLint behaves. Linting is done lazily only for an active tab.

Possible Solutions:

To get details on usage, this extension needs to parse every possible supported file, when it activates. This can be a CPU-intensive task, and thus I want to keep this feature behind a flag. Some possible solutions, off the top of my head:

• Provide a VSCode command (CMD+SHIFT+P) for this extension which parses all supported files and provides details in Problem Tab.
• Add a new option in the mode property, let's say scan, which accepts a list of globs to scan for possible Problems with CSS Variables (in a background process).

I feel the second one is more intuitive but needs more configuration to be done. Also, I am not sure if the second option is doable using a background thread 😅. Need to test both the above solutions.

Let me know your thoughts!

Anyways, Let me track this in a separate issue 👍🏽