Stoop
GitHub
Home
/
API Reference
/

getCssText

Get all generated CSS text for server-side rendering

Usage

import { getCssText } from "./theme";

// Get all generated CSS (no parameters needed)
const cssText = getCssText();

Returns

Returns a string containing all generated CSS including:

Note: When themes config is provided, getCssText() includes CSS variables for all themes using attribute selectors (e.g., [data-theme="light"], [data-theme="dark"]), enabling instant theme switching without recompiling CSS.

Global CSS: Global CSS from globalCss config is included because it injects during createStoop() execution (at module level) and stores in the injection cache. This happens before React renders, so styles are available for SSR.

Next.js App Router

In your root layout (app/layout.tsx):

import { type ReactNode } from "react";
import { getCssText } from "./theme";

export default function RootLayout({ children }: { children: ReactNode }) {
  return (
    <html>
      <head>
        <style
          id="stoop-styles"
          dangerouslySetInnerHTML={{ __html: getCssText() }}
        />
      </head>
      <body>{children}</body>
    </html>
  );
}

Next.js Pages Router

In your pages/_document.tsx:

import { Html, Head, Main, NextScript } from "next/document";
import { getCssText } from "../theme";

export default function Document() {
  return (
    <Html>
      <Head>
        <style
          id="stoop-styles"
          dangerouslySetInnerHTML={{ __html: getCssText() }}
        />
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}

Notes