@texturehq/edges 1.34.0 → 1.34.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@texturehq/edges",
-  "version": "1.34.0",
+  "version": "1.34.1",
   "author": "Nicholas Brown <nick@texturehq.com>",
   "description": "A shared component library for Texture",
   "type": "module",
@@ -44,10 +44,11 @@
     "./prose.css": "./dist/prose.css"
   },
   "scripts": {
-    "dev": "yarn watch",
+    "dev": "yarn build:pre && yarn watch",
     "watch": "tsup --watch",
-    "build": "tsup && yarn build:post",
-    "build:post": "postcss src/styles.css -o dist/styles.css && node scripts/copy-assets.js",
+    "build": "yarn build:pre && tsup && yarn build:post",
+    "build:pre": "node scripts/generate-color-utilities.mjs",
+    "build:post": "node scripts/copy-assets.js",
     "build:yalc": "yarn build && npx yalc publish && npx yalc push",
     "dev:yalc": "yarn build && npx yalc publish && npx yalc push && echo 'Package updated! Run in target project: yarn install && yarn dev'",
     "dev:yalc:force": "yarn build && npx yalc publish && npx yalc push && echo 'Package updated! Run in target project: rm -rf .vite && yarn cache clean && yarn dev --force'",

package/scripts/generate-color-utilities.mjs

@@ -0,0 +1,163 @@
+#!/usr/bin/env node
+
+/**
+ * Generates `src/styles/generated-color-utilities.css` — a single
+ * `@source inline(...)` block that guarantees every color token in
+ * `@texturehq/edges-tokens` has its appropriate Tailwind utility class
+ * shipped in the compiled `dist/styles.css`.
+ *
+ * Without this, Tailwind v4's content-scan would only emit utilities
+ * for the subset of color tokens actually referenced in `packages/edges/src`,
+ * leaving consumers of the prebuilt CSS (apps that don't run Tailwind
+ * themselves) unable to use the rest of the token set — even though the
+ * underlying CSS variables are present in the shipped theme.
+ *
+ * Token name → utility mapping (by prefix):
+ *   text-*                  → text-{token}
+ *   border-*                → border-{token}
+ *   background-*            → bg-{token}
+ *   input-background-*      → bg-{token}
+ *   scrim-*, skeleton-*     → bg-{token}
+ *   feedback-*-background   → bg-{token}
+ *   feedback-*-border       → border-{token}
+ *   feedback-*-text         → text-{token}
+ *   state-*-border          → border-{token}
+ *   state-*-text            → text-{token}
+ *   state-*-data            → (skipped — consumed via CSS var directly)
+ *   state-* (other)         → bg-{token} + text-{token}
+ *   action-*-text           → text-{token}
+ *   action-*-hover          → bg-{token}
+ *   action-* (other)        → bg-{token} + text-{token}
+ *   map-*-border            → border-{token}
+ *   map-*                   → bg-{token}
+ *   viz-*                   → bg-{token} + text-{token}
+ *   color primitives (gray-/iris-/ocean-/etc., black/white/graphite/ink/linen/paper)
+ *                           → bg-, text-, border- (all three)
+ *
+ * Token names that don't match any rule above are skipped with a warning so
+ * a maintainer can decide whether to extend the mapping.
+ */
+
+import fs from "node:fs";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const PKG_ROOT = path.resolve(__dirname, "..");
+
+const TOKENS_PATH = path.resolve(PKG_ROOT, "../edges-tokens/dist/tokens.json");
+const OUTPUT_PATH = path.resolve(PKG_ROOT, "src/generated/color-utilities.css");
+
+const PRIMITIVES = new Set(["black", "white", "graphite", "ink", "linen", "paper"]);
+const PALETTE_PREFIXES = ["gray-", "iris-", "moss-", "ocean-", "rose-", "honey-", "canary-", "plum-"];
+const SEMANTIC_BASE_NAMES = new Set([
+  "error-light",
+  "error-base",
+  "error-dark",
+  "warning-light",
+  "warning-base",
+  "warning-dark",
+  "success-light",
+  "success-base",
+  "success-dark",
+  "info-light",
+  "info-base",
+  "info-dark",
+]);
+
+function classify(token) {
+  if (token === "paper-border") return ["border"];
+  if (token.startsWith("text-")) return ["text"];
+  if (token.startsWith("border-")) return ["border"];
+  if (token.startsWith("background-")) return ["bg"];
+  if (token.startsWith("input-background-")) return ["bg"];
+  if (token.startsWith("scrim-") || token.startsWith("skeleton-")) return ["bg"];
+
+  if (token.startsWith("feedback-")) {
+    if (token.endsWith("-background")) return ["bg"];
+    if (token.endsWith("-border")) return ["border"];
+    if (token.endsWith("-text")) return ["text"];
+    return null;
+  }
+
+  if (token.startsWith("state-")) {
+    if (token.endsWith("-border")) return ["border"];
+    if (token.endsWith("-text")) return ["text"];
+    if (token.endsWith("-data")) return [];
+    return ["bg", "text"];
+  }
+
+  if (token.startsWith("action-")) {
+    if (token.endsWith("-text")) return ["text"];
+    if (token.endsWith("-hover")) return ["bg"];
+    return ["bg", "text"];
+  }
+
+  if (token.startsWith("map-")) {
+    if (token.endsWith("-border")) return ["border"];
+    return ["bg"];
+  }
+
+  if (token.startsWith("viz-")) return ["bg", "text"];
+
+  if (PRIMITIVES.has(token)) return ["bg", "text", "border"];
+  if (PALETTE_PREFIXES.some((p) => token.startsWith(p))) return ["bg", "text", "border"];
+  if (SEMANTIC_BASE_NAMES.has(token)) return ["bg", "text", "border"];
+
+  return null;
+}
+
+const tokensRaw = JSON.parse(fs.readFileSync(TOKENS_PATH, "utf8"));
+const colorTokens = Object.keys(tokensRaw)
+  .filter((k) => k.startsWith("color-"))
+  .map((k) => k.slice("color-".length))
+  .sort();
+
+const classes = new Set();
+const unmatched = [];
+
+for (const token of colorTokens) {
+  const prefixes = classify(token);
+  if (prefixes === null) {
+    unmatched.push(token);
+    continue;
+  }
+  for (const prefix of prefixes) {
+    classes.add(`${prefix}-${token}`);
+  }
+}
+
+const sorted = Array.from(classes).sort();
+
+const banner = `/**
+ * GENERATED FILE — DO NOT EDIT BY HAND.
+ *
+ * Source:    scripts/generate-color-utilities.mjs
+ * Inputs:    ../edges-tokens/dist/tokens.json
+ * Tokens:    ${colorTokens.length} color tokens → ${sorted.length} utility classes
+ *
+ * Forces Tailwind to ship a utility for every color token in the design
+ * system, regardless of whether it's referenced in this package's source.
+ * Apps that consume the prebuilt dist/styles.css get the full token set.
+ *
+ * To regenerate: \`yarn build\` (runs this script as build:pre, before tsup).
+ */
+`;
+
+const sourceBlock = `@source inline("${sorted.join(" ")}");\n`;
+
+fs.mkdirSync(path.dirname(OUTPUT_PATH), { recursive: true });
+fs.writeFileSync(OUTPUT_PATH, `${banner}\n${sourceBlock}`);
+
+console.log(`✅ Wrote ${sorted.length} color utilities to ${path.relative(PKG_ROOT, OUTPUT_PATH)}`);
+
+if (unmatched.length > 0) {
+  console.error("");
+  console.error(`❌ ${unmatched.length} color tokens did not match any classification rule:`);
+  for (const t of unmatched) console.error(`   - color-${t}`);
+  console.error("");
+  console.error("   Every color token must map to at least one utility (or be explicitly");
+  console.error("   skipped by returning []). Extend the rules in classify() in");
+  console.error("   scripts/generate-color-utilities.mjs so this PR's contract holds.");
+  process.exit(1);
+}