vida-css 0.0.1 → 0.0.2

package/scripts/generator.js

@@ -0,0 +1,718 @@
+// scripts/generator.js
+import fs from "fs";
+import path from "path";
+import config from "../vida.config.js";
+
+function escapeClass(cls) {
+  // Escape characters that would break CSS class selectors.
+  // Tailwind-style escaping is a close reference for this.
+  return cls
+    .replace(/\//g,"\\/") // /
+    .replace(/\:/g,"\\:") // :
+    .replace(/\./g,"\\.") // .
+    .replace(/\[/g,"\\[") // [
+    .replace(/\]/g,"\\]") // ]
+    .replace(/'/g,"\\'") // '
+    .replace(/"/g,'\\"'); // "
+}
+
+function splitByColonOutsideBrackets(className) {
+  // Tailwind syntax splits variants on `:` but arbitrary values inside `[...]` may contain colons.
+  const tokens = [];
+  let current = "";
+  let bracketDepth = 0;
+
+  for (const ch of className) {
+    if (ch === "[") bracketDepth++;
+    if (ch === "]") bracketDepth = Math.max(0, bracketDepth - 1);
+
+    if (ch === ":" && bracketDepth === 0) {
+      tokens.push(current);
+      current = "";
+      continue;
+    }
+    current += ch;
+  }
+
+  tokens.push(current);
+  return tokens.filter(t => t.length > 0);
+}
+
+function resolveSpacingToken(token) {
+  // Supports:
+  // - config.spacing keys: "1", "2", ...
+  // - config.sizeScale keys: "8", "16", ...
+  // - fractions: "1/2" => 50%
+  // - arbitrary: "[12px]" => 12px
+  if (!token) return null;
+
+  const arbitrary = token.match(/^\[(.+)\]$/);
+  if (arbitrary) return arbitrary[1];
+
+  const frac = token.match(/^(\d+)\/(\d+)$/);
+  if (frac) {
+    const a = Number(frac[1]);
+    const b = Number(frac[2]);
+    if (!Number.isFinite(a) || !Number.isFinite(b) || b === 0) return null;
+    return `${(a / b) * 100}%`;
+  }
+
+  if (config.spacing && config.spacing[token] != null) return config.spacing[token];
+  if (config.sizeScale && config.sizeScale[token] != null) return config.sizeScale[token];
+  return null;
+}
+
+function resolveColorSpec(colorSpec) {
+  // Supports:
+  // - "white", "black"
+  // - "blue-500", "gray-900", etc (shade must exist in config.colors)
+  if (!colorSpec) return null;
+
+  const direct = config.colors?.[colorSpec];
+  if (typeof direct === "string") return direct;
+
+  const parts = colorSpec.split("-");
+  const key = parts[0];
+  const shade = parts.slice(1).join("-");
+  const entry = config.colors?.[key];
+  if (entry && typeof entry === "object" && shade && entry[shade] != null) return entry[shade];
+  return null;
+}
+
+function hexToRgb(hex) {
+  const match = hex.match(/^#([0-9a-fA-F]{6})$/);
+  if (!match) return null;
+  const value = parseInt(match[1], 16);
+  return {
+    r: (value >> 16) & 255,
+    g: (value >> 8) & 255,
+    b: value & 255,
+  };
+}
+
+function colorWithOpacity(color, opacityVar) {
+  const rgb = hexToRgb(color);
+  if (!rgb) return color;
+  return `rgba(${rgb.r},${rgb.g},${rgb.b},var(${opacityVar},1))`;
+}
+
+function resolveUtility(util) {
+  // Returns a declaration string like: "width: 12px;" or null if unknown.
+  let match;
+
+  // Gradients (Tailwind-like)
+  if (util === "bg-gradient-to-r") {
+    return "--vida-gradient-from: rgba(255,255,255,0); --vida-gradient-via: var(--vida-gradient-from); --vida-gradient-to: rgba(255,255,255,0); background-image:linear-gradient(to right, var(--vida-gradient-from), var(--vida-gradient-via), var(--vida-gradient-to));";
+  }
+  if (util === "bg-gradient-to-l") {
+    return "--vida-gradient-from: rgba(255,255,255,0); --vida-gradient-via: var(--vida-gradient-from); --vida-gradient-to: rgba(255,255,255,0); background-image:linear-gradient(to left, var(--vida-gradient-from), var(--vida-gradient-via), var(--vida-gradient-to));";
+  }
+  if (util === "bg-gradient-to-t") {
+    return "--vida-gradient-from: rgba(255,255,255,0); --vida-gradient-via: var(--vida-gradient-from); --vida-gradient-to: rgba(255,255,255,0); background-image:linear-gradient(to top, var(--vida-gradient-from), var(--vida-gradient-via), var(--vida-gradient-to));";
+  }
+  if (util === "bg-gradient-to-b") {
+    return "--vida-gradient-from: rgba(255,255,255,0); --vida-gradient-via: var(--vida-gradient-from); --vida-gradient-to: rgba(255,255,255,0); background-image:linear-gradient(to bottom, var(--vida-gradient-from), var(--vida-gradient-via), var(--vida-gradient-to));";
+  }
+  if (util === "bg-gradient-to-tr") {
+    return "--vida-gradient-from: rgba(255,255,255,0); --vida-gradient-via: var(--vida-gradient-from); --vida-gradient-to: rgba(255,255,255,0); background-image:linear-gradient(to top right, var(--vida-gradient-from), var(--vida-gradient-via), var(--vida-gradient-to));";
+  }
+  if (util === "bg-gradient-to-br") {
+    return "--vida-gradient-from: rgba(255,255,255,0); --vida-gradient-via: var(--vida-gradient-from); --vida-gradient-to: rgba(255,255,255,0); background-image:linear-gradient(to bottom right, var(--vida-gradient-from), var(--vida-gradient-via), var(--vida-gradient-to));";
+  }
+  if (util === "bg-gradient-to-tl") {
+    return "--vida-gradient-from: rgba(255,255,255,0); --vida-gradient-via: var(--vida-gradient-from); --vida-gradient-to: rgba(255,255,255,0); background-image:linear-gradient(to top left, var(--vida-gradient-from), var(--vida-gradient-via), var(--vida-gradient-to));";
+  }
+  if (util === "bg-gradient-to-bl") {
+    return "--vida-gradient-from: rgba(255,255,255,0); --vida-gradient-via: var(--vida-gradient-from); --vida-gradient-to: rgba(255,255,255,0); background-image:linear-gradient(to bottom left, var(--vida-gradient-from), var(--vida-gradient-via), var(--vida-gradient-to));";
+  }
+  match = util.match(/^from-(.+)$/);
+  if (match) {
+    const c = resolveColorSpec(match[1]);
+    if (c) return `--vida-gradient-from:${c}; --vida-gradient-via:${c};`;
+  }
+  match = util.match(/^via-(.+)$/);
+  if (match) {
+    const c = resolveColorSpec(match[1]);
+    if (c) return `--vida-gradient-via:${c};`;
+  }
+  match = util.match(/^to-(.+)$/);
+  if (match) {
+    const c = resolveColorSpec(match[1]);
+    if (c) return `--vida-gradient-to:${c};`;
+  }
+
+  // Width / height
+  if (util === "w-full") return "width:100%;";
+  if (util === "h-full") return "height:100%;";
+  if (util === "w-screen") return "width:100vw;";
+  if (util === "h-screen") return "height:100vh;";
+  if (util === "min-h-screen") return "min-height:100vh;";
+  if (util === "min-w-0") return "min-width:0;";
+  if (util === "min-h-0") return "min-height:0;";
+  match = util.match(/^w-\[(.+)\]$/);
+  if (match) return `width:${match[1]};`;
+  match = util.match(/^h-\[(.+)\]$/);
+  if (match) return `height:${match[1]};`;
+
+  if (util.startsWith("w-") && config.sizeScale[util.slice(2)] != null) {
+    return `width:${config.sizeScale[util.slice(2)]};`;
+  }
+  if (util.startsWith("h-") && config.sizeScale[util.slice(2)] != null) {
+    return `height:${config.sizeScale[util.slice(2)]};`;
+  }
+
+  // Max/min width (based on existing repo utilities)
+  if (util === "max-w-full") return "max-width:100%;";
+  if (util === "min-w-full") return "min-width:100%;";
+  match = util.match(/^max-w-screen-(.+)$/);
+  if (match && config.screens?.[match[1]] != null) return `max-width:${config.screens[match[1]]};`;
+  match = util.match(/^(max-w|min-w)-(\d+)\/(\d+)$/);
+  if (match) {
+    const kind = match[1];
+    const a = Number(match[2]);
+    const b = Number(match[3]);
+    if (!Number.isFinite(a) || !Number.isFinite(b) || b === 0) return null;
+    const pct = (a / b) * 100;
+    return `${kind === "max-w" ? "max-width" : "min-width"}:${pct}%;`;
+  }
+
+  // Background colors
+  if (util.startsWith("bg-")) {
+    const colorSpec = util.slice(3); // e.g. "blue-500"
+    const parts = colorSpec.split("-");
+    const key = parts[0];
+    const shade = parts[1];
+
+    const entry = config.colors?.[key];
+    if (typeof entry === "string") return `background-color:${colorWithOpacity(entry, "--vida-bg-opacity")};`;
+    if (entry && typeof entry === "object" && shade && entry[shade] != null) {
+      return `background-color:${colorWithOpacity(entry[shade], "--vida-bg-opacity")};`;
+    }
+  }
+  match = util.match(/^bg-opacity-(\d+)$/);
+  if (match) {
+    const v = Number(match[1]);
+    if (Number.isFinite(v) && v >= 0 && v <= 100) return `--vida-bg-opacity:${v / 100};`;
+  }
+  if (util === "bg-cover") return "background-size:cover;";
+  if (util === "bg-contain") return "background-size:contain;";
+  if (util === "bg-auto") return "background-size:auto;";
+  if (util === "bg-center") return "background-position:center;";
+  if (util === "bg-top") return "background-position:top;";
+  if (util === "bg-bottom") return "background-position:bottom;";
+  if (util === "bg-left") return "background-position:left;";
+  if (util === "bg-right") return "background-position:right;";
+  if (util === "bg-no-repeat") return "background-repeat:no-repeat;";
+  if (util === "bg-repeat") return "background-repeat:repeat;";
+  if (util === "bg-repeat-x") return "background-repeat:repeat-x;";
+  if (util === "bg-repeat-y") return "background-repeat:repeat-y;";
+  if (util === "bg-fixed") return "background-attachment:fixed;";
+  if (util === "bg-scroll") return "background-attachment:scroll;";
+
+  // Linear gradients (arbitrary)
+  // Example: bg-linear-[linear-gradient(135deg,#1d4ed8,#22c55e)]
+  match = util.match(/^bg-linear-\[(.+)\]$/);
+  if (match) {
+    const value = match[1].replace(/_/g, " ");
+    return `background-image:${value};`;
+  }
+
+  // Shadow
+  if (util === "shadow-none") return "box-shadow:none;";
+  if (util === "shadow-sm") return "box-shadow:0 6px 10px rgba(0,0,0,0.3);";
+  if (util === "shadow-md") return "box-shadow:0 8px 12px rgba(0,0,0,0.4);";
+  if (util === "shadow-lg") return "box-shadow:0 12px 16px rgba(0,0,0,0.5);";
+  if (util === "shadow-xl") return "box-shadow:0 22px 17px rgba(0,0,0,0.5);";
+  if (util === "shadow-2xl") return "box-shadow:0 27px 22px rgba(0,0,0,0.6);";
+  match = util.match(/^shadow-\[(.+)\]$/);
+  if (match) {
+    // Tailwind replaces spaces with underscores inside arbitrary values.
+    const value = match[1].replace(/_/g, " ");
+    return `box-shadow:${value};`;
+  }
+
+  // Text align
+  match = util.match(/^text-(left|center|right)$/);
+  if (match) return `text-align:${match[1] === "left" ? "left" : match[1] === "center" ? "center" : "right"};`;
+
+  // Typography
+  match = util.match(/^text-(xs|sm|base|lg|xl|2xl|3xl|4xl|5xl|6xl|7xl|8xl|9xl)$/);
+  if (match) {
+    const map = {
+      xs: "12px",
+      sm: "14px",
+      base: "16px",
+      lg: "18px",
+      xl: "20px",
+      "2xl": "24px",
+      "3xl": "30px",
+      "4xl": "36px",
+      "5xl": "48px",
+      "6xl": "60px",
+      "7xl": "72px",
+      "8xl": "96px",
+      "9xl": "128px",
+    };
+    return `font-size:${map[match[1]]};`;
+  }
+  match = util.match(/^font-(sans|serif|mono|display)$/);
+  if (match) {
+    const fam = config.fontFamily?.[match[1]];
+    if (fam) return `font-family:${fam};`;
+  }
+  match = util.match(/^font-(light|normal|medium|semibold|bold)$/);
+  if (match) {
+    const map = {
+      light: "300",
+      normal: "400",
+      medium: "500",
+      semibold: "600",
+      bold: "700",
+    };
+    return `font-weight:${map[match[1]]};`;
+  }
+  match = util.match(/^leading-(none|tight|snug|normal|relaxed|loose)$/);
+  if (match) {
+    const map = {
+      none: "1",
+      tight: "1.25",
+      snug: "1.375",
+      normal: "1.5",
+      relaxed: "1.625",
+      loose: "2",
+    };
+    return `line-height:${map[match[1]]};`;
+  }
+  match = util.match(/^tracking-(tighter|tight|normal|wide|wider|widest)$/);
+  if (match) {
+    const map = {
+      tighter: "-0.05em",
+      tight: "-0.025em",
+      normal: "0em",
+      wide: "0.025em",
+      wider: "0.05em",
+      widest: "0.1em",
+    };
+    return `letter-spacing:${map[match[1]]};`;
+  }
+  if (util === "uppercase") return "text-transform:uppercase;";
+  if (util === "lowercase") return "text-transform:lowercase;";
+  if (util === "capitalize") return "text-transform:capitalize;";
+  if (util === "normal-case") return "text-transform:none;";
+  if (util === "underline") return "text-decoration:underline;";
+  if (util === "no-underline") return "text-decoration:none;";
+  if (util === "truncate") return "overflow:hidden;text-overflow:ellipsis;white-space:nowrap;";
+  // Text colors
+  if (util.startsWith("text-")) {
+    const colorSpec = util.slice(5);
+    const color = resolveColorSpec(colorSpec);
+    if (color) return `color:${color};`;
+  }
+
+  // Display
+  if (util === "block") return "display:block;";
+  if (util === "inline-block") return "display:inline-block;";
+  if (util === "inline") return "display:inline;";
+  if (util === "hidden") return "display:none;";
+
+  // Flex / grid
+  if (util === "flex") return "display:flex;";
+  if (util === "inline-flex") return "display:inline-flex;";
+  if (util === "grid") return "display:grid;";
+  if (util === "flex-1") return "flex:1 1 0%;";
+
+  match = util.match(/^flex-(row|col|row-reverse|col-reverse)$/);
+  if (match) {
+    const map = {
+      row: "row",
+      col: "column",
+      "row-reverse": "row-reverse",
+      "col-reverse": "column-reverse",
+    };
+    return `flex-direction:${map[match[1]]};`;
+  }
+
+  match = util.match(/^justify-(start|center|end|between|around|evenly)$/);
+  if (match) {
+    const map = {
+      start: "flex-start",
+      center: "center",
+      end: "flex-end",
+      between: "space-between",
+      around: "space-around",
+      evenly: "space-evenly",
+    };
+    return `justify-content:${map[match[1]]};`;
+  }
+
+  match = util.match(/^items-(start|center|end|stretch)$/);
+  if (match) {
+    const map = {
+      start: "flex-start",
+      center: "center",
+      end: "flex-end",
+      stretch: "stretch",
+    };
+    return `align-items:${map[match[1]]};`;
+  }
+
+  match = util.match(/^grid-cols-(\d+)$/);
+  if (match) {
+    const n = Number(match[1]);
+    if (!Number.isFinite(n) || n <= 0) return null;
+    return `grid-template-columns:repeat(${n},1fr);`;
+  }
+
+  match = util.match(/^gap-(\d+)$/);
+  if (match && config.spacing?.[match[1]] != null) return `gap:${config.spacing[match[1]]};`;
+
+  match = util.match(/^overflow-(hidden|auto|scroll)$/);
+  if (match) return `overflow:${match[1]};`;
+
+  // Positioning
+  match = util.match(/^(static|relative|absolute|fixed|sticky)$/);
+  if (match) return `position:${match[1]};`;
+
+  // Z index
+  match = util.match(/^z-(\d+)$/);
+  if (match) return `z-index:${Number(match[1])};`;
+
+  // Border radius
+  match = util.match(/^rounded-(sm|md|lg)$/);
+  if (match && config.borderRadius?.[match[1]] != null) return `border-radius:${config.borderRadius[match[1]]};`;
+
+  // Border width + color
+  if (util === "border") return "border-width:1px;border-style:solid;border-color:currentColor;";
+  if (util === "border-0") return "border-width:0;border-style:solid;border-color:currentColor;";
+  if (util === "border-2") return "border-width:2px;border-style:solid;border-color:currentColor;";
+  if (util === "border-4") return "border-width:4px;border-style:solid;border-color:currentColor;";
+  match = util.match(/^border-\[(.+)\]$/);
+  if (match) return `border-width:${match[1]};border-style:solid;border-color:currentColor;`;
+  if (util.startsWith("border-")) {
+    const colorSpec = util.slice(7);
+    const color = resolveColorSpec(colorSpec);
+    if (color) return `border-color:${color};`;
+  }
+
+  // Accessibility
+  if (util === "sr-only") {
+    return "position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0;";
+  }
+  if (util === "not-sr-only") {
+    return "position:static;width:auto;height:auto;padding:0;margin:0;overflow:visible;clip:auto;white-space:normal;";
+  }
+
+  // Padding / margin
+  // Examples:
+  // - p-1, px-2, pt-4
+  // - p-1/2
+  // - p-[12px]
+  match = util.match(/^(p|m)([trblxy]?)-(.*)$/);
+  if (match) {
+    const isPad = match[1] === "p";
+    const axis = match[2]; // "", x, y, t, r, b, l
+    const valueToken = match[3];
+    const value = resolveSpacingToken(valueToken);
+    if (value == null) return null;
+
+    const prefix = isPad ? "padding" : "margin";
+    if (!axis) return `${prefix}:${value};`;
+    if (axis === "x") return `${prefix}-left:${value};${prefix}-right:${value};`;
+    if (axis === "y") return `${prefix}-top:${value};${prefix}-bottom:${value};`;
+    if (axis === "t") return `${prefix}-top:${value};`;
+    if (axis === "r") return `${prefix}-right:${value};`;
+    if (axis === "b") return `${prefix}-bottom:${value};`;
+    if (axis === "l") return `${prefix}-left:${value};`;
+  }
+
+  // Positioning offsets
+  match = util.match(/^(inset|inset-x|inset-y|top|right|bottom|left)-(.+)$/);
+  if (match) {
+    const what = match[1];
+    const valueToken = match[2];
+
+    const arbitrary = valueToken.match(/^\[(.+)\]$/);
+    const raw = arbitrary ? arbitrary[1] : valueToken;
+    const value =
+      arbitrary ? raw
+      : resolveSpacingToken(valueToken) ?? (valueToken.match(/^-?\d+(\.\d+)?$/) ? `${raw}px` : null);
+    if (value == null) return null;
+
+    if (what === "inset") return `top:${value};right:${value};bottom:${value};left:${value};`;
+    if (what === "inset-x") return `left:${value};right:${value};`;
+    if (what === "inset-y") return `top:${value};bottom:${value};`;
+    return `${what}:${value};`;
+  }
+
+  // Transitions
+  if (util === "transition") return "transition-property:all;";
+  if (util === "transition-all") return "transition-property:all;";
+  if (util === "transition-none") return "transition-property:none;";
+  match = util.match(/^duration-(.+)$/);
+  if (match) {
+    const valueToken = match[1];
+    const arbitrary = valueToken.match(/^\[(.+)\]$/);
+    if (arbitrary) return `transition-duration:${arbitrary[1]};`;
+    if (valueToken.match(/^\d+$/)) return `transition-duration:${valueToken}ms;`;
+  }
+  match = util.match(/^delay-(.+)$/);
+  if (match) {
+    const valueToken = match[1];
+    const arbitrary = valueToken.match(/^\[(.+)\]$/);
+    if (arbitrary) return `transition-delay:${arbitrary[1]};`;
+    if (valueToken.match(/^\d+$/)) return `transition-delay:${valueToken}ms;`;
+  }
+  match = util.match(/^ease-(.+)$/);
+  if (match) {
+    const valueToken = match[1];
+    const arbitrary = valueToken.match(/^\[(.+)\]$/);
+    if (arbitrary) return `transition-timing-function:${arbitrary[1]};`;
+    const map = {
+      linear: "cubic-bezier(0,0,1,1)",
+      in: "cubic-bezier(0.4,0,1,1)",
+      out: "cubic-bezier(0,0,0.2,1)",
+      "in-out": "cubic-bezier(0.4,0,0.2,1)",
+    };
+    if (map[valueToken]) return `transition-timing-function:${map[valueToken]};`;
+  }
+
+  // Animations (keyframes injected in generateCSS)
+  if (util === "animate-spin") return "animation:spin 1s linear infinite;";
+  if (util === "animate-ping") return "animation:ping 1s cubic-bezier(0,0,0.2,1) infinite;";
+  if (util === "animate-pulse") return "animation:pulse 2s cubic-bezier(0.4,0,0.6,1) infinite;";
+
+  // Rings
+  if (util === "ring-inset") {
+    return `--vida-ring-inset: inset; box-shadow:var(--vida-ring-inset, ) 0 0 0 var(--vida-ring-width, 0px) var(--vida-ring-color, transparent), var(--vida-ring-inset, ) 0 0 0 calc(var(--vida-ring-width, 0px) + var(--vida-ring-offset-width, 0px)) var(--vida-ring-offset-color, transparent);`;
+  }
+  match = util.match(/^ring-offset-(.+)$/);
+  if (match) {
+    const v = match[1];
+    if (v.match(/^-?\d+(\.\d+)?$/)) {
+      const px = resolveSpacingToken(v) ?? `${v}px`;
+      return `--vida-ring-offset-width:${px}; box-shadow:var(--vida-ring-inset, ) 0 0 0 var(--vida-ring-width, 0px) var(--vida-ring-color, transparent), var(--vida-ring-inset, ) 0 0 0 calc(var(--vida-ring-width, 0px) + var(--vida-ring-offset-width, 0px)) var(--vida-ring-offset-color, transparent);`;
+    }
+    const c = resolveColorSpec(v);
+    if (c) {
+      return `--vida-ring-offset-color:${c}; box-shadow:var(--vida-ring-inset, ) 0 0 0 var(--vida-ring-width, 0px) var(--vida-ring-color, transparent), var(--vida-ring-inset, ) 0 0 0 calc(var(--vida-ring-width, 0px) + var(--vida-ring-offset-width, 0px)) var(--vida-ring-offset-color, transparent);`;
+    }
+  }
+  match = util.match(/^ring-(\d+)$/);
+  if (match) {
+    const w = `${match[1]}px`;
+    return `--vida-ring-width:${w}; box-shadow:var(--vida-ring-inset, ) 0 0 0 var(--vida-ring-width, 0px) var(--vida-ring-color, transparent), var(--vida-ring-inset, ) 0 0 0 calc(var(--vida-ring-width, 0px) + var(--vida-ring-offset-width, 0px)) var(--vida-ring-offset-color, transparent);`;
+  }
+  match = util.match(/^ring-(.+)$/);
+  if (match) {
+    const c = resolveColorSpec(match[1]);
+    if (c) {
+      return `--vida-ring-color:${c}; box-shadow:var(--vida-ring-inset, ) 0 0 0 var(--vida-ring-width, 0px) var(--vida-ring-color, transparent), var(--vida-ring-inset, ) 0 0 0 calc(var(--vida-ring-width, 0px) + var(--vida-ring-offset-width, 0px)) var(--vida-ring-offset-color, transparent);`;
+    }
+  }
+
+  // Transforms (composed via CSS variables)
+  match = util.match(/^translate-x-(.+)$/);
+  if (match) {
+    const v = match[1];
+    const arbitrary = v.match(/^\[(.+)\]$/);
+    const value = arbitrary ? arbitrary[1] : (resolveSpacingToken(v) ?? (v.match(/^-?\d+(\.\d+)?$/) ? `${v}px` : null));
+    if (value == null) return null;
+    return `--vida-translate-x:${value}; transform:translateX(var(--vida-translate-x, 0px)) translateY(var(--vida-translate-y, 0px)) rotate(var(--vida-rotate, 0deg)) scale(var(--vida-scale-x, 1), var(--vida-scale-y, 1)) skewX(var(--vida-skew-x, 0deg)) skewY(var(--vida-skew-y, 0deg));`;
+  }
+  match = util.match(/^translate-y-(.+)$/);
+  if (match) {
+    const v = match[1];
+    const arbitrary = v.match(/^\[(.+)\]$/);
+    const value = arbitrary ? arbitrary[1] : (resolveSpacingToken(v) ?? (v.match(/^-?\d+(\.\d+)?$/) ? `${v}px` : null));
+    if (value == null) return null;
+    return `--vida-translate-y:${value}; transform:translateX(var(--vida-translate-x, 0px)) translateY(var(--vida-translate-y, 0px)) rotate(var(--vida-rotate, 0deg)) scale(var(--vida-scale-x, 1), var(--vida-scale-y, 1)) skewX(var(--vida-skew-x, 0deg)) skewY(var(--vida-skew-y, 0deg));`;
+  }
+  match = util.match(/^rotate-(.+)$/);
+  if (match) {
+    const v = match[1];
+    const arbitrary = v.match(/^\[(.+)\]$/);
+    const value = arbitrary ? arbitrary[1] : (v.match(/^-?\d+(\.\d+)?$/) ? `${v}deg` : null);
+    if (value == null) return null;
+    return `--vida-rotate:${value}; transform:translateX(var(--vida-translate-x, 0px)) translateY(var(--vida-translate-y, 0px)) rotate(var(--vida-rotate, 0deg)) scale(var(--vida-scale-x, 1), var(--vida-scale-y, 1)) skewX(var(--vida-skew-x, 0deg)) skewY(var(--vida-skew-y, 0deg));`;
+  }
+  match = util.match(/^scale-(.+)$/);
+  if (match) {
+    const v = match[1];
+    const arbitrary = v.match(/^\[(.+)\]$/);
+    const value = arbitrary ? arbitrary[1] : (v.match(/^-?\d+(\.\d+)?$/) ? `${Number(v) / 100}` : null);
+    if (value == null) return null;
+    return `--vida-scale-x:${value}; --vida-scale-y:${value}; transform:translateX(var(--vida-translate-x, 0px)) translateY(var(--vida-translate-y, 0px)) rotate(var(--vida-rotate, 0deg)) scale(var(--vida-scale-x, 1), var(--vida-scale-y, 1)) skewX(var(--vida-skew-x, 0deg)) skewY(var(--vida-skew-y, 0deg));`;
+  }
+  match = util.match(/^scale-x-(.+)$/);
+  if (match) {
+    const v = match[1];
+    const arbitrary = v.match(/^\[(.+)\]$/);
+    const value = arbitrary ? arbitrary[1] : (v.match(/^-?\d+(\.\d+)?$/) ? `${Number(v) / 100}` : null);
+    if (value == null) return null;
+    return `--vida-scale-x:${value}; transform:translateX(var(--vida-translate-x, 0px)) translateY(var(--vida-translate-y, 0px)) rotate(var(--vida-rotate, 0deg)) scale(var(--vida-scale-x, 1), var(--vida-scale-y, 1)) skewX(var(--vida-skew-x, 0deg)) skewY(var(--vida-skew-y, 0deg));`;
+  }
+  match = util.match(/^scale-y-(.+)$/);
+  if (match) {
+    const v = match[1];
+    const arbitrary = v.match(/^\[(.+)\]$/);
+    const value = arbitrary ? arbitrary[1] : (v.match(/^-?\d+(\.\d+)?$/) ? `${Number(v) / 100}` : null);
+    if (value == null) return null;
+    return `--vida-scale-y:${value}; transform:translateX(var(--vida-translate-x, 0px)) translateY(var(--vida-translate-y, 0px)) rotate(var(--vida-rotate, 0deg)) scale(var(--vida-scale-x, 1), var(--vida-scale-y, 1)) skewX(var(--vida-skew-x, 0deg)) skewY(var(--vida-skew-y, 0deg));`;
+  }
+  match = util.match(/^skew-x-(.+)$/);
+  if (match) {
+    const v = match[1];
+    const arbitrary = v.match(/^\[(.+)\]$/);
+    const value = arbitrary ? arbitrary[1] : (v.match(/^-?\d+(\.\d+)?$/) ? `${v}deg` : null);
+    if (value == null) return null;
+    return `--vida-skew-x:${value}; transform:translateX(var(--vida-translate-x, 0px)) translateY(var(--vida-translate-y, 0px)) rotate(var(--vida-rotate, 0deg)) scale(var(--vida-scale-x, 1), var(--vida-scale-y, 1)) skewX(var(--vida-skew-x, 0deg)) skewY(var(--vida-skew-y, 0deg));`;
+  }
+  match = util.match(/^skew-y-(.+)$/);
+  if (match) {
+    const v = match[1];
+    const arbitrary = v.match(/^\[(.+)\]$/);
+    const value = arbitrary ? arbitrary[1] : (v.match(/^-?\d+(\.\d+)?$/) ? `${v}deg` : null);
+    if (value == null) return null;
+    return `--vida-skew-y:${value}; transform:translateX(var(--vida-translate-x, 0px)) translateY(var(--vida-translate-y, 0px)) rotate(var(--vida-rotate, 0deg)) scale(var(--vida-scale-x, 1), var(--vida-scale-y, 1)) skewX(var(--vida-skew-x, 0deg)) skewY(var(--vida-skew-y, 0deg));`;
+  }
+
+  // Filters (composed via CSS variables)
+  if (util === "filter-none") return "filter:none;";
+  match = util.match(/^blur-(.+)$/);
+  if (match) {
+    const v = match[1];
+    const arbitrary = v.match(/^\[(.+)\]$/);
+    const value = arbitrary ? arbitrary[1] : (v.match(/^-?\d+(\.\d+)?$/) ? `${v}px` : null);
+    if (value == null) return null;
+    return `--vida-blur:${value}; filter:blur(var(--vida-blur, 0px)) brightness(var(--vida-brightness, 1)) contrast(var(--vida-contrast, 1)) saturate(var(--vida-saturate, 1)) grayscale(var(--vida-grayscale, 0%)) sepia(var(--vida-sepia, 0%)) hue-rotate(var(--vida-hue-rotate, 0deg)) invert(var(--vida-invert, 0%)) opacity(var(--vida-opacity, 1));`;
+  }
+  match = util.match(/^(brightness|contrast|saturate)-(.*)$/);
+  if (match) {
+    const kind = match[1];
+    const v = match[2];
+    const arbitrary = v.match(/^\[(.+)\]$/);
+    const value = arbitrary ? arbitrary[1] : (v.match(/^-?\d+(\.\d+)?$/) ? `${Number(v) / 100}` : null);
+    if (value == null) return null;
+    const varName = kind === "brightness" ? "--vida-brightness" : kind === "contrast" ? "--vida-contrast" : "--vida-saturate";
+    return `${varName}:${value}; filter:blur(var(--vida-blur, 0px)) brightness(var(--vida-brightness, 1)) contrast(var(--vida-contrast, 1)) saturate(var(--vida-saturate, 1)) grayscale(var(--vida-grayscale, 0%)) sepia(var(--vida-sepia, 0%)) hue-rotate(var(--vida-hue-rotate, 0deg)) invert(var(--vida-invert, 0%)) opacity(var(--vida-opacity, 1));`;
+  }
+  match = util.match(/^(grayscale|sepia|invert)-(.*)$/);
+  if (match) {
+    const kind = match[1];
+    const v = match[2];
+    const arbitrary = v.match(/^\[(.+)\]$/);
+    const value = arbitrary ? arbitrary[1] : (v.match(/^-?\d+(\.\d+)?$/) ? `${v}%` : null);
+    if (value == null) return null;
+    const varName = kind === "grayscale" ? "--vida-grayscale" : kind === "sepia" ? "--vida-sepia" : "--vida-invert";
+    return `${varName}:${value}; filter:blur(var(--vida-blur, 0px)) brightness(var(--vida-brightness, 1)) contrast(var(--vida-contrast, 1)) saturate(var(--vida-saturate, 1)) grayscale(var(--vida-grayscale, 0%)) sepia(var(--vida-sepia, 0%)) hue-rotate(var(--vida-hue-rotate, 0deg)) invert(var(--vida-invert, 0%)) opacity(var(--vida-opacity, 1));`;
+  }
+  match = util.match(/^hue-rotate-(.+)$/);
+  if (match) {
+    const v = match[1];
+    const arbitrary = v.match(/^\[(.+)\]$/);
+    const value = arbitrary ? arbitrary[1] : (v.match(/^-?\d+(\.\d+)?$/) ? `${v}deg` : null);
+    if (value == null) return null;
+    return `--vida-hue-rotate:${value}; filter:blur(var(--vida-blur, 0px)) brightness(var(--vida-brightness, 1)) contrast(var(--vida-contrast, 1)) saturate(var(--vida-saturate, 1)) grayscale(var(--vida-grayscale, 0%)) sepia(var(--vida-sepia, 0%)) hue-rotate(var(--vida-hue-rotate, 0deg)) invert(var(--vida-invert, 0%)) opacity(var(--vida-opacity, 1));`;
+  }
+  match = util.match(/^opacity-(.+)$/);
+  if (match) {
+    const v = match[1];
+    const arbitrary = v.match(/^\[(.+)\]$/);
+    const value = arbitrary ? arbitrary[1] : (v.match(/^-?\d+(\.\d+)?$/) ? `${Number(v) / 100}` : null);
+    if (value == null) return null;
+    return `--vida-opacity:${value}; filter:blur(var(--vida-blur, 0px)) brightness(var(--vida-brightness, 1)) contrast(var(--vida-contrast, 1)) saturate(var(--vida-saturate, 1)) grayscale(var(--vida-grayscale, 0%)) sepia(var(--vida-sepia, 0%)) hue-rotate(var(--vida-hue-rotate, 0deg)) invert(var(--vida-invert, 0%)) opacity(var(--vida-opacity, 1));`;
+  }
+
+  // Pseudo-elements
+  match = util.match(/^content-\[(.+)\]$/);
+  if (match) return `content:${match[1]};`;
+
+  // Nothing matched
+  return null;
+}
+
+export function generateCSS() {
+  const classFile = path.join(process.cwd(), ".vida-classes.json");
+  if (!fs.existsSync(classFile)) { console.error("No .vida-classes.json found!"); return; }
+  const classes = JSON.parse(fs.readFileSync(classFile,"utf-8"));
+
+  let finalCSS = "";
+  let keyframesCSS = "";
+  const keyframesAdded = new Set();
+
+  classes.forEach(cls => {
+    // Split Tailwind-like variants: md:hover:bg-red-500, dark:bg-*, disabled:*, visited:*
+    const tokens = splitByColonOutsideBrackets(cls);
+    if (tokens.length === 0) return;
+
+    const pseudoMap = {
+      hover: ":hover",
+      focus: ":focus",
+      "focus-visible": ":focus-visible",
+      active: ":active",
+      disabled: ":disabled",
+      visited: ":visited",
+    };
+    const isScreen = t => config.screens && config.screens[t] != null;
+    const isDark = t => t === "dark";
+
+    // Consume variant tokens from the left until the first "utility" token.
+    let i = 0;
+    for (; i < tokens.length; i++) {
+      const t = tokens[i];
+      if (isScreen(t) || pseudoMap[t] != null || t === "before" || t === "after" || isDark(t)) continue;
+      break;
+    }
+
+    const variantTokens = tokens.slice(0, i);
+    const util = tokens.slice(i).join(":");
+
+    // Inject keyframes once per build when needed.
+    if (util === "animate-spin" && !keyframesAdded.has("spin")) {
+      keyframesAdded.add("spin");
+      keyframesCSS += "@keyframes spin{to{transform:rotate(360deg)}}\n";
+    }
+    if (util === "animate-ping" && !keyframesAdded.has("ping")) {
+      keyframesAdded.add("ping");
+      keyframesCSS += "@keyframes ping{75%,100%{transform:scale(2);opacity:0}}0%{transform:scale(1);opacity:1}\n";
+    }
+    if (util === "animate-pulse" && !keyframesAdded.has("pulse")) {
+      keyframesAdded.add("pulse");
+      keyframesCSS += "@keyframes pulse{50%{opacity:.5}}100%{opacity:1}\n";
+    }
+
+    const declarations = resolveUtility(util);
+    if (!declarations) return;
+
+    // Base selector always uses the full original class name (Tailwind escaping).
+    let selector = `.${escapeClass(cls)}`;
+
+    const pseudoElementMap = { before: "::before", after: "::after" };
+    const pseudoElementTokens = variantTokens.filter(t => pseudoElementMap[t] != null);
+
+    // Pseudo variants should come before pseudo-elements:
+    // e.g. `.hover\:before\:bg-red-500:hover::before` (valid form)
+    const pseudoTokens = variantTokens.filter(t => pseudoMap[t] != null);
+    if (pseudoTokens.length > 0) selector += pseudoTokens.map(t => pseudoMap[t]).join("");
+
+    if (pseudoElementTokens.length > 0) selector += pseudoElementTokens.map(t => pseudoElementMap[t]).join("");
+
+    // Dark variant scopes with `.dark` ancestor (Tailwind default for class-based dark mode).
+    if (variantTokens.includes("dark")) selector = `.dark ${selector}`;
+
+    // Responsive variants wrap in media queries (nesting if multiple are provided).
+    const screenTokens = variantTokens.filter(t => isScreen(t));
+    let rule = `${selector} { ${declarations} }\n`;
+    for (const bp of screenTokens.slice().reverse()) {
+      const size = config.screens[bp];
+      rule = `@media (min-width:${size}) { ${rule} }\n`;
+    }
+
+    finalCSS += rule;
+  });
+
+  const distDir = path.join(process.cwd(),"dist");
+  if (!fs.existsSync(distDir)) fs.mkdirSync(distDir);
+  fs.writeFileSync(path.join(distDir,"vida.css"),keyframesCSS + finalCSS);
+  console.log("✅ CSS generated successfully!");
+}