w3c / w3c/csswg-drafts

[css-values] Can we remove the limit for @property initial-value being computationally independent?

Open
#13,628 0 comments 2 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

css-properties-values-api-1
Dominant language
Bikeshed
Stars
4.9k
Forks
816
PR merge metrics
PR metrics pending

Description

This came up in the discussion of https://github.com/w3c/csswg-drafts/issues/12735

Authors have used custom properties for a long time to establish design systems. The general approach is to define things on the root. These values may or may not be computationally independent, and the authors is not considering that distinction specifically. These are reasonable context-dependent props from a design system:

html {
  --accent-color: light-dark(deepPink, hotPink);
  --complementary-color: oklch(from var(--accent-color) l c calc(h + 180));
  --gap: round(2cqi, 0.25lh);
  --xx-large: 2.5em;
}

Now there are various reasons that an author might want to move any one of those into @property - to support animating, or enforce a type, or turn off inheritance, etc. And @property allows us to set what seems like a global variable fallback in the initial-value. From an authoring perspective, any and all of these seem like reasonable global fallbacks for my custom property. But none of them are allowed as initial-value settings. And the 'computationally independent' restriction is not a concept that exists anywhere else when authoring. It's surprising when you try to move custom property 'defaults' from the root to @property and you run into a totally unfamiliar restriction.

/cc @tabatkins who asked me to open the issue

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 by reading the linked CSSWG issue 12735 and this discussion about the @property initial-value restriction. Trace the specification text defining computational independence and determine whether the proposal has consensus; done means an agreed standards change or a documented resolution.

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
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.