@unocss/preset-mini 0.41.2 → 0.43.0

package/dist/chunks/default2.mjs

@@ -1,4 +1,4 @@
-import { g as globalKeywords, h as handler, c as colorResolver, d as directionMap, a as hasParseableColor, p as parseColor, b as colorToString, e as colorOpacityToString, f as cornerMap, m as makeGlobalStaticRules, i as colorableShadows, j as insetMap, r as resolveVerticalBreakpoints, k as resolveBreakpoints, l as directionSize } from './utilities.mjs';
+import { g as globalKeywords, h as handler, c as colorResolver, d as directionMap, a as hasParseableColor, p as parseColor, b as colorToString, e as colorOpacityToString, f as cornerMap, m as makeGlobalStaticRules, i as colorableShadows, j as insetMap, r as resolveVerticalBreakpoints, k as resolveBreakpoints, l as directionSize } from './colors2.mjs';
 import { toArray } from '@unocss/core';
 import { d as displays, c as contents, a as textOverflows, e as textTransforms, f as fontStyles, g as fontSmoothings, h as boxShadows, i as rings, j as cursors, k as appearances, p as pointerEvents, l as resizes, u as userSelects, w as whitespaces, m as breaks, n as transforms } from './transform.mjs';
 
@@ -272,11 +272,11 @@ const fonts = [
     ([, s], { theme }) => ({ "line-height": theme.lineHeight?.[s] || handler.bracket.cssvar.global.rem(s) }),
     { autocomplete: "(leading|lh)-$lineHeight" }
   ],
-  [
-    /^font-synthesis-(.+)$/,
-    ([, s]) => ({ "font-synthesis": s }),
-    { autocomplete: "font-synthesis-(none|weight|style|small-caps)" }
-  ],
+  ["font-synthesis-weight", { "font-synthesis": "weight" }],
+  ["font-synthesis-style", { "font-synthesis": "style" }],
+  ["font-synthesis-small-caps", { "font-synthesis": "small-caps" }],
+  ["font-synthesis-none", { "font-synthesis": "none" }],
+  [/^font-synthesis-(.+)$/, ([, s]) => ({ "font-synthesis": handler.bracket.cssvar.global(s) })],
   [
     /^(?:font-)?tracking-(.+)$/,
     ([, s], { theme }) => ({ "letter-spacing": theme.letterSpacing?.[s] || handler.bracket.cssvar.global.rem(s) }),
@@ -372,15 +372,15 @@ const grids = [
       return { [`grid-${rowCol(c)}`]: `span ${v}/span ${v}` };
   }, { autocomplete: ["grid-(row|col)-span-<num>", "(row|col)-span-<num>"] }],
   [/^(?:grid-)?(row|col)-start-(.+)$/, ([, c, v]) => ({ [`grid-${rowCol(c)}-start`]: handler.bracket.cssvar(v) ?? v })],
-  [/^(?:grid-)?(row|col)-end-(.+)$/, ([, c, v]) => ({ [`grid-${rowCol(c)}-end`]: handler.bracket.cssvar(v) ?? v })],
-  [/^(?:grid-)?auto-(rows|cols)-(.+)$/, ([, c, v], { theme }) => ({ [`grid-auto-${rowCol(c)}`]: autoDirection(c, theme, v) })],
+  [/^(?:grid-)?(row|col)-end-(.+)$/, ([, c, v]) => ({ [`grid-${rowCol(c)}-end`]: handler.bracket.cssvar(v) ?? v }), { autocomplete: ["grid-(row|col)-(start|end)-<num>"] }],
+  [/^(?:grid-)?auto-(rows|cols)-(.+)$/, ([, c, v], { theme }) => ({ [`grid-auto-${rowCol(c)}`]: autoDirection(c, theme, v) }), { autocomplete: ["grid-auto-(rows|cols)-<num>"] }],
   [/^(?:grid-auto-flow|auto-flow|grid-flow)-(.+)$/, ([, v]) => ({ "grid-auto-flow": handler.bracket.cssvar(v) })],
-  [/^(?:grid-auto-flow|auto-flow|grid-flow)-(row|col|dense|row-dense|col-dense)$/, ([, v]) => ({ "grid-auto-flow": rowCol(v).replace("-", " ") })],
+  [/^(?:grid-auto-flow|auto-flow|grid-flow)-(row|col|dense|row-dense|col-dense)$/, ([, v]) => ({ "grid-auto-flow": rowCol(v).replace("-", " ") }), { autocomplete: ["(grid-auto-flow|auto-flow|grid-flow)-(row|col|dense|row-dense|col-dense)"] }],
   [/^grid-(rows|cols)-(.+)$/, ([, c, v], { theme }) => ({
     [`grid-template-${rowCol(c)}`]: theme[`gridTemplate${rowColTheme(c)}`]?.[v] ?? handler.bracket.cssvar(v)
   })],
   [/^grid-(rows|cols)-minmax-([\w.-]+)$/, ([, c, d]) => ({ [`grid-template-${rowCol(c)}`]: `repeat(auto-fill,minmax(${d},1fr))` })],
