[bug] Syntax error for container query var evaluation
Author: jackholdenCreated Sep 3, 2026Updated Sep 3, 2026
Summary
Currently when I attempt to use valid CSS, LightingCSS reports a SyntaxError.
This is now supported in Firefox as shown below. It was resolved back in 2024.
- https://wpt.fyi/results/css/css-conditional/container-queries/var-evaluation.html?label=master&label=experimental&aligned&q=var-evaluation
- https://github.com/w3c/csswg-drafts/issues/8088
I am using LightningCSS v133.0.0.
I get the following error due to the following CSS:
[1] Error transforming src/index.css: [SyntaxError: Unexpected token Function("var")] {
[1] fileName: '...',
[1] loc: { line: 37, column: 25 },
[1] data: { ParserError: { type: 'UnexpectedToken' } }@container (width >= var(--my-var) {
.card {
inline-size: var(--min-column-size);
flex: 0 0 var(--min-column-size);
}
}I am happy to create a PR for this.
Source: parcel-bundler/lightningcss