[css-properties-values-api-1] Allow scoped @property rules

[Que-tin]

There currently is no way to define @property-Rules on a non global level. When people want to leverage the syntax especially in combination with | this will be handy e.g.:

.card {
  @property --size {
    syntax: "default | big";
    inherits: false;
    initial-value: default;
  }
}

.button {
  @property --size {
    syntax: "small | default";
    inherits: false;
    initial-value: default;
  }
}

The current implementation would lead to all custom properties being globally scoped and therefore the need of unique names e.g:

@property --card-size {
  syntax: "default | big";
  inherits: false;
  initial-value: default;
}

@property --button-size {
  syntax: "small | default";
  inherits: false;
  initial-value: default;
}

This can quickly get out of hand and become chaotic.

This feature will become even more useful when Style Queries grow in adoption. Because people can leverage these two features together especially in a component based development context. That way it it's possible to remove style linked / visual properties and class toggles on various elements.

For example a card component like this (no Enum etc. just for demo purposes)

type TCard = {
  isBig: boolean;
  theme: 'primary' | 'secondary';
}

function Card({
  isBig = false,
  theme = 'primary'
}) {
  ....
}

could be easily migrated to:

.card {
  container: card / normal;

  @property --isBig {
    syntax: "true | false";
    inherits: true;
    initial-value: false;
  }

  @property --theme {
    syntax: "primary | secondary";
    inherits: true;
    initial-value: primary;
  }
}

.text {
  @container style(--isBig: true) {
    font-size: 5rem;
  }

  @container style(--theme: primary) {
    color: green;
  }
}

This could of course would be even more useful when multiple styles on multiple elements are changed.

With this being possible I could one could define a typed visiual "API" purely in CSS. I also see potential for tooling here.

[bramus]

See #9077 (comment)

[Que-tin]

CC: @astearns - Found it