[css-values-4] Clarify that function component values need to be followed by parentheses · Issue #5728 · w3c/csswg-drafts (original) (raw)
So fantasai and I discussed this a bit, and I realized I'd forgotten that this <foo()>
grammar non-terminal was actually just something I added to Bikeshed as a linking convenience (and have been using for several years), not something we ever actually added to the Value Definition Grammar.
Like I said in my previous comment, the point of it is to serve the same purpose as <'width'>
- a shorthand way to say "this non-terminal represents the grammar of the 'width' property, minus the CSS-wide keywords" - where <foo()>
is a way to say "this non-terminal represents the grammar of the foo()
function". Otherwise you have to explicitly provide a <dfn type><foo-function></dfn>
element in the grammar block as well as the <dfn function>foo()</dfn>
; with this shorthand you can just supply the <dfn function>
variant (perhaps inside the grammar block, perhaps outside) and it Just Works.
It also serves as an automatic namespacing mechanism - rather than defensively naming function grammars as <foo-function>
to avoid collisions, or just YOLOing it as <foo>
and ensuring we never add an unrelated non-terminal of that name, we automatically get a reasonably non-colliding name. (See <image>
vs <image()>
, for example.)
So, all the examples Oriol provides are invalid - none of those are the definition of the named functional notation. The non-terminals used there are indeed standard non-terminals, and should continue to be written as such.
We should, however, add this syntax to the Value Definition Grammar if we're going to keep using it. (Also for at-rules as <<@rule>>, which Bikeshed also allows.) And I should update the bits of my specs where I wrote grammars like foo() = foo( bar | baz )
to instead be <foo()> = foo( bar | baz )
.
Agenda+ to ask if we want to add this convention, or just keep to only ident-based non-terminals.
Examples:
<image> = <url> | <linear-gradient()> | ...
<linear-gradient()> = linear-gradient( ... )
<repeat()> = <track-repeat> | <fixed-repeat> | <auto-repeat> | <line-repeat>
<line-repeat> = repeat( ... )