Stoop

CSS-in-JS library with type inference, theme creation, and variants support.

Warning: Not Production Ready Stoop is currently in active development and is not recommended for production use. The API may change, and there may be bugs or missing features. Use at your own risk.

About

Stoop is a CSS-in-JS library—a TypeScript-first approach to styling that provides type-safe CSS objects with full type inference. Similar to Stitches and Vanilla Extract, Stoop focuses on type safety and developer experience.

Stoop is a minimalist implementation of Stitches' high-level features. It provides a similar API for styled, css, and variants, but omits several Stitches features.

What's missing compared to Stitches:

• Compound variants
• Build-time CSS extraction (runtime-only)
• Advanced utility functions (basic support only)
• Additional Stitches APIs

If you need these features, consider Vanilla Extract or styled-components.

Features

• Type-safe theming with TypeScript inference
• CSS variables for theme tokens
• Variant system for component variations
• Utility functions for custom CSS transformations
• Multiple themes with createTheme()
• SSR support via getCssText()
• React 19+ required (Next.js Pages & App Router supported)

Installation

npm install stoop
# or
bun add stoop
# or
yarn add stoop

Quick Start

import { createStoop } from "stoop";

const { styled, css, createTheme, globalCss, keyframes, ThemeContext } = createStoop({
  theme: {
    colors: {
      primary: "#0070f3",
      background: "#ffffff",
      text: "#000000",
    },
    space: {
      small: "8px",
      medium: "16px",
      large: "24px",
    },
  },
});

const Button = styled("button", {
  padding: "$medium",
  backgroundColor: "$primary",
}, {
  variant: {
    primary: { backgroundColor: "$primary" },
    secondary: { backgroundColor: "$secondary" },
  },
});

<Button variant="primary">Click me</Button>

See GUIDE.md for complete setup instructions.

Documentation

• GUIDE.md - Step-by-step setup and usage guide
• API.md - Complete API reference
• ARCHITECTURE.md - Internal implementation details

API Overview

createStoop(config)

Creates a Stoop instance. Returns: styled, css, createTheme, globalCss, keyframes, getCssText, warmCache, ThemeContext, theme, config.

See API.md for complete API documentation.

Theme Tokens

Use $ prefix for theme tokens. Shorthand $token searches all scales; explicit $scale.token specifies the scale.

{
  color: "$primary",           // Shorthand (preferred)
  padding: "$medium",          // Property-aware resolution
  fontSize: "$fontSizes.small", // Explicit scale
}

Tokens resolve to CSS variables (var(--colors-primary)), enabling instant theme switching without recompiling CSS.

Variants

Variants create component variations via props:

const Button = styled("button", {}, {
  variant: {
    primary: { backgroundColor: "$primary" },
    secondary: { backgroundColor: "$secondary" },
  },
  size: {
    small: { padding: "$small" },
    large: { padding: "$large" },
  },
});

<Button variant="primary" size="small" />

Migration from Stitches

Stoop provides a similar API for the features it implements. Key differences:

• CSS variables for theme tokens
• Simple theme system with createTheme()
• Full TypeScript inference

See GUIDE.md for migration examples.

Related Projects

CSS-in-JS Libraries:

• Stitches - Original library Stoop is based on (no longer maintained)
• Stitches - CSS-in-JS library (original inspiration)
• Vanilla Extract - Zero-runtime CSS-in-JS
• styled-components - CSS-in-JS library
• Emotion - CSS-in-JS library
• Goober - Lightweight CSS-in-JS library
• JSS - Framework-agnostic CSS-in-JS
• Compiled - Compile-time CSS-in-JS
• Stylex - Facebook's build-time CSS-in-JS
• Panda CSS - CSS-in-JS with build-time generation
• Linaria - Zero-runtime CSS-in-JS
• Treat - Themeable CSS-in-JS

Variant Systems:

• CVA - Class Variance Authority for component variants
• clsx - Tiny utility for constructing className strings

Utility-First:

• Tailwind CSS - Utility-first CSS framework
• UnoCSS - Instant atomic CSS engine

Component Libraries:

• Radix UI - Unstyled, accessible component primitives
• Chakra UI - Component library built on Emotion
• Mantine - React components library with Emotion

Development

bun install
bun run dev
bun run build
bun run lint

Contributing

Contributions welcome. See ARCHITECTURE.md for implementation details.

License

MIT © Jackson Dolman