globalCss

Apply global styles using theme tokens

Configuration-based Usage (Recommended)

Define global CSS directly in your Stoop config for automatic injection. When themes config is provided, global CSS injects during createStoop() execution (at module level), before React renders.

// stoop.theme.ts
import { createStoop } from "stoop";

const stoop = createStoop({
  theme: {
    colors: { background: "#fff", text: "#000" },
    fonts: { body: "system-ui, sans-serif" },
  },
  themes: {
    light: { /* ... */ },
    dark: { /* ... */ },
  },
  globalCss: {
    "*": {
      boxSizing: "border-box",
      margin: 0,
      padding: 0,
    },
    body: {
      fontFamily: "$body",
      backgroundColor: "$background",
      color: "$text",
      lineHeight: 1.6,
    },
    a: {
      color: "$text",
      textDecoration: "none",
      "&:hover": {
        opacity: 0.8,
      },
    },
  },
});

// Global styles are injected during createStoop() execution
// Injection happens at module level, before React renders
// Provider enables this automatic injection (only when themes config provided)
export const { styled, css, Provider, useTheme, getCssText } = stoop;
Copy

Important Notes:

• Injection happens during createStoop() execution (module level), before React renders
• Requires themes config - without it, you must call globalCss() manually
• Provider enables this automatic injection but doesn't perform it

Manual Usage

Use the globalCss function directly for advanced cases:

import { globalCss } from "./theme";

const customGlobalStyles = globalCss({
  ".custom-class": {
    backgroundColor: "$background",
    color: "$text",
  },
});

// Call manually when needed
customGlobalStyles();
Copy

CSS Reset Example

CSS reset example:

const stoopConfig = {
  theme: { /* your theme */ },
  globalCss: {
    "*": {
      boxSizing: "border-box",
      margin: 0,
      padding: 0,
    },
    "*, *::before, *::after": {
      boxSizing: "inherit",
    },
    "[aria-hidden='true']": {
      display: "none",
    },
    "[hidden]": {
      display: "none",
    },
    body: {
      fontFamily: "$body",
      backgroundColor: "$background",
      color: "$text",
      lineHeight: 1.6,
      minHeight: "100vh",
    },
    // Typography
    "h1, h2, h3, h4, h5, h6": {
      fontFamily: "$heading",
      fontWeight: "$bold",
      lineHeight: 1.2,
      margin: 0,
    },
    // Links
    a: {
      color: "$text",
      textDecoration: "none",
      transition: "opacity 0.2s ease",
      "&:hover": {
        opacity: 0.8,
      },
    },
    // Form elements
    "button, input, select, textarea": {
      fontFamily: "inherit",
      fontSize: "inherit",
    },
  },
};
Copy

Best Practices

• Use globalCss config for theme-related global styles
• Use globalCss() function for dynamic or conditional styles
• Use theme tokens for colors, spacing, and typography
• Keep global styles minimal; prefer component-level styles
• Use nested selectors for pseudo-classes (&:hover, etc.)
• Global styles update when theme changes
• Styles inject before React renders (no layout shift)