# Dependencies for the Export Module in Google Labs Design.md

> Discover the export module dependencies in google-labs-code/design.md. Learn about citty CLI, internal linters, and essential runtime libraries like unified, yaml, and zod.

- Repository: [Google Labs Code/design.md](https://github.com/google-labs-code/design.md)
- Tags: api-reference
- Published: 2026-07-02

---

**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`](https://github.com/google-labs-code/design.md/blob/main/packages/cli/src/commands/export.ts) and relies on dependencies declared in [`packages/cli/package.json`](https://github.com/google-labs-code/design.md/blob/main/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`](https://github.com/google-labs-code/design.md/blob/main/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`](https://github.com/google-labs-code/design.md/blob/main/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`](https://github.com/google-labs-code/design.md/blob/main/packages/cli/src/linter/tailwind/handler.ts), handles Tailwind v3 JSON exports.
- **`TailwindV4EmitterHandler`**: Located in [`packages/cli/src/linter/tailwind/v4/handler.ts`](https://github.com/google-labs-code/design.md/blob/main/packages/cli/src/linter/tailwind/v4/handler.ts), manages Tailwind v4 CSS `@theme` exports.
- **`DtcgEmitterHandler`**: Located in [`packages/cli/src/linter/dtcg/handler.ts`](https://github.com/google-labs-code/design.md/blob/main/packages/cli/src/linter/dtcg/handler.ts), emits W3C Design Tokens (DTCG) JSON.
- **`CssVarsEmitterHandler`**: Located in [`packages/cli/src/linter/css-vars/handler.ts`](https://github.com/google-labs-code/design.md/blob/main/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`](https://github.com/google-labs-code/design.md/blob/main/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`](https://github.com/google-labs-code/design.md/blob/main/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`](https://github.com/google-labs-code/design.md/blob/main/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:

```bash

# 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`](https://github.com/google-labs-code/design.md/blob/main/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`](https://github.com/google-labs-code/design.md/blob/main/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`](https://github.com/google-labs-code/design.md/blob/main/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`](https://github.com/google-labs-code/design.md/blob/main/packages/cli/src/linter/dtcg/handler.ts) or [`packages/cli/src/linter/css-vars/handler.ts`](https://github.com/google-labs-code/design.md/blob/main/packages/cli/src/linter/css-vars/handler.ts). Register your handler in [`packages/cli/src/linter/index.ts`](https://github.com/google-labs-code/design.md/blob/main/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`](https://github.com/google-labs-code/design.md/blob/main/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.