Diagnostics

LUM1006: Raw CSS in a .tsx file

A .tsx file contains a raw-CSS <style> block.

Severity: error · Category: file format (1xxx)

Reported by: the scanner (compiler, lumiose check).

#What it means

Raw CSS blocks are the one syntax addition of .stsx files. In a .tsx file, TypeScript and other tools would read the CSS as JSX, so it is rejected (the JSX types also omit style from intrinsic elements in .tsx).

#Example

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

#How to fix it

Rename the file to .stsx and update its imports (./Card.stsx).