[css] fix parsing of custom properties in @supports

[JaneOri]

• VSCode Version: 1.39.0
• OS Version: Windows 10

Steps to Reproduce:

1. Create a CSS file with this code:

   .test {
   --validValue: , 0 0;
   }
   @supports not (--validValue: , 0 0) {
   .vscode-parsing-error {
     content: "";
   }
   }

2. You'll get these errors:

Does this issue occur when all extensions are disabled?: Yes, no extensions installed

[vscodebot[bot]]

(Experimental duplicate detection) Thanks for submitting this issue. Please also check if it is already covered by an existing one, like:

• Selector specificity works wrong with sass nested selectors (#63200)
• Windows 10 Startup Issue - this is really starting to annoy me. (#80086)
• VSCode starting slowly (no extensions) (#81342)
• Startup Issue (#78370)
• saving typescript extension as css causes lots of typescript errors (#75880)

[aeschli]

Are you sure that starting with a comma is valid CSS?

https://www.sassmeister.com/ also shows an error on the comma ( I know that SASS, but also understands CSS).

[JaneOri]

Hello @aechan

Yes, I am certain.

Earlier versions of Safari on iOS erroneously counted it as invalid too, but that has since been fixed. You can feature detect that fix with this CSS I provided:

@supports not (--validValue: , 0 0) {
  .vscode-parsing-error {
      content: "";
  }
}

Here are some resources on the validity of the value

I've quoted the relevant pieces in a human-readable order for your convenience:

https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties#Validity_and_values

The classical CSS concept of validity, tied to each property, is not very useful in regard to custom properties. When the values of the custom properties are parsed, the browser doesn't know where they will be used, so must, therefore, consider nearly all values as valid.

https://drafts.csswg.org/css-variables/#invalid-variables

variables can’t "fail early" like other syntax errors can

A declaration can be invalid at computed-value time if it contains a var() that references a custom property with the guaranteed-invalid value [...] or if it uses a valid custom property, but the property value, after substituting its var() functions, is invalid.

https://drafts.csswg.org/css-variables/#guaranteed-invalid

The initial value of a custom property is a guaranteed-invalid value.

This value serializes as the empty string, but actually writing an empty value into a custom property, like --foo: ;, is a valid (empty) value, not the guaranteed-invalid value. If, for whatever reason, one wants to manually reset a variable to the guaranteed-invalid value, using the keyword initial will do this.

https://developer.mozilla.org/en-US/docs/Web/CSS/--*#Syntax

Formal Syntax <declaration-value>

https://drafts.csswg.org/css-syntax-3/#typedef-declaration-value

The <declaration-value> production matches any sequence of one or more tokens, so long as the sequence does not contain <bad-string-token>, <bad-url-token>, unmatched <)-token>, <]-token>, or <}-token>, or top-level <semicolon-token> tokens or <delim-token> tokens with a value of "!". It represents the entirety of what a valid declaration can have as its value.

<bad-string-token>, <bad-url-token>, and <delim-token> are variations of code points, typically beginning with "U+": https://infra.spec.whatwg.org/#code-point

---

augmented-ui relies heavily on this to compose dynamic clip-path values if you would like a real world example: https://github.com/propjockey/augmented-ui/blob/master/augmented.css#L251

Thank you, //James

[JaneOri]

@octref @aeschli pinging in case the notification was lost over the weekend since the issue was closed early

thank you!

[aeschli]

@James0x57 Thanks for the pointers!

[JaneOri]

@aeschli Could you please re-open this issue?

Values of a custom property should not be parsed for commas - commas have no meaning in this context.

Safari on iOS had the same issue and they've fixed it.

SASS also has this issue but they only handle it incorrectly in the @supports statements now.

The only work around is to disable the entire problem-checking feature in Visual Studio Code

[JaneOri]

Here is a minimal JSBin using this feature of CSS in case it's useful to you: https://jsbin.com/cemujarozo/1/edit?html,css,output

The leading comma allows for dynamic, optional, composition of comma separated standard properties.

[trusktr]

Great catch! The main thing is that CSS variables can be composed, so for example this is valid:

.foo {
  --a: anim;
  --b: 1s ,;
  --c: anim2 1s;
  --d: , anim3 2s;
  animation: var(--a) var(--b) var(--c) var(--d);
}

and now animation has the effective value anim 1s, anim2 1s, anim3 2s.

[JaneOri]

Any chance of getting this back on the radar? In the last year since I filed this, VSCode has become my favorite editor but I still cannot use CSS Validation because of the false negative in the @supports statement:

Thank you for your consideration