rawStyles

import { rawStyles } from "@pitlane/content/satteri";

function rawStyles(): HastPluginEntry;

Hands a <style> element's CSS to Remix as markup rather than as text, so the stylesheet survives being rendered.

remix/component escapes &, <, and > in the text children of every element except <script>, and emits an innerHTML prop verbatim. <style> is a raw-text element, which is exactly the case where a browser does not undo that escaping: a rule written pre > code reaches the page as pre > code, matches nothing, and says nothing. Expressive Code is how most applications meet this, because it ships its theme as one such element.

innerHTML only accepts a value made by unsafeHTML(), so the element becomes JSX whose prop calls it, and the document gains the import that provides it. The CSS was already in the compiled document, so this trusts nothing the document did not already ship.

A workaround, not a design. The fix belongs in remix/component, which already special-cases <script> and should treat <style> the same way. <script> is deliberately not touched here: routing it through innerHTML would skip escapeScriptTextContent, which keeps a </script> inside a string from ending the element early.

Returns

HastPluginEntry