Is CSS @property support valuable?

[drwpow]

Idea for the @cobalt-ui/plugin-css component: @property usage:

@property --focal-size {
  syntax: '<length-percentage>';
  initial-value: 100%;
  inherits: false;
}

The idea is outlined in Adam Argyle’s Type safe CSS design systems with @property blog post. In short, it’s a way to use CSS variables, but with a few more features like the ability to set defaults as well as type enforcement (e.g. a color @property if passed a non-color will just ignore it and use its default, whereas a normal CSS variable will just break).

The concept seems neat in general, but I’m unsure if it would be useful to generate this using the CSS plugin.

The whole idea is for overrides, which is not really a concept design tokens have. Adam in his blog post uses the (obvious) example of theming and light vs dark mode, but accepting user input. In a more traditional token-based DS, light and dark have predefined values, so there may not be much need for typechecking and default-setting.

But all that said, is there something I’m missing? Would love thoughts / ideas / suggestions on whether or not this would be valuable in some way I’m not thinking of.

[drwpow]

Update on this: this will probably be added to plugin-css, but only once support improves across the board (supported in all major browsers; currently it’s still not widely-available). This seems like a net win across the board with no downsides, and seems important longterm for the future of tokens in CSS.

But it should at least be supported in browsers before we add it 🙂