Related to #132, which covers invalid syntax type names. This report covers a separate defect — the missing required initial-value descriptor — that independently breaks the build.
Summary
dist/charts.css (v1.2.0, and current main) declares 9 @property rules that specify a non-universal syntax but no initial-value. Per the CSS Properties and Values spec, initial-value is required whenever syntax is anything other than the universal "*". A rule that omits it is invalid and must be dropped.
Lenient minifiers (esbuild) silently pass these through, but lightningcss rejects the stylesheet outright with Invalid @ rule body. This breaks any build that minifies CSS with lightningcss — e.g. Vite with css.transformer: 'lightningcss', and Astro 7+ (whose rolldown-vite pipeline defaults CSS minification to lightningcss).
Affected rules
All specify a typed syntax with inherits: true but no initial-value:
| Property |
syntax |
--color |
"<color>" |
--chart-bg-color |
"<color>" |
--data-position |
"<content-position>" — see note below |
--labels-align-block |
"<string>" |
--labels-align-inline |
"<string>" |
--start |
"<number>" |
--end |
"<number>" |
--size |
"<number>" |
--line-size |
"<number>" |
Note: --data-position additionally uses "<content-position>", which is not a valid @property syntax component name (this overlaps with #132).
Reproduction
import { transform } from 'lightningcss';
// Fails with: "Invalid @ rule body"
transform({
filename: 'test.css',
code: Buffer.from('@property --color { syntax: "<color>"; inherits: true; }'),
minify: true,
});
// Passes once initial-value is added:
transform({
filename: 'test.css',
code: Buffer.from('@property --color { syntax: "<color>"; initial-value: transparent; inherits: true; }'),
minify: true,
});
Or, end to end: import 'charts.css' in any Astro 7 project and run astro build — the build fails at the CSS minification step.
Suggested fix
Add a spec-valid initial-value to each rule (and correct --data-position's syntax to a supported type). Example:
@property --color {
syntax: "<color>";
initial-value: transparent;
inherits: true;
}
Environment
- charts.css 1.2.0 (also present on
main)
- lightningcss (any recent version; observed with 1.32.0)
Summary
dist/charts.css(v1.2.0, and currentmain) declares 9@propertyrules that specify a non-universalsyntaxbut noinitial-value. Per the CSS Properties and Values spec,initial-valueis required wheneversyntaxis anything other than the universal"*". A rule that omits it is invalid and must be dropped.Lenient minifiers (esbuild) silently pass these through, but lightningcss rejects the stylesheet outright with
Invalid @ rule body. This breaks any build that minifies CSS with lightningcss — e.g. Vite withcss.transformer: 'lightningcss', and Astro 7+ (whose rolldown-vite pipeline defaults CSS minification to lightningcss).Affected rules
All specify a typed
syntaxwithinherits: truebut noinitial-value:syntax--color"<color>"--chart-bg-color"<color>"--data-position"<content-position>"— see note below--labels-align-block"<string>"--labels-align-inline"<string>"--start"<number>"--end"<number>"--size"<number>"--line-size"<number>"Note:
--data-positionadditionally uses"<content-position>", which is not a valid@propertysyntax component name (this overlaps with #132).Reproduction
Or, end to end:
import 'charts.css'in any Astro 7 project and runastro build— the build fails at the CSS minification step.Suggested fix
Add a spec-valid
initial-valueto each rule (and correct--data-position'ssyntaxto a supported type). Example:Environment
main)