@kbach/react 0.5.37 → 0.5.40

package/dist/vite-plugin.js

@@ -673,6 +673,7 @@ function resolveSizing(value, spacing, isArbitrary) {
   if (raw !== void 0) return raw;
   if (/^\d+\/\d+$/.test(value)) {
     const [num, den] = value.split("/").map(Number);
+    if (!den) return null;
     return `${(num / den * 100).toFixed(6)}%`;
   }
   return null;
@@ -2187,10 +2188,10 @@ function resolveUtility(parsed, theme) {
   if (!parsed.value) {
     if (parsed.utility in PLUGIN_STANDALONE) return PLUGIN_STANDALONE[parsed.utility] ?? null;
     if (parsed.utility === "grd" || parsed.utility === "grid") {
-      return { display: "grid" };
+      return getEffectiveIsWeb() ? { display: "grid" } : null;
     }
     if (parsed.utility === "inline-grid") {
-      return { display: "inline-grid" };
+      return getEffectiveIsWeb() ? { display: "inline-grid" } : null;
     }
     if (parsed.utility in getStandalone()) return getStandalone()[parsed.utility] ?? null;
   }
@@ -2203,685 +2204,129 @@ var PLUGIN_RESOLVERS = {};
 function clearPluginUtilities() {
   for (const key of Object.keys(PLUGIN_STANDALONE)) delete PLUGIN_STANDALONE[key];
   for (const key of Object.keys(PLUGIN_RESOLVERS)) delete PLUGIN_RESOLVERS[key];
+  _sortedPrefixes = null;
+  _standaloneNames = null;
 }
 function getPluginStandaloneMap() {
   return PLUGIN_STANDALONE;
 }
+var _sortedPrefixes = null;
+var _standaloneNames = null;
+function getBuiltinUtilityPrefixes() {
+  if (!_sortedPrefixes) {
+    const all = [.../* @__PURE__ */ new Set([...Object.keys(RESOLVERS), ...Object.keys(PLUGIN_RESOLVERS)])];
+    _sortedPrefixes = all.sort((a, b) => b.length - a.length);
+  }
+  return _sortedPrefixes;
+}
+function getBuiltinStandaloneNames() {
+  if (!_standaloneNames) {
+    _standaloneNames = /* @__PURE__ */ new Set([...Object.keys(getStandalone()), ...Object.keys(PLUGIN_STANDALONE)]);
+  }
+  return _standaloneNames;
+}
 
-// src/core/parser.ts
-var PLUGIN_MODIFIERS = /* @__PURE__ */ new Set();
-function registerModifier(name) {
-  PLUGIN_MODIFIERS.add(name);
+// src/core/registry.ts
+var BUILTIN_MODIFIERS = {
+  // ── Mode ─────────────────────────────────────────────────────────────────
+  dark: { darkScheme: "dark", jsBehavior: "mode", jsMatch: (d) => d },
+  "not-light": { darkScheme: "dark", jsBehavior: "mode", jsMatch: (d) => d },
+  light: { darkScheme: "light", jsBehavior: "mode", jsMatch: (d) => !d },
+  "not-dark": { darkScheme: "light", jsBehavior: "mode", jsMatch: (d) => !d },
+  // ── Interactive — JS state + CSS pseudo ───────────────────────────────────
+  hover: { pseudo: ":hover", jsBehavior: "interactive", jsMatch: (_, s) => !!s.hover },
+  "not-hover": { pseudo: ":not(:hover)", jsBehavior: "interactive", jsMatch: (_, s) => !s.hover },
+  focus: { pseudo: ":focus", jsBehavior: "interactive", jsMatch: (_, s) => !!s.focus },
+  "not-focus": { pseudo: ":not(:focus)", jsBehavior: "interactive", jsMatch: (_, s) => !s.focus },
+  active: { pseudo: ":active", jsBehavior: "interactive", jsMatch: (_, s) => !!s.active || !!s.pressed },
+  "not-active": { pseudo: ":not(:active)", jsBehavior: "interactive", jsMatch: (_, s) => !s.active && !s.pressed },
+  pressed: { pseudo: ":active", jsBehavior: "interactive", jsMatch: (_, s) => !!s.pressed || !!s.active },
+  "not-pressed": { pseudo: ":not(:active)", jsBehavior: "interactive", jsMatch: (_, s) => !s.pressed && !s.active },
+  disabled: { pseudo: ":disabled", jsBehavior: "interactive", jsMatch: (_, s) => !!s.disabled },
+  "not-disabled": { pseudo: ":not(:disabled)", jsBehavior: "interactive", jsMatch: (_, s) => !s.disabled },
+  checked: { pseudo: ":checked", jsBehavior: "interactive", jsMatch: (_, s) => !!s.checked },
+  "not-checked": { pseudo: ":not(:checked)", jsBehavior: "interactive", jsMatch: (_, s) => !s.checked },
+  visited: { pseudo: ":visited", jsBehavior: "interactive", jsMatch: (_, s) => !!s.visited },
+  "not-visited": { pseudo: ":not(:visited)", jsBehavior: "interactive", jsMatch: (_, s) => !s.visited },
+  placeholder: { pseudo: "::placeholder", jsBehavior: "interactive", jsMatch: (_, s) => !!s.placeholder },
+  // ── CSS-only pseudo-classes (structural) ──────────────────────────────────
+  first: { pseudo: ":first-child", jsBehavior: "css-only", forcesImportant: true },
+  last: { pseudo: ":last-child", jsBehavior: "css-only", forcesImportant: true },
+  odd: { pseudo: ":nth-child(odd)", jsBehavior: "css-only", forcesImportant: true },
+  even: { pseudo: ":nth-child(even)", jsBehavior: "css-only", forcesImportant: true },
+  only: { pseudo: ":only-child", jsBehavior: "css-only", forcesImportant: true },
+  "focus-within": { pseudo: ":focus-within", jsBehavior: "css-only", forcesImportant: true },
+  "focus-visible": { pseudo: ":focus-visible", jsBehavior: "css-only", forcesImportant: true },
+  // ── CSS-only pseudo-elements ───────────────────────────────────────────────
+  before: { pseudo: "::before", jsBehavior: "css-only" },
+  after: { pseudo: "::after", jsBehavior: "css-only" },
+  selection: { pseudo: "::selection", jsBehavior: "css-only" },
+  "first-letter": { pseudo: "::first-letter", jsBehavior: "css-only" },
+  "first-line": { pseudo: "::first-line", jsBehavior: "css-only" },
+  marker: { pseudo: "::marker", jsBehavior: "css-only" },
+  // ── Group / peer ancestor selectors (CSS-only) ─────────────────────────────
+  "group-hover": { ancestorSelector: ".group:hover ", jsBehavior: "css-only", forcesImportant: true },
+  "group-focus": { ancestorSelector: ".group:focus ", jsBehavior: "css-only", forcesImportant: true },
+  "peer-hover": { ancestorSelector: ".peer:hover ~ ", jsBehavior: "css-only", forcesImportant: true },
+  "peer-focus": { ancestorSelector: ".peer:focus ~ ", jsBehavior: "css-only", forcesImportant: true },
+  // ── Responsive — both CSS (@media min-width) and JS (breakpoints set) ──────
+  sm: { isResponsive: true, jsBehavior: "responsive", jsMatch: (_, __, bp) => bp.has("sm") },
+  md: { isResponsive: true, jsBehavior: "responsive", jsMatch: (_, __, bp) => bp.has("md") },
+  lg: { isResponsive: true, jsBehavior: "responsive", jsMatch: (_, __, bp) => bp.has("lg") },
+  xl: { isResponsive: true, jsBehavior: "responsive", jsMatch: (_, __, bp) => bp.has("xl") },
+  "2xl": { isResponsive: true, jsBehavior: "responsive", jsMatch: (_, __, bp) => bp.has("2xl") },
+  // ── Print media (CSS-only) ─────────────────────────────────────────────────
+  print: { mediaQuery: "print", jsBehavior: "css-only", forcesImportant: true },
+  // ── Orientation / accessibility media (CSS-only) ───────────────────────────
+  landscape: { mediaQuery: "(orientation: landscape)", jsBehavior: "css-only", forcesImportant: true },
+  portrait: { mediaQuery: "(orientation: portrait)", jsBehavior: "css-only", forcesImportant: true },
+  "motion-reduce": { mediaQuery: "(prefers-reduced-motion: reduce)", jsBehavior: "css-only", forcesImportant: true },
+  "motion-safe": { mediaQuery: "(prefers-reduced-motion: no-preference)", jsBehavior: "css-only", forcesImportant: true },
+  "contrast-more": { mediaQuery: "(prefers-contrast: more)", jsBehavior: "css-only", forcesImportant: true },
+  "contrast-less": { mediaQuery: "(prefers-contrast: less)", jsBehavior: "css-only", forcesImportant: true },
+  // ── Directionality (CSS-only) ──────────────────────────────────────────────
+  rtl: { dirSelector: '[dir="rtl"] ', jsBehavior: "css-only", forcesImportant: true },
+  ltr: { dirSelector: '[dir="ltr"] ', jsBehavior: "css-only", forcesImportant: true }
+};
+var _pluginModifiers = {};
+var _allNames = null;
+var _interactiveNames = null;
+var _modeNames = null;
+var _responsiveNames = null;
+function _invalidate() {
+  _allNames = null;
+  _interactiveNames = null;
+  _modeNames = null;
+  _responsiveNames = null;
+}
+function registerModifier(name, def) {
+  _pluginModifiers[name] = def;
+  _invalidate();
 }
 function clearPluginModifiers() {
-  PLUGIN_MODIFIERS.clear();
+  for (const k of Object.keys(_pluginModifiers)) delete _pluginModifiers[k];
+  _invalidate();
 }
-var MODIFIERS = /* @__PURE__ */ new Set([
-  // Theme
-  "dark",
-  "light",
-  "not-dark",
-  "not-light",
-  // Interaction
-  "hover",
-  "focus",
-  "active",
-  "visited",
-  "disabled",
-  "checked",
-  "pressed",
-  "placeholder",
-  "focus-within",
-  "focus-visible",
-  // Negated interaction
-  "not-hover",
-  "not-focus",
-  "not-active",
-  "not-visited",
-  "not-disabled",
-  "not-checked",
-  "not-pressed",
-  // Structural
-  "first",
-  "last",
-  "odd",
-  "even",
-  "only",
-  // Group / peer
-  "group-hover",
-  "group-focus",
-  "peer-hover",
-  "peer-focus",
-  // Responsive (handled separately but accepted)
-  "sm",
-  "md",
-  "lg",
-  "xl",
-  "2xl",
-  // Pseudo-elements (CSS-injection only; matchesMods returns false for these)
-  "before",
-  "after",
-  "selection",
-  "first-letter",
-  "first-line",
-  "marker",
-  // Print media modifier
-  "print",
-  // Orientation media modifiers (CSS-injection only)
-  "landscape",
-  "portrait",
-  // Accessibility media modifiers (CSS-injection only)
-  "motion-reduce",
-  "motion-safe",
-  "contrast-more",
-  "contrast-less",
-  // Directionality modifiers (CSS-injection only)
-  "rtl",
-  "ltr"
-]);
-var UTILITY_PREFIXES = [
-  // Multi-word flex
-  "flex-row-reverse",
-  "flex-col-reverse",
-  "flex-row",
-  "flex-col",
-  "flex-wrap-reverse",
-  "flex-wrap",
-  "flex-nowrap",
-  "flex-shrink-0",
-  "flex-shrink",
-  "flex-grow-0",
-  "flex-grow",
-  "items-start",
-  "items-end",
-  "items-center",
-  "items-baseline",
-  "items-stretch",
-  "justify-start",
-  "justify-end",
-  "justify-center",
-  "justify-between",
-  "justify-around",
-  "justify-evenly",
-  "content-start",
-  "content-end",
-  "content-center",
-  "content-between",
-  "content-around",
-  "content-evenly",
-  "self-start",
-  "self-end",
-  "self-center",
-  "self-auto",
-  "self-stretch",
-  "text-left",
-  "text-right",
-  "text-center",
-  "text-justify",
-  "font-thin",
-  "font-extralight",
-  "font-light",
-  "font-normal",
-  "font-medium",
-  "font-semibold",
-  "font-bold",
-  "font-extrabold",
-  "font-black",
-  "overflow-hidden",
-  "overflow-visible",
-  "overflow-scroll",
-  "overflow-auto",
-  "overflow-x-hidden",
-  "overflow-x-scroll",
-  "overflow-x-auto",
-  "overflow-y-hidden",
-  "overflow-y-scroll",
-  "overflow-y-auto",
-  "object-contain",
-  "object-cover",
-  "object-fill",
-  "object-none",
-  "object-scale-down",
-  "border-solid",
-  "border-dashed",
-  "border-dotted",
-  "border-none",
-  "border-t",
-  "border-r",
-  "border-b",
-  "border-l",
-  "rounded-tl",
-  "rounded-tr",
-  "rounded-bl",
-  "rounded-br",
-  "rounded-t",
-  "rounded-r",
-  "rounded-b",
-  "rounded-l",
-  "list-none",
-  "list-disc",
-  "list-decimal",
-  "cursor-auto",
-  "cursor-default",
-  "cursor-pointer",
-  "cursor-wait",
-  "cursor-text",
-  "cursor-move",
-  "cursor-not-allowed",
-  "select-none",
-  "select-text",
-  "select-all",
-  "select-auto",
-  "pointer-events-none",
-  "pointer-events-auto",
-  "whitespace-normal",
-  "whitespace-nowrap",
-  "whitespace-pre-wrap",
-  "whitespace-pre-line",
-  "whitespace-pre",
-  "break-normal",
-  "break-words",
-  "break-all",
-  "break-keep",
-  "bg-clip-border",
-  "bg-clip-padding",
-  "bg-clip-content",
-  "bg-clip-text",
-  "bg-gradient-to",
-  "resize-none",
-  "resize-y",
-  "resize-x",
-  "box-border",
-  "box-content",
-  "gap-x",
-  "gap-y",
-  "inset-x",
-  "inset-y",
-  "divide-x",
-  "divide-y",
-  "space-x",
-  "space-y",
-  "translate-x",
-  "translate-y",
-  "scale-x",
-  "scale-y",
-  "skew-x",
-  "skew-y",
-  // Transform origin (single prefix, value carries direction)
-  "origin",
-  "min-w",
-  "min-h",
-  "max-w",
-  "max-h",
-  "ring-offset",
-  "bg-opacity",
-  "text-opacity",
-  "border-opacity",
-  // Grid placement
-  "col-span",
-  "col-start",
-  "col-end",
-  "row-span",
-  "row-start",
-  "row-end",
-  "grid-cols",
-  "grid-rows",
-  "grid-flow",
-  "auto-cols",
-  "auto-rows",
-  // Grid alignment
-  "place-items",
-  "place-content",
-  "place-self",
-  "justify-items",
-  "justify-self",
-  // Backdrop filters (longer than 'backdrop' alone)
-  "backdrop-blur",
-  "backdrop-brightness",
-  "backdrop-contrast",
-  "backdrop-grayscale",
-  "backdrop-hue-rotate",
-  "backdrop-invert",
-  "backdrop-opacity",
-  "backdrop-saturate",
-  "backdrop-sepia",
-  "backdrop-filter",
-  // Filters
-  "drop-shadow",
-  "hue-rotate",
-  "text-shadow",
-  "underline-offset",
-  "outline-offset",
-  "will-change",
-  "mix-blend",
-  "bg-blend",
-  "decoration",
-  "perspective",
-  "tint",
-  "animate",
-  // Single-word prefixes last
-  "appearance-none",
-  "outline-none",
-  "outline",
-  "inline-flex",
-  "inline-block",
-  "inline-grid",
-  "italic",
-  "non-italic",
-  "underline",
-  "overline",
-  "line-through",
-  "no-underline",
-  "uppercase",
-  "lowercase",
-  "capitalize",
-  "normal-case",
-  "antialiased",
-  "subpixel-antialiased",
-  "overflow-ellipsis",
-  "truncate",
-  "sr-only",
-  "not-sr-only",
-  "relative",
-  "absolute",
-  "fixed",
-  "sticky",
-  "static",
-  "visible",
-  "invisible",
-  "hidden",
-  "contents",
-  "flow-root",
-  "block",
-  "inline",
-  "flex",
-  "grid",
-  "resize",
-  "appearance",
-  "border",
-  "rounded",
-  "shadow",
-  "size",
-  "opacity",
-  "leading",
-  "tracking",
-  "line-clamp",
-  "basis",
-  "grow",
-  "shrink",
-  "order",
-  "delay",
-  "duration",
-  "scale",
-  "rotate",
-  "aspect",
-  "columns",
-  "ring",
-  "gap",
-  "inset",
-  "filter",
-  "transform",
-  "blur",
-  "brightness",
-  "contrast",
-  "grayscale",
-  "invert",
-  "saturate",
-  "sepia",
-  "bg",
-  "text",
-  "font",
-  "caret",
-  "accent",
-  "from",
-  "via",
-  "to",
-  "divide",
-  "space",
-  "transition",
-  "px",
-  "py",
-  "pt",
-  "pr",
-  "pb",
-  "pl",
-  "p",
-  "mx",
-  "my",
-  "mt",
-  "mr",
-  "mb",
-  "ml",
-  "m",
-  "w",
-  "h",
-  "top",
-  "right",
-  "bottom",
-  "left",
-  "z",
-  "col",
-  "row"
-];
-var SORTED_PREFIXES = [...new Set(UTILITY_PREFIXES)].sort((a, b) => b.length - a.length);
-var STANDALONE_UTILITIES = /* @__PURE__ */ new Set([
-  // Display
-  "flex",
-  "block",
-  "inline-block",
-  "inline",
-  "grid",
-  "inline-flex",
-  "inline-grid",
-  "grd",
-  "hidden",
-  "contents",
-  "flow-root",
-  // Position
-  "relative",
-  "absolute",
-  "fixed",
-  "sticky",
-  "static",
-  // Visibility
-  "visible",
-  "invisible",
-  // Typography
-  "uppercase",
-  "lowercase",
-  "capitalize",
-  "normal-case",
-  "italic",
-  "non-italic",
-  "underline",
-  "overline",
-  "line-through",
-  "no-underline",
-  "truncate",
-  "antialiased",
-  "sr-only",
-  "not-sr-only",
-  // Font variant numeric
-  "normal-nums",
-  "ordinal",
-  "slashed-zero",
-  "lining-nums",
-  "oldstyle-nums",
-  "proportional-nums",
-  "tabular-nums",
-  "diagonal-fractions",
-  "stacked-fractions",
-  // Flexbox
-  "flex-row",
-  "flex-col",
-  "flex-row-reverse",
-  "flex-col-reverse",
-  "flex-wrap",
-  "flex-wrap-reverse",
-  "flex-nowrap",
-  "flex-shrink",
-  "flex-shrink-0",
-  "flex-grow",
-  "flex-grow-0",
-  "items-start",
-  "items-end",
-  "items-center",
-  "items-baseline",
-  "items-stretch",
-  "justify-start",
-  "justify-end",
-  "justify-center",
-  "justify-between",
-  "justify-around",
-  "justify-evenly",
-  "content-start",
-  "content-end",
-  "content-center",
-  "content-between",
-  "content-around",
-  "content-evenly",
-  "content-stretch",
-  "self-start",
-  "self-end",
-  "self-center",
-  "self-auto",
-  "self-stretch",
-  "self-baseline",
-  // Text align
-  "text-left",
-  "text-right",
-  "text-center",
-  "text-justify",
-  // Font weight shortcuts
-  "font-thin",
-  "font-extralight",
-  "font-light",
-  "font-normal",
-  "font-medium",
-  "font-semibold",
-  "font-bold",
-  "font-extrabold",
-  "font-black",
-  // Overflow
-  "overflow-hidden",
-  "overflow-visible",
-  "overflow-scroll",
-  "overflow-auto",
-  "overflow-x-hidden",
-  "overflow-x-scroll",
-  "overflow-x-auto",
-  "overflow-y-hidden",
-  "overflow-y-scroll",
-  "overflow-y-auto",
-  // Object fit
-  "object-contain",
-  "object-cover",
-  "object-fill",
-  "object-none",
-  "object-scale-down",
-  // Object position
-  "object-center",
-  "object-top",
-  "object-bottom",
-  "object-left",
-  "object-right",
-  "object-left-top",
-  "object-left-bottom",
-  "object-right-top",
-  "object-right-bottom",
-  // Border
-  "border-solid",
-  "border-dashed",
-  "border-dotted",
-  "border-none",
-  "border-t",
-  "border-r",
-  "border-b",
-  "border-l",
-  "border-collapse",
-  "border-separate",
-  // Lists
-  "list-none",
-  "list-disc",
-  "list-decimal",
-  "list-inside",
-  "list-outside",
-  // Cursor / select
-  "cursor-auto",
-  "cursor-default",
-  "cursor-pointer",
-  "cursor-wait",
-  "cursor-text",
-  "cursor-move",
-  "cursor-not-allowed",
-  "select-none",
-  "select-text",
-  "select-all",
-  "select-auto",
-  "pointer-events-none",
-  "pointer-events-auto",
-  // Whitespace / word break
-  "whitespace-normal",
-  "whitespace-nowrap",
-  "whitespace-pre",
-  "whitespace-pre-wrap",
-  "whitespace-pre-line",
-  "break-normal",
-  "break-words",
-  "break-all",
-  // Background clip
-  "bg-clip-border",
-  "bg-clip-padding",
-  "bg-clip-content",
-  "bg-clip-text",
-  // Background size
-  "bg-auto",
-  "bg-cover",
-  "bg-contain",
-  // Background position
-  "bg-center",
-  "bg-top",
-  "bg-bottom",
-  "bg-left",
-  "bg-right",
-  "bg-left-top",
-  "bg-left-bottom",
-  "bg-right-top",
-  "bg-right-bottom",
-  // Background repeat
-  "bg-repeat",
-  "bg-no-repeat",
-  "bg-repeat-x",
-  "bg-repeat-y",
-  "bg-repeat-round",
-  "bg-repeat-space",
-  // Background attachment
-  "bg-fixed",
-  "bg-local",
-  "bg-scroll",
-  // Background image
-  "bg-none",
-  // Box sizing
-  "box-border",
-  "box-content",
-  // Resize
-  "resize",
-  "resize-none",
-  "resize-y",
-  "resize-x",
-  // Outline
-  "appearance-none",
-  "outline-none",
-  "outline",
-  // Table
-  "table",
-  "table-auto",
-  "table-fixed",
-  "caption-top",
-  "caption-bottom",
-  // CSS filters (standalone = default/full effect)
-  "grayscale",
-  "invert",
-  "sepia",
-  // Isolation
-  "isolate",
-  "isolation-auto",
-  // Backface visibility (both platforms)
-  "backface-visible",
-  "backface-hidden",
-  // Divide none
-  "divide-none",
-  // Group / peer markers (no-op style; needed so isKnownUtility recognises them)
-  "group",
-  "peer",
-  // Text-wrap (web-only)
-  "text-wrap",
-  "text-nowrap",
-  "text-balance",
-  "text-pretty",
-  // Screen sizing
-  "w-screen",
-  "min-h-screen",
-  "max-h-screen",
-  "min-w-screen",
-  "max-w-screen",
-  // max-w named container sizes (Tailwind compat)
-  "max-w-none",
-  "max-w-xs",
-  "max-w-sm",
-  "max-w-md",
-  "max-w-lg",
-  "max-w-xl",
-  "max-w-2xl",
-  "max-w-3xl",
-  "max-w-4xl",
-  "max-w-5xl",
-  "max-w-6xl",
-  "max-w-7xl",
-  "max-w-prose",
-  // Extended cursors (web-only)
-  "cursor-grab",
-  "cursor-grabbing",
-  "cursor-zoom-in",
-  "cursor-zoom-out",
-  "cursor-crosshair",
-  "cursor-help",
-  "cursor-none",
-  // Overflow clip (web-only)
-  "overflow-clip",
-  "overflow-x-clip",
-  "overflow-y-clip",
-  // Scroll behavior (web-only)
-  "scroll-smooth",
-  "scroll-auto",
-  // Float & clear (web-only)
-  "float-left",
-  "float-right",
-  "float-start",
-  "float-end",
-  "float-none",
-  "clear-left",
-  "clear-right",
-  "clear-both",
-  "clear-start",
-  "clear-end",
-  "clear-none",
-  // Vertical align (web-only)
-  "align-baseline",
-  "align-top",
-  "align-middle",
-  "align-bottom",
-  "align-text-top",
-  "align-text-bottom",
-  "align-sub",
-  "align-super",
-  // Touch action (web-only)
-  "touch-auto",
-  "touch-none",
-  "touch-pan-x",
-  "touch-pan-y",
-  "touch-pan-left",
-  "touch-pan-right",
-  "touch-pan-up",
-  "touch-pan-down",
-  "touch-pinch-zoom",
-  "touch-manipulation"
-]);
+function getModifier(name) {
+  return BUILTIN_MODIFIERS[name] ?? _pluginModifiers[name];
+}
+function isKnownModifier(name) {
+  return name in BUILTIN_MODIFIERS || name in _pluginModifiers;
+}
+
+// src/core/parser.ts
 function parseClass(className) {
   const trimmed = className.trim();
   if (!trimmed) return null;
   const modifiers = [];
   let remaining = trimmed;
-  for (let i = 0; i < 3; i++) {
+  while (true) {
     const colonIdx = findOuterColon(remaining);
     if (colonIdx === -1) break;
     const candidate = remaining.slice(0, colonIdx);
-    if (MODIFIERS.has(candidate) || PLUGIN_MODIFIERS.has(candidate)) {
-      modifiers.push(candidate);
-      remaining = remaining.slice(colonIdx + 1);
-    } else {
-      break;
-    }
+    if (!isKnownModifier(candidate)) break;
+    modifiers.push(candidate);
+    remaining = remaining.slice(colonIdx + 1);
   }
   let important = false;
   if (remaining.startsWith("!") && remaining.length > 1) {
@@ -2899,10 +2344,10 @@ function parseClass(className) {
     const value = remaining.slice(bracketStart + 2, -1).replace(/_/g, " ");
     return { original: trimmed, modifiers, negative, important, utility, value, isArbitrary: true };
   }
-  if (STANDALONE_UTILITIES.has(remaining)) {
+  if (getBuiltinStandaloneNames().has(remaining)) {
     return { original: trimmed, modifiers, negative, important, utility: remaining, value: "", isArbitrary: false };
   }
-  for (const prefix of SORTED_PREFIXES) {
+  for (const prefix of getBuiltinUtilityPrefixes()) {
     if (remaining === prefix) {
       return { original: trimmed, modifiers, negative, important, utility: prefix, value: "", isArbitrary: false };
     }
@@ -2997,7 +2442,11 @@ var LRUCache = class {
     return this;
   }
   has(key) {
-    return this.cache.has(key);
+    if (!this.cache.has(key)) return false;
+    const value = this.cache.get(key);
+    this.cache.delete(key);
+    this.cache.set(key, value);
+    return true;
   }
   delete(key) {
     return this.cache.delete(key);
@@ -3011,12 +2460,12 @@ var LRUCache = class {
 };
 
 // src/core/resolver.ts
-var styleCache = new LRUCache(1e4);
 var FONT_KEY = "__kbach_default_font__";
 function setDefaultFontFamily(font) {
   globalThis[FONT_KEY] = font;
 }
 var _styleEl = null;
+var _injectedRules = new LRUCache(5e4);
 function getStyleEl() {
   if (_styleEl) return _styleEl;
   _styleEl = document.createElement("style");
@@ -3042,156 +2491,20 @@ function injectGlobalStyles(theme) {
   }
   getGlobalStyleEl().textContent = rules.join("\n");
 }
-var MODIFIER_TO_PSEUDO = {
-  hover: ":hover",
-  focus: ":focus",
-  "focus-within": ":focus-within",
-  "focus-visible": ":focus-visible",
-  active: ":active",
-  pressed: ":active",
-  disabled: ":disabled",
-  checked: ":checked",
-  visited: ":visited",
-  placeholder: "::placeholder",
-  first: ":first-child",
-  last: ":last-child",
-  odd: ":nth-child(odd)",
-  even: ":nth-child(even)",
-  only: ":only-child",
-  "not-hover": ":not(:hover)",
-  "not-focus": ":not(:focus)",
-  "not-active": ":not(:active)",
-  "not-pressed": ":not(:active)",
-  "not-disabled": ":not(:disabled)",
-  "not-checked": ":not(:checked)",
-  "not-visited": ":not(:visited)",
-  // Pseudo-elements (CSS-injection only; never applied as inline styles)
-  before: "::before",
-  after: "::after",
-  selection: "::selection",
-  "first-letter": "::first-letter",
-  "first-line": "::first-line",
-  marker: "::marker"
-};
-var GROUP_PEER_PREFIX = {
-  "group-hover": ".group:hover",
-  "group-focus": ".group:focus",
-  "peer-hover": ".peer:hover ~",
-  "peer-focus": ".peer:focus ~"
-};
-var MODE_MODS = /* @__PURE__ */ new Set(["dark", "light", "not-dark", "not-light"]);
-var RESPONSIVE_MODS = /* @__PURE__ */ new Set(["sm", "md", "lg", "xl", "2xl"]);
-var PRINT_MODS = /* @__PURE__ */ new Set(["print"]);
-var MEDIA_MODS = {
-  landscape: "(orientation: landscape)",
-  portrait: "(orientation: portrait)",
-  "motion-reduce": "(prefers-reduced-motion: reduce)",
-  "motion-safe": "(prefers-reduced-motion: no-preference)",
-  "contrast-more": "(prefers-contrast: more)",
-  "contrast-less": "(prefers-contrast: less)"
-};
-var DIR_MODS = {
-  rtl: '[dir="rtl"]',
-  ltr: '[dir="ltr"]'
-};
 function buildDivideDecls(styles) {
   const parts = [];
   if ("__divideX" in styles) {
     const w = Number(styles.__divideX);
-    parts.push(`border-left-width: ${w}px`);
-    parts.push("border-right-width: 0px");
+    parts.push(`border-left-width: ${w}px`, "border-right-width: 0px");
   }
   if ("__divideY" in styles) {
     const w = Number(styles.__divideY);
-    parts.push(`border-top-width: ${w}px`);
-    parts.push("border-bottom-width: 0px");
+    parts.push(`border-top-width: ${w}px`, "border-bottom-width: 0px");
   }
   if ("__divideColor" in styles) parts.push(`border-color: ${String(styles.__divideColor)}`);
   if ("__divideStyle" in styles) parts.push(`border-style: ${String(styles.__divideStyle)}`);
   return parts.join("; ");
 }
-function buildClassCSSRules(cls, bucketKey, styles, darkMode, important, screens) {
-  const rules = [];
-  if ("__keyframe" in styles && typeof styles.__keyframe === "string") {
-    rules.push(styles.__keyframe);
-  }
-  const isDivide = "__divideX" in styles || "__divideY" in styles || "__divideColor" in styles || "__divideStyle" in styles;
-  const escaped = escapeCSSSelector(cls);
-  const childSuffix = isDivide ? " > * + *" : "";
-  if (bucketKey === "base") {
-    const baseCssDecls = isDivide ? buildDivideDecls(styles) : styleValueToCSS(styles, important);
-    if (!baseCssDecls) return rules;
-    rules.push(`.${escaped}${childSuffix} { ${baseCssDecls} }`);
-    return rules;
-  }
-  const mods = bucketKey.split(":");
-  const responsiveMods = mods.filter((m) => RESPONSIVE_MODS.has(m));
-  const nonResponsiveMods = mods.filter((m) => !RESPONSIVE_MODS.has(m));
-  const hasDark = nonResponsiveMods.includes("dark") || nonResponsiveMods.includes("not-light");
-  const hasLight = nonResponsiveMods.includes("light") || nonResponsiveMods.includes("not-dark");
-  const hasPrint = nonResponsiveMods.includes("print");
-  const mediaMods = nonResponsiveMods.filter((m) => m in MEDIA_MODS);
-  const dirMods = nonResponsiveMods.filter((m) => m in DIR_MODS);
-  const ancestorMods = nonResponsiveMods.filter((m) => m in GROUP_PEER_PREFIX);
-  const pseudoMods = nonResponsiveMods.filter(
-    (m) => !MODE_MODS.has(m) && !(m in GROUP_PEER_PREFIX) && !PRINT_MODS.has(m) && !(m in MEDIA_MODS) && !(m in DIR_MODS)
-  );
-  const pseudoSuffix = pseudoMods.map((p) => MODIFIER_TO_PSEUDO[p] ?? `:${p}`).join("");
-  const elementSelector = `.${escaped}${pseudoSuffix}${childSuffix}`;
-  const ancestorPrefix = ancestorMods.length ? ancestorMods.map((m) => GROUP_PEER_PREFIX[m]).join(" ") + " " : "";
-  const dirPrefix = dirMods.length ? dirMods.map((m) => DIR_MODS[m]).join(" ") + " " : "";
-  const selector = `${dirPrefix}${ancestorPrefix}${elementSelector}`;
-  const CSS_ONLY_PSEUDOS = /* @__PURE__ */ new Set([
-    "first",
-    "last",
-    "odd",
-    "even",
-    "only",
-    "focus-within",
-    "focus-visible"
-  ]);
-  const needsImportant = important || hasPrint || mediaMods.length > 0 || dirMods.length > 0 || ancestorMods.length > 0 || pseudoMods.some((m) => CSS_ONLY_PSEUDOS.has(m));
-  const cssDecls = isDivide ? buildDivideDecls(styles) : styleValueToCSS(styles, needsImportant);
-  if (!cssDecls) return rules;
-  let rule;
-  if (hasDark) {
-    if (darkMode === "media") {
-      rule = `@media (prefers-color-scheme: dark) { ${selector} { ${cssDecls} } }`;
-    } else if (darkMode === "class") {
-      rule = `.dark ${selector} { ${cssDecls} }`;
-    } else {
-      rule = `[data-theme="dark"] ${selector} { ${cssDecls} }`;
-    }
-  } else if (hasLight) {
-    if (darkMode === "media") {
-      rule = `@media (prefers-color-scheme: light) { ${selector} { ${cssDecls} } }`;
-    } else if (darkMode === "class") {
-      rule = `:not(.dark) ${selector} { ${cssDecls} }`;
-    } else {
-      rule = `[data-theme="light"] ${selector} { ${cssDecls} }`;
-    }
-  } else {
-    rule = `${selector} { ${cssDecls} }`;
-  }
-  if (hasPrint) rule = `@media print { ${rule} }`;
-  for (const m of mediaMods) rule = `@media ${MEDIA_MODS[m]} { ${rule} }`;
-  if (responsiveMods.length > 0) {
-    const minWidth = Math.max(...responsiveMods.map((m) => screens[m] ?? 0));
-    if (minWidth > 0) rule = `@media (min-width: ${minWidth}px) { ${rule} }`;
-  }
-  rules.push(rule);
-  return rules;
-}
-function generateClassCSS(classString, theme, darkMode = "attribute", screens = {}) {
-  const rules = [];
-  for (const parsed of parseClasses(classString)) {
-    const styles = resolveUtility(parsed, theme);
-    if (!styles) continue;
-    const bucketKey = parsed.modifiers.length === 0 ? "base" : parsed.modifiers.join(":");
-    rules.push(...buildClassCSSRules(parsed.original, bucketKey, styles, darkMode, parsed.important, screens));
-  }
-  return rules.join("\n");
-}
 var RN_ONLY_PROPS = /* @__PURE__ */ new Set([
   "shadowColor",
   "shadowOffset",
@@ -3201,13 +2514,10 @@ var RN_ONLY_PROPS = /* @__PURE__ */ new Set([
   "includeFontPadding",
   "textAlignVertical",
   "writingDirection",
-  // Text shadow native props — web uses the textShadow CSS shorthand instead
   "textShadowColor",
   "textShadowOffset",
   "textShadowRadius",
-  // tintColor is native-only (Image/icon tinting)
   "tintColor",
-  // Internal markers — handled specially, never serialized as CSS props
   "__divideX",
   "__divideY",
   "__divideColor",
@@ -3249,8 +2559,7 @@ function styleValueToCSS(styles, forceImportant = false) {
     const imp = forceImportant || prop === "display" && (cssVal === "grid" || cssVal === "inline-grid") || prop === "position" && (cssVal === "sticky" || cssVal === "fixed" || cssVal === "static") ? " !important" : "";
     if (prop in RN_SHORTHAND_EXPAND) {
       const [p1, p2] = RN_SHORTHAND_EXPAND[prop];
-      parts.push(`${p1}: ${cssVal}${imp}`);
-      parts.push(`${p2}: ${cssVal}${imp}`);
+      parts.push(`${p1}: ${cssVal}${imp}`, `${p2}: ${cssVal}${imp}`);
       continue;
     }
     parts.push(`${camelToKebab(prop)}: ${cssVal}${imp}`);
@@ -3260,6 +2569,85 @@ function styleValueToCSS(styles, forceImportant = false) {
 function camelToKebab(str) {
   return str.replace(/([A-Z])/g, "-$1").toLowerCase();
 }
+function buildClassCSSRules(cls, bucketKey, styles, darkMode, important, screens) {
+  const rules = [];
+  if ("__keyframe" in styles && typeof styles.__keyframe === "string") {
+    rules.push(styles.__keyframe);
+  }
+  const isDivide = "__divideX" in styles || "__divideY" in styles || "__divideColor" in styles || "__divideStyle" in styles;
+  const escaped = escapeCSSSelector(cls);
+  const childSuffix = isDivide ? " > * + *" : "";
+  if (bucketKey === "base") {
+    const decls2 = isDivide ? buildDivideDecls(styles) : styleValueToCSS(styles, important);
+    if (!decls2) return rules;
+    rules.push(`.${escaped}${childSuffix} { ${decls2} }`);
+    return rules;
+  }
+  const mods = bucketKey.split(":");
+  let darkScheme;
+  let needsImportant = important;
+  const pseudoParts = [];
+  const ancestorParts = [];
+  const dirParts = [];
+  const mediaWrappers = [];
+  let minWidth = 0;
+  for (const mod of mods) {
+    const def = getModifier(mod);
+    if (!def) continue;
+    if (def.darkScheme) darkScheme = def.darkScheme;
+    if (def.pseudo) pseudoParts.push(def.pseudo);
+    if (def.ancestorSelector) {
+      ancestorParts.push(def.ancestorSelector);
+      needsImportant = true;
+    }
+    if (def.dirSelector) {
+      dirParts.push(def.dirSelector);
+      needsImportant = true;
+    }
+    if (def.mediaQuery) {
+      mediaWrappers.push(`@media ${def.mediaQuery}`);
+      needsImportant = true;
+    }
+    if (def.isResponsive) {
+      const w = screens[mod] ?? 0;
+      if (w > minWidth) minWidth = w;
+    }
+    if (def.forcesImportant) needsImportant = true;
+  }
+  const pseudoSuffix = pseudoParts.join("");
+  const elementSelector = `.${escaped}${pseudoSuffix}${childSuffix}`;
+  const ancestorPrefix = ancestorParts.join("");
+  const dirPrefix = dirParts.join("");
+  const selector = `${dirPrefix}${ancestorPrefix}${elementSelector}`;
+  const decls = isDivide ? buildDivideDecls(styles) : styleValueToCSS(styles, needsImportant);
+  if (!decls) return rules;
+  let rule;
+  if (darkScheme === "dark") {
+    if (darkMode === "media") rule = `@media (prefers-color-scheme: dark) { ${selector} { ${decls} } }`;
+    else if (darkMode === "class") rule = `.dark ${selector} { ${decls} }`;
+    else rule = `[data-theme="dark"] ${selector} { ${decls} }`;
+  } else if (darkScheme === "light") {
+    if (darkMode === "media") rule = `@media (prefers-color-scheme: light) { ${selector} { ${decls} } }`;
+    else if (darkMode === "class") rule = `:not(.dark) ${selector} { ${decls} }`;
+    else rule = `[data-theme="light"] ${selector} { ${decls} }`;
+  } else {
+    rule = `${selector} { ${decls} }`;
+  }
+  for (const mw of mediaWrappers) rule = `${mw} { ${rule} }`;
+  if (minWidth > 0) rule = `@media (min-width: ${minWidth}px) { ${rule} }`;
+  rules.push(rule);
+  return rules;
+}
+function generateClassCSS(classString, theme, darkMode = "attribute", screens = {}) {
+  const rules = [];
+  for (const parsed of parseClasses(classString)) {
+    const styles = resolveUtility(parsed, theme);
+    if (!styles) continue;
+    const bucketKey = parsed.modifiers.length === 0 ? "base" : parsed.modifiers.join(":");
+    rules.push(...buildClassCSSRules(parsed.original, bucketKey, styles, darkMode, parsed.important, screens));
+  }
+  return rules.join("\n");
+}
 
 // src/core/config.ts
 function deepMerge(base, override) {
@@ -3294,14 +2682,24 @@ function resolveOneRef(ref, colors) {
   return entry[m[2]] ?? null;
 }
 function resolveColorRefs(colors) {
+  const MAX_DEPTH = 5;
+  function resolveChain(raw) {
+    let current = raw;
+    for (let i = 0; i < MAX_DEPTH; i++) {
+      const next = resolveOneRef(current, colors);
+      if (!next || next === current) break;
+      current = next;
+    }
+    return current;
+  }
   const out = {};
   for (const [key, val] of Object.entries(colors)) {
     if (typeof val === "string") {
-      out[key] = resolveOneRef(val, colors) ?? val;
+      out[key] = resolveChain(val);
     } else {
       const shades = {};
       for (const [shade, hex] of Object.entries(val)) {
-        shades[shade] = resolveOneRef(hex, colors) ?? hex;
+        shades[shade] = resolveChain(hex);
       }
       out[key] = shades;
     }
@@ -3349,15 +2747,26 @@ function buildConfig(userConfig) {
   injectGlobalStyles(resolved.theme);
   return resolved;
 }
+function _selectorToModifierDef(selector) {
+  const s = selector.trim();
+  if (s.startsWith("@media ")) {
+    return { mediaQuery: s.slice(7), jsBehavior: "css-only", forcesImportant: true };
+  }
+  if (s.startsWith("::") || s.startsWith(":")) {
+    return { pseudo: s, jsBehavior: "css-only", forcesImportant: true };
+  }
+  return { ancestorSelector: s.endsWith(" ") ? s : `${s} `, jsBehavior: "css-only", forcesImportant: true };
+}
 function makePluginAPI(theme) {
   const standalone = getPluginStandaloneMap();
   return {
     addUtility(name, styles) {
       standalone[name] = styles;
     },
-    addVariant(name, selector) {
-      customVariants[name] = selector;
-      registerModifier(name);
+    addVariant(name, selectorOrDef) {
+      const def = typeof selectorOrDef === "string" ? _selectorToModifierDef(selectorOrDef) : selectorOrDef;
+      customVariants[name] = typeof selectorOrDef === "string" ? selectorOrDef : name;
+      registerModifier(name, def);
     },
     theme(path, defaultValue) {
       const parts = path.replace(/\[([^\]]+)\]/g, ".$1").split(".");
@@ -3418,12 +2827,18 @@ function classifyToken(token) {
   return "Utilities";
 }
 function buildColorVarMap(theme, usedCSS) {
+  const usedHexValues = /* @__PURE__ */ new Set();
+  const hexRe = /#[0-9a-fA-F]{3,8}\b/g;
+  let hm;
+  while ((hm = hexRe.exec(usedCSS)) !== null) usedHexValues.add(hm[0].toLowerCase());
   const map = /* @__PURE__ */ new Map();
   for (const [name, shades] of Object.entries(theme.colors ?? {})) {
     const entries = typeof shades === "string" ? [[name, shades]] : Object.entries(shades).map(([s, v]) => [`${name}-${s}`, v]);
     for (const [fullName, val] of entries) {
-      if (typeof val === "string" && /^#[0-9a-fA-F]{3,8}$/.test(val) && usedCSS.includes(val)) {
-        map.set(val, `--color-${fullName}`);
+      if (typeof val === "string" && /^#[0-9a-fA-F]{3,8}$/.test(val)) {
+        if (usedHexValues.has(val.toLowerCase())) {
+          map.set(val, `--color-${fullName}`);
+        }
       }
     }
   }
@@ -3503,6 +2918,37 @@ function toNumericScreens(screens) {
   }
   return out;
 }
+function extractClassStrings(code) {
+  const found = /* @__PURE__ */ new Set();
+  const simpleRe = /(?:className|kb)=["']([^"']+)["']/g;
+  let m;
+  while ((m = simpleRe.exec(code)) !== null) pushTokens(m[1], found);
+  const exprLiteralRe = /(?:className|kb)=\{["'`]([^"'`}]+)["'`]\}/g;
+  while ((m = exprLiteralRe.exec(code)) !== null) pushTokens(m[1], found);
+  const ternaryBlockRe = /(?:className|kb)=\{([^}]{1,500})\}/g;
+  while ((m = ternaryBlockRe.exec(code)) !== null) {
+    const block = m[1];
+    const innerStrings = block.match(/["'`]([^"'`]{1,300})["'`]/g) ?? [];
+    for (const s of innerStrings) pushTokens(s.slice(1, -1), found);
+  }
+  const clsxRe = /(?:clsx|cn|classnames)\(([^)]{1,1000})\)/g;
+  while ((m = clsxRe.exec(code)) !== null) {
+    const block = m[1];
+    const innerStrings = block.match(/["'`]([^"'`]{1,300})["'`]/g) ?? [];
+    for (const s of innerStrings) pushTokens(s.slice(1, -1), found);
+  }
+  const templateRe = /`([^`]{1,2000})`/g;
+  while ((m = templateRe.exec(code)) !== null) {
+    const staticParts = m[1].replace(/\$\{[^}]*\}/g, " ");
+    pushTokens(staticParts, found);
+  }
+  return [...found];
+}
+function pushTokens(str, into) {
+  for (const tok of splitClassTokens(str)) {
+    if (tok) into.add(tok);
+  }
+}
 function scanDir(dir, onFile) {
   try {
     for (const entry of (0, import_fs.readdirSync)(dir)) {
@@ -3511,41 +2957,49 @@ function scanDir(dir, onFile) {
       try {
         const st = (0, import_fs.statSync)(full);
         if (st.isDirectory()) scanDir(full, onFile);
-        else if (/\.(tsx?|jsx?)$/.test(entry)) onFile((0, import_fs.readFileSync)(full, "utf-8"));
+        else if (/\.(tsx?|jsx?)$/.test(entry)) onFile(full, (0, import_fs.readFileSync)(full, "utf-8"));
       } catch {
       }
     }
   } catch {
   }
 }
-function extractClassStrings(code) {
-  const found = [];
-  const re = /(?:className|kb)=(?:["']([^"']+)["']|\{["']([^"']+)["']\})/g;
-  let m;
-  while ((m = re.exec(code)) !== null) {
-    const val = m[1] ?? m[2];
-    if (val) found.push(val);
-  }
-  return found;
-}
 function kbach(userConfig) {
   const cfg = buildConfig(userConfig ?? {});
   const screens = toNumericScreens(cfg.theme.screens ?? {});
   let root = process.cwd();
   let mainCSSFile = null;
-  function generateCSS() {
-    const tokenCSS = /* @__PURE__ */ new Map();
+  const fileTokens = /* @__PURE__ */ new Map();
+  const tokenCSS = /* @__PURE__ */ new Map();
+  function processFile(filePath, code) {
+    const tokens = /* @__PURE__ */ new Set();
+    for (const cls of extractClassStrings(code)) {
+      for (const tok of splitClassTokens(cls)) {
+        tokens.add(tok);
+        if (!tokenCSS.has(tok)) {
+          tokenCSS.set(tok, generateClassCSS(tok, cfg.theme, cfg.darkMode, screens));
+        }
+      }
+    }
+    fileTokens.set(filePath, tokens);
+  }
+  function buildTokenCSSView() {
+    const active = /* @__PURE__ */ new Set();
+    for (const tokens of fileTokens.values()) for (const t of tokens) active.add(t);
+    const view = /* @__PURE__ */ new Map();
+    for (const tok of active) {
+      const css = tokenCSS.get(tok);
+      if (css !== void 0) view.set(tok, css);
+    }
+    return view;
+  }
+  function initialScan() {
     for (const dir of ["src", "app", "pages", "components", "views", "layouts"]) {
-      scanDir((0, import_path.join)(root, dir), (code) => {
-        for (const cls of extractClassStrings(code))
-          for (const token of splitClassTokens(cls))
-            if (!tokenCSS.has(token)) {
-              const css = generateClassCSS(token, cfg.theme, cfg.darkMode, screens);
-              tokenCSS.set(token, css);
-            }
-      });
+      scanDir((0, import_path.join)(root, dir), processFile);
     }
-    return formatKbachCSS(tokenCSS, cfg.theme);
+  }
+  function generateCSS() {
+    return formatKbachCSS(buildTokenCSSView(), cfg.theme);
   }
   return {
     name: "kbach",
@@ -3555,10 +3009,16 @@ function kbach(userConfig) {
     },
     buildStart() {
       mainCSSFile = findMainCSSFile(root);
+      initialScan();
       if (mainCSSFile) writeKbachToFile(mainCSSFile, generateCSS());
     },
     handleHotUpdate({ file }) {
       if (file.includes("node_modules") || !/\.(tsx?|jsx?)$/.test(file)) return;
+      try {
+        processFile(file, (0, import_fs.readFileSync)(file, "utf-8"));
+      } catch {
+        fileTokens.delete(file);
+      }
       if (mainCSSFile) writeKbachToFile(mainCSSFile, generateCSS());
     }
   };