"border-style: solid is a parse error that kills the whole stylesheet"
▸ SYMPTOM
A panel renders with ZERO size -- completely invisible, not just unbordered. No error in dotnet build or compile_status. The error only shows in the in-editor console:
Error: solid is not valid with border-style [/ui/foo.razor.scss:NN]▸ CAUSE
border-style: solid is a parse error in s&box scss. There is no border-style property -- s&box UI borders are always solid. When the scss parser hits an invalid property, it aborts the entire stylesheet, not just the offending rule. The root panel then has no width/height rules and collapses to 0x0.
The symptom cascade: a card with border-width: 2px; border-style: solid; renders NOTHING -- no card, no text, no borders, no children. Removing just the border-style line restores the entire panel, and the borders render correctly from border-width + border-color alone.
This is invisible headlessly: dotnet build never compiles scss (the editor/runtime does), so compile_status is green while the panel is blank. Always check read_console for scss errors when a panel renders blank.
▸ FIX
Declare borders with border-width + border-color, never border-style:
// Wrong -- kills the whole stylesheet
.card {
border-width: 2px;
border-style: solid; // PARSE ERROR
border-color: #333;
}
// Correct -- works, borders render as solid automatically
.card {
border-width: 2px;
border-color: #333;
}
// Also correct -- shorthand
.card {
border: 2px solid #333; // shorthand IS supported
}Note: the border shorthand with solid works fine -- it's only the standalone border-style property that does not exist.
▸ WHY IT WORKS
s&box's scss implementation supports a subset of CSS properties. Borders are always solid-style, so the engine exposes border-width and border-color as the two configurable axes. The border shorthand parser handles the solid keyword internally. The standalone border-style property was never implemented, so the parser rejects it -- and its error recovery is aggressive (abort the stylesheet) rather than graceful (skip the rule).