Unknown at rule: @property

[Disservin]

Just something I came across when using the vite-rolldown integration which switched over to lightningcss from esbuild. I am currently getting warnings from lightningcss for the following css. Haven't deep dived into css land so excuse me when this is already known/not an issue.

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

playground

[devongovett]

@property is only valid at the top level, not inside a layer.

[Disservin]

Ok thanks, off to hunting for the dependency which tries to do this 🙃

[brianhelba]

@Disservin (and anyone else who finds this): the @property declaration in question comes from daisyUI.

[brianhelba]

@property is only valid at the top level, not inside a layer.

@devongovett Can you provide a source for this?

I've looked at the spec CSS Properties and Values API Level 1 and at the MDN docs for @property. It is stated that the effects of @property are global in scope, but I'm not seeing anywhere which restricts the syntax to not be allowed within a @layer.

I'm happy to believe you, but I intend to file a bug with daisyUI and I'd like some stronger evidence to convince them.

For reference, support for @property in Lightning CSS was originally tracked by https://github.com/parcel-bundler/lightningcss/issues/85.

[saadeghi]

@property is only valid at the top level, not inside a layer.

@devongovett Is this a Parcel rule or CSS rule?
I couldn't find any resources that restrict the usage of @property in @layer.

Working example: https://codepen.io/saadeghi/pen/vEOOerP?editors=1100

[Knappster]

Just started using LightningCSS, is it possible to suppress these warnings? The locality of my @property declarations is next to the component/s that use them and those component files are imported into layers.

[thecrypticace]

@property is only valid at the top level, not inside a layer.

There are multiple web platform tests for @property inside @layer (see below). Generally @property is affected by cascade layers (and it respects layer order) and some runtime behavior such as media queries. They're defined such that the last winning definition determined at runtime applies globally to the stylesheet.

• https://wpt.fyi/results/css/css-cascade/layer-cssom-order-reverse-at-property.html?label=experimental&label=master&aligned
• https://wpt.fyi/results/css/css-cascade/layer-property-override.html?label=experimental&label=master&aligned
• https://github.com/web-platform-tests/wpt/blob/b6da24dc0c1606ddec8cacd1e4bcd9a4253c318e/css/css-cascade/layer-property-override.html#L48-L73

cc @devongovett

[saadeghi]

Can we re-open this issue please?
@property in @layer is not invalid and it works on browsers.
https://codepen.io/saadeghi/pen/vEOOerP?editors=1100

@layer mylayer {
  @property --primary-color {
    syntax: "<color>";
    inherits: true;
    initial-value: lightgreen;
  }

  .button {
    background-color: var(--primary-color);
  }
}

[rtritto]

@devongovett Any update or answer?

[geshov]

Until there is an official solution to this problem, I am temporarily solving it this way:

@import "tailwindcss";

@plugin "daisyui" {
  /* ... */
  exclude: properties;
}

[devongovett]

If someone wants to work on this I think the following changes would be needed (plus tests):

• Move this from TopLevelRuleParser to NestedRuleParser
• Check if @property can be nested inside style rules (e.g. .foo { @property { ... } }). I think probably not but I'm not sure. If so, then change this line