PostCSS can't parse CSS variable values

[tomhodgins]

It appears PostCSS has difficulty parsing CSS variables according to CSS's syntax, examples include:

examples {
  --bracket-block: {1, 2, 3};
  --JSON: [1, "2", {"three": 3}, [4]];
  --javascript: function(rule) { console.log(rule) };
}

You can find more known-valid examples of CSS variables in my css-tests repository, or in the Web Platform Tests repository, and you can read about the syntax for CSS variable values in the CSS Variables spec

The allowed syntax for custom properties is extremely permissive. 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 "!".

[ai]

Your examples contain <}-token>. Are you sure, that it is valid?

[alexander-akait]

@ai yes, it is valid for css variables

[alexander-akait]

It doesn't used in css in real life, but css spec says that in the future they can be used

[ai]

so long as the sequence does not contain … <}-token>

[alexander-akait]

hm, chrome and firefox parse their and output as value of variable

[tomhodgins]

@ai does it contain unmatched <}-token>? The examples I've given are valid according to:

• the spec
• all browser's implementations of CSS according to the specs
• the web platform tests that assert these are valid

And @evilebottnawi with the Houdini APIs coming, CSS variables can be used to pass values from CSS to JS, the syntax for CSS variables being so permissive was intentional. Here's an example of that: https://houdini.glitch.me/paint

[ai]

Got it. OK I will fix it in next month.

[ai]

I created a task on Evil Martians’s open source task list for junior developers https://cultofmartians.com/tasks/postcss-vars-parse.html

[dolgachio]

@ai @tomhodgins hey! I have started to work on that. I am new to PostCSS source code, so it could take a while. I will give an update in a week or so.

[ai]

@stas-dolgachov great! Don’t worry to ask questions. You can write to me to @sitnik at Telegram.

[tomhodgins]

I've made a little tool here that if you enter CSS into the editor on the left or top of the page, the browser will try to parse the CSS and the result is visible on the right or bottom of the page. This is to be able to instantly test how each browser 'sees' some CSS code. For troubleshooting CSS variables I haven't noticed any cross-browser differences in parsing (I believe they all do it according to the standard) so hopefully this will help you test valid values faster as you troubleshoot!

[ai]

Fixed in #1259

[ai]

The fix was released in 7.0.15.

[ai]

7.0.15 was reverted in 7.0.16.

Custom Properties fix will be released only in 8.0 until postcss-apply will be updated.