w3c / w3c/csswg-drafts

[css-variables] Are custom properties strings?

Open
#8,533 10 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

css-variables-1
Dominant language
Bikeshed
Stars
4.9k
Forks
816
PR merge metrics
PR metrics pending

Description

Is a custom property a token sequence that only serializes as the original string, or is it that original string? The difference can be seen in this example:

.container {
  --x:foo 1.00;
}
.container > div {
  @container style(--x:foo 1) {
    color: green;
  }
}

If custom properties are token sequences, this style query matches, but not if they are strings.

The point of serializing using the original string was to preserve "unknown stuff", and maintaining that idea probably means that we don't transform that unknown stuff before comparisons. Otherwise e.g. style(--uuid: 12345678-12e2-8d9b-a456-426614174000) would match --uuid: 12345678-1200-8d9b-a456-426614174000 (example stolen from https://drafts.csswg.org/css-variables/#serializing-custom-props, then modified).


Note that style(--x:1) would still match e.g. --x:1.00 according to the current plan in https://github.com/w3c/csswg-drafts/issues/8376, since the literal side matches <number>.

@tabatkins

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the custom-property serialization discussion in the CSS Variables specification and the style-query example in this issue. Review the linked CSSWG issue 8376 and the cited serialization section, then determine whether comparisons use token sequences or original strings and document the resolved behavior.

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.