Typed CSS Custom Properties

[kevmodrome]

Describe the problem

We've got great support prop types in Svelte but we don't have support for CSS Custom Properties types. It would be great if we could somehow get guard rails when we pass in values to these as well.

Describe the proposed solution

An example of what I would want to happen:

<!-- MyButton.svelte -->

<button>Some Text</button>

<style>
  @property --bg-color {
    syntax: "<color>";
    inherits: false;
    initial-value: blue;
  }
  @property --text-color {
    syntax: "<color>";
    inherits: false;
    initial-value: white;
  }
  button {
    background: var(--bg-color);
    color: var(--text-color)
  }
</style>

<!-- Parent.svelte -->

<MyButton --bg-color="100" /> <!-- Results in error, type is not correct -->

<MyButton --bg-color="blue" /> <!-- OK! No Error -->

If possible we could maybe even infer the types from the CSS Rule itself and skip the @property stuff.

Alternatives considered

The alternative is just having no types. I don't see any other solutions to the problem here.

Importance

nice to have

Edit: I realize now this should've maybe have gone in the language-tools repo 🤦‍♂️

[shadow-identity]

We just spent some time on wrapping every custom property using @property notation, and I was curious why they didn't appear in the browser >_<

@properties definitions are not included into final CSS bundle even if they was added into styles.css file imported inside of a component. So the only option to use @property now is to put them into a /static folder. Hopefully it doesn't affect CSS tree shaking and other things.

And I think this is a correct repo for this issue, since the language-tools repo is about IDE support, but we need @properties to be compiled from .svelte files into CSS.