Dependencies for the Export Module in Google Labs Design.md

The export module depends on the citty CLI framework, internal linter handlers located in packages/cli/src/linter/, and runtime libraries including unified, yaml, and zod to transform DESIGN.md files into CSS, JSON, or Tailwind formats.

The export command in the @google/design.md CLI toolchain converts Markdown-based design tokens into actionable code for various platforms. Understanding the dependencies for the export module is essential for troubleshooting pipeline failures or extending the tool with custom emitters. This guide maps every internal import and external package required to execute the export functionality.

Core Runtime Dependencies

The export functionality is implemented in packages/cli/src/commands/export.ts and relies on dependencies declared in packages/cli/package.json. These packages provide the parsing, validation, and serialization capabilities used by the export pipeline:

• citty (^0.1.6): Powers the command-line interface using defineCommand to register the export command and validate the format argument against the closed FORMATS enum.
• unified (^11.0.5): Orchestrates the Markdown processing pipeline alongside remark-parse (^11.0.0), remark-stringify (^11.0.0), and remark-mdx (^3.1.1).
• yaml (^2.7.1): Parses YAML frontmatter within DESIGN.md files.
• zod (^3.24.0): Validates data structures against schemas during the linting phase.
• unist-util-visit (^5.1.0): Traverses the Markdown AST during the linting process.
• remark-frontmatter (^5.0.0): Handles frontmatter extraction from DESIGN.md files.

Internal Module Dependency Graph

Beyond npm packages, the export command imports several internal modules that form the processing pipeline.

CLI Framework and Input Utilities

The command integrates with the CLI framework through citty and utility functions defined in packages/cli/src/utils.ts:

• readInput: Reads DESIGN.md source from a file path or stdin.
• FileReadError: Error class thrown when input reading fails.

Linter API and Emitter Handlers

The core export logic resides in packages/cli/src/linter/index.js, which re-exports the primary API and all emitter implementations:

• lint: The main entry point that parses content and returns a LintReport containing a DesignSystemState.
• TailwindEmitterHandler: Located in packages/cli/src/linter/tailwind/handler.ts, handles Tailwind v3 JSON exports.
• TailwindV4EmitterHandler: Located in packages/cli/src/linter/tailwind/v4/handler.ts, manages Tailwind v4 CSS @theme exports.
• DtcgEmitterHandler: Located in packages/cli/src/linter/dtcg/handler.ts, emits W3C Design Tokens (DTCG) JSON.
• CssVarsEmitterHandler: Located in packages/cli/src/linter/css-vars/handler.ts, generates CSS custom property declarations.

Format-Specific Serializers

Certain handlers delegate to specialized serializers for final output generation:

• serializeTailwindV4: Located in packages/cli/src/linter/tailwind/v4/serialize.ts, converts internal theme data to CSS @theme syntax.
• serializeCssVars: Located in packages/cli/src/linter/css-vars/serialize.ts, transforms declaration maps into CSS strings with optional prefixes.

Export Pipeline Execution Flow

The dependencies work together in a six-stage pipeline defined in packages/cli/src/commands/export.ts:

1. Argument parsing: citty creates the command and validates the format argument.
2. Input loading: readInput ingests the DESIGN.md source from either a file path or stdin.
3. Linting: lint(content) builds a LintReport containing a fully parsed DesignSystemState.
4. Export selection: Based on args.format, the corresponding emitter handler (e.g., TailwindV4EmitterHandler or CssVarsEmitterHandler) is instantiated.
5. Result handling: The handler returns a success flag and either an error object or exported data (result.data).
6. Serialization: For Tailwind v4 and CSS Vars, the respective serializer converts internal data structures to the final text format written to stdout.

Usage Examples

These commands demonstrate how the dependencies process DESIGN.md files:

# Export to Tailwind v4 CSS @theme

design.md export ./design/DESIGN.md --format css-tailwind > tailwind-theme.css

# Export to Tailwind v3 JSON using stdin

design.md export --format json-tailwind < DESIGN.md > tailwind-theme.json

# Export to W3C Design Tokens (DTCG) JSON

design.md export ./DESIGN.md --format dtcg > dtcg.json

# Export CSS custom properties with a prefix

design.md export ./DESIGN.md --format css-vars --prefix --my-prefix- > vars.css

Each command follows the same dependency chain: the CLI parses arguments, readInput loads the source, the linter builds the state, the selected emitter handler processes the format, and the serializer produces the final output.

Summary

• The export module in packages/cli/src/commands/export.ts relies on citty for CLI parsing and internal linter modules for format conversion.
• Runtime dependencies from packages/cli/package.json include unified, yaml, zod, and remark-related packages for Markdown processing.
• Emitter handlers in packages/cli/src/linter/ provide specific export formats: Tailwind v3/v4, DTCG, and CSS Variables.
• Serializer functions like serializeTailwindV4 and serializeCssVars handle final text generation for complex formats.
• The pipeline executes through six distinct stages from argument parsing to final serialization.

Frequently Asked Questions

What external libraries are required to run the export module?

The export module requires citty for command definition, unified and remark packages for Markdown parsing, yaml for frontmatter processing, and zod for schema validation. These are declared as dependencies in packages/cli/package.json and are installed automatically with the @google/design.md CLI package.

How does the export module handle different output formats?

The module uses a handler-based architecture where args.format determines which emitter class is instantiated. The TailwindEmitterHandler, TailwindV4EmitterHandler, DtcgEmitterHandler, and CssVarsEmitterHandler classes each implement format-specific logic, with some delegating to specialized serializers like serializeTailwindV4 for final output generation.

Can I extend the export module with custom output formats?

Yes, you can extend the pipeline by creating a new emitter handler class following the pattern established in packages/cli/src/linter/dtcg/handler.ts or packages/cli/src/linter/css-vars/handler.ts. Register your handler in packages/cli/src/linter/index.ts and add the format identifier to the FORMATS enum processed by citty in packages/cli/src/commands/export.ts.

Why does the export module depend on remark parsers if it only exports design tokens?

The export process begins with linting the DESIGN.md source to build a DesignSystemState. The linter uses unified, remark-parse, and remark-mdx to parse the Markdown/MDX content, extract YAML frontmatter via remark-frontmatter, and traverse the AST using unist-util-visit before the export handlers can transform the tokens into their target formats.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}