---
title: "rawStyles"
description: "Hands a `<style>` element's CSS to Remix as markup rather than as text, so the stylesheet survives being rendered."
url: "https://pitlane.tools/package/content/satteri/function/rawStyles"
---

# rawStyles

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

```ts
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 &gt; 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`