[css-values] Stacked modifiers in definitions

[dontcallmedom]

In w3c/svgwg#642 (comment) @tabatkins indicates that the +# stacked combinator is a valid way to declare the syntax of values that can be space- or comma-separated.

Reading the Component Value Multipliers section, it's not all that clear that this is valid, or which modifiers can be stacked.

In particular, the various rules are expected to apply to types, keywords or bracketed groups - it's not clear whether a modifier applied to these still constitute a type, a keyword or a bracketed group.

There are already rules that says that the ̀{A,B}modifier can be stacked on top of#`, which kind of implies stacking is the exception not the rule.

As we're looking in reffy & webref to release the CSS syntax definitions as package, we're trying to ensure the csstree parser we're targeting as reference parser for these fragments can accommodate all the known valid CSS definitions, and so it would be useful to understand if indeed which of the stacked modifiers are indeed valid.

[tabatkins]

It's intended that at least some of the modifiers be stackable; if we need to make it clearer in the spec, we can.

There are already rules that says that the ̀{A,B} modifier can be stacked on top of #

This is not stacking; the two combine to form a new modifier. foo#{1,2} is completely different from [foo#]{1,2}. The former allows foo and foo, foo only; the latter allows foo, foo foo, foo, foo (two repetitions of foo#, the first being two reps and the second being three reps) and many others.

---

So, of the five relevant mulipliers (*, +, ?, #, and {}):

• +# is a useful stack to indicate comma-or-space separation.
• #+ is similar and in some cases accepts identical inputs (depending on what it's modifying), but overall is confusing and probably shouldn't be used.
• #{} is already defined and is not technically a stack at all, but rather a modified #
• #? is potentially valuable, since # is one-or-more by default; it serves the same role as * does to +.
• Literally every other combination is either redundant or useless, I think.

So I'd be happy to just define that only +# and #? are allowed (and +# shouldn't be used, but is preserved for the purpose of specifying some legacy grammars), and disallowing everything else.

[idoros]

It's intended that at least some of the modifiers be stackable; if we need to make it clearer in the spec, we can.

It would be helpful to have a definition for how multiplier stack works. Currently the spec only says that multipliers can follow "type, keyword, or bracketed group" and not other multipliers with the only one that explicitly mention a combination is the hash mark with the curly brace range.

I'm trying to understand if there is a meaning to the order that they are stacked in:

• you said that there is a different between +# and #+, what do you mean by "identical inputs"?
• in custom-selector the syntax has <custom-arg>+#?, I think that means it can be a combination of space (or nothing) and comma separated list with the ? lowering the the list minimum to zero. Would +?# or ?#+ mean the same thing or does the multiplier affect only the multiplier(s?) that comes before it?
• can there be a different range limit on comma/space lists, for example +{2,5}#{1,3}?

having a closed list of allowed combinations would also be good.

[fantasai]

Added clarifying paragraph defining what those two stacked multipliers mean. Let us know if something seems off.

[idoros]

@fantasai thanks for adding more info about the +# and #? explicitly to the definition.

I'm still not sure about a few things:

• the difference between +# and #+
• if +# (space/comma separated with at least 1) is acceptable, shouldn't *# / *#? be acceptable as well?

[tabatkins]

Those other stacks are no longer allowed; the new spec text defines that only +# and #? are allowed.

That said, the purpose of +# is solely to represent the "list of values, separated by comma or space" use-case that SVG has in several styling attributes. #+, if it were allowed, would match exactly the same thing.

*#, if it were allowed, would also mean the same thing as #?, since if you have a 0-length run of the base term (due to the *), then you must also omit the additional commas from the # iterations, since they're not separating anything. (See the details of implicit comma omission.)

[cdoublev]

As commented above, currently the spec only says that multipliers can follow "type, keyword, or bracketed group". The two following productions includes a delimiter followed by a multiplier:

• <an+b>
• <mf-lt> and <mf-gt>

Can it be assumed that a multiplier can follow a bracketed group or any "symbol" representing a token, except functions and simple blocks? There is currently no production that use a function or a simple block followed by a multiplier.

The representation of non-keyword literal characters, functions, and simple blocks, in a CSS value definition syntax, is not further/clearly defined.

This was a bit off topic so please tell me if I should create a new issue.