Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

PostCSS can't parse CSS variable values #1255

Open
tomhodgins opened this Issue Apr 10, 2019 · 11 comments

Comments

Projects
None yet
4 participants
@tomhodgins
Copy link

commented Apr 10, 2019

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

This comment has been minimized.

Copy link
Member

commented Apr 10, 2019

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

@evilebottnawi

This comment has been minimized.

Copy link

commented Apr 10, 2019

@ai yes, it is valid for css variables

@evilebottnawi

This comment has been minimized.

Copy link

commented Apr 10, 2019

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

@ai

This comment has been minimized.

Copy link
Member

commented Apr 10, 2019

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

@evilebottnawi

This comment has been minimized.

Copy link

commented Apr 10, 2019

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

@tomhodgins

This comment has been minimized.

Copy link
Author

commented Apr 10, 2019

@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

This comment has been minimized.

Copy link
Member

commented Apr 10, 2019

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

@ai

This comment has been minimized.

Copy link
Member

commented Apr 11, 2019

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

@stas-dolgachov

This comment has been minimized.

Copy link

commented Apr 25, 2019

@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

This comment has been minimized.

Copy link
Member

commented Apr 25, 2019

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

@tomhodgins

This comment has been minimized.

Copy link
Author

commented Apr 25, 2019

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!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.