Emitter: {component}.styling.ts

[nathanacurtis]

Summary

Add a {component}.styling.ts emitter to specs-cli that projects a validated component contract into a structured TypeScript file enumerating every styling token, style, and effect applied across all variants — similar in shape to the plugin's existing StylingInventory output but as a static, deterministic file emitter rather than a Figma frame renderer.

RFC

This emitter is specified in RFC 001: Component Dictionary as part of the styling emitter group.

Source reference

The existing plugin StylingInventory covers the same domain and should inform the data model for this emitter:

• specs-plugin-2/src/Output/StylingInventory/types.ts — StylingInventoryRow shape: category, name, appliedAs, rawValue, appliedTo (element name -> usage count map)
• specs-plugin-2/src/Output/StylingInventory/Processor.ts — builds inventory from variants; buildFromVariants is the entry point
• specs-plugin-2/src/Output/StylingInventory/Generator.ts — renders the inventory into a Figma table (for reference on how rows are surfaced, not for reuse)

The emitter categories are VARIABLES, COLOR_STYLES, TEXT_STYLES, and EFFECT_STYLES. Each row carries the token/style name, how it was applied, which elements it was applied to (with counts), and raw value metadata.

The .styling.ts output should be richer than .tokens.json (which is a flat token list): it includes non-token styles, per-element usage maps, raw values, and category grouping.

Acceptance criteria

• Emitter registered under the styling group
• Covers all four categories: variables, color styles, text styles, effect styles
• Per-row data includes name, appliedAs, appliedTo (element -> count), rawValue
• Output is deterministic (same contract -> identical file)
• Covered by unit tests using a fixture component