tessl/npm-stitches--react

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

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

Stitches React

Name: tessl/npm-stitches--react
Author: tessl

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';
}

Workspace: tessl
Visibility: Public
Created: 7 months ago
Last updated: 2 months ago
Describes: pkg:npm/@stitches/react@1.2.x
Publish Source: CLI
Badge