LUM3014: CSS syntax error

Severity: error · Category: styles (3xxx)

Reported by: the CSS compiler (lumiose_css), in @lumiose/vite, lumiose check and the language server.

#What it means

Blocks are plain CSS, compiled by Lightning CSS. A syntax error it cannot recover from (an unbalanced brace, an unterminated string, an invalid at-rule prelude) stops the block from compiling. The message is Lightning CSS's own and points at the CSS.

A { without its } is reported too, at the brace, although Lightning CSS closes the block at the end of the <style>: the rules after it end up nested inside the unclosed rule, which is rarely what was meant (.a { color: red; .b { top: 0 } styles .a .b).

Blocks nested more than 64 levels deep, or parentheses (functions, :is(…), media conditions) more than 16, are an error too: the block is left out of the CSS. The parser recurses once per level, and nested math functions take time exponential in their depth.

#Example

export function Card() {
  return (
    <div class="card">
      <style>
        .card { padding: 1rem;
      </style>
    </div>
  );
}

#How to fix it

Fix the CSS at the reported position. Sass syntax ($variables with values, @mixin, @include) is not CSS; $name only reads JS constants. CSS nesting is supported.

#Related

• Styles