@unocss/preset-wind4 66.1.0-beta.6 → 66.1.0-beta.7

package/dist/index.d.mts

@@ -1,7 +1,7 @@
 import * as _unocss_core from '@unocss/core';
-import { Postprocessor, Preflight, Variant, PresetOptions } from '@unocss/core';
-import { T as Theme } from './shared/preset-wind4.MiZzPO05.mjs';
-export { r as rules } from './shared/preset-wind4.DIUjJahF.mjs';
+import { Postprocessor, Preflight, Variant, PresetOptions, PreflightContext } from '@unocss/core';
+import { T as Theme } from './shared/preset-wind4.BXbWGSRz.mjs';
+export { r as rules } from './shared/preset-wind4.D71xGC6i.mjs';
 export { shortcuts } from './shortcuts.mjs';
 export { t as theme } from './shared/preset-wind4.BOe5kxIw.mjs';
 
@@ -90,7 +90,15 @@ interface PresetWind4Options extends PresetOptions {
      *
      * @default 'on-demand'
      */
-    themeVariable?: boolean | 'on-demand';
+    themePreflight?: boolean | 'on-demand';
+    /**
+     * Process theme variables before generating CSS variables.
+     *
+     * @param vars [key, value][]
+     * @param ctx {@link PreflightContext}
+     * @returns
+     */
+    processThemeVars?: (vars: [string, string][], ctx: PreflightContext) => void | [string, string][];
 }
 declare const presetWind4: _unocss_core.PresetFactory<Theme, PresetWind4Options>;
 

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 import * as _unocss_core from '@unocss/core';
-import { Postprocessor, Preflight, Variant, PresetOptions } from '@unocss/core';
-import { T as Theme } from './shared/preset-wind4.MiZzPO05.js';
-export { r as rules } from './shared/preset-wind4.BJEl798_.js';
+import { Postprocessor, Preflight, Variant, PresetOptions, PreflightContext } from '@unocss/core';
+import { T as Theme } from './shared/preset-wind4.BXbWGSRz.js';
+export { r as rules } from './shared/preset-wind4.Ca5oWgxX.js';
 export { shortcuts } from './shortcuts.js';
 export { t as theme } from './shared/preset-wind4.BOe5kxIw.js';
 
@@ -90,7 +90,15 @@ interface PresetWind4Options extends PresetOptions {
      *
      * @default 'on-demand'
      */
-    themeVariable?: boolean | 'on-demand';
+    themePreflight?: boolean | 'on-demand';
+    /**
+     * Process theme variables before generating CSS variables.
+     *
+     * @param vars [key, value][]
+     * @param ctx {@link PreflightContext}
+     * @returns
+     */
+    processThemeVars?: (vars: [string, string][], ctx: PreflightContext) => void | [string, string][];
 }
 declare const presetWind4: _unocss_core.PresetFactory<Theme, PresetWind4Options>;
 

package/dist/index.mjs

@@ -1,14 +1,14 @@
 import { LAYER_PREFLIGHTS, definePreset } from '@unocss/core';
 import { extractorArbitraryVariants } from '@unocss/extractor-arbitrary-variants';
-import { a as themeTracking, J as compressCSS, P as PRESET_NAME, I as hyphenate, p as passThemeKey, g as globalKeywords, t as trackedTheme } from './shared/preset-wind4.47ZKbxbU.mjs';
+import { a as themeTracking, J as compressCSS, P as PRESET_NAME, w as getThemeByKey, I as hyphenate, p as passThemeKey, g as globalKeywords, t as trackedTheme } from './shared/preset-wind4.CkxnR6p3.mjs';
 import { alphaPlaceholdersRE } from '@unocss/rule-utils';
 import { postprocessors } from './postprocess.mjs';
-import { l as variants } from './shared/preset-wind4.fVfslvMN.mjs';
+import { l as variants } from './shared/preset-wind4.DXr6hHdY.mjs';
 import { theme as theme$1 } from './theme.mjs';
-import { s as shortcuts } from './shared/preset-wind4.BvXCZB8z.mjs';
-import { r as rules } from './shared/preset-wind4.We0XxImM.mjs';
+import { s as shortcuts } from './shared/preset-wind4.BwU-POWl.mjs';
+import { r as rules } from './shared/preset-wind4.CJ98Gjkm.mjs';
 import './colors.mjs';
