recast.styles()

Create reusable style definitions that can be applied to any React component.

Syntax

recast.styles(styleConfig)

styleConfig · RecastStyles · required

Configuration object defining the styles, variants, modifiers, and defaults

Returns: RecastStylesObject - A style object that can be applied to components or used to extract class names

Configuration Properties

base · string | string[] | object

Foundation classes applied to all instances.

String Base (Simple)

const styles = recast.styles({
  base: "px-4 py-2 rounded font-medium"
})

variants · object

Mutually exclusive styling options.

variants: {
  variant: {
    primary: "bg-blue-500 text-white",
    secondary: "bg-gray-200 text-gray-900"
  },
  size: {
    sm: "px-3 py-1 text-sm",
    md: "px-4 py-2",
    lg: "px-6 py-3 text-lg"
  }
}

modifiers · object

Boolean flags that can be combined.

modifiers: {
  disabled: "opacity-50 cursor-not-allowed",
  loading: "cursor-wait",
  fullWidth: "w-full"
}

defaults · object

Default values to reduce prop repetition.

defaults: {
  variants: { variant: "primary", size: "md" }
}

conditionals · array

Apply styles only when specific conditions are met.

conditionals: [
  {
    variants: { variant: "primary" },
    modifiers: ["loading"],
    className: "bg-blue-400"
  }
]

Return Value

The style object provides two main capabilities:

Component Application

Apply styles to any React component:

Apply to Component

const Button = buttonStyles(ButtonPrimitive)
const LinkButton = buttonStyles('a')

Style Extraction

Extract computed class names for advanced use cases:

Extract Classes

const classes = buttonStyles.extract({ 
  variant: "primary", 
  size: "lg" 
})
// Returns: "px-4 py-2 rounded ... bg-blue-500 text-white ... px-6 py-3 text-lg"

TypeScript Integration

Recast automatically generates TypeScript types:

TypeScript Integration

const buttonStyles = recast.styles({
  variants: {
    variant: { primary: "...", secondary: "..." },
    size: { sm: "...", md: "...", lg: "..." }
  },
  modifiers: {
    disabled: "...",
    loading: "..."
  }
})

const Button = buttonStyles(ButtonPrimitive)

// TypeScript automatically infers:
type ButtonProps = {
  variant?: "primary" | "secondary"
  size?: "sm" | "md" | "lg"
  disabled?: boolean
  loading?: boolean
  className?: string
  // + all ButtonPrimitive props
}

Performance

Automatic Memoization

All style computations are cached for fast repeated access

LRU Cache

Prevents memory leaks with configurable cache size limits

Performance Tip: Create style objects outside of components to avoid recreation on every render.

Best Practices

Semantic Naming

Use meaningful names like variant and size rather than generic names

Set Defaults

Define sensible defaults to reduce prop repetition

Single Responsibility

Keep each style object focused on one concern

Compose Ready

Design styles to work well with recast.compose()