or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

animations.mdconfiguration.mdcss-classes.mdglobal-styles.mdindex.mdstyled-components.mdtheme-management.md
tile.json

tessl/npm-stitches--react

React implementation of Stitches CSS-in-JS library with type-safe styling and variants

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@stitches/react@1.2.x

To install, run

npx @tessl/cli install tessl/npm-stitches--react@1.2.0

index.mddocs/

Stitches React

Stitches React is a CSS-in-JS library that combines performance with developer experience, offering type-safe styling for React components with near-zero runtime overhead. It provides a styled API similar to styled-components but with better performance characteristics, compile-time optimizations, and advanced features like automatic vendor prefixing, responsive design utilities, and color manipulation functions.

Package Information

  • Package Name: @stitches/react
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install @stitches/react

Core Imports

import { 
  styled, 
  css, 
  globalCss, 
  keyframes, 
  createTheme, 
  createStitches, 
  defaultThemeMap,
  getCssText,
  reset
} from "@stitches/react";

For CommonJS:

const { 
  styled, 
  css, 
  globalCss, 
  keyframes, 
  createTheme, 
  createStitches, 
  defaultThemeMap,
  getCssText,
  reset
} = require("@stitches/react");

Basic Usage

import { styled, css } from "@stitches/react";

// Create styled components
const Button = styled('button', {
  backgroundColor: 'blue',
  color: 'white',
  padding: '12px 16px',
  border: 'none',
  borderRadius: '4px',
  
  variants: {
    size: {
      small: { padding: '8px 12px' },
      large: { padding: '16px 24px' }
    },
    color: {
      primary: { backgroundColor: 'blue' },
      secondary: { backgroundColor: 'gray' }
    }
  }
});

// Use the component
function App() {
  return (
    <Button size="large" color="primary">
      Click me
    </Button>
  );
}

// Create CSS classes
const buttonClass = css({
  padding: '10px',
  border: '1px solid black'
});

// Server-side rendering support
function getServerSideStyles() {
  return getCssText();
}

// Reset styles (useful for testing)
function clearStyles() {
  reset();
}

Architecture

Stitches React is built around several key components:

  • Configuration System: createStitches() function for setting up themes, media queries, and utilities
  • Styled Components: React components with type-safe styling and variant support
  • CSS Generation: Atomic CSS class generation with efficient caching and deduplication
  • Theme System: Design token management with type-safe theme references
  • Responsive Design: Built-in media query support with breakpoint configuration
  • Server-Side Rendering: Full SSR support with hydration safety

Capabilities

Styled Components

Create React components with CSS-in-JS styling, variants, and responsive design support.

function styled<
  Type extends keyof JSX.IntrinsicElements | React.ComponentType<any>,
  Composers extends Array<string | React.ComponentType<any> | Function | { [name: string]: unknown }>
>(
  type: Type,
  ...composers: Composers
): StyledComponent<Type, StyledComponentProps<Composers>, {}, CSS>;

interface StyledComponent<Type, Props = {}, Media = {}, CSS = {}> 
  extends React.ForwardRefExoticComponent<
    ComponentProps<Type> & TransformProps<Props, Media> & { css?: CSS }
  > {
  // Standard component call
  (props: ComponentProps<Type> & TransformProps<Props, Media> & { css?: CSS }): React.ReactElement | null;
  
  // Polymorphic 'as' prop call
  <As extends keyof JSX.IntrinsicElements | React.ComponentType<any>>(
    props: ComponentProps<As> & TransformProps<Props, Media> & { as: As; css?: CSS }
  ): React.ReactElement | null;
  
  className: string;
  selector: string;
  
  [$$StyledComponentType]: Type;
  [$$StyledComponentProps]: Props;
  [$$StyledComponentMedia]: Media;
}

type StyledComponentProps<Composers extends readonly unknown[]> = 
  Composers extends readonly [infer First, ...infer Rest]
    ? First extends { variants?: infer V }
      ? V & StyledComponentProps<Rest>
      : StyledComponentProps<Rest>
    : {};

Styled Components

CSS Class Generation

Generate CSS classes with variants and compound variants for maximum flexibility.

function css<
  Composers extends Array<string | React.ComponentType<any> | Function | { [name: string]: unknown }>
>(
  ...composers: Composers
): CssComponent<'span', StyledComponentProps<Composers>, {}, CSS>;

interface CssComponent<Type = 'span', Props = {}, Media = {}, CSS = {}> {
  (props?: TransformProps<Props, Media> & { css?: CSS } & { [name: string]: any }): 
    string & { className: string; selector: string; props: any };
  
  className: string;
  selector: string;
  
  [$$StyledComponentType]: Type;
  [$$StyledComponentProps]: Props;
  [$$StyledComponentMedia]: Media;
}

CSS Classes

Theme Management

Create and manage design tokens with type-safe theme references and dynamic theme switching.

function createTheme<Theme extends ThemeObject>(
  theme: Theme
): string & { className: string; selector: string } & ThemeTokens<Theme>;

function createTheme<Theme extends ThemeObject>(
  name: string, 
  theme: Theme
): string & { className: string; selector: string } & ThemeTokens<Theme>;