-  [/^grid-(rows|cols)-(\d+)$/, ([, c, d]) => ({ [`grid-template-${rowCol(c)}`]: `repeat(${d},minmax(0,1fr))` })],
+  [/^grid-(rows|cols)-(\d+)$/, ([, c, d]) => ({ [`grid-template-${rowCol(c)}`]: `repeat(${d},minmax(0,1fr))` }), { autocomplete: ["grid-(rows|cols)-<num>", "grid-(rows|cols)-none"] }],
   ["grid-rows-none", { "grid-template-rows": "none" }],
   ["grid-cols-none", { "grid-template-columns": "none" }]
 ];
@@ -543,28 +543,26 @@ function getSizeValue(minmax, hw, theme, prop) {
   return handler.bracket.cssvar.global.auto.fraction.rem(prop);
 }
 const sizes = [
-  [
-    /^(min-|max-)?([wh])-?(.+)$/,
-    ([, m, w, s], { theme }) => ({ [getPropName(m, w)]: getSizeValue(m, w, theme, s) }),
-    {
-      autocomplete: [
-        "(w|h)-$width|height|maxWidth|maxHeight|minWidth|minHeight|inlineSize|blockSize|maxInlineSize|maxBlockSize|minInlineSize|minBlockSize",
-        "(max|min)-(w|h)-$width|height|maxWidth|maxHeight|minWidth|minHeight|inlineSize|blockSize|maxInlineSize|maxBlockSize|minInlineSize|minBlockSize"
-      ]
-    }
-  ],
-  [
-    /^(min-|max-)?(block|inline)-(.+)$/,
-    ([, m, w, s], { theme }) => ({ [getPropName(m, w)]: getSizeValue(m, w, theme, s) }),
-    {
-      autocomplete: [
-        "(w|h)-(block|inline)-$width|height|maxWidth|maxHeight|minWidth|minHeight|inlineSize|blockSize|maxInlineSize|maxBlockSize|minInlineSize|minBlockSize",
-        "(max|min)-(w|h)-(block|inline)-$width|height|maxWidth|maxHeight|minWidth|minHeight|inlineSize|blockSize|maxInlineSize|maxBlockSize|minInlineSize|minBlockSize"
-      ]
-    }
-  ],
-  [/^(min-|max-)?(h)-screen-(.+)$/, ([, m, w, s], context) => ({ [getPropName(m, w)]: resolveVerticalBreakpoints(context)?.[s] }), { autocomplete: ["h-screen-$verticalBreakpoints", "(min|max)-h-screen-$verticalBreakpoints"] }],
-  [/^(min-|max-)?(w)-screen-(.+)$/, ([, m, w, s], context) => ({ [getPropName(m, w)]: resolveBreakpoints(context)?.[s] }), { autocomplete: ["w-screen-$breakpoints", "(min|max)-w-screen-$breakpoints"] }]
+  [/^(min-|max-)?([wh])-?(.+)$/, ([, m, w, s], { theme }) => ({ [getPropName(m, w)]: getSizeValue(m, w, theme, s) })],
+  [/^(min-|max-)?(block|inline)-(.+)$/, ([, m, w, s], { theme }) => ({ [getPropName(m, w)]: getSizeValue(m, w, theme, s) }), {
+    autocomplete: [
+      "(w|h)-$width|height|maxWidth|maxHeight|minWidth|minHeight|inlineSize|blockSize|maxInlineSize|maxBlockSize|minInlineSize|minBlockSize",
+      "(block|inline)-$width|height|maxWidth|maxHeight|minWidth|minHeight|inlineSize|blockSize|maxInlineSize|maxBlockSize|minInlineSize|minBlockSize",
+      "(max|min)-(w|h|block|inline)",
+      "(max|min)-(w|h|block|inline)-$width|height|maxWidth|maxHeight|minWidth|minHeight|inlineSize|blockSize|maxInlineSize|maxBlockSize|minInlineSize|minBlockSize"
+    ]
+  }],
+  [/^(min-|max-)?(h)-screen-(.+)$/, ([, m, w, s], context) => ({ [getPropName(m, w)]: resolveVerticalBreakpoints(context)?.[s] })],
+  [/^(min-|max-)?(w)-screen-(.+)$/, ([, m, w, s], context) => ({ [getPropName(m, w)]: resolveBreakpoints(context)?.[s] }), {
+    autocomplete: [
+      "(w|h)-screen",
+      "(min|max)-(w|h)-screen",
+      "h-screen-$verticalBreakpoints",
+      "(min|max)-h-screen-$verticalBreakpoints",
+      "w-screen-$breakpoints",
+      "(min|max)-w-screen-$breakpoints"
+    ]
+  }]
 ];
 function getAspectRatio(prop) {
   if (/^\d+\/\d+$/.test(prop))
@@ -578,7 +576,7 @@ function getAspectRatio(prop) {
   return handler.bracket.cssvar.global.auto.number(prop);
 }
 const aspectRatio = [
-  [/^aspect-(?:ratio-)?(.+)$/, ([, d]) => ({ "aspect-ratio": getAspectRatio(d) }), { autocomplete: ["aspect-(square|video)", "aspect-ratio-(square|video)"] }]
+  [/^aspect-(?:ratio-)?(.+)$/, ([, d]) => ({ "aspect-ratio": getAspectRatio(d) }), { autocomplete: ["aspect-(square|video|ratio)", "aspect-ratio-(square|video)"] }]
 ];
 
 const paddings = [
@@ -733,4 +731,4 @@ const rules = [
   questionMark
 ].flat(1);
 
-export { paddings as A, margins as B, svgUtilities as C, transitions as D, fonts as E, tabSizes as F, textIndents as G, textStrokes as H, textShadows as I, cssVariables as J, cssProperty as K, textDecorations as L, appearance as a, borders as b, opacity as c, textColors as d, bgColors as e, flex as f, gaps as g, grids as h, overflows as i, justifies as j, orders as k, alignments as l, placements as m, insets as n, outline as o, positions as p, floats as q, rules as r, boxSizing as s, textAligns as t, questionMark as u, verticalAligns as v, willChange as w, sizes as x, aspectRatio as y, zIndexes as z };
+export { aspectRatio as A, paddings as B, margins as C, svgUtilities as D, transitions as E, fonts as F, tabSizes as G, textIndents as H, textStrokes as I, textShadows as J, cssVariables as K, cssProperty as L, textDecorations as M, appearance as a, borderStyles as b, borders as c, opacity as d, textColors as e, bgColors as f, flex as g, gaps as h, grids as i, overflows as j, justifies as k, orders as l, alignments as m, placements as n, outline as o, positions as p, insets as q, rules as r, floats as s, textAligns as t, boxSizing as u, verticalAligns as v, willChange as w, questionMark as x, sizes as y, zIndexes as z };

package/dist/chunks/default3.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-const utilities = require('./utilities.cjs');
+const colors = require('./colors2.cjs');
 const variants$1 = require('./variants.cjs');
 const core = require('@unocss/core');
 
@@ -14,7 +14,7 @@ const calcMaxWidthBySize = (size) => {
 const variantBreakpoints = {
   name: "breakpoints",
   match(matcher, context) {
-    const variantEntries = Object.entries(utilities.resolveBreakpoints(context) ?? {}).map(([point, size], idx) => [point, size, idx]);
+    const variantEntries = Object.entries(colors.resolveBreakpoints(context) ?? {}).map(([point, size], idx) => [point, size, idx]);
     for (const [point, size, idx] of variantEntries) {
       if (!regexCache[point])
         regexCache[point] = new RegExp(`^((?:[al]t-)?${point}[:-])`);
@@ -183,24 +183,28 @@ const variantScope = {
 const variantVariables = {
   name: "variables",
   match(matcher) {
-    const match = matcher.match(/^(\[.+?\]):/);
-    if (match) {
-      const variant = utilities.handler.bracket(match[1]) ?? "";
-      return {
-        matcher: matcher.slice(match[0].length),
-        handle(input, next) {
-          const updates = variant.startsWith("@") ? {
-            parent: `${input.parent ? `${input.parent} $$ ` : ""}${variant}`
-          } : {
-            selector: variant.replace(/&/g, input.selector)
-          };
-          return next({
-            ...input,
-            ...updates
-          });
-        }
-      };
-    }
+    if (!matcher.startsWith("["))
+      return;
+    const [match, rest] = colors.getComponent(matcher, "[", "]", ":") ?? [];
+    if (!(match && rest && rest !== ""))
+      return;
+    const variant = colors.handler.bracket(match) ?? "";
+    if (!(variant.startsWith("@") || variant.includes("&")))
+      return;
+    return {
+      matcher: rest,
+      handle(input, next) {
+        const updates = variant.startsWith("@") ? {
+          parent: `${input.parent ? `${input.parent} $$ ` : ""}${variant}`
+        } : {
+          selector: variant.replace(/&/g, input.selector)
+        };
+        return next({
+          ...input,
+          ...updates
+        });
+      }
+    };
   },
   multiPass: true
 };
@@ -217,7 +221,7 @@ const variantNegative = {
     return {
       matcher: matcher.slice(1),
       body: (body) => {
-        if (body.find((v) => v[0] === utilities.CONTROL_MINI_NO_NEGATIVE))
+        if (body.find((v) => v[0] === colors.CONTROL_MINI_NO_NEGATIVE))
           return;
         let changed = false;
         body.forEach((v) => {
@@ -327,7 +331,7 @@ const sortValue = (pseudo) => {
     return 1;
 };
 const taggedPseudoClassMatcher = (tag, parent, combinator) => {
-  const rawRe = new RegExp(`${core.escapeRegExp(parent)}:`);
+  const rawRe = new RegExp(`^(${core.escapeRegExp(parent)}:)(\\S+)${core.escapeRegExp(combinator)}\\1`);
   const pseudoRE = new RegExp(`^${tag}-((?:(${PseudoClassFunctionsStr})-)?(${PseudoClassesStr}))[:-]`);
   const pseudoColonRE = new RegExp(`^${tag}-((?:(${PseudoClassFunctionsStr})-)?(${PseudoClassesColonStr}))[:]`);
   return {
@@ -342,12 +346,13 @@ const taggedPseudoClassMatcher = (tag, parent, combinator) => {
           matcher: input.slice(match[0].length),
           handle: (input2, next) => next({
             ...input2,
-            prefix: rawRe.test(input2.prefix) ? input2.prefix.replace(rawRe, `${parent}${pseudo}:`) : `${parent}${pseudo}${combinator}${input2.prefix}`,
+            prefix: `${parent}${pseudo}${combinator}${input2.prefix}`.replace(rawRe, "$1$2:"),
             sort: sortValue(match[3])
           })
         };
       }
-    }
+    },
+    multiPass: true
   };
 };
 const PseudoClassesAndElementsStr = Object.entries(PseudoClasses).map(([key]) => key).join("|");
@@ -400,22 +405,10 @@ const variantPseudoClassFunctions = {
 const variantTaggedPseudoClasses = (options = {}) => {
   const attributify = !!options?.attributifyPseudo;
   return [
-    {
-      ...taggedPseudoClassMatcher("group", attributify ? '[group=""]' : ".group", " "),
-      multiPass: true
-    },
-    {
-      ...taggedPseudoClassMatcher("peer", attributify ? '[peer=""]' : ".peer", "~"),
-      multiPass: true
-    },
-    {
-      ...taggedPseudoClassMatcher("parent", attributify ? '[parent=""]' : ".parent", ">"),
-      multiPass: true
-    },
-    {
-      ...taggedPseudoClassMatcher("previous", attributify ? '[previous=""]' : ".previous", "+"),
-      multiPass: true
-    }
+    taggedPseudoClassMatcher("group", attributify ? '[group=""]' : ".group", " "),
+    taggedPseudoClassMatcher("peer", attributify ? '[peer=""]' : ".peer", "~"),
+    taggedPseudoClassMatcher("parent", attributify ? '[parent=""]' : ".parent", ">"),
+    taggedPseudoClassMatcher("previous", attributify ? '[previous=""]' : ".previous", "+")
   ];
 };
 const PartClassesRE = /(part-\[(.+)]:)(.+)/;

package/dist/chunks/default3.mjs

@@ -1,4 +1,4 @@
-import { k as resolveBreakpoints, h as handler, C as CONTROL_MINI_NO_NEGATIVE } from './utilities.mjs';
+import { k as resolveBreakpoints, n as getComponent, h as handler, C as CONTROL_MINI_NO_NEGATIVE } from './colors2.mjs';
 import { v as variantParentMatcher, a as variantMatcher } from './variants.mjs';
 import { escapeRegExp } from '@unocss/core';
 
@@ -181,24 +181,28 @@ const variantScope = {
 const variantVariables = {
   name: "variables",
   match(matcher) {
-    const match = matcher.match(/^(\[.+?\]):/);
-    if (match) {
-      const variant = handler.bracket(match[1]) ?? "";
-      return {
-        matcher: matcher.slice(match[0].length),
-        handle(input, next) {
-          const updates = variant.startsWith("@") ? {
-            parent: `${input.parent ? `${input.parent} $$ ` : ""}${variant}`
-          } : {
-            selector: variant.replace(/&/g, input.selector)
-          };
-          return next({
-            ...input,
-            ...updates
-          });
-        }
-      };
-    }
+    if (!matcher.startsWith("["))
+      return;
+    const [match, rest] = getComponent(matcher, "[", "]", ":") ?? [];
+    if (!(match && rest && rest !== ""))
+      return;
+    const variant = handler.bracket(match) ?? "";
+    if (!(variant.startsWith("@") || variant.includes("&")))
+      return;
+    return {
+      matcher: rest,
+      handle(input, next) {
+        const updates = variant.startsWith("@") ? {
+          parent: `${input.parent ? `${input.parent} $$ ` : ""}${variant}`
+        } : {
+          selector: variant.replace(/&/g, input.selector)
+        };
+        return next({
+          ...input,
+          ...updates
+        });
+      }
+    };
   },
   multiPass: true
 };
@@ -325,7 +329,7 @@ const sortValue = (pseudo) => {
     return 1;
 };
 const taggedPseudoClassMatcher = (tag, parent, combinator) => {
-  const rawRe = new RegExp(`${escapeRegExp(parent)}:`);
+  const rawRe = new RegExp(`^(${escapeRegExp(parent)}:)(\\S+)${escapeRegExp(combinator)}\\1`);
   const pseudoRE = new RegExp(`^${tag}-((?:(${PseudoClassFunctionsStr})-)?(${PseudoClassesStr}))[:-]`);
   const pseudoColonRE = new RegExp(`^${tag}-((?:(${PseudoClassFunctionsStr})-)?(${PseudoClassesColonStr}))[:]`);
   return {
@@ -340,12 +344,13 @@ const taggedPseudoClassMatcher = (tag, parent, combinator) => {
           matcher: input.slice(match[0].length),
           handle: (input2, next) => next({
             ...input2,
-            prefix: rawRe.test(input2.prefix) ? input2.prefix.replace(rawRe, `${parent}${pseudo}:`) : `${parent}${pseudo}${combinator}${input2.prefix}`,
+            prefix: `${parent}${pseudo}${combinator}${input2.prefix}`.replace(rawRe, "$1$2:"),
             sort: sortValue(match[3])
           })
         };
       }
-    }
+    },
+    multiPass: true
   };
 };
 const PseudoClassesAndElementsStr = Object.entries(PseudoClasses).map(([key]) => key).join("|");
@@ -398,22 +403,10 @@ const variantPseudoClassFunctions = {
 const variantTaggedPseudoClasses = (options = {}) => {
   const attributify = !!options?.attributifyPseudo;
   return [
-    {
-      ...taggedPseudoClassMatcher("group", attributify ? '[group=""]' : ".group", " "),
-      multiPass: true
-    },
-    {
-      ...taggedPseudoClassMatcher("peer", attributify ? '[peer=""]' : ".peer", "~"),
-      multiPass: true
-    },
-    {
-      ...taggedPseudoClassMatcher("parent", attributify ? '[parent=""]' : ".parent", ">"),
-      multiPass: true
-    },
-    {
-      ...taggedPseudoClassMatcher("previous", attributify ? '[previous=""]' : ".previous", "+"),
-      multiPass: true
-    }
+    taggedPseudoClassMatcher("group", attributify ? '[group=""]' : ".group", " "),
+    taggedPseudoClassMatcher("peer", attributify ? '[peer=""]' : ".peer", "~"),
+    taggedPseudoClassMatcher("parent", attributify ? '[parent=""]' : ".parent", ">"),
+    taggedPseudoClassMatcher("previous", attributify ? '[previous=""]' : ".previous", "+")
   ];
 };
 const PartClassesRE = /(part-\[(.+)]:)(.+)/;

package/dist/chunks/transform.cjs

@@ -1,8 +1,9 @@
 'use strict';
 
-const utilities = require('./utilities.cjs');
+const colors = require('./colors2.cjs');
 
-const varEmpty = "var(--un-empty,/*!*/ /*!*/)";
+const cursorValues = ["auto", "default", "none", "context-menu", "help", "pointer", "progress", "wait", "cell", "crosshair", "text", "vertical-text", "alias", "copy", "move", "no-drop", "not-allowed", "grab", "grabbing", "all-scroll", "col-resize", "row-resize", "n-resize", "e-resize", "s-resize", "w-resize", "ne-resize", "nw-resize", "se-resize", "sw-resize", "ew-resize", "ns-resize", "nesw-resize", "nwse-resize", "zoom-in", "zoom-out"];
+const varEmpty = " ";
 const displays = [
   ["inline", { display: "inline" }],
   ["block", { display: "block" }],
@@ -11,47 +12,48 @@ const displays = [
   ["flow-root", { display: "flow-root" }],
   ["list-item", { display: "list-item" }],
   ["hidden", { display: "none" }],
-  [/^display-(.+)$/, ([, c]) => ({ display: utilities.handler.bracket.cssvar.global(c) || c })]
+  [/^display-(.+)$/, ([, c]) => ({ display: colors.handler.bracket.cssvar.global(c) || c })]
 ];
 const appearances = [
   ["visible", { visibility: "visible" }],
   ["invisible", { visibility: "hidden" }],
   ["backface-visible", { "backface-visibility": "visible" }],
   ["backface-hidden", { "backface-visibility": "hidden" }],
-  ...utilities.makeGlobalStaticRules("backface", "backface-visibility")
+  ...colors.makeGlobalStaticRules("backface", "backface-visibility")
 ];
 const cursors = [
-  [/^cursor-(.+)$/, ([, c]) => ({ cursor: utilities.handler.bracket.cssvar.global(c) || c })]
+  [/^cursor-(.+)$/, ([, c]) => ({ cursor: colors.handler.bracket.cssvar.global(c) })],
+  ...cursorValues.map((v) => [`cursor-${v}`, { cursor: v }])
 ];
 const pointerEvents = [
   ["pointer-events-auto", { "pointer-events": "auto" }],
   ["pointer-events-none", { "pointer-events": "none" }],
-  ...utilities.makeGlobalStaticRules("pointer-events")
+  ...colors.makeGlobalStaticRules("pointer-events")
 ];
 const resizes = [
   ["resize-x", { resize: "horizontal" }],
   ["resize-y", { resize: "vertical" }],
   ["resize", { resize: "both" }],
   ["resize-none", { resize: "none" }],
-  ...utilities.makeGlobalStaticRules("resize")
+  ...colors.makeGlobalStaticRules("resize")
 ];
 const userSelects = [
   ["select-auto", { "user-select": "auto" }],
   ["select-all", { "user-select": "all" }],
   ["select-text", { "user-select": "text" }],
   ["select-none", { "user-select": "none" }],
-  ...utilities.makeGlobalStaticRules("select", "user-select")
+  ...colors.makeGlobalStaticRules("select", "user-select")
 ];
 const whitespaces = [
   [
     /^(?:whitespace-|ws-)([-\w]+)$/,
-    ([, v]) => ["normal", "nowrap", "pre", "pre-line", "pre-wrap", "break-spaces", ...utilities.globalKeywords].includes(v) ? { "white-space": v } : void 0,
+    ([, v]) => ["normal", "nowrap", "pre", "pre-line", "pre-wrap", "break-spaces", ...colors.globalKeywords].includes(v) ? { "white-space": v } : void 0,
     { autocomplete: "(whitespace|ws)-(normal|nowrap|pre|pre-line|pre-wrap|break-spaces)" }
   ]
 ];
 const contents = [
   [/^content-\[(.+)\]$/, ([, v]) => ({ content: `"${v}"` })],
-  [/^content-(\$.+)]$/, ([, v]) => ({ content: utilities.handler.cssvar(v) })],
+  [/^content-(\$.+)]$/, ([, v]) => ({ content: colors.handler.cssvar(v) })],
   ["content-empty", { content: '""' }],
   ["content-none", { content: '""' }]
 ];
@@ -70,7 +72,7 @@ const textTransforms = [
   ["case-lower", { "text-transform": "lowercase" }],
   ["case-capital", { "text-transform": "capitalize" }],
   ["case-normal", { "text-transform": "none" }],
-  ...utilities.makeGlobalStaticRules("case", "text-transform")
+  ...colors.makeGlobalStaticRules("case", "text-transform")
 ];
 const fontStyles = [
   ["italic", { "font-style": "italic" }],
@@ -101,51 +103,56 @@ const ringBase = {
   "--un-ring-offset-color": "#fff",
   "--un-ring-width": "0px",
   "--un-ring-color": "rgba(147,197,253,0.5)",
-  "--un-shadow": "0 0 #0000"
+  "--un-shadow": "0 0 rgba(0,0,0,0)"
 };
 const rings = [
   [/^ring(?:-(.+))?$/, ([, d], { theme }) => {
-    const value = theme.ringWidth?.[d || "DEFAULT"] ?? utilities.handler.px(d || "1");
+    const value = theme.ringWidth?.[d || "DEFAULT"] ?? colors.handler.px(d || "1");
     if (value) {
       return {
         "--un-ring-width": value,
         "--un-ring-offset-shadow": "var(--un-ring-inset) 0 0 0 var(--un-ring-offset-width) var(--un-ring-offset-color)",
         "--un-ring-shadow": "var(--un-ring-inset) 0 0 0 calc(var(--un-ring-width) + var(--un-ring-offset-width)) var(--un-ring-color)",
-        "box-shadow": "var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow, 0 0 #0000)"
+        "box-shadow": "var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow)"
       };
     }
   }, { autocomplete: "ring-$ringWidth" }],
-  [/^ring-(?:width-|size-)(.+)$/, ([, d], { theme }) => ({ "--un-ring-width": theme.lineWidth?.[d] ?? utilities.handler.bracket.cssvar.px(d) }), { autocomplete: "ring-(width|size)-$lineWidth" }],
+  [/^ring-(?:width-|size-)(.+)$/, ([, d], { theme }) => ({ "--un-ring-width": theme.lineWidth?.[d] ?? colors.handler.bracket.cssvar.px(d) }), { autocomplete: "ring-(width|size)-$lineWidth" }],
   ["ring-offset", { "--un-ring-offset-width": "1px" }],
-  [/^ring-offset-(?:width-|size-)?(.+)$/, ([, d], { theme }) => ({ "--un-ring-offset-width": theme.lineWidth?.[d] ?? utilities.handler.bracket.cssvar.px(d) }), { autocomplete: "ring-offset-(width|size)-$lineWidth" }],
-  [/^ring-(.+)$/, utilities.colorResolver("--un-ring-color", "ring"), { autocomplete: "ring-$colors" }],
-  [/^ring-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-ring-opacity": utilities.handler.bracket.percent(opacity) }), { autocomplete: "ring-(op|opacity)-<percent>" }],
-  [/^ring-offset-(.+)$/, utilities.colorResolver("--un-ring-offset-color", "ring-offset"), { autocomplete: "ring-offset-$colors" }],
-  [/^ring-offset-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-ring-offset-opacity": utilities.handler.bracket.percent(opacity) }), { autocomplete: "ring-offset-(op|opacity)-<percent>" }],
+  [/^ring-offset-(?:width-|size-)?(.+)$/, ([, d], { theme }) => ({ "--un-ring-offset-width": theme.lineWidth?.[d] ?? colors.handler.bracket.cssvar.px(d) }), { autocomplete: "ring-offset-(width|size)-$lineWidth" }],
+  [/^ring-(.+)$/, colors.colorResolver("--un-ring-color", "ring"), { autocomplete: "ring-$colors" }],
+  [/^ring-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-ring-opacity": colors.handler.bracket.percent(opacity) }), { autocomplete: "ring-(op|opacity)-<percent>" }],
+  [/^ring-offset-(.+)$/, colors.colorResolver("--un-ring-offset-color", "ring-offset"), { autocomplete: "ring-offset-$colors" }],
+  [/^ring-offset-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-ring-offset-opacity": colors.handler.bracket.percent(opacity) }), { autocomplete: "ring-offset-(op|opacity)-<percent>" }],
   ["ring-inset", { "--un-ring-inset": "inset" }]
 ];
 
 const boxShadowsBase = {
-  "--un-ring-offset-shadow": "0 0 #0000",
-  "--un-ring-shadow": "0 0 #0000",
+  "--un-ring-offset-shadow": "0 0 rgba(0,0,0,0)",
+  "--un-ring-shadow": "0 0 rgba(0,0,0,0)",
   "--un-shadow-inset": varEmpty,
-  "--un-shadow": "0 0 #0000"
+  "--un-shadow": "0 0 rgba(0,0,0,0)"
 };
 const boxShadows = [
   [/^shadow(?:-(.+))?$/, ([, d], { theme }) => {
     const v = theme.boxShadow?.[d || "DEFAULT"];
     if (v) {
       return {
-        "--un-shadow": utilities.colorableShadows(v, "--un-shadow-color").join(","),
-        "box-shadow": "var(--un-ring-offset-shadow, 0 0 #0000), var(--un-ring-shadow, 0 0 #0000), var(--un-shadow)"
+        "--un-shadow": colors.colorableShadows(v, "--un-shadow-color").join(","),
+        "box-shadow": "var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow)"
       };
     }
   }, { autocomplete: "shadow-$boxShadow" }],
-  [/^shadow-(.+)$/, utilities.colorResolver("--un-shadow-color", "shadow"), { autocomplete: "shadow-$colors" }],
-  [/^shadow-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-shadow-opacity": utilities.handler.bracket.percent(opacity) }), { autocomplete: "shadow-(op|opacity)-<percent>" }],
+  [/^shadow-(.+)$/, colors.colorResolver("--un-shadow-color", "shadow"), { autocomplete: "shadow-$colors" }],
+  [/^shadow-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-shadow-opacity": colors.handler.bracket.percent(opacity) }), { autocomplete: "shadow-(op|opacity)-<percent>" }],
   ["shadow-inset", { "--un-shadow-inset": "inset" }]
 ];
 
+const transformValues = [
+  "translate",
+  "rotate",
+  "scale"
+];
 const transformCpu = [
   "translateX(var(--un-translate-x))",
   "translateY(var(--un-translate-y))",
@@ -187,9 +194,9 @@ const transformBase = {
   "--un-translate-z": 0
 };
 const transforms = [
-  [/^(?:transform-)?origin-(.+)$/, ([, s]) => ({ "transform-origin": utilities.positionMap[s] ?? utilities.handler.bracket.cssvar(s) }), { autocomplete: [`transform-origin-(${Object.keys(utilities.positionMap).join("|")})`, `origin-(${Object.keys(utilities.positionMap).join("|")})`] }],
+  [/^(?:transform-)?origin-(.+)$/, ([, s]) => ({ "transform-origin": colors.positionMap[s] ?? colors.handler.bracket.cssvar(s) }), { autocomplete: [`transform-origin-(${Object.keys(colors.positionMap).join("|")})`, `origin-(${Object.keys(colors.positionMap).join("|")})`] }],
   [/^(?:transform-)?perspect(?:ive)?-(.+)$/, ([, s]) => {
-    const v = utilities.handler.bracket.cssvar.px.numberWithUnit(s);
+    const v = colors.handler.bracket.cssvar.px.numberWithUnit(s);
     if (v != null) {
       return {
         "-webkit-perspective": v,
@@ -198,7 +205,7 @@ const transforms = [
     }
   }],
   [/^(?:transform-)?perspect(?:ive)?-origin-(.+)$/, ([, s]) => {
-    const v = utilities.handler.bracket.cssvar(s) ?? (s.length >= 3 ? utilities.positionMap[s] : void 0);
+    const v = colors.handler.bracket.cssvar(s) ?? (s.length >= 3 ? colors.positionMap[s] : void 0);
     if (v != null) {
       return {
         "-webkit-perspective-origin": v,
@@ -210,37 +217,37 @@ const transforms = [
   [/^(?:transform-)?translate-([xyz])-(.+)$/, handleTranslate],
   [/^(?:transform-)?rotate-()(.+)$/, handleRotate],
   [/^(?:transform-)?rotate-([xyz])-(.+)$/, handleRotate],
-  [/^(?:transform-)?skew-([xy])-(.+)$/, handleSkew],
+  [/^(?:transform-)?skew-([xy])-(.+)$/, handleSkew, { autocomplete: ["transform-skew-(x|y)-<percent>"] }],
   [/^(?:transform-)?scale-()(.+)$/, handleScale],
-  [/^(?:transform-)?scale-([xyz])-(.+)$/, handleScale],
+  [/^(?:transform-)?scale-([xyz])-(.+)$/, handleScale, { autocomplete: [`transform-(${transformValues.join("|")})-<percent>`, `transform-(${transformValues.join("|")})-(x|y|z)-<percent>`] }],
   [/^(?:transform-)?preserve-3d$/, () => ({ "transform-style": "preserve-3d" })],
   [/^(?:transform-)?preserve-flat$/, () => ({ "transform-style": "flat" })],
   ["transform", { transform: transformCpu }],
   ["transform-cpu", { transform: transformCpu }],
   ["transform-gpu", { transform: transformGpu }],
   ["transform-none", { transform: "none" }],
-  ...utilities.makeGlobalStaticRules("transform")
+  ...colors.makeGlobalStaticRules("transform")
 ];
 function handleTranslate([, d, b], { theme }) {
-  const v = theme.spacing?.[b] ?? utilities.handler.bracket.cssvar.fraction.rem(b);
+  const v = theme.spacing?.[b] ?? colors.handler.bracket.cssvar.fraction.rem(b);
   if (v != null) {
     return [
-      ...utilities.xyzMap[d].map((i) => [`--un-translate${i}`, v]),
+      ...colors.xyzMap[d].map((i) => [`--un-translate${i}`, v]),
       ["transform", transformCpu]
     ];
   }
 }
 function handleScale([, d, b]) {
-  const v = utilities.handler.bracket.cssvar.fraction.percent(b);
+  const v = colors.handler.bracket.cssvar.fraction.percent(b);
   if (v != null) {
     return [
-      ...utilities.xyzMap[d].map((i) => [`--un-scale${i}`, v]),
+      ...colors.xyzMap[d].map((i) => [`--un-scale${i}`, v]),
       ["transform", transformCpu]
     ];
   }
 }
 function handleRotate([, d = "", b]) {
-  const v = utilities.handler.bracket.cssvar.degree(b);
+  const v = colors.handler.bracket.cssvar.degree(b);
   if (v != null) {
     if (d) {
       return {
@@ -260,7 +267,7 @@ function handleRotate([, d = "", b]) {
   }
 }
 function handleSkew([, d, b]) {
-  const v = utilities.handler.bracket.cssvar.degree(b);
+  const v = colors.handler.bracket.cssvar.degree(b);
   if (v != null) {
     return {
       [`--un-skew-${d}`]: v,