Cannot use @property rules within :root{} pseudo classes #61
Description
In 4.1.14, tailwind added: Show Lightning CSS warnings (if any) when optimizing/minifying (#18918)
Turns out, nesting @Property within :root{} creates invalid css.
admin:build: Found 15 warnings while optimizing generated CSS:
admin:build:
admin:build: Issue #1:
admin:build: │ }
admin:build: │ :root {
admin:build: │ @property --tw-animation-delay {
admin:build: ┆ ^-- Unknown at rule: @property
admin:build: ┆
admin:build: │ syntax: '*';
admin:build: │ inherits: false;
One can also check here LightningCSS Playground
Solution
@Property is a top-level at-rule
/* This doesn't work */
:root {
@property --my-color {
syntax: '<color>';
inherits: false;
initial-value: #c0ffee;
}
}
/* This is correct */
@property --my-color {
syntax: '<color>';
inherits: false;
initial-value: #c0ffee;
}
:root {
--my-color: #3498db; /* Set the value here */
}