interface ThemeObject {
  colors?: { [token: string]: string | number | boolean };
  space?: { [token: string]: string | number | boolean };
  fontSizes?: { [token: string]: string | number | boolean };
  fonts?: { [token: string]: string | number | boolean };
  fontWeights?: { [token: string]: string | number | boolean };
  lineHeights?: { [token: string]: string | number | boolean };
  letterSpacings?: { [token: string]: string | number | boolean };
  sizes?: { [token: string]: string | number | boolean };
  borderWidths?: { [token: string]: string | number | boolean };
  borderStyles?: { [token: string]: string | number | boolean };
  radii?: { [token: string]: string | number | boolean };
  shadows?: { [token: string]: string | number | boolean };
  zIndices?: { [token: string]: string | number | boolean };
  transitions?: { [token: string]: string | number | boolean };
  [scale: string]: { [token: string]: string | number | boolean };
}

type ThemeTokens<Theme> = {
  [Scale in keyof Theme]: {
    [Token in keyof Theme[Scale]]: Token extends string | number
      ? string & { token: Token; scale: Scale }
      : never;
  };
};

Theme Management

Global Styles

Apply global CSS styles including imports, font faces, and keyframes.

function globalCss(...styles: GlobalStyleObject[]): () => string;

interface GlobalStyleObject {
  '@import'?: string | string[];
  '@font-face'?: FontFaceRule | FontFaceRule[];
  [selector: string]: any;
}

Global Styles

Animation Support

Create CSS animations with keyframes and integrate with theme tokens.

function keyframes(styles: KeyframesObject): KeyframesResult;

interface KeyframesObject {
  [percentage: string]: StyleObject;
}

interface KeyframesResult {
  (): string;
  name: string;
}

Animations

Configuration

Set up Stitches with custom themes, media queries, utilities, and type mappings.

function createStitches<Config extends StitchesConfig>(
  config?: Config
): StitchesInstance<Config>;

interface StitchesConfig {
  prefix?: string;
  media?: { [name: string]: string };
  theme?: ThemeObject;
  themeMap?: { [property: string]: keyof ThemeObject };
  utils?: { [name: string]: (value: any) => StyleObject };
}

Configuration

Server-Side Rendering Support

Extract CSS for server-side rendering and hydration safety.

function getCssText(): string;

Style Sheet Management

Reset generated styles and clear cache.

function reset(): void;

Type System

// Component prop extraction
type ComponentProps<Component> = Component extends ((...args: any[]) => any) 
  ? Parameters<Component>[0] 
  : never;

// Variant prop extraction
type VariantProps<Component extends { [key: string]: any }> = 
  Component extends { [$$StyledComponentProps]: infer Props, [$$StyledComponentMedia]: infer Media }
    ? TransformProps<Props, Media>
    : never;

// CSS property values with theme support
type PropertyValue<Property extends keyof CSSProperties, Config = null> = 
  Config extends null 
    ? { readonly [K in $$PropertyValue]: Property }
    : CSS<Config['media'], Config['theme'], Config['themeMap'], Config['utils']>[Property];

// Theme scale values
type ScaleValue<Scale, Config = null> = 
  Config extends null
    ? { readonly [K in $$ScaleValue]: Scale }
    : Scale extends keyof Config['theme']
      ? `$${string & keyof Config['theme'][Scale]}`
      : never;

// Styled component symbols (internal)
declare const $$StyledComponentType: unique symbol;
declare const $$StyledComponentProps: unique symbol;
declare const $$StyledComponentMedia: unique symbol;

// CSS utility symbols
declare const $$PropertyValue: unique symbol;
declare const $$ScaleValue: unique symbol;
declare const $$ThemeValue: unique symbol;

// Transform props with responsive variants
type TransformProps<Props, Media> = {
  [K in keyof Props]: (
    | Props[K]
    | (
      & { [KMedia in `@${keyof Media | 'initial'}`]?: Props[K] }
      & { [KMedia in string]: Props[K] }
    )
  );
};

// CSS properties interface with full variant support
interface CSS<Media = {}, Theme = {}, ThemeMap = {}, Utils = {}> {
  [property: string]: any;
  variants?: {
    [name: string]: {
      [value: string | number]: CSS<Media, Theme, ThemeMap, Utils>;
    };
  };
  compoundVariants?: Array<{
    [variant: string]: any;
    css: CSS<Media, Theme, ThemeMap, Utils>;
  }>;
  defaultVariants?: {
    [variant: string]: any;
  };
}

// Default theme map
declare const defaultThemeMap: DefaultThemeMap;

interface DefaultThemeMap {
  // Space scale mappings
  gap: 'space';
  gridGap: 'space';
  columnGap: 'space';
  gridColumnGap: 'space';
  rowGap: 'space';
  gridRowGap: 'space';
  margin: 'space';
  marginTop: 'space';
  marginRight: 'space';
  marginBottom: 'space';
  marginLeft: 'space';
  padding: 'space';
  paddingTop: 'space';
  paddingRight: 'space';
  paddingBottom: 'space';
  paddingLeft: 'space';
  top: 'space';
  right: 'space';
  bottom: 'space';
  left: 'space';
  
  // Color scale mappings
  color: 'colors';
  backgroundColor: 'colors';
  borderColor: 'colors';
  
  // Size scale mappings
  width: 'sizes';
  height: 'sizes';
  minWidth: 'sizes';
  minHeight: 'sizes';
  maxWidth: 'sizes';
  maxHeight: 'sizes';
  
  // Typography scale mappings
  fontSize: 'fontSizes';
  fontFamily: 'fonts';
  fontWeight: 'fontWeights';
  lineHeight: 'lineHeights';
  letterSpacing: 'letterSpacings';
  
  // Border scale mappings
  borderWidth: 'borderWidths';
  borderRadius: 'radii';
  
  // Other scale mappings
  boxShadow: 'shadows';
  textShadow: 'shadows';
  zIndex: 'zIndices';
  transition: 'transitions';
}