Design System Summary Loader

Build a helper that ingests a CSS entry file defining a Tailwind-style design system, resolves any imported stylesheets from a project base directory, and returns a normalized token summary plus the list of files that were read. Use the dependency's design system loading utility rather than manually parsing CSS.

Capabilities

Load entry CSS

• Given an entry CSS path and optional base directory (defaulting to the current working directory), it loads the design system and returns a summary containing tokens and the ordered list of files that were processed, starting with the entry file. @test

Resolve imports

• When the entry CSS uses a relative @import to pull in another stylesheet, tokens from both files appear in the summary and the files list contains each resolved path once in load order. @test

Token normalization

• Custom properties following the pattern --<group>.<name> (e.g., --color.primary: #0ea5e9;) become nested keys in the summary (e.g., tokens.color.primary === "#0ea5e9"), preserving the raw string values. @test

Override precedence

• If the same token is declared multiple times across the entry and imported stylesheets, the value from the last encountered declaration in load order wins in the summary. @test

Implementation

@generates

API

export interface DesignSystemSummary {
  tokens: Record<string, any>;
  files: string[];
}

export interface LoadOptions {
  baseDir?: string;
}

export async function loadDesignSystemSummary(
  entryCssPath: string,
  options?: LoadOptions
): Promise<DesignSystemSummary>;

Dependencies { .dependencies }

@tailwindcss/node { .dependency }

Loads design systems from CSS with Node-aware resolution.