@texturehq/edges 1.3.0 → 1.3.1

package/scripts/generate-viz-runtime.js

@@ -0,0 +1,95 @@
+/**
+ * Generate viz-runtime.css from Style Dictionary output
+ *
+ * WORKAROUND: Tailwind 4's @theme directive filters out viz color variables,
+ * so we extract them and create a separate runtime file with plain :root and
+ * .theme-dark blocks.
+ *
+ * This script should run after Style Dictionary generates the token files.
+ */
+
+import fs from "fs";
+import path from "path";
+
+const GENERATED_DIR = "src/generated";
+const LIGHT_TOKENS = path.join(GENERATED_DIR, "tailwind-tokens-light.css");
+const DARK_TOKENS = path.join(GENERATED_DIR, "tailwind-tokens-dark.css");
+const OUTPUT_FILE = path.join(GENERATED_DIR, "viz-runtime.css");
+
+/**
+ * Extract viz color variables from a CSS file
+ */
+function extractVizColors(cssContent) {
+  const vizColorRegex = /^\s*(--color-viz-[^:]+:\s*[^;]+;)\s*$/gm;
+  const matches = [];
+  let match;
+
+  while ((match = vizColorRegex.exec(cssContent)) !== null) {
+    matches.push(match[1]);
+  }
+
+  return matches;
+}
+
+/**
+ * Generate the viz-runtime.css file
+ */
+function generateVizRuntime() {
+  console.log("🎨 Generating viz-runtime.css...");
+
+  // Read token files
+  const lightContent = fs.readFileSync(LIGHT_TOKENS, "utf8");
+  const darkContent = fs.readFileSync(DARK_TOKENS, "utf8");
+
+  // Extract viz colors
+  const lightVizColors = extractVizColors(lightContent);
+  const darkVizColors = extractVizColors(darkContent);
+
+  if (lightVizColors.length === 0) {
+    console.warn("⚠️  No viz colors found in light theme tokens");
+  }
+
+  if (darkVizColors.length === 0) {
+    console.warn("⚠️  No viz colors found in dark theme tokens");
+  }
+
+  // Generate output
+  const output = `/**
+ * Data Visualization Color Palette - Runtime Override
+ *
+ * WORKAROUND: These variables are defined here instead of in tailwind-tokens-*.css
+ * because Tailwind 4's @theme directive filters them out (similar issue as data-* prefix).
+ *
+ * AUTO-GENERATED by scripts/generate-viz-runtime.js
+ * DO NOT EDIT MANUALLY - Edit tokens/base/data-visualization.json instead.
+ *
+ * To customize dark mode viz colors, edit the "viz" section in tokens/themes/dark.json
+ */
+
+/* Light theme (default) */
+:root {
+${lightVizColors.map((color) => `  ${color}`).join("\n")}
+}
+
+/* Dark theme */
+.theme-dark {
+${darkVizColors.map((color) => `  ${color}`).join("\n")}
+}
+`;
+
+  // Write output
+  fs.writeFileSync(OUTPUT_FILE, output, "utf8");
+
+  console.log(`✅ Generated ${OUTPUT_FILE}`);
+  console.log(`   - Light theme: ${lightVizColors.length} variables`);
+  console.log(`   - Dark theme: ${darkVizColors.length} variables`);
+}
+
+// Run the script
+try {
+  generateVizRuntime();
+} catch (error) {
+  console.error("❌ Error generating viz-runtime.css:", error);
+  process.exit(1);
+}
+