Technical comparison between Stitches and Stoop CSS-in-JS libraries

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

Stitches: Theme tokens resolve to runtime values injected via JavaScript.

Stoop: Theme tokens resolve to CSS variables (var(--colors-primary)), enabling instant theme switching without recompiling CSS.

Stitches: Requires manual theme management.

Stoop: Built-in multi-theme support via Provider component with automatic CSS variable switching.

Stitches: Supports build-time CSS extraction for zero-runtime CSS.

Stoop: Runtime-only CSS generation. If you need build-time extraction, consider Vanilla Extract or Panda CSS.

Stitches: Supports compound variants (combining multiple variant conditions).

Stoop: Does not support compound variants. Variants work independently.

Stitches: Advanced utility function system with extensive built-in utilities.

Stoop: Basic utility function support. You can create custom utilities, but fewer built-in utilities are provided.

The core APIs are very similar:

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

When migrating from Stitches to Stoop:

1. Theme tokens: Work the same way ($medium, $primary, etc.)
2. Component API: Mostly identical
3. CSS variables: Stoop uses CSS variables instead of runtime injection
4. Multi-theme: Requires Provider wrapper in Stoop
5. Compound variants: Need to be refactored to use separate variant props
6. Utilities: May need to recreate custom utilities

See the Migration Guide for detailed migration steps.

• You want a Stitches-like API with CSS variable-based theming
• You need built-in multi-theme support
• You prefer runtime CSS generation
• You don't need compound variants
• You want a simpler, more focused API

• You need compound variants
• You want build-time CSS extraction
• You need advanced utility functions
• You prefer the original Stitches implementation

Stitches: No longer actively maintained (as of 2024).

Stoop: Currently in active development (beta).

Other CSS-in-JS alternatives to consider:

• Vanilla Extract - Zero-runtime CSS-in-JS
• Panda CSS - CSS-in-JS with build-time generation
• styled-components - Runtime CSS-in-JS
• Emotion - CSS-in-JS library
• Goober - Lightweight CSS-in-JS

• Migration Guide - Step-by-step migration from Stitches
• Installation - Get started with Stoop
• Theme Setup - Configure your theme
• API Reference - Complete API documentation