1939501 - Dashed idents are not allowed in the syntax of registered custom properties

Status: NEW

(Core :: CSS Parsing and Computation, defect, P3)

Description

[Roman Komarov]

Attachment: Dashed ident as a value of a registered custom property.html

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:135.0) Gecko/20100101 Firefox/135.0

Steps to reproduce:

1. Open https://codepen.io/kizu/pen/dPbVMxV or the attached .html file.
2. Look at the test2 and test2-js.

Actual results:

The lines with test2 and test2-js do not have a lightgreen background.

Expected results:

The lines with test2 and test2-js must have a lightgreen background. They currently do not, as the --test2 and --test2-js are not registered successfully. Trying to register --test2-js produces a “SyntaxError: CSS.registerProperty: Invalid syntax descriptor” error, even though, based on the specs, it shouldn't (and --test2 should also be possible to register in CSS).

Places in the specs that define this:

1. https://drafts.css-houdini.org/css-properties-values-api/#supported-names, the “Any sequence which starts an identifier, can be consumed as a name, and matches the <custom-ident> production” part.
2. https://drafts.csswg.org/css-syntax-3/#would-start-an-identifier — explicitly allows ident that has hyphen-minus as the first and second code-points.
3. https://drafts.csswg.org/css-syntax-3/#consume-name describes the algorithm that mentions https://drafts.csswg.org/css-syntax-3/#ident-code-point — which also allows hyphen-minus.

With more and more features in CSS (scroll-driven animations, anchor positioning, etc.) expecting dashed-idents (and anything accepting custom-idents also accepting them), the need to be able to allow specific dashed idents as parts of @property syntax will grow. Ideally, we'd want to bring this to interoperability sooner than these features will land, so we won't have a discrepancy in how browsers handle this.

Looking at how other browsers handle this, Safari works as expected, and I am planning to open a bug for Chromium as well.

Comment 1

[BugBot [:suhaib / :marco/ :calixte]]

The Bugbug bot thinks this bug should belong to the 'Core::CSS Transitions and Animations' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.

Comment 2

[BugBot [:suhaib / :marco/ :calixte]]

The severity field is not set for this bug.
:jwatt, could you have a look please?

For more information, please visit BugBot documentation.

Comment 3

[Emilio Cobos Álvarez (:emilio)]

Hmm, so https://drafts.csswg.org/css-syntax-3/#name-start-code-point doesn't include - as a valid first character. Then again, our regular css parser does allow it.

So I think we can probably remove this is_name_start check and add a test, and call it? We use the CSS tokenizer right below so I think that should just work.

Comment 4

[Roman Komarov]

Ah, yes, Anders did create a PR to fix this in the specs: https://github.com/w3c/css-houdini-drafts/pull/1137 — as I did open a similar bug in Chromium.