Skip to content

@property rules omit the required initial-value, breaking lightningcss minification #163

Description

@vbudovski

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)

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions