Support `@property` at-rule

[yisibl]

https://developer.mozilla.org/en-US/docs/Web/CSS/@property

@property --property-name {
    syntax: '<color>';
    inherits: false;
    initial-value: #c0ffee;
}

[devongovett]

I guess this is a draft so should probably be opt-in.

[yisibl]

Some browsers have been shipped https://caniuse.com/mdn-css_at-rules_property

[argyleink]

more than a draft https://www.w3.org/TR/css-properties-values-api-1/#at-property-rule
it's on the radar for webkit, at least it says so on their bugzilla

[devongovett]

Implemented in abcbbbe. The syntax string is also parsed and validated, and the initial-value is validated according to it as well. This also allows us to minify the syntax string and initial-value.

Example

Eventually we could potentially validate usages of registered properties within the rest of the stylesheet as well, though if any var references are contained within them we would have to bail out. Might be interesting for a linter built on top of Parcel CSS though!

[paulmelero]

Getting this kind of warnings when using Vite ,Tailwind 4, DaisyUI, and LightningCSS:

 WARN  [vite:css][lightningcss] Unknown at rule: @property
2916|  }
2917|  @layer base {
2918|    @property --radialprogress {
   |             ^
2919|      syntax: "<percentage>";
2920|      inherits: true;

This is the source of the syntax causing the issues:

@property --radialprogress {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 0%;
}

Edit: I tried passing something like this to the options

visitor: {
  Rule(rule) {
    if (rule.type === 'property') {
      return rule // keep @property blocks unchanged
    }
  },
},

But it had no effect.

Would be nice if there was an option like unknownAtRules: ['@property'] to skip them as-is.

Any workarounds or anything I can do to silence this warning?

cc/ @saadeghi

[saadeghi]

@paulmelero related conversation: #968