Compilation Errors
ECSS validates files at build time. Syntax errors and language-rule violations are printed to the terminal, and in Vite dev mode they are also shown as an overlay right in the browser. Each error reports its position in the [line:column] format.
Common situations
| Situation | How to fix |
|---|---|
| A block, element, or enum name does not start with a capital letter | Use PascalCase: Button, NavItem |
@param comes after CSS rules or other directives | Move all @param declarations to the start of the block body |
@element, @external, @if, or @debug at the top level of the file | These directives are only allowed inside @block |
@param inside @element or @external | Parameters are declared only in the block itself |
@elseif / @else without a preceding @if | A conditional chain starts with @if |
An @enum value without quotes (values: sm, md;) | Values are string literals: values: "sm", "md"; |
An unknown unit or uppercase letters in it (16PX) | Use an allowed lowercase unit — see Data Types |
An unknown @-rule | ECSS allows a fixed set of at-rules — see Directives |
A value not present in the @enum is compared in @if | Only compare against the declared enum values |
See also
- Directives — where each directive is allowed
- Data Types — units and values
- TypeScript Integration — types and editor hints