Summary
A <style> element inside a component is extracted from the component's source before expressions run, so any interpolation in it is lost and the page receives an empty <style></style>.
Reproduction
<!-- components/StyleProbe.stx -->
<script server>
export const dynamicCss = '.probe { color: rebeccapurple }'
</script>
<div class="wrap">
<style>{!! dynamicCss !!}</style>
<p class="probe">hi</p>
</div>Rendering <StyleProbe /> gives:
<div class="wrap">
<p class="probe">hi</p>
</div>
<style></style>The rule never reaches the page, and nothing reports it.
Evidence
packages/stx/src/utils.ts:1456:
const styleMatch = componentContent.match(/<style\b([^>]*)>([\s\S]*?)<\/style>/i)The style element is lifted out of the raw component source by regex and re-emitted separately. Interpolation runs on the template, which no longer contains it, so is never evaluated — and the extracted copy still holds the literal marker, which is then dropped.
Impact
Any component whose styling depends on server data. Concretely: <CodeBlock> gets a full theme stylesheet back from ts-syntax-highlighter (2,777 bytes of token colours) and cannot ship it, so highlighted code renders correctly marked up and entirely monochrome. The CSS is exported for consumers to include by hand instead (26ab279).
Ask
- Run expression processing over the component's
<style>content before or during extraction, soandresolve there as they do everywhere else. - Failing that, reject a
<style>block containing interpolation with a real error, so it fails loudly instead of shipping empty.