[css-values] Other options for value-agnostic delimiters
Nobody has claimed this yet.
- Dominant language
- Bikeshed
- Stars
- 4.9k
- Forks
- 816
- PR merge metrics
- PR metrics pending
Description
In https://github.com/w3c/csswg-drafts/issues/581, a semicolon has been proposed as a delimiter in the function mix( <percentage> ; <start-value> ; <end-value>). Commas can't be naïvely used as delimiters here because <start-value> and <end-value> need to be able to be any valid property value, some of which may include commas of their own. But as @LeaVerou points out in https://github.com/w3c/csswg-drafts/issues/581#issuecomment-926726195, introducing a semicolon as a valid character in a value context is likely to break existing tooling fairly severely. Tools will eventually update to support it—in Sass for example we could probably make it work by adding semicolon as a new form of list delimiter—but until that update happens and is widely adopted by all users of these tools, it's likely that this syntax will render the mix() function painful or impossible to use by many people.
Given that, I thought I'd toss out an alternative idea for how to structure this syntax in a way that's easier for existing tools to parse (and possibly also more similar to existing CSS functions), while also allowing arbitrary property values. I'm not particularly married to any particular configuration of this solution, but I'd like to avoid the semicolon if possible and I'm hoping this can at least inspire some useful discussion of how that might be accomplished.
My core idea would be to wrap the <start-value> and <end-value> productions in some other syntax to make the scope of the values unambiguous, similarly to how calc() wraps an unusual syntactic context. This could look more explicit like mix( <percentage> , value( <start-value> ) , value( <end-value> ) ) or more terse like mix( <percentage> , [ <start-value> ] , [ <end-value> ] ).
If the verbosity is too annoying, you could also say that the wrapper is only required when it would otherwise be ambiguous. In other words, say that <start-value> and <end-value> can contain any value syntax other than top-level commas (and square brackets if you go with the terser option), so that mix(70%, 0%, 100%) works without wrapping but mix(70%, value(a, b, c), value(d, e, f)) needs to be wrapped.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Read the linked CSSWG issue 581 and LeaVerou's comment first, then compare the proposed semicolon and wrapper syntaxes in this issue. The work would be complete when the group reaches and records a concrete syntax decision for value-agnostic delimiters.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css
- Domain
- web-dev
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100