PostCSS can't parse CSS variable values

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]

The fix was released in 7.0.15.

[stas-dolgachov]

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