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

    Fields

    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions