@usesource/compile

The styled renderer of the Source DESIGN.md toolchain. Compiles a DESIGN.md file into brand-correct, styled output — and validates it against the canonical SOURCE element registry.

Where @usesource/scan answers "which canonical / which library", @usesource/compile answers "render it, with the brand's actual colours, radius and type — and tell me what the registry won't allow."

What it does

1. Resolves every {token} reference in a DESIGN.md against the file's own colour / typography / rounded / spacing tables.
2. Maps each component's property block to CSS.
3. Resolves each component name to its canonical source.element.*.
4. Validates each property against that element's registry capabilities — the deterministic conformance check an LLM can't promise.
5. Emits to multiple targets.

Targets

| target | output | notes | |---|---|---| | css | styles.css | reusable stylesheet, one class per component | | react | components.tsx | self-contained inline-style components, typed per tag | | tailwind | components.tailwind.tsx | React + Tailwind className (the v0/shadcn idiom) | | html | preview.html | self-contained visual preview |

Tailwind values map to named utilities on the default scale (rounded-full, py-2 px-4, font-light), arbitrary [value] off-scale (brand hexes), with brand font stacks + OpenType features kept as a small inline style.

API

import { compileDesignMd } from "@usesource/compile";

const r = compileDesignMd(fs.readFileSync("DESIGN.md", "utf8"));
r.react;       // React component source (string)
r.tailwind;    // React + Tailwind className source
r.css;         // stylesheet
r.violations;  // capability violations against the SOURCE registry

CLI

source-compile path/to/DESIGN.md --target css,react,tailwind --out ./out --strict

--strict exits non-zero on any capability violation (CI conformance gate).

License

Apache-2.0