@spectrabrain/eds 0.0.4 → 0.1.1

package/consumer/css-root.mjs

@@ -0,0 +1,259 @@
+import fs from "node:fs";
+import path from "node:path";
+import {
+  createExitError,
+  detectEol,
+  detectPackageManager,
+  generatedCssRelativePath,
+  listCssFiles,
+  listHtmlFiles,
+  listScriptFiles,
+  readPackageJson,
+  relativeImportPath,
+  relativeTo,
+  runnerCommand,
+  toPosix,
+} from "./paths.mjs";
+
+export const tailwindRootEnvironmentVariable = "EDS_TAILWIND_ROOT";
+// Consumer package.json: "eds": { "tailwindRoot": "src/index.css" }. Written by sync when the override is used.
+export const consumerConfigField = "eds";
+export const tailwindRootConfigKey = "tailwindRoot";
+export const stylesImportLine = '@import "@spectrabrain/eds/styles.css";';
+export const fontsImportLine = '@import "@spectrabrain/eds/fonts.css";';
+
+// Accepts the canonical `@import "tailwindcss";`, the granular `tailwindcss/theme.css` and
+// `tailwindcss/utilities.css` entries (Preflight opt-out) and the `@import url("tailwindcss")` form.
+const tailwindSpecifier = "tailwindcss(?:\\/(?:theme|utilities)(?:\\.css)?)?";
+const tailwindImportSource = "^[ \\t]*@import\\s+(?:url\\(\\s*)?[\"']" + tailwindSpecifier + "[\"']\\s*\\)?[^;]*;[^\\r\\n]*";
+const tailwindImportPattern = new RegExp(tailwindImportSource, "m");
+const tailwindImportPatternGlobal = new RegExp(tailwindImportSource, "gm");
+// Tailwind CSS v3 roots use @tailwind directives instead of @import "tailwindcss"; EDS wiring needs v4.
+const tailwindV3DirectivePattern = /^[ \t]*@tailwind\s+(?:base|components|utilities|variants|screens)\b/m;
+const cssImportPattern = /^[ \t]*@import\s+(?:url\()?["']([^"']+)["']/gm;
+const scriptImportPattern = /^[ \t]*import\s+["']([^"']+)["']/gm;
+const legacyGeneratedImportPattern = /^[ \t]*import\s+["'][^"']*eds-tokens\.css["'];?[ \t]*(?:\r?\n|$)/gm;
+const cssCommentPattern = /\/\*[\s\S]*?\*\//g;
+const pretendardPattern = /pretendard/i;
+const packageReferencePattern = /@spectrabrain\/eds\//;
+
+// Blanks `/* ... */` comments while keeping every index and line break, so a commented-out import is
+// neither a Tailwind root nor a satisfied EDS import, and match positions still apply to the original.
+export function stripCssComments(contents) {
+  return contents.replace(cssCommentPattern, (comment) => comment.replace(/[^\r\n]/g, " "));
+}
+
+function collectImports(contents, pattern) {
+  return [...contents.matchAll(pattern)].map((match) => match[1]);
+}
+
+function hasTailwindImport(contents) {
+  return tailwindImportPattern.test(stripCssComments(contents));
+}
+
+function hasTailwindV3Directive(contents) {
+  return tailwindV3DirectivePattern.test(stripCssComments(contents));
+}
+
+export const tailwindV3Advice = "EDS Tailwind wiring needs Tailwind CSS v4. Import @spectrabrain/eds/styles.css in the app entry and use " +
+  "var(--eds-*) or cssVar() for tokens; ask the user before upgrading to Tailwind CSS v4.";
+
+// The first CSS file that still uses Tailwind CSS v3 @tailwind directives, or null.
+export function findTailwindV3File(consumerRoot, sources) {
+  const file = sources.css.find((candidate) => hasTailwindV3Directive(candidate.contents) && !hasTailwindImport(candidate.contents));
+  return file ? relativeTo(consumerRoot, file.path) : null;
+}
+
+function readSources(consumerRoot) {
+  const generatedPath = path.join(consumerRoot, generatedCssRelativePath);
+  const css = listCssFiles(consumerRoot)
+    .filter((filePath) => filePath !== generatedPath)
+    .map((filePath) => ({ path: filePath, contents: fs.readFileSync(filePath, "utf8") }));
+  const scripts = listScriptFiles(consumerRoot)
+    .map((filePath) => ({ path: filePath, contents: fs.readFileSync(filePath, "utf8") }));
+  const html = listHtmlFiles(consumerRoot)
+    .map((filePath) => ({ path: filePath, contents: fs.readFileSync(filePath, "utf8") }));
+  return { generatedPath, css, scripts, html };
+}
+
+export function readConfiguredTailwindRoot(consumerRoot) {
+  const configured = readPackageJson(consumerRoot)?.[consumerConfigField]?.[tailwindRootConfigKey];
+  if (configured === undefined || configured === null) {
+    return null;
+  }
+  if (typeof configured !== "string" || configured.trim() === "") {
+    throw createExitError("package.json " + consumerConfigField + "." + tailwindRootConfigKey + " must be a relative path string, for example \"src/index.css\".", 2);
+  }
+  return configured;
+}
+
+function resolveExplicitRoot(consumerRoot, relative, { source, label, remedy }) {
+  const rootPath = path.resolve(consumerRoot, relative);
+  if (!fs.existsSync(rootPath) || !fs.statSync(rootPath).isFile()) {
+    throw createExitError(label + " does not point to an existing file: " + relative + ". " + remedy, 2);
+  }
+  const contents = fs.readFileSync(rootPath, "utf8");
+  const relativePath = relativeTo(consumerRoot, rootPath);
+  if (hasTailwindV3Directive(contents) && !hasTailwindImport(contents)) {
+    throw createExitError(
+      label + " points to " + relativePath + ", which uses Tailwind CSS v3 @tailwind directives. Remove that setting. " + tailwindV3Advice,
+      2,
+    );
+  }
+  return {
+    path: rootPath,
+    relativePath,
+    contents,
+    source,
+    warning: hasTailwindImport(contents)
+      ? null
+      : relativePath + ' does not import "tailwindcss"; EDS imports will be inserted at the top of the file.',
+  };
+}
+
+// Resolution order: EDS_TAILWIND_ROOT, then package.json eds.tailwindRoot, then auto-detection.
+// Returns null when the consumer has no Tailwind root at all: sync then skips the Tailwind wiring.
+// Two or more candidates and an explicit path that does not exist still exit 2.
+export function findTailwindRoot(
+  consumerRoot,
+  env = process.env,
+  sources = readSources(consumerRoot),
+  packageManager = detectPackageManager(consumerRoot, env),
+) {
+  const override = env[tailwindRootEnvironmentVariable];
+  if (override) {
+    return resolveExplicitRoot(consumerRoot, override, {
+      source: "env",
+      label: tailwindRootEnvironmentVariable,
+      remedy: "Point it at the CSS file that imports tailwindcss.",
+    });
+  }
+
+  const configured = readConfiguredTailwindRoot(consumerRoot);
+  if (configured !== null) {
+    return resolveExplicitRoot(consumerRoot, toPosix(configured), {
+      source: "config",
+      label: "package.json " + consumerConfigField + "." + tailwindRootConfigKey,
+      remedy: "Update or remove that key, or run " + tailwindRootEnvironmentVariable + "=<file> " +
+        runnerCommand(packageManager, "sync:eds") + " once to record the new path.",
+    });
+  }
+
+  const candidates = sources.css.filter((file) => hasTailwindImport(file.contents));
+  if (candidates.length === 0) {
+    return null;
+  }
+  if (candidates.length > 1) {
+    const found = candidates.map((file) => relativeTo(consumerRoot, file.path));
+    throw createExitError(
+      "Could not identify one Tailwind root CSS file (found " + found.length + ": " + found.join(", ") + "). " +
+        "Ask the user which of these is the app's Tailwind root, then run " + tailwindRootEnvironmentVariable + "=<that file> " +
+        runnerCommand(packageManager, "sync:eds") + " once. sync records the choice in package.json as \"" + consumerConfigField +
+        "\": { \"" + tailwindRootConfigKey + "\": \"<that file>\" } so doctor and the hooks reuse it.",
+      2,
+    );
+  }
+
+  const [root] = candidates;
+  return { path: root.path, relativePath: relativeTo(consumerRoot, root.path), contents: root.contents, source: "detected", warning: null };
+}
+
+export function importsPackageFile(sources, fileName) {
+  const pattern = new RegExp("^@spectrabrain/eds/" + fileName.replace(".", "\\.") + "$");
+  const cssHit = sources.css.some((file) => collectImports(stripCssComments(file.contents), cssImportPattern).some((entry) => pattern.test(entry)));
+  const scriptHit = sources.scripts.some((file) => collectImports(file.contents, scriptImportPattern).some((entry) => pattern.test(entry)));
+  return cssHit || scriptHit;
+}
+
+// EDS text styles reference the font family "Pretendard" from fonts.css, so a consumer that opts out of
+// styles.css must import tokens.css, components.css and fonts.css. Returns the import lines still missing.
+export function planPackageImports(sources) {
+  const hasStyles = importsPackageFile(sources, "styles.css");
+  const hasTokensAndComponents = importsPackageFile(sources, "tokens.css") && importsPackageFile(sources, "components.css");
+  const hasFonts = importsPackageFile(sources, "fonts.css");
+  if (!hasStyles && !hasTokensAndComponents) {
+    return [stylesImportLine];
+  }
+  if (!hasStyles && !hasFonts) {
+    return [fontsImportLine];
+  }
+  return [];
+}
+
+// Files (other than the EDS imports themselves) that mention Pretendard: a CDN link, a second @font-face
+// or a font-family declaration. Reported by doctor as a note only.
+export function findPretendardReferences(consumerRoot, sources) {
+  return [...sources.html, ...sources.css]
+    .filter((file) => file.contents.split(/\r?\n/).some((line) => pretendardPattern.test(line) && !packageReferencePattern.test(line)))
+    .map((file) => relativeTo(consumerRoot, file.path));
+}
+
+function importsGeneratedFile(root, generatedPath) {
+  return collectImports(stripCssComments(root.contents), cssImportPattern).some((specifier) => {
+    if (!specifier.startsWith(".")) {
+      return false;
+    }
+    return path.resolve(path.dirname(root.path), specifier) === generatedPath;
+  });
+}
+
+// End index of the last Tailwind import line (comments ignored), or null. With granular imports the EDS
+// lines go after the last one so they follow both theme.css and utilities.css.
+function lastTailwindImportEnd(contents) {
+  let end = null;
+  for (const match of stripCssComments(contents).matchAll(tailwindImportPatternGlobal)) {
+    end = match.index + match[0].length;
+  }
+  return end;
+}
+
+export function planCssRootImports({ consumerRoot, root, sources }) {
+  const generatedPath = sources.generatedPath;
+  const generatedImportLine = '@import "' + relativeImportPath(root.path, generatedPath) + '";';
+  const missing = planPackageImports(sources);
+  if (!importsGeneratedFile(root, generatedPath)) {
+    missing.push(generatedImportLine);
+  }
+
+  const eol = detectEol(root.contents);
+  let after = root.contents;
+  if (missing.length > 0) {
+    const lineEnd = lastTailwindImportEnd(root.contents);
+    if (lineEnd !== null) {
+      const lineBreak = root.contents.slice(lineEnd, lineEnd + eol.length) === eol ? eol : "";
+      const inserted = missing.join(eol);
+      after = root.contents.slice(0, lineEnd) + eol + inserted + (lineBreak ? "" : eol) + root.contents.slice(lineEnd);
+    } else {
+      after = missing.join(eol) + eol + root.contents;
+    }
+  }
+
+  return {
+    label: "css-root",
+    path: root.path,
+    relativePath: relativeTo(consumerRoot, root.path),
+    before: root.contents,
+    after,
+    missing,
+  };
+}
+
+export function planLegacyJsImportCleanup({ consumerRoot }) {
+  const sourceDirectory = path.join(consumerRoot, "src");
+  return listScriptFiles(sourceDirectory).flatMap((filePath) => {
+    const before = fs.readFileSync(filePath, "utf8");
+    const after = before.replace(legacyGeneratedImportPattern, "");
+    if (after === before) {
+      return [];
+    }
+    return [{
+      label: "legacy-js-import",
+      path: filePath,
+      relativePath: relativeTo(consumerRoot, filePath),
+      before,
+      after,
+    }];
+  });
+}
+
+export { readSources };

package/consumer/doctor.mjs

@@ -0,0 +1,204 @@
+import { findPretendardReferences, planPackageImports, stylesImportLine, fontsImportLine } from "./css-root.mjs";
+import { readGeneratedVersion } from "./generate-tailwind.mjs";
+import { legacyVersionLabel } from "./managed-block.mjs";
+import { cliCommand, generatedCssRelativePath, normalizeEol, readJson, readPackageJson, runnerCommand, toPosix } from "./paths.mjs";
+import { doctorCommand, doctorScriptName, isCompatibleCommand, syncCommand, syncScriptName } from "./register-scripts.mjs";
+import { scanClassNames } from "./scan-classes.mjs";
+import { collectPlans, describeMissingTailwindRoot } from "./sync.mjs";
+
+export const doctorEnvironmentVariable = "EDS_DOCTOR";
+
+// Without a Tailwind root, sync cannot add these imports, so each line says where they go.
+const fontGuidance = {
+  [stylesImportLine]: "missing: @spectrabrain/eds/styles.css import (or tokens.css + components.css + fonts.css); add it to the app entry, " +
+    "for example src/main.tsx, because sync cannot add it without a Tailwind root",
+  [fontsImportLine]: "missing: @spectrabrain/eds/fonts.css import next to tokens.css and components.css; add it where they are imported, " +
+    "because EDS text styles use the font family \"Pretendard\" it declares",
+};
+const syncFixablePattern = /^(?:missing|stale|legacy): /;
+
+export function collectFindings({ consumerRoot, env = process.env }) {
+  const plans = collectPlans({ consumerRoot, env });
+  const installed = plans.pkg.version;
+  const generatedRelativePath = toPosix(generatedCssRelativePath);
+  const findings = [];
+  const notes = [];
+  let rawColors = null;
+
+  const scripts = readPackageJson(consumerRoot)?.scripts ?? {};
+  const unregistered = [];
+  for (const [name, command] of [[syncScriptName, syncCommand], [doctorScriptName, doctorCommand]]) {
+    if (isCompatibleCommand(scripts[name], command)) {
+      continue;
+    }
+    if (scripts[name] === undefined) {
+      unregistered.push(name);
+      continue;
+    }
+    findings.push(
+      "scripts: " + name + " runs " + JSON.stringify(scripts[name]) + " instead of \"" + command +
+        "\"; rename that script and run " + cliCommand(plans.packageManager, "init") + ", or make it run \"" + command + "\"",
+    );
+  }
+  if (unregistered.length > 0) {
+    findings.unshift("scripts: " + unregistered.join(", ") + (unregistered.length === 1 ? " is" : " are") + " not registered; run " +
+      cliCommand(plans.packageManager, "init"));
+  }
+  // The fix lines may only point at sync:eds and eds:doctor when those scripts really run the EDS commands.
+  const syncRegistered = isCompatibleCommand(scripts[syncScriptName], syncCommand);
+  const doctorRegistered = isCompatibleCommand(scripts[doctorScriptName], doctorCommand);
+  const nonSyncFindings = new Set();
+
+  if (plans.root === null) {
+    notes.push(describeMissingTailwindRoot(plans));
+    // Without a Tailwind root, sync cannot insert the imports, so doctor states the requirement directly.
+    for (const line of planPackageImports(plans.sources)) {
+      findings.push(fontGuidance[line]);
+      nonSyncFindings.add(fontGuidance[line]);
+    }
+  } else {
+    if (plans.tailwind.before === null) {
+      findings.push("missing: " + generatedRelativePath);
+    } else if (normalizeEol(plans.tailwind.before) !== normalizeEol(plans.tailwind.after)) {
+      // Line endings are ignored: an autocrlf checkout of the LF generated file is not stale.
+      const generatedBy = readGeneratedVersion(plans.tailwind.before);
+      findings.push(
+        generatedBy === null
+          ? "stale: " + generatedRelativePath + " has no @spectrabrain/eds version header (installed " + installed + ")"
+          : generatedBy === installed
+            ? "stale: " + generatedRelativePath + " differs from the output of @spectrabrain/eds@" + installed
+            : "stale: " + generatedRelativePath + " was generated by @spectrabrain/eds@" + generatedBy + " (installed " + installed + ")",
+      );
+    }
+
+    for (const line of plans.cssRoot.missing) {
+      findings.push("missing: " + line + " in " + plans.cssRoot.relativePath);
+    }
+
+    for (const write of plans.legacyImports) {
+      findings.push("legacy: " + write.relativePath + " imports eds-tokens.css from JavaScript (Tailwind cannot compile it)");
+    }
+
+    // Tailwind drops a class no token backs without a word, so an unknown eds-* name is always a finding.
+    const classScan = scanClassNames({
+      consumerRoot,
+      manifest: readJson(plans.pkg.resolve("tokens.json")),
+      files: [...plans.sources.scripts, ...plans.sources.css, ...plans.sources.html],
+    });
+    for (const hit of classScan.unknown) {
+      findings.push("unknown: " + hit.location + " " + hit.className + " is not a public EDS class; use a class from " + generatedRelativePath);
+    }
+    rawColors = classScan.raw;
+  }
+
+  notes.push(...plans.deliveryNotes);
+  for (const filePath of findPretendardReferences(consumerRoot, plans.sources)) {
+    notes.push(filePath + " references Pretendard outside @spectrabrain/eds. EDS text styles use the font from @spectrabrain/eds/fonts.css, " +
+      "so this does not affect EDS; keep it unless the user asks to remove it, because other styles may use it.");
+  }
+
+  for (const error of plans.errors) {
+    findings.push("invalid: " + error.message);
+  }
+  if (plans.agents) {
+    if (plans.agents.existingBlock === null) {
+      findings.push("missing: AGENTS.md managed block");
+    } else if (normalizeEol(plans.agents.existingBlock) !== normalizeEol(plans.agents.block)) {
+      const blockVersion = plans.agents.existingVersion ?? legacyVersionLabel;
+      findings.push(
+        blockVersion === installed
+          ? "stale: AGENTS.md managed block differs from @spectrabrain/eds@" + installed
+          : "stale: AGENTS.md managed block is for " + blockVersion + " (installed " + installed + ")",
+      );
+    }
+  }
+
+  if (plans.claude && normalizeEol(plans.claude.before) !== normalizeEol(plans.claude.after)) {
+    findings.push("missing: " + plans.claude.importLine + " import in " + plans.claude.relativePath);
+  }
+  if (plans.gemini && normalizeEol(plans.gemini.before) !== normalizeEol(plans.gemini.after)) {
+    findings.push("missing: " + plans.gemini.importLine + " import in " + plans.gemini.relativePath);
+  }
+
+  return { plans, findings, notes, installed, generatedRelativePath, syncRegistered, doctorRegistered, nonSyncFindings, unregistered, rawColors };
+}
+
+const rawColorLineLimit = 40;
+
+// --scan lists the classes that bypass the EDS tokens. It never changes the exit code: legacy code may keep them.
+function logRawColors(rawColors, log) {
+  if (rawColors === null) {
+    log("[EDS] scan: skipped (no Tailwind root)");
+    return;
+  }
+  if (rawColors.length === 0) {
+    log("[EDS] scan: no raw color classes found");
+    return;
+  }
+  const files = new Set(rawColors.map((hit) => hit.location.split(":")[0]));
+  log(
+    "[EDS] scan: " + rawColors.length + " raw color class" + (rawColors.length === 1 ? "" : "es") + " in " + files.size +
+      " file" + (files.size === 1 ? "" : "s") + " bypass the EDS tokens (informational; prefer text-eds-fg-*, bg-eds-bg-*, border-eds-stroke-*)",
+  );
+  for (const hit of rawColors.slice(0, rawColorLineLimit)) {
+    log("[EDS] raw: " + hit.location + " " + hit.className);
+  }
+  if (rawColors.length > rawColorLineLimit) {
+    log("[EDS] raw: … " + (rawColors.length - rawColorLineLimit) + " more");
+  }
+}
+
+export function runDoctor({ consumerRoot, env = process.env, warn = false, scan = false, log = console.log }) {
+  const mode = env[doctorEnvironmentVariable];
+  if (mode === "off") {
+    return 0;
+  }
+  const downgrade = warn || mode === "warn";
+
+  let result;
+  try {
+    result = collectFindings({ consumerRoot, env });
+  } catch (error) {
+    log("[EDS] " + error.message);
+    if (error.exitCode === 2) {
+      return downgrade ? 0 : 2;
+    }
+    throw error;
+  }
+
+  for (const note of result.notes) {
+    log("[EDS] note: " + note);
+  }
+  if (scan) {
+    logRawColors(result.rawColors, log);
+  }
+
+  if (result.findings.length === 0) {
+    const syncedPaths = result.plans.root === null
+      ? ["AGENTS.md"]
+      : [result.plans.root.relativePath, result.generatedRelativePath, "AGENTS.md"];
+    log("[EDS] synced with @spectrabrain/eds@" + result.installed + ": " + syncedPaths.join(", "));
+    return 0;
+  }
+
+  for (const finding of result.findings) {
+    log("[EDS] " + finding);
+  }
+  // One next command: init when scripts are missing (it also syncs), otherwise sync when it can fix a line.
+  // unknown:, invalid:, scripts: conflicts and the imports sync cannot add carry their own fix on the line.
+  const packageManager = result.plans.packageManager;
+  const syncFixable = result.findings.some((finding) => syncFixablePattern.test(finding) && !result.nonSyncFindings.has(finding));
+  if (result.unregistered.length > 0) {
+    log("[EDS] Run " + cliCommand(packageManager, "init") + " to register the scripts; it also runs sync.");
+  } else if (syncFixable) {
+    const syncRun = result.syncRegistered ? runnerCommand(packageManager, syncScriptName) : cliCommand(packageManager, "sync");
+    log("[EDS] Run " + syncRun + " to fix the missing:, stale: and legacy: lines.");
+  }
+  if (downgrade) {
+    log("[EDS] Warn mode: the lines above are not fixed, so this exit 0 does not mean the check passed.");
+  }
+  const doctorRun = result.doctorRegistered ? runnerCommand(packageManager, doctorScriptName) : cliCommand(packageManager, "doctor");
+  // The completion line itself starts with "[EDS] synced with"; this line must not contain that text.
+  log("[EDS] Then rerun " + doctorRun + " until it reports synced; the QUICKSTART.md completion criteria in the package root list the order.");
+  return downgrade ? 0 : 1;
+}

package/consumer/generate-tailwind.mjs

@@ -0,0 +1,83 @@
+import path from "node:path";
+import { generatedCssRelativePath, readJson, readTextIfExists, relativeTo } from "./paths.mjs";
+
+const propertyNames = [
+  "fontFamily",
+  "fontWeight",
+  "fontSize",
+  "lineHeight",
+  "letterSpacing",
+];
+
+export const fontSansStyleName = "body1";
+export function renderTailwindCss(manifest, version) {
+  const tokens = Object.keys(manifest.tokens ?? {});
+  const colorNames = tokens.filter((name) => name.startsWith("color-"));
+  const typography = new Map();
+
+  for (const name of tokens.filter((entry) => entry.startsWith("typography-"))) {
+    const match = name.match(/^typography-(.+)-(fontFamily|fontWeight|fontSize|lineHeight|letterSpacing)$/);
+    if (!match) {
+      throw new Error(`Unsupported typography token name: ${name}`);
+    }
+
+    const [, styleName, propertyName] = match;
+    const properties = typography.get(styleName) ?? new Set();
+    properties.add(propertyName);
+    typography.set(styleName, properties);
+  }
+
+  for (const [styleName, properties] of typography) {
+    for (const propertyName of propertyNames) {
+      if (!properties.has(propertyName)) {
+        throw new Error(`Typography preset ${styleName} is missing ${propertyName}.`);
+      }
+    }
+  }
+
+  if (!typography.has(fontSansStyleName)) {
+    throw new Error(`Typography preset ${fontSansStyleName} is required for --font-sans.`);
+  }
+
+  const colorAliases = colorNames
+    .map((name) => `  --color-eds-${name.slice("color-".length)}: var(--eds-${name});`)
+    .join("\n");
+  // Last line of the @theme block: Tailwind's default font family becomes the EDS body font.
+  const fontSans = `  --font-sans: var(--eds-typography-${fontSansStyleName}-fontFamily);`;
+  const typographyUtilities = [...typography.keys()].sort().map((styleName) => [
+    `@utility eds-typography-${styleName} {`,
+    `  font-family: var(--eds-typography-${styleName}-fontFamily);`,
+    `  font-weight: var(--eds-typography-${styleName}-fontWeight);`,
+    `  font-size: var(--eds-typography-${styleName}-fontSize);`,
+    `  line-height: var(--eds-typography-${styleName}-lineHeight);`,
+    `  letter-spacing: var(--eds-typography-${styleName}-letterSpacing);`,
+    `}`,
+  ].join("\n")).join("\n\n");
+
+  return [
+    `/* Generated from @spectrabrain/eds@${version}. Do not edit manually. */`,
+    "@theme inline {",
+    colorAliases,
+    fontSans,
+    "}",
+    "",
+    typographyUtilities,
+    "",
+  ].join("\n");
+}
+
+export function readGeneratedVersion(contents) {
+  return contents.match(/^\/\* Generated from @spectrabrain\/eds@(\S+)\. Do not edit manually\. \*\//m)?.[1] ?? null;
+}
+
+export function planTailwind({ consumerRoot, pkg }) {
+  const manifest = readJson(pkg.resolve("tokens.json"));
+  const filePath = path.join(consumerRoot, generatedCssRelativePath);
+  return {
+    label: "tailwind",
+    path: filePath,
+    relativePath: relativeTo(consumerRoot, filePath),
+    before: readTextIfExists(filePath),
+    after: renderTailwindCss(manifest, pkg.version),
+  };
+}