TypeScript Type Generation

What It Does

Generates .d.ts files from resolved token data so you get autocomplete and type checking when importing tokens in your application.

Usage

Resolve tokens first, then pass them to generateTypes:

import { resolveTokens, generateTypes, build } from 'dispersa'

const tokens = await resolveTokens('./tokens.resolver.json', { theme: 'light' })
await generateTypes(tokens, './dist/tokens.d.ts', {
  moduleName: 'design-tokens',
})

The Generated .d.ts

The generated declaration file enables autocomplete in editors when importing tokens. It declares the module and exports token paths as typed properties.

Options

Option	Description
moduleName	The module name for the declaration (for declare module "...")

Integrating into the Build Workflow

1. Resolve tokens for the permutation(s) you need
2. Generate types from the resolved result
3. Build outputs (css, json, etc.) as usual

import { resolveTokens, generateTypes, build } from 'dispersa'

// Resolve first
const tokens = await resolveTokens('./tokens.resolver.json', { theme: 'light' })

// Generate types
await generateTypes(tokens, './dist/tokens.d.ts', { moduleName: 'design-tokens' })

// Build outputs
await build({
  resolver: './tokens.resolver.json',
  buildPath: './dist',
  outputs: [
    /* ... */
  ],
})

Resolved tokens, not raw

Type generation uses the resolved tokens, not the raw token files. Run it after resolution to capture all aliases and modifier values.

API Reference — Dispersa Class Full API documentation for the Dispersa class and its methods.