-import './shared/preset-wind4.39lqTMpc.mjs';
+import './shared/preset-wind4.DhDf1e1c.mjs';
 
 const resetCSS = `
 /*
@@ -399,7 +399,7 @@ function reset(options) {
   if (options.reset === false)
     return void 0;
   return {
-    getCSS: () => {
+    getCSS: ({ generator }) => {
       themeTracking("font", "sans");
       themeTracking("font", "mono");
       themeTracking("defaults", ["font", "family"]);
@@ -408,7 +408,7 @@ function reset(options) {
       themeTracking("defaults", ["monoFont", "family"]);
       themeTracking("defaults", ["monoFont", "featureSettings"]);
       themeTracking("defaults", ["monoFont", "variationSettings"]);
-      return compressCSS(resetCSS);
+      return compressCSS(resetCSS, generator.config.envMode === "dev");
     },
     layer: LAYER_PREFLIGHTS
   };
@@ -428,24 +428,23 @@ const ExcludeCssVarKeys = [
   "media",
   "supports"
 ];
-function themeToCSSVars(theme2, keys) {
-  let cssVariables = "";
+function getThemeVarsMap(theme2, keys) {
+  const themeMap = /* @__PURE__ */ new Map([
+    ["--spacing", theme2.spacing.DEFAULT]
+  ]);
   function process(obj, prefix) {
     for (const key in obj) {
       if (key === "DEFAULT" && Object.keys(obj).length === 1) {
-        cssVariables += `${hyphenate(`--${prefix}`)}: ${obj[key].replace(alphaPlaceholdersRE, "1")};
-`;
+        themeMap.set(hyphenate(`--${prefix}`), obj[key].replace(alphaPlaceholdersRE, "1"));
       }
       if (passThemeKey.includes(key))
         continue;
       if (Array.isArray(obj[key])) {
-        cssVariables += `${hyphenate(`--${prefix}-${key}`)}: ${obj[key].join(",").replace(alphaPlaceholdersRE, "1")};
-`;
+        themeMap.set(hyphenate(`--${prefix}-${key}`), obj[key].join(",").replace(alphaPlaceholdersRE, "1"));
       } else if (typeof obj[key] === "object") {
         process(obj[key], `${prefix}-${key}`);
       } else {
-        cssVariables += `${hyphenate(`--${prefix}-${key}`)}: ${obj[key].replace(alphaPlaceholdersRE, "1")};
-`;
+        themeMap.set(hyphenate(`--${prefix}-${key}`), obj[key].replace(alphaPlaceholdersRE, "1"));
       }
     }
   }
@@ -454,39 +453,49 @@ function themeToCSSVars(theme2, keys) {
       continue;
     process(theme2[key], key);
   }
-  return cssVariables;
+  return themeMap;
 }
 function theme(options) {
   return {
     layer: "theme",
-    getCSS({ theme: theme2, generator }) {
-      if (options.themeVariable === false) {
+    getCSS(ctx) {
+      const { theme: theme2, generator } = ctx;
+      if (options.themePreflight === false) {
         return void 0;
-      } else if (options.themeVariable === "on-demand") {
+      }
+      let deps;
+      const generateCSS = (deps2) => {
+        if (options.processThemeVars) {
+          deps2 = options.processThemeVars(deps2, ctx) ?? deps2;
+        }
+        if (deps2.length === 0)
+          return void 0;
+        const depCSS = deps2.map(([key, value]) => `${key}: ${value};`).join("\n");
+        return compressCSS(`
+:root, :host {
+${depCSS}
+}`, generator.config.envMode === "dev");
+      };
+      if (options.themePreflight === "on-demand") {
         const self = generator.config.presets.find((p) => p.name === PRESET_NAME);
         if (!self || self.meta.themeDeps.size === 0)
-          return;
-        const depCSS = Array.from(self.meta.themeDeps).map((k) => {
+          return void 0;
+        deps = Array.from(self.meta.themeDeps).map((k) => {
           const [key, prop] = k.split(":");
-          const props = prop.split("-");
-          const v = props.reduce((o, p) => o?.[p], theme2[key]);
+          let v = getThemeByKey(theme2, key, prop.split("-")) ?? getThemeByKey(theme2, key, [prop]);
+          if (typeof v === "object") {
+            v = v.DEFAULT;
+          }
           if (v) {
-            return `--${hyphenate(`${key}${prop !== "DEFAULT" ? `-${prop}` : ""}`)}: ${v};`;
+            return [`--${hyphenate(`${key}${prop !== "DEFAULT" ? `-${prop}` : ""}`)}`, v];
           }
           return void 0;
-        });
-        return compressCSS(`
-:root {
-${depCSS.filter(Boolean).join("\n")}
-}`);
+        }).filter(Boolean);
       } else {
         const keys = Object.keys(theme2).filter((k) => !ExcludeCssVarKeys.includes(k));
-        return compressCSS(`
-:root {
---spacing: ${theme2.spacing.DEFAULT};
-${themeToCSSVars(theme2, keys).trim()}
-}`);
+        deps = Array.from(getThemeVarsMap(theme2, keys));
       }
+      return generateCSS(deps);
     }
   };
 }
@@ -514,7 +523,7 @@ const presetWind4 = definePreset((options = {}) => {
   options.attributifyPseudo = options.attributifyPseudo ?? false;
   options.variablePrefix = options.variablePrefix ?? "un-";
   options.important = options.important ?? false;
-  options.themeVariable = options.themeVariable ?? "on-demand";
+  options.themePreflight = options.themePreflight ?? "on-demand";
   return {
     name: PRESET_NAME,
     rules,

package/dist/postprocess.d.mts

@@ -1,8 +1,8 @@
 import { PresetWind4Options } from './index.mjs';
 export { postprocessors } from './index.mjs';
 import { Postprocessor } from '@unocss/core';
-import './shared/preset-wind4.MiZzPO05.mjs';
-import './shared/preset-wind4.DIUjJahF.mjs';
+import './shared/preset-wind4.BXbWGSRz.mjs';
+import './shared/preset-wind4.D71xGC6i.mjs';
 import './shortcuts.mjs';
 import './shared/preset-wind4.BOe5kxIw.mjs';
 

package/dist/postprocess.d.ts

@@ -1,8 +1,8 @@
 import { PresetWind4Options } from './index.js';
 export { postprocessors } from './index.js';
 import { Postprocessor } from '@unocss/core';
-import './shared/preset-wind4.MiZzPO05.js';
-import './shared/preset-wind4.BJEl798_.js';
+import './shared/preset-wind4.BXbWGSRz.js';
+import './shared/preset-wind4.Ca5oWgxX.js';
 import './shortcuts.js';
 import './shared/preset-wind4.BOe5kxIw.js';
 

package/dist/rules.d.mts

@@ -1,6 +1,6 @@
 import { Rule, CSSEntries, Shortcut, StaticRule } from '@unocss/core';
-import { T as Theme } from './shared/preset-wind4.MiZzPO05.mjs';
-export { r as rules } from './shared/preset-wind4.DIUjJahF.mjs';
+import { T as Theme } from './shared/preset-wind4.BXbWGSRz.mjs';
+export { r as rules } from './shared/preset-wind4.D71xGC6i.mjs';
 
 declare const verticalAligns: Rule<Theme>[];
 declare const textAligns: Rule<Theme>[];

package/dist/rules.d.ts

@@ -1,6 +1,6 @@
 import { Rule, CSSEntries, Shortcut, StaticRule } from '@unocss/core';
-import { T as Theme } from './shared/preset-wind4.MiZzPO05.js';
-export { r as rules } from './shared/preset-wind4.BJEl798_.js';
+import { T as Theme } from './shared/preset-wind4.BXbWGSRz.js';
+export { r as rules } from './shared/preset-wind4.Ca5oWgxX.js';
 
 declare const verticalAligns: Rule<Theme>[];
 declare const textAligns: Rule<Theme>[];

package/dist/rules.mjs

@@ -1,5 +1,5 @@
-export { d as accents, am as accessibility, H as alignments, a as animations, c as appearance, _ as appearances, U as aspectRatio, aj as backgroundBlendModes, b as backgroundStyles, m as bgColors, g as borderStyles, h as borders, S as boxShadows, N as boxSizing, a7 as breaks, e as carets, n as colorScheme, p as columns, a0 as contains, a5 as contentVisibility, a6 as contents, aB as cssProperty, aA as cssVariables, $ as cursors, Z as displays, u as divides, al as dynamicViewportHeight, x as filters, y as flex, J as flexGridJustifiesAlignments, L as floats, ac as fontSmoothings, ab as fontStyles, ay as fontVariantNumeric, at as fonts, z as gaps, A as grids, j as handlerBorderStyle, ad as hyphens, i as imageRenderings, K as insets, ah as isolations, F as justifies, C as lineClamps, l as listStyle, W as margins, ak as mixBlendModes, Y as notLastChildSelector, ai as objectPositions, k as opacity, G as orders, o as outline, B as overflows, f as overscrolls, V as paddings, D as placeholders, I as placements, a1 as pointerEvents, E as positions, O as questionMark, a2 as resizes, P as rings, r as rules, ag as screenReadersAccess, s as scrollBehaviors, Q as scrolls, R as shadowProperties, T as sizes, X as spaces, az as splitShorthand, an as svgUtilities, au as tabSizes, ao as tables, t as textAligns, q as textDecorations, av as textIndents, a9 as textOverflows, ax as textShadows, aw as textStrokes, aa as textTransforms, a8 as textWraps, ap as touchActions, aq as transformBase, ar as transforms, as as transitions, a3 as userSelects, v as verticalAligns, aC as viewTransition, a4 as whitespaces, w as willChange, ae as writingModes, af as writingOrientations, M as zIndexes } from './shared/preset-wind4.We0XxImM.mjs';
-export { a as container, c as containerParent, b as containerShortcuts } from './shared/preset-wind4.39lqTMpc.mjs';
-import './shared/preset-wind4.47ZKbxbU.mjs';
+export { d as accents, am as accessibility, H as alignments, a as animations, c as appearance, _ as appearances, U as aspectRatio, aj as backgroundBlendModes, b as backgroundStyles, m as bgColors, g as borderStyles, h as borders, S as boxShadows, N as boxSizing, a7 as breaks, e as carets, n as colorScheme, p as columns, a0 as contains, a5 as contentVisibility, a6 as contents, aB as cssProperty, aA as cssVariables, $ as cursors, Z as displays, u as divides, al as dynamicViewportHeight, x as filters, y as flex, J as flexGridJustifiesAlignments, L as floats, ac as fontSmoothings, ab as fontStyles, ay as fontVariantNumeric, at as fonts, z as gaps, A as grids, j as handlerBorderStyle, ad as hyphens, i as imageRenderings, K as insets, ah as isolations, F as justifies, C as lineClamps, l as listStyle, W as margins, ak as mixBlendModes, Y as notLastChildSelector, ai as objectPositions, k as opacity, G as orders, o as outline, B as overflows, f as overscrolls, V as paddings, D as placeholders, I as placements, a1 as pointerEvents, E as positions, O as questionMark, a2 as resizes, P as rings, r as rules, ag as screenReadersAccess, s as scrollBehaviors, Q as scrolls, R as shadowProperties, T as sizes, X as spaces, az as splitShorthand, an as svgUtilities, au as tabSizes, ao as tables, t as textAligns, q as textDecorations, av as textIndents, a9 as textOverflows, ax as textShadows, aw as textStrokes, aa as textTransforms, a8 as textWraps, ap as touchActions, aq as transformBase, ar as transforms, as as transitions, a3 as userSelects, v as verticalAligns, aC as viewTransition, a4 as whitespaces, w as willChange, ae as writingModes, af as writingOrientations, M as zIndexes } from './shared/preset-wind4.CJ98Gjkm.mjs';
+export { a as container, c as containerParent, b as containerShortcuts } from './shared/preset-wind4.DhDf1e1c.mjs';
+import './shared/preset-wind4.CkxnR6p3.mjs';
 import '@unocss/core';
 import '@unocss/rule-utils';

package/dist/shared/{preset-wind4.MiZzPO05.d.mts → preset-wind4.BXbWGSRz.d.mts}

@@ -1,5 +1,7 @@
 interface Colors {
-    [key: string]: Colors | string;
+    [key: string]: Colors & {
+        DEFAULT?: string;
+    } | string;
 }
 interface ThemeAnimation {
     keyframes?: Record<string, string>;

package/dist/shared/{preset-wind4.MiZzPO05.d.ts → preset-wind4.BXbWGSRz.d.ts}

@@ -1,5 +1,7 @@
 interface Colors {
-    [key: string]: Colors | string;
+    [key: string]: Colors & {
+        DEFAULT?: string;
+    } | string;
 }
 interface ThemeAnimation {
     keyframes?: Record<string, string>;

package/dist/shared/{preset-wind4.BvXCZB8z.mjs → preset-wind4.BwU-POWl.mjs}

@@ -1,4 +1,4 @@
-import { b as containerShortcuts } from './preset-wind4.39lqTMpc.mjs';
+import { b as containerShortcuts } from './preset-wind4.DhDf1e1c.mjs';
 
 const shortcuts = [
   ...containerShortcuts

package/dist/shared/{preset-wind4.We0XxImM.mjs → preset-wind4.CJ98Gjkm.mjs}

@@ -1,6 +1,6 @@
-import { g as globalKeywords, b as h, D as makeGlobalStaticRules, f as positionMap, r as parseColor, S as SpecialColorKey, K as defineProperty, q as colorResolver, E as isCSSMathFn, d as directionMap, z as hasParseableColor, c as cornerMap, p as passThemeKey, a as themeTracking, o as colorCSSGenerator, F as isSize, l as directionSize, n as numberResolver, m as colorableShadows, i as insetMap, I as hyphenate, A as resolveBreakpoints, G as transformXYZ, x as xyzMap, L as bracketTypeRe } from './preset-wind4.47ZKbxbU.mjs';
+import { g as globalKeywords, b as h, D as makeGlobalStaticRules, f as positionMap, r as parseColor, S as SpecialColorKey, K as defineProperty, a as themeTracking, L as detectThemeValue, q as colorResolver, E as isCSSMathFn, d as directionMap, z as hasParseableColor, c as cornerMap, p as passThemeKey, o as colorCSSGenerator, F as isSize, l as directionSize, n as numberResolver, m as colorableShadows, i as insetMap, I as hyphenate, A as resolveBreakpoints, G as transformXYZ, x as xyzMap, M as bracketTypeRe } from './preset-wind4.CkxnR6p3.mjs';
 import { notNull, uniq } from '@unocss/core';
-import { a as container, c as containerParent } from './preset-wind4.39lqTMpc.mjs';
+import { a as container, c as containerParent } from './preset-wind4.DhDf1e1c.mjs';
 import { getStringComponent } from '@unocss/rule-utils';
 
 const verticalAlignAlias = {
@@ -138,13 +138,21 @@ function bgGradientColorResolver() {
     const data = parseColor(body, theme);
     if (data) {
       const { color, key, alpha } = data;
-      if (Object.values(SpecialColorKey).includes(color)) {
-        css[`--un-gradient-${position}`] = color;
-      } else {
-        css[`--un-${position}-opacity`] = alpha;
-        const value = key ? `var(--colors-${key})` : color;
-        css[`--un-gradient-${position}`] = `color-mix(in oklab, ${value} var(--un-${position}-opacity), transparent)`;
-        yield defineProperty(`--un-${position}-opacity`, { syntax: "<percentage>", initialValue: "100%" });
+      if (color) {
+        if (Object.values(SpecialColorKey).includes(color)) {
+          css[`--un-gradient-${position}`] = color;
+        } else {
+          css[`--un-${position}-opacity`] = alpha;
+          const value = key ? `var(--colors-${key})` : color;
+          css[`--un-gradient-${position}`] = `color-mix(in oklab, ${value} var(--un-${position}-opacity), transparent)`;
+          yield defineProperty(`--un-${position}-opacity`, { syntax: "<percentage>", initialValue: "100%" });
+        }
+        if (key) {
+          themeTracking(`colors`, key);
+        }
+        if (theme) {
+          detectThemeValue(color, theme);
+        }
       }
     } else {
       css[`--un-gradient-${position}`] = h.bracket.cssvar(body);
@@ -715,7 +723,7 @@ const filterBaseKeys = [
   "drop-shadow"
 ];
 const filterProperties = filterBaseKeys.map((i) => defineProperty(`--un-${i}`)).join("\n");
-const filterCSS = filterBaseKeys.map((i) => `var(--un-${i})`).join(" ");
+const filterCSS = filterBaseKeys.map((i) => `var(--un-${i},)`).join(" ");
 const backdropBaseKeys = [
   "backdrop-blur",
   "backdrop-brightness",
@@ -728,7 +736,7 @@ const backdropBaseKeys = [
   "backdrop-sepia"
 ];
 const backdropProperties = backdropBaseKeys.map((i) => defineProperty(`--un-${i}`)).join("\n");
-const backdropCSS = backdropBaseKeys.map((i) => `var(--un-${i})`).join(" ");
+const backdropCSS = backdropBaseKeys.map((i) => `var(--un-${i},)`).join(" ");
 function percentWithDefault(str) {
   let v = h.bracket.cssvar(str || "");
   if (v != null)
@@ -1965,12 +1973,12 @@ const transitions = [
     ([, d]) => ({ "transition-delay": h.bracket.cssvar.time(d) })
   ],
   [
-    /^(?:transition-)?ease-(.+)$/,
-    ([, d], { theme }) => {
+    /^(?:transition-)?ease(?:-(.+))?$/,
+    ([, d = "DEFAULT"], { theme }) => {
       let v;
       if (theme.ease?.[d]) {
         themeTracking("ease", d);
-        v = `var(--ease-${d})`;
+        v = `var(--ease${d === "DEFAULT" ? "" : `-${d}`})`;
       } else {
         v = h.bracket.cssvar(d);
       }

package/dist/shared/{preset-wind4.BJEl798_.d.ts → preset-wind4.Ca5oWgxX.d.ts}

@@ -1,5 +1,5 @@
 import { Rule } from '@unocss/core';
-import { T as Theme } from './preset-wind4.MiZzPO05.js';
+import { T as Theme } from './preset-wind4.BXbWGSRz.js';
 
 declare const rules: Rule<Theme>[];
 

package/dist/shared/{preset-wind4.47ZKbxbU.mjs → preset-wind4.CkxnR6p3.mjs}

@@ -505,12 +505,15 @@ function colorCSSGenerator(data, property, varName, ctx) {
     } else {
       const alphaKey = `--un-${varName}-opacity`;
       const value = key ? `var(--colors-${key})` : color;
-      if (key) {
-        themeTracking(`colors`, key);
-      }
       css[alphaKey] = alpha;
       css[property] = `color-mix(in oklch, ${value} var(${alphaKey}), transparent)${rawColorComment}`;
       result.push(defineProperty(alphaKey, { syntax: "<percentage>", initialValue: "100%" }));
+      if (key) {
+        themeTracking(`colors`, key);
+      }
+      if (ctx?.theme) {
+        detectThemeValue(color, ctx.theme);
+      }
     }
     return result;
   }
@@ -571,10 +574,16 @@ function parseThemeColor(theme, keys) {
     no = scale;
     _keys = keys.slice(0, -1);
   }
-  const colorData = getThemeColor(theme, _keys);
+  const colorData = getThemeByKey(theme, "colors", _keys);
   if (typeof colorData === "object") {
-    color = colorData[no ?? "400"];
-    key = [..._keys, no ?? "400"].join("-");
+    if (no && colorData[no]) {
+      color = colorData[no];
+      key = [..._keys, no].join("-");
+    } else if (!no && colorData.DEFAULT) {
+      color = colorData.DEFAULT;
+      no = "DEFAULT";
+      key = _keys.join("-");
+    }
   } else if (typeof colorData === "string" && !no) {
     color = colorData;
     key = _keys.join("-");
@@ -587,15 +596,18 @@ function parseThemeColor(theme, keys) {
     key
   };
 }
-function getThemeColor(theme, keys) {
-  let obj = theme.colors;
+function getThemeByKey(theme, themeKey, keys) {
+  let obj = theme[themeKey];
   let index = -1;
   for (const k of keys) {
     index += 1;
     if (obj && typeof obj !== "string") {
-      const camel = keys.slice(index).join("-").replace(/(-[a-z])/g, (n) => n.slice(1).toUpperCase());
+      const camel = camelize(keys.slice(index).join("-"));
       if (obj[camel])
         return obj[camel];
+      const hyphen = keys.slice(index).join("-");
+      if (obj[hyphen])
+        return obj[hyphen];
       if (obj[k]) {
         obj = obj[k];
         continue;
@@ -650,7 +662,9 @@ function camelize(str) {
 function hyphenate(str) {
   return str.replace(/(?:^|\B)([A-Z])/g, "-$1").toLowerCase();
 }
-function compressCSS(css) {
+function compressCSS(css, isDev = false) {
+  if (isDev)
+    return css.trim();
   return css.trim().replace(/\s+/g, " ").replace(/\/\*[\s\S]*?\*\//g, "");
 }
 function defineProperty(property, options = {}) {
@@ -661,5 +675,18 @@ function defineProperty(property, options = {}) {
   } = options;
   return `@property ${property} {syntax: "${syntax}";inherits: ${inherits};${initialValue != null ? `initial-value: ${initialValue};` : ""}}`;
 }
+function detectThemeValue(value, theme) {
+  if (value.startsWith("var(")) {
+    const variable = value.match(/var\(--([\w-]+)(?:,.*)?\)/)?.[1];
+    if (variable) {
+      const [key, ...path] = variable.split("-");
+      const themeValue = getThemeByKey(theme, key, path);
+      if (themeValue != null) {
+        themeTracking(key, path);
+        detectThemeValue(themeValue, theme);
+      }
+    }
+  }
+}
 
-export { resolveBreakpoints as A, resolveVerticalBreakpoints as B, CONTROL_MINI_NO_NEGATIVE as C, makeGlobalStaticRules as D, isCSSMathFn as E, isSize as F, transformXYZ as G, camelize as H, hyphenate as I, compressCSS as J, defineProperty as K, bracketTypeRe as L, PRESET_NAME as P, SpecialColorKey as S, themeTracking as a, h as b, cornerMap as c, directionMap as d, xyzArray as e, positionMap as f, globalKeywords as g, handler as h, insetMap as i, cssMathFnRE as j, cssVarFnRE as k, directionSize as l, colorableShadows as m, numberResolver as n, colorCSSGenerator as o, passThemeKey as p, colorResolver as q, parseColor as r, splitShorthand as s, trackedTheme as t, parseThemeColor as u, valueHandlers as v, getThemeColor as w, xyzMap as x, colorVariable as y, hasParseableColor as z };
+export { resolveBreakpoints as A, resolveVerticalBreakpoints as B, CONTROL_MINI_NO_NEGATIVE as C, makeGlobalStaticRules as D, isCSSMathFn as E, isSize as F, transformXYZ as G, camelize as H, hyphenate as I, compressCSS as J, defineProperty as K, detectThemeValue as L, bracketTypeRe as M, PRESET_NAME as P, SpecialColorKey as S, themeTracking as a, h as b, cornerMap as c, directionMap as d, xyzArray as e, positionMap as f, globalKeywords as g, handler as h, insetMap as i, cssMathFnRE as j, cssVarFnRE as k, directionSize as l, colorableShadows as m, numberResolver as n, colorCSSGenerator as o, passThemeKey as p, colorResolver as q, parseColor as r, splitShorthand as s, trackedTheme as t, parseThemeColor as u, valueHandlers as v, getThemeByKey as w, xyzMap as x, colorVariable as y, hasParseableColor as z };

package/dist/shared/{preset-wind4.DIUjJahF.d.mts → preset-wind4.D71xGC6i.d.mts}

@@ -1,5 +1,5 @@
 import { Rule } from '@unocss/core';
-import { T as Theme } from './preset-wind4.MiZzPO05.mjs';
+import { T as Theme } from './preset-wind4.BXbWGSRz.mjs';
 
 declare const rules: Rule<Theme>[];
 

package/dist/shared/{preset-wind4.fVfslvMN.mjs → preset-wind4.DXr6hHdY.mjs}

@@ -1,5 +1,5 @@
 import { variantGetParameter, variantMatcher, variantGetBracket, variantParentMatcher, getBracket, hasThemeFn, transformThemeFn, getStringComponent } from '@unocss/rule-utils';
-import { b as h, A as resolveBreakpoints, C as CONTROL_MINI_NO_NEGATIVE, j as cssMathFnRE, k as cssVarFnRE, z as hasParseableColor } from './preset-wind4.47ZKbxbU.mjs';
+import { b as h, A as resolveBreakpoints, C as CONTROL_MINI_NO_NEGATIVE, j as cssMathFnRE, k as cssVarFnRE, z as hasParseableColor } from './preset-wind4.CkxnR6p3.mjs';
 import { escapeRegExp, escapeSelector } from '@unocss/core';
 
 const variantAria = {

package/dist/shared/{preset-wind4.39lqTMpc.mjs → preset-wind4.DhDf1e1c.mjs}

@@ -1,5 +1,5 @@
 import { isString } from '@unocss/core';
-import { A as resolveBreakpoints } from './preset-wind4.47ZKbxbU.mjs';
+import { A as resolveBreakpoints } from './preset-wind4.CkxnR6p3.mjs';
 
 const containerParent = [
   [/^@container(?:\/(\w+))?(?:-(normal))?$/, ([, l, v]) => {

package/dist/shortcuts.d.mts

@@ -1,5 +1,5 @@
 import * as _unocss_core from '@unocss/core';
-import { T as Theme } from './shared/preset-wind4.MiZzPO05.mjs';
+import { T as Theme } from './shared/preset-wind4.BXbWGSRz.mjs';
 
 declare const shortcuts: _unocss_core.Shortcut<Theme>[];
 

package/dist/shortcuts.d.ts

@@ -1,5 +1,5 @@
 import * as _unocss_core from '@unocss/core';
-import { T as Theme } from './shared/preset-wind4.MiZzPO05.js';
+import { T as Theme } from './shared/preset-wind4.BXbWGSRz.js';
 
 declare const shortcuts: _unocss_core.Shortcut<Theme>[];
 

package/dist/shortcuts.mjs

@@ -1,5 +1,5 @@
-export { s as shortcuts } from './shared/preset-wind4.BvXCZB8z.mjs';
-import './shared/preset-wind4.39lqTMpc.mjs';
+export { s as shortcuts } from './shared/preset-wind4.BwU-POWl.mjs';
+import './shared/preset-wind4.DhDf1e1c.mjs';
 import '@unocss/core';
-import './shared/preset-wind4.47ZKbxbU.mjs';
+import './shared/preset-wind4.CkxnR6p3.mjs';
 import '@unocss/rule-utils';

package/dist/theme.d.mts

@@ -1,7 +1,7 @@
 export { colors } from './colors.mjs';
 export { t as theme } from './shared/preset-wind4.BOe5kxIw.mjs';
-import { T as Theme } from './shared/preset-wind4.MiZzPO05.mjs';
-export { C as Colors, a as ThemeAnimation } from './shared/preset-wind4.MiZzPO05.mjs';
+import { T as Theme } from './shared/preset-wind4.BXbWGSRz.mjs';
+export { C as Colors, a as ThemeAnimation } from './shared/preset-wind4.BXbWGSRz.mjs';
 
 declare const animation: {
     keyframes: {

package/dist/theme.d.ts

@@ -1,7 +1,7 @@
 export { colors } from './colors.js';
 export { t as theme } from './shared/preset-wind4.BOe5kxIw.js';
-import { T as Theme } from './shared/preset-wind4.MiZzPO05.js';
-export { C as Colors, a as ThemeAnimation } from './shared/preset-wind4.MiZzPO05.js';
+import { T as Theme } from './shared/preset-wind4.BXbWGSRz.js';
+export { C as Colors, a as ThemeAnimation } from './shared/preset-wind4.BXbWGSRz.js';
 
 declare const animation: {
     keyframes: {

package/dist/utils.d.mts

@@ -1,7 +1,7 @@
 import { Arrayable, DynamicMatcher, RuleContext, CSSObject, CSSValueInput, VariantContext, StaticRule } from '@unocss/core';
 import * as _unocss_rule_utils from '@unocss/rule-utils';
 export * from '@unocss/rule-utils';
-import { T as Theme, C as Colors } from './shared/preset-wind4.MiZzPO05.mjs';
+import { T as Theme } from './shared/preset-wind4.BXbWGSRz.mjs';
 
 declare const PRESET_NAME = "@unocss/preset-wind4";
 /** Keys will not appear in the theme variable. */
@@ -121,7 +121,7 @@ declare function parseThemeColor(theme: Theme, keys: string[]): {
     no: string | undefined;
     key: string | undefined;
 } | undefined;
-declare function getThemeColor(theme: Theme, keys: string[]): string | Colors | undefined;
+declare function getThemeByKey(theme: Theme, themeKey: keyof Theme, keys: string[]): any;
 declare function colorVariable(str: string, varName: string): string;
 declare function hasParseableColor(color: string | undefined, theme: Theme): boolean;
 declare function resolveBreakpoints({ theme, generator }: Readonly<VariantContext<Theme>>, key?: 'breakpoint' | 'verticalBreakpoint'): {
@@ -138,11 +138,12 @@ declare function isSize(str: string): boolean;
 declare function transformXYZ(d: string, v: string, name: string): [string, string][];
 declare function camelize(str: string): string;
 declare function hyphenate(str: string): string;
-declare function compressCSS(css: string): string;
+declare function compressCSS(css: string, isDev?: boolean): string;
 declare function defineProperty(property: string, options?: {
     syntax?: string;
     inherits?: boolean;
     initialValue?: unknown;
 }): string;
+declare function detectThemeValue(value: string, theme: Theme): void;
 
-export { CONTROL_MINI_NO_NEGATIVE, PRESET_NAME, SpecialColorKey, camelize, colorCSSGenerator, colorResolver, colorVariable, colorableShadows, compressCSS, cornerMap, cssMathFnRE, cssVarFnRE, defineProperty, directionMap, directionSize, getThemeColor, globalKeywords, h, handler, hasParseableColor, hyphenate, insetMap, isCSSMathFn, isSize, makeGlobalStaticRules, numberResolver, parseColor, parseThemeColor, passThemeKey, positionMap, resolveBreakpoints, resolveVerticalBreakpoints, splitShorthand, themeTracking, trackedTheme, transformXYZ, handlers as valueHandlers, xyzArray, xyzMap };
+export { CONTROL_MINI_NO_NEGATIVE, PRESET_NAME, SpecialColorKey, camelize, colorCSSGenerator, colorResolver, colorVariable, colorableShadows, compressCSS, cornerMap, cssMathFnRE, cssVarFnRE, defineProperty, detectThemeValue, directionMap, directionSize, getThemeByKey, globalKeywords, h, handler, hasParseableColor, hyphenate, insetMap, isCSSMathFn, isSize, makeGlobalStaticRules, numberResolver, parseColor, parseThemeColor, passThemeKey, positionMap, resolveBreakpoints, resolveVerticalBreakpoints, splitShorthand, themeTracking, trackedTheme, transformXYZ, handlers as valueHandlers, xyzArray, xyzMap };

package/dist/utils.d.ts

@@ -1,7 +1,7 @@
 import { Arrayable, DynamicMatcher, RuleContext, CSSObject, CSSValueInput, VariantContext, StaticRule } from '@unocss/core';
 import * as _unocss_rule_utils from '@unocss/rule-utils';
 export * from '@unocss/rule-utils';
-import { T as Theme, C as Colors } from './shared/preset-wind4.MiZzPO05.js';
+import { T as Theme } from './shared/preset-wind4.BXbWGSRz.js';
 
 declare const PRESET_NAME = "@unocss/preset-wind4";
 /** Keys will not appear in the theme variable. */
@@ -121,7 +121,7 @@ declare function parseThemeColor(theme: Theme, keys: string[]): {
     no: string | undefined;
     key: string | undefined;
 } | undefined;
-declare function getThemeColor(theme: Theme, keys: string[]): string | Colors | undefined;
+declare function getThemeByKey(theme: Theme, themeKey: keyof Theme, keys: string[]): any;
 declare function colorVariable(str: string, varName: string): string;
 declare function hasParseableColor(color: string | undefined, theme: Theme): boolean;
 declare function resolveBreakpoints({ theme, generator }: Readonly<VariantContext<Theme>>, key?: 'breakpoint' | 'verticalBreakpoint'): {
@@ -138,11 +138,12 @@ declare function isSize(str: string): boolean;
 declare function transformXYZ(d: string, v: string, name: string): [string, string][];
 declare function camelize(str: string): string;
 declare function hyphenate(str: string): string;
-declare function compressCSS(css: string): string;
+declare function compressCSS(css: string, isDev?: boolean): string;
 declare function defineProperty(property: string, options?: {
     syntax?: string;
     inherits?: boolean;
     initialValue?: unknown;
 }): string;
+declare function detectThemeValue(value: string, theme: Theme): void;
 
-export { CONTROL_MINI_NO_NEGATIVE, PRESET_NAME, SpecialColorKey, camelize, colorCSSGenerator, colorResolver, colorVariable, colorableShadows, compressCSS, cornerMap, cssMathFnRE, cssVarFnRE, defineProperty, directionMap, directionSize, getThemeColor, globalKeywords, h, handler, hasParseableColor, hyphenate, insetMap, isCSSMathFn, isSize, makeGlobalStaticRules, numberResolver, parseColor, parseThemeColor, passThemeKey, positionMap, resolveBreakpoints, resolveVerticalBreakpoints, splitShorthand, themeTracking, trackedTheme, transformXYZ, handlers as valueHandlers, xyzArray, xyzMap };
+export { CONTROL_MINI_NO_NEGATIVE, PRESET_NAME, SpecialColorKey, camelize, colorCSSGenerator, colorResolver, colorVariable, colorableShadows, compressCSS, cornerMap, cssMathFnRE, cssVarFnRE, defineProperty, detectThemeValue, directionMap, directionSize, getThemeByKey, globalKeywords, h, handler, hasParseableColor, hyphenate, insetMap, isCSSMathFn, isSize, makeGlobalStaticRules, numberResolver, parseColor, parseThemeColor, passThemeKey, positionMap, resolveBreakpoints, resolveVerticalBreakpoints, splitShorthand, themeTracking, trackedTheme, transformXYZ, handlers as valueHandlers, xyzArray, xyzMap };

package/dist/utils.mjs

@@ -1,3 +1,3 @@
-export { C as CONTROL_MINI_NO_NEGATIVE, P as PRESET_NAME, S as SpecialColorKey, H as camelize, o as colorCSSGenerator, q as colorResolver, y as colorVariable, m as colorableShadows, J as compressCSS, c as cornerMap, j as cssMathFnRE, k as cssVarFnRE, K as defineProperty, d as directionMap, l as directionSize, w as getThemeColor, g as globalKeywords, b as h, h as handler, z as hasParseableColor, I as hyphenate, i as insetMap, E as isCSSMathFn, F as isSize, D as makeGlobalStaticRules, n as numberResolver, r as parseColor, u as parseThemeColor, p as passThemeKey, f as positionMap, A as resolveBreakpoints, B as resolveVerticalBreakpoints, s as splitShorthand, a as themeTracking, t as trackedTheme, G as transformXYZ, v as valueHandlers, e as xyzArray, x as xyzMap } from './shared/preset-wind4.47ZKbxbU.mjs';
+export { C as CONTROL_MINI_NO_NEGATIVE, P as PRESET_NAME, S as SpecialColorKey, H as camelize, o as colorCSSGenerator, q as colorResolver, y as colorVariable, m as colorableShadows, J as compressCSS, c as cornerMap, j as cssMathFnRE, k as cssVarFnRE, K as defineProperty, L as detectThemeValue, d as directionMap, l as directionSize, w as getThemeByKey, g as globalKeywords, b as h, h as handler, z as hasParseableColor, I as hyphenate, i as insetMap, E as isCSSMathFn, F as isSize, D as makeGlobalStaticRules, n as numberResolver, r as parseColor, u as parseThemeColor, p as passThemeKey, f as positionMap, A as resolveBreakpoints, B as resolveVerticalBreakpoints, s as splitShorthand, a as themeTracking, t as trackedTheme, G as transformXYZ, v as valueHandlers, e as xyzArray, x as xyzMap } from './shared/preset-wind4.CkxnR6p3.mjs';
 export * from '@unocss/rule-utils';
 import '@unocss/core';

package/dist/variants.d.mts

@@ -1,8 +1,8 @@
 import { VariantObject, Variant, VariantFunction } from '@unocss/core';
-import { T as Theme } from './shared/preset-wind4.MiZzPO05.mjs';
+import { T as Theme } from './shared/preset-wind4.BXbWGSRz.mjs';
 import { PresetWind4Options } from './index.mjs';
 export { variants } from './index.mjs';
-import './shared/preset-wind4.DIUjJahF.mjs';
+import './shared/preset-wind4.D71xGC6i.mjs';
 import './shortcuts.mjs';
 import './shared/preset-wind4.BOe5kxIw.mjs';
 

package/dist/variants.d.ts

@@ -1,8 +1,8 @@
 import { VariantObject, Variant, VariantFunction } from '@unocss/core';
-import { T as Theme } from './shared/preset-wind4.MiZzPO05.js';
+import { T as Theme } from './shared/preset-wind4.BXbWGSRz.js';
 import { PresetWind4Options } from './index.js';
 export { variants } from './index.js';
-import './shared/preset-wind4.BJEl798_.js';
+import './shared/preset-wind4.Ca5oWgxX.js';
 import './shortcuts.js';
 import './shared/preset-wind4.BOe5kxIw.js';
 

package/dist/variants.mjs

@@ -1,4 +1,4 @@
-export { c as calcMaxWidthBySize, D as placeholderModifier, v as variantAria, b as variantBreakpoints, d as variantChildren, h as variantColorsMediaOrClass, i as variantColorsScheme, e as variantCombinators, g as variantContainerQuery, q as variantContrasts, w as variantCssLayer, p as variantCustomMedia, j as variantDataAttribute, t as variantForcedColors, n as variantImportant, x as variantInternalLayer, m as variantLanguageDirections, r as variantMotions, C as variantNegative, s as variantOrientations, H as variantPartClasses, o as variantPrint, F as variantPseudoClassFunctions, E as variantPseudoClassesAndElements, y as variantScope, u as variantSelector, I as variantStartingStyle, B as variantStickyHover, J as variantSupports, f as variantSvgCombinators, a as variantTaggedAriaAttributes, k as variantTaggedDataAttributes, G as variantTaggedPseudoClasses, A as variantTheme, z as variantVariables, l as variants } from './shared/preset-wind4.fVfslvMN.mjs';
+export { c as calcMaxWidthBySize, D as placeholderModifier, v as variantAria, b as variantBreakpoints, d as variantChildren, h as variantColorsMediaOrClass, i as variantColorsScheme, e as variantCombinators, g as variantContainerQuery, q as variantContrasts, w as variantCssLayer, p as variantCustomMedia, j as variantDataAttribute, t as variantForcedColors, n as variantImportant, x as variantInternalLayer, m as variantLanguageDirections, r as variantMotions, C as variantNegative, s as variantOrientations, H as variantPartClasses, o as variantPrint, F as variantPseudoClassFunctions, E as variantPseudoClassesAndElements, y as variantScope, u as variantSelector, I as variantStartingStyle, B as variantStickyHover, J as variantSupports, f as variantSvgCombinators, a as variantTaggedAriaAttributes, k as variantTaggedDataAttributes, G as variantTaggedPseudoClasses, A as variantTheme, z as variantVariables, l as variants } from './shared/preset-wind4.DXr6hHdY.mjs';
 import '@unocss/rule-utils';
-import './shared/preset-wind4.47ZKbxbU.mjs';
+import './shared/preset-wind4.CkxnR6p3.mjs';
 import '@unocss/core';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@unocss/preset-wind4",
   "type": "module",
-  "version": "66.1.0-beta.6",
+  "version": "66.1.0-beta.7",
   "description": "Tailwind 4 compact preset for UnoCSS",
   "author": "Anthony Fu <anthonyfu117@hotmail.com>",
   "license": "MIT",
@@ -65,9 +65,9 @@
     "dist"
   ],
   "dependencies": {
-    "@unocss/core": "66.1.0-beta.6",
-    "@unocss/extractor-arbitrary-variants": "66.1.0-beta.6",
-    "@unocss/rule-utils": "66.1.0-beta.6"
+    "@unocss/core": "66.1.0-beta.7",
+    "@unocss/extractor-arbitrary-variants": "66.1.0-beta.7",
+    "@unocss/rule-utils": "66.1.0-beta.7"
   },
   "scripts": {
     "build": "unbuild",