Diagnostics
LUM3021: Unsafe $ constant value
A $ constant used in a style block holds text that could end its declaration, its rule or the <style> element.
Severity: error · Category: styles (3xxx)
Reported by: the CSS compiler (lumiose_css), in @lumiose/vite, lumiose check and the language server. An error; the constant is not inserted.
#What it means
$name inserts the constant's value as CSS text into one declaration value. A value with {, }
or ; outside a string, a /* comment, an unterminated string or a trailing \ would end the
declaration or the rule and add CSS of its own, outside the component's scope; a < anywhere
(even in a string) could end the <style> element in the page's HTML. When the value comes from
data, that is an injection; even from the project, it silently breaks the scoping. So such a value
is refused.
#Example
const accent = "red; } body { display: none";
export function Badge() {
return (
<span class="badge">
New
<style>
.badge { color: $accent; }
</style>
</span>
);
}