@unocss/preset-mini 0.57.6 → 0.58.0

package/dist/index.cjs

@@ -4,13 +4,13 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const core = require('@unocss/core');
 const extractorArbitraryVariants = require('@unocss/extractor-arbitrary-variants');
-const utils = require('./shared/preset-mini.ImRm63ih.cjs');
+const utils = require('./utils.cjs');
 const theme = require('./theme.cjs');
 const rules = require('./rules.cjs');
 const variants = require('./variants.cjs');
 const colors = require('./colors.cjs');
 require('@unocss/rule-utils');
-require('./shared/preset-mini.MACvs-wn.cjs');
+require('./shared/preset-mini.qLxuqSG-.cjs');
 
 const preflights = [
   {
@@ -71,7 +71,7 @@ function normalizePreflights(preflights3, variablePrefix) {
   if (variablePrefix !== "un-") {
     return preflights3.map((p) => ({
       ...p,
-      getCSS: (() => async (ctx) => {
+      getCSS: /* @__PURE__ */ (() => async (ctx) => {
         const css = await p.getCSS(ctx);
         if (css)
           return css.replace(/--un-/g, `--${variablePrefix}`);

package/dist/index.d.cts

@@ -4,7 +4,7 @@ import { T as Theme } from './shared/preset-mini.7XoWRZIl.cjs';
 export { a as ThemeAnimation } from './shared/preset-mini.7XoWRZIl.cjs';
 export { t as theme } from './shared/preset-mini.5-XKlNyK.cjs';
 export { colors } from './colors.cjs';
-export { p as parseColor } from './shared/preset-mini.Jpc0QYPj.cjs';
+export { p as parseColor } from './shared/preset-mini.WoiFygE2.cjs';
 
 declare const preflights: Preflight<Theme>[];
 
@@ -30,7 +30,7 @@ interface PresetMiniOptions extends PresetOptions {
      */
     dark?: 'class' | 'media' | DarkModeSelectors;
     /**
-     * Generate pseudo selector as `[group=""]` instead of `.group`
+     * Generate tagged pseudo selector as `[group=""]` instead of `.group`
      *
      * @default false
      */
@@ -42,7 +42,7 @@ interface PresetMiniOptions extends PresetOptions {
      */
     variablePrefix?: string;
     /**
-     * Utils prefix
+     * Utils prefix. When using tagged pseudo selector, only the first truthy prefix will be used.
      *
      * @default undefined
      */

package/dist/index.d.mts

@@ -4,7 +4,7 @@ import { T as Theme } from './shared/preset-mini.7XoWRZIl.mjs';
 export { a as ThemeAnimation } from './shared/preset-mini.7XoWRZIl.mjs';
 export { t as theme } from './shared/preset-mini.4DxDu2I8.mjs';
 export { colors } from './colors.mjs';
-export { p as parseColor } from './shared/preset-mini.XmVozI6N.mjs';
+export { p as parseColor } from './shared/preset-mini.WMGBnRDa.mjs';
 
 declare const preflights: Preflight<Theme>[];
 
@@ -30,7 +30,7 @@ interface PresetMiniOptions extends PresetOptions {
      */
     dark?: 'class' | 'media' | DarkModeSelectors;
     /**
-     * Generate pseudo selector as `[group=""]` instead of `.group`
+     * Generate tagged pseudo selector as `[group=""]` instead of `.group`
      *
      * @default false
      */
@@ -42,7 +42,7 @@ interface PresetMiniOptions extends PresetOptions {
      */
     variablePrefix?: string;
     /**
-     * Utils prefix
+     * Utils prefix. When using tagged pseudo selector, only the first truthy prefix will be used.
      *
      * @default undefined
      */

package/dist/index.d.ts

@@ -4,7 +4,7 @@ import { T as Theme } from './shared/preset-mini.7XoWRZIl.js';
 export { a as ThemeAnimation } from './shared/preset-mini.7XoWRZIl.js';
 export { t as theme } from './shared/preset-mini.5daNC9yh.js';
 export { colors } from './colors.js';
-export { p as parseColor } from './shared/preset-mini.QW22c5Df.js';
+export { p as parseColor } from './shared/preset-mini.zVYE2D2j.js';
 
 declare const preflights: Preflight<Theme>[];
 
@@ -30,7 +30,7 @@ interface PresetMiniOptions extends PresetOptions {
      */
     dark?: 'class' | 'media' | DarkModeSelectors;
     /**
-     * Generate pseudo selector as `[group=""]` instead of `.group`
+     * Generate tagged pseudo selector as `[group=""]` instead of `.group`
      *
      * @default false
      */
@@ -42,7 +42,7 @@ interface PresetMiniOptions extends PresetOptions {
      */
     variablePrefix?: string;
     /**
-     * Utils prefix
+     * Utils prefix. When using tagged pseudo selector, only the first truthy prefix will be used.
      *
      * @default undefined
      */

package/dist/index.mjs

@@ -1,13 +1,13 @@
 import { entriesToCss, toArray, definePreset } from '@unocss/core';
 import { extractorArbitraryVariants } from '@unocss/extractor-arbitrary-variants';
-import { g as globalKeywords } from './shared/preset-mini.Stl9mkMB.mjs';
-export { p as parseColor } from './shared/preset-mini.Stl9mkMB.mjs';
+import { globalKeywords } from './utils.mjs';
+export { parseColor } from './utils.mjs';
 import { theme } from './theme.mjs';
 import { rules } from './rules.mjs';
 import { variants } from './variants.mjs';
 export { colors } from './colors.mjs';
 import '@unocss/rule-utils';
-import './shared/preset-mini.dPVVIvNm.mjs';
+import './shared/preset-mini.5jRPR_fm.mjs';
 
 const preflights = [
   {
@@ -68,7 +68,7 @@ function normalizePreflights(preflights3, variablePrefix) {
   if (variablePrefix !== "un-") {
     return preflights3.map((p) => ({
       ...p,
-      getCSS: (() => async (ctx) => {
+      getCSS: /* @__PURE__ */ (() => async (ctx) => {
         const css = await p.getCSS(ctx);
         if (css)
           return css.replace(/--un-/g, `--${variablePrefix}`);

package/dist/rules.cjs

@@ -1,9 +1,9 @@
 'use strict';
 
-const utils = require('./shared/preset-mini.ImRm63ih.cjs');
+const utils = require('./utils.cjs');
 const ruleUtils = require('@unocss/rule-utils');
 const core = require('@unocss/core');
-const transform = require('./shared/preset-mini.MACvs-wn.cjs');
+const transform = require('./shared/preset-mini.qLxuqSG-.cjs');
 
 const verticalAlignAlias = {
   "mid": "middle",
@@ -37,9 +37,9 @@ const textAligns = ["center", "left", "right", "justify", "start", "end"].map((v
 
 const outline = [
   // size
-  [/^outline-(?:width-|size-)?(.+)$/, ([, d], { theme }) => ({ "outline-width": theme.lineWidth?.[d] ?? utils.h.bracket.cssvar.global.px(d) }), { autocomplete: "outline-(width|size)-<num>" }],
+  [/^outline-(?:width-|size-)?(.+)$/, handleWidth$2, { autocomplete: "outline-(width|size)-<num>" }],
   // color
-  [/^outline-(?:color-)?(.+)$/, utils.colorResolver("outline-color", "outline-color", "borderColor"), { autocomplete: "outline-$colors" }],
+  [/^outline-(?:color-)?(.+)$/, handleColorOrWidth$2, { autocomplete: "outline-$colors" }],
   // offset
   [/^outline-offset-(.+)$/, ([, d], { theme }) => ({ "outline-offset": theme.lineWidth?.[d] ?? utils.h.bracket.cssvar.global.px(d) }), { autocomplete: "outline-(offset)-<num>" }],
   // style
@@ -47,6 +47,14 @@ const outline = [
   ...["auto", "dashed", "dotted", "double", "hidden", "solid", "groove", "ridge", "inset", "outset", ...utils.globalKeywords].map((v) => [`outline-${v}`, { "outline-style": v }]),
   ["outline-none", { "outline": "2px solid transparent", "outline-offset": "2px" }]
 ];
+function handleWidth$2([, b], { theme }) {
+  return { "outline-width": theme.lineWidth?.[b] ?? utils.h.bracket.cssvar.global.px(b) };
+}
+function handleColorOrWidth$2(match, ctx) {
+  if (utils.isCSSMathFn(utils.h.bracket(match[1])))
+    return handleWidth$2(match, ctx);
+  return utils.colorResolver("outline-color", "outline-color", "borderColor")(match, ctx);
+}
 const appearance = [
   ["appearance-none", {
     "-webkit-appearance": "none",
@@ -66,11 +74,11 @@ const willChange = [
 const borderStyles = ["solid", "dashed", "dotted", "double", "hidden", "none", "groove", "ridge", "inset", "outset", ...utils.globalKeywords];
 const borders = [
   // compound
-  [/^(?:border|b)()(?:-(.+))?$/, handlerBorder, { autocomplete: "(border|b)-<directions>" }],
-  [/^(?:border|b)-([xy])(?:-(.+))?$/, handlerBorder],
-  [/^(?:border|b)-([rltbse])(?:-(.+))?$/, handlerBorder],
-  [/^(?:border|b)-(block|inline)(?:-(.+))?$/, handlerBorder],
-  [/^(?:border|b)-([bi][se])(?:-(.+))?$/, handlerBorder],
+  [/^(?:border|b)()(?:-(.+))?$/, handlerBorderSize, { autocomplete: "(border|b)-<directions>" }],
+  [/^(?:border|b)-([xy])(?:-(.+))?$/, handlerBorderSize],
+  [/^(?:border|b)-([rltbse])(?:-(.+))?$/, handlerBorderSize],
+  [/^(?:border|b)-(block|inline)(?:-(.+))?$/, handlerBorderSize],
+  [/^(?:border|b)-([bi][se])(?:-(.+))?$/, handlerBorderSize],
   // size
   [/^(?:border|b)-()(?:width|size)-(.+)$/, handlerBorderSize, { autocomplete: ["(border|b)-<num>", "(border|b)-<directions>-<num>"] }],
   [/^(?:border|b)-([xy])-(?:width|size)-(.+)$/, handlerBorderSize],
@@ -78,11 +86,11 @@ const borders = [
   [/^(?:border|b)-(block|inline)-(?:width|size)-(.+)$/, handlerBorderSize],
   [/^(?:border|b)-([bi][se])-(?:width|size)-(.+)$/, handlerBorderSize],
   // colors
-  [/^(?:border|b)-()(?:color-)?(.+)$/, handlerBorderColor, { autocomplete: ["(border|b)-$colors", "(border|b)-<directions>-$colors"] }],
-  [/^(?:border|b)-([xy])-(?:color-)?(.+)$/, handlerBorderColor],
-  [/^(?:border|b)-([rltbse])-(?:color-)?(.+)$/, handlerBorderColor],
-  [/^(?:border|b)-(block|inline)-(?:color-)?(.+)$/, handlerBorderColor],
-  [/^(?:border|b)-([bi][se])-(?:color-)?(.+)$/, handlerBorderColor],
+  [/^(?:border|b)-()(?:color-)?(.+)$/, handlerBorderColorOrSize, { autocomplete: ["(border|b)-$colors", "(border|b)-<directions>-$colors"] }],
+  [/^(?:border|b)-([xy])-(?:color-)?(.+)$/, handlerBorderColorOrSize],
+  [/^(?:border|b)-([rltbse])-(?:color-)?(.+)$/, handlerBorderColorOrSize],
+  [/^(?:border|b)-(block|inline)-(?:color-)?(.+)$/, handlerBorderColorOrSize],
+  [/^(?:border|b)-([bi][se])-(?:color-)?(.+)$/, handlerBorderColorOrSize],
   // opacity
   [/^(?:border|b)-()op(?:acity)?-?(.+)$/, handlerBorderOpacity, { autocomplete: "(border|b)-(op|opacity)-<percent>" }],
   [/^(?:border|b)-([xy])-op(?:acity)?-?(.+)$/, handlerBorderOpacity],
@@ -128,31 +136,27 @@ function borderColorResolver(direction) {
         };
       }
     } else if (color) {
-      if (utils.isCSSMathFn(color)) {
-        return {
-          "border-width": color
-        };
-      }
       return {
         [`border${direction}-color`]: ruleUtils.colorToString(color, alpha)
       };
     }
   };
 }
-function handlerBorder(m, ctx) {
-  return handlerBorderSize(m, ctx);
-}
 function handlerBorderSize([, a = "", b], { theme }) {
   const v = theme.lineWidth?.[b || "DEFAULT"] ?? utils.h.bracket.cssvar.global.px(b || "1");
   if (a in utils.directionMap && v != null)
     return utils.directionMap[a].map((i) => [`border${i}-width`, v]);
 }
-function handlerBorderColor([, a = "", c], { theme }) {
-  if (a in utils.directionMap && utils.hasParseableColor(c, theme, "borderColor")) {
-    return Object.assign(
-      {},
-      ...utils.directionMap[a].map((i) => borderColorResolver(i)(["", c], theme))
-    );
+function handlerBorderColorOrSize([, a = "", b], ctx) {
+  if (a in utils.directionMap) {
+    if (utils.isCSSMathFn(utils.h.bracket(b)))
+      return handlerBorderSize(["", a, b], ctx);
+    if (utils.hasParseableColor(b, ctx.theme, "borderColor")) {
+      return Object.assign(
+        {},
+        ...utils.directionMap[a].map((i) => borderColorResolver(i)(["", b], ctx.theme))
+      );
+    }
   }
 }
 function handlerBorderOpacity([, a = "", opacity]) {
@@ -173,15 +177,20 @@ function handlerBorderStyle([, a = "", s]) {
 const opacity = [
   [/^op(?:acity)?-?(.+)$/, ([, d]) => ({ opacity: utils.h.bracket.percent.cssvar(d) })]
 ];
-const textColors = [
-  [/^(?:color|c)-(.+)$/, utils.colorResolver("color", "text", "textColor"), { autocomplete: "(color|c)-$colors" }],
-  // auto detection and fallback to font-size if the content looks like a size
-  [/^text-(.+)$/, utils.colorResolver("color", "text", "textColor", (css) => !css.color?.toString().match(utils.numberWithUnitRE)), { autocomplete: "text-$colors" }],
-  [/^(?:text|color|c)-(.+)$/, ([, v]) => utils.globalKeywords.includes(v) ? { color: v } : void 0, { autocomplete: `(text|color|c)-(${utils.globalKeywords.join("|")})` }],
-  [/^(?:text|color|c)-op(?:acity)?-?(.+)$/, ([, opacity2]) => ({ "--un-text-opacity": utils.h.bracket.percent.cssvar(opacity2) }), { autocomplete: "(text|color|c)-(op|opacity)-<percent>" }]
-];
+const bgUrlRE = /^\[url\(.+\)\]$/;
+const bgLengthRE = /^\[length:.+\]$/;
+const bgPositionRE = /^\[position:.+\]$/;
 const bgColors = [
-  [/^bg-(.+)$/, (...args) => utils.isSize(args[0][1]) ? void 0 : utils.colorResolver("background-color", "bg", "backgroundColor")(...args), { autocomplete: "bg-$colors" }],
+  [/^bg-(.+)$/, (...args) => {
+    const d = args[0][1];
+    if (bgUrlRE.test(d))
+      return { "--un-url": utils.h.bracket(d), "background-image": "var(--un-url)" };
+    if (bgLengthRE.test(d) && utils.h.bracketOfLength(d) != null)
+      return { "background-size": utils.h.bracketOfLength(d).split(" ").map((e) => utils.h.fraction.auto.px.cssvar(e) ?? e).join(" ") };
+    if ((utils.isSize(d) || bgPositionRE.test(d)) && utils.h.bracketOfPosition(d) != null)
+      return { "background-position": utils.h.bracketOfPosition(d).split(" ").map((e) => utils.h.position.fraction.auto.px.cssvar(e) ?? e).join(" ") };
+    return utils.colorResolver("background-color", "bg", "backgroundColor")(...args);
+  }],
   [/^bg-op(?:acity)?-?(.+)$/, ([, opacity2]) => ({ "--un-bg-opacity": utils.h.bracket.percent.cssvar(opacity2) }), { autocomplete: "bg-(op|opacity)-<percent>" }]
 ];
 const colorScheme = [
@@ -202,18 +211,10 @@ const decorationStyles = ["solid", "double", "dotted", "dashed", "wavy", ...util
 const textDecorations = [
   [/^(?:decoration-)?(underline|overline|line-through)$/, ([, s]) => ({ "text-decoration-line": s }), { autocomplete: "decoration-(underline|overline|line-through)" }],
   // size
-  [/^(?:underline|decoration)-(?:size-)?(.+)$/, ([, s], { theme }) => ({ "text-decoration-thickness": theme.lineWidth?.[s] ?? utils.h.bracket.cssvar.global.px(s) }), { autocomplete: "(underline|decoration)-<num>" }],
+  [/^(?:underline|decoration)-(?:size-)?(.+)$/, handleWidth$1, { autocomplete: "(underline|decoration)-<num>" }],
   [/^(?:underline|decoration)-(auto|from-font)$/, ([, s]) => ({ "text-decoration-thickness": s }), { autocomplete: "(underline|decoration)-(auto|from-font)" }],
   // colors
-  [/^(?:underline|decoration)-(.+)$/, (match, ctx) => {
-    const result = utils.colorResolver("text-decoration-color", "line", "borderColor")(match, ctx);
-    if (result) {
-      return {
-        "-webkit-text-decoration-color": result["text-decoration-color"],
-        ...result
-      };
-    }
-  }, { autocomplete: "(underline|decoration)-$colors" }],
+  [/^(?:underline|decoration)-(.+)$/, handleColorOrWidth$1, { autocomplete: "(underline|decoration)-$colors" }],
   [/^(?:underline|decoration)-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-line-opacity": utils.h.bracket.percent.cssvar(opacity) }), { autocomplete: "(underline|decoration)-(op|opacity)-<percent>" }],
   // offset
   [/^(?:underline|decoration)-offset-(.+)$/, ([, s], { theme }) => ({ "text-underline-offset": theme.lineWidth?.[s] ?? utils.h.auto.bracket.cssvar.global.px(s) }), { autocomplete: "(underline|decoration)-(offset)-<num>" }],
@@ -223,6 +224,20 @@ const textDecorations = [
   ["no-underline", { "text-decoration": "none" }],
   ["decoration-none", { "text-decoration": "none" }]
 ];
+function handleWidth$1([, b], { theme }) {
+  return { "text-decoration-thickness": theme.lineWidth?.[b] ?? utils.h.bracket.cssvar.global.px(b) };
+}
+function handleColorOrWidth$1(match, ctx) {
+  if (utils.isCSSMathFn(utils.h.bracket(match[1])))
+    return handleWidth$1(match, ctx);
+  const result = utils.colorResolver("text-decoration-color", "line", "borderColor")(match, ctx);
+  if (result) {
+    return {
+      "-webkit-text-decoration-color": result["text-decoration-color"],
+      ...result
+    };
+  }
+}
 
 const transitionPropertyGroup = {
   all: "all",
@@ -305,48 +320,19 @@ const flex = [
   ["flex-nowrap", { "flex-wrap": "nowrap" }]
 ];
 
-function handleThemeByKey(s, theme, key) {
-  return theme[key]?.[s] || utils.h.bracket.cssvar.global.rem(s);
-}
 const fonts = [
-  // size
-  [
-    /^text-(.+)$/,
-    ([, s = "base"], { theme }) => {
-      const [size, leading] = utils.splitShorthand(s, "length");
-      const sizePairs = core.toArray(theme.fontSize?.[size]);
-      const lineHeight = leading ? handleThemeByKey(leading, theme, "lineHeight") : void 0;
-      if (sizePairs?.[0]) {
-        const [fontSize2, height, letterSpacing] = sizePairs;
-        if (typeof height === "object") {
-          return {
-            "font-size": fontSize2,
-            ...height
-          };
-        }
-        return {
-          "font-size": fontSize2,
-          "line-height": lineHeight ?? height ?? "1",
-          "letter-spacing": letterSpacing ? handleThemeByKey(letterSpacing, theme, "letterSpacing") : void 0
-        };
-      }
-      const fontSize = utils.h.bracketOfLength.rem(size);
-      if (lineHeight && fontSize) {
-        return {
-          "font-size": fontSize,
-          "line-height": lineHeight
-        };
-      }
-      return { "font-size": utils.h.bracketOfLength.rem(s) };
-    },
-    { autocomplete: "text-$fontSize" }
-  ],
-  [/^(?:text|font)-size-(.+)$/, ([, s], { theme }) => {
-    const themed = core.toArray(theme.fontSize?.[s]);
-    const size = themed?.[0] ?? utils.h.bracket.cssvar.global.rem(s);
-    if (size != null)
-      return { "font-size": size };
-  }, { autocomplete: "text-size-$fontSize" }],
+  // text
+  [/^text-(.+)$/, handleText, { autocomplete: "text-$fontSize" }],
+  // text size
+  [/^(?:text|font)-size-(.+)$/, handleSize, { autocomplete: "text-size-$fontSize" }],
+  // text colors
+  [/^text-(?:color-)?(.+)$/, handlerColorOrSize, { autocomplete: "text-$colors" }],
+  // colors
+  [/^(?:color|c)-(.+)$/, utils.colorResolver("color", "text", "textColor"), { autocomplete: "(color|c)-$colors" }],
+  // style
+  [/^(?:text|color|c)-(.+)$/, ([, v]) => utils.globalKeywords.includes(v) ? { color: v } : void 0, { autocomplete: `(text|color|c)-(${utils.globalKeywords.join("|")})` }],
+  // opacity
+  [/^(?:text|color|c)-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-text-opacity": utils.h.bracket.percent.cssvar(opacity) }), { autocomplete: "(text|color|c)-(op|opacity)-<percent>" }],
   // weights
   [
     /^(?:font|fw)-?([^-]+)$/,
@@ -426,6 +412,50 @@ const textShadows = [
   [/^text-shadow-color-(.+)$/, utils.colorResolver("--un-text-shadow-color", "text-shadow", "shadowColor"), { autocomplete: "text-shadow-color-$colors" }],
   [/^text-shadow-color-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-text-shadow-opacity": utils.h.bracket.percent.cssvar(opacity) }), { autocomplete: "text-shadow-color-(op|opacity)-<percent>" }]
 ];
+function handleThemeByKey(s, theme, key) {
+  return theme[key]?.[s] || utils.h.bracket.cssvar.global.rem(s);
+}
+function handleSize([, s], { theme }) {
+  const themed = core.toArray(theme.fontSize?.[s]);
+  const size = themed?.[0] ?? utils.h.bracket.cssvar.global.rem(s);
+  if (size != null)
+    return { "font-size": size };
+}
+function handlerColorOrSize(match, ctx) {
+  if (utils.isCSSMathFn(utils.h.bracket(match[1])))
+    return handleSize(match, ctx);
+  return utils.colorResolver("color", "text", "textColor")(match, ctx);
+}
+function handleText([, s = "base"], { theme }) {
+  const split = utils.splitShorthand(s, "length");
+  if (!split)
+    return;
+  const [size, leading] = split;
+  const sizePairs = core.toArray(theme.fontSize?.[size]);
+  const lineHeight = leading ? handleThemeByKey(leading, theme, "lineHeight") : void 0;
+  if (sizePairs?.[0]) {
+    const [fontSize2, height, letterSpacing] = sizePairs;
+    if (typeof height === "object") {
+      return {
+        "font-size": fontSize2,
+        ...height
+      };
+    }
+    return {
+      "font-size": fontSize2,
+      "line-height": lineHeight ?? height ?? "1",
+      "letter-spacing": letterSpacing ? handleThemeByKey(letterSpacing, theme, "letterSpacing") : void 0
+    };
+  }
+  const fontSize = utils.h.bracketOfLength.rem(size);
+  if (lineHeight && fontSize) {
+    return {
+      "font-size": fontSize,
+      "line-height": lineHeight
+    };
+  }
+  return { "font-size": utils.h.bracketOfLength.rem(s) };
+}
 
 const directions = {
   "": "",
@@ -782,7 +812,7 @@ const cssProperty = [
       return;
     const [prop, ...rest] = body.split(":");
     const value = rest.join(":");
-    if (!isURI(body) && prop.match(/^[a-z-]+$/) && isValidCSSBody(value)) {
+    if (!isURI(body) && /^[a-z-]+$/.test(prop) && isValidCSSBody(value)) {
       let parsed;
       if (ruleUtils.hasThemeFn(value))
         parsed = ruleUtils.transformThemeFn(value, theme);
@@ -845,12 +875,12 @@ const svgUtilities = [
   [/^fill-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-fill-opacity": utils.h.bracket.percent.cssvar(opacity) }), { autocomplete: "fill-(op|opacity)-<percent>" }],
   ["fill-none", { fill: "none" }],
   // stroke size
-  [/^stroke-(?:width-|size-)?(.+)$/, ([, s], { theme }) => ({ "stroke-width": theme.lineWidth?.[s] ?? utils.h.bracket.cssvar.fraction.px.number(s) }), { autocomplete: ["stroke-width-$lineWidth", "stroke-size-$lineWidth"] }],
+  [/^stroke-(?:width-|size-)?(.+)$/, handleWidth, { autocomplete: ["stroke-width-$lineWidth", "stroke-size-$lineWidth"] }],
   // stroke dash
   [/^stroke-dash-(.+)$/, ([, s]) => ({ "stroke-dasharray": utils.h.bracket.cssvar.number(s) }), { autocomplete: "stroke-dash-<num>" }],
   [/^stroke-offset-(.+)$/, ([, s], { theme }) => ({ "stroke-dashoffset": theme.lineWidth?.[s] ?? utils.h.bracket.cssvar.px.numberWithUnit(s) }), { autocomplete: "stroke-offset-$lineWidth" }],
   // stroke colors
-  [/^stroke-(.+)$/, utils.colorResolver("stroke", "stroke", "borderColor"), { autocomplete: "stroke-$colors" }],
+  [/^stroke-(.+)$/, handleColorOrWidth, { autocomplete: "stroke-$colors" }],
   [/^stroke-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-stroke-opacity": utils.h.bracket.percent.cssvar(opacity) }), { autocomplete: "stroke-(op|opacity)-<percent>" }],
   // line cap
   ["stroke-cap-square", { "stroke-linecap": "square" }],
@@ -865,6 +895,14 @@ const svgUtilities = [
   // none
   ["stroke-none", { stroke: "none" }]
 ];
+function handleWidth([, b], { theme }) {
+  return { "stroke-width": theme.lineWidth?.[b] ?? utils.h.bracket.cssvar.fraction.px.number(b) };
+}
+function handleColorOrWidth(match, ctx) {
+  if (utils.isCSSMathFn(utils.h.bracket(match[1])))
+    return handleWidth(match, ctx);
+  return utils.colorResolver("stroke", "stroke", "borderColor")(match, ctx);
+}
 
 const rules = [
   cssVariables,
@@ -888,7 +926,6 @@ const rules = [
   textShadows,
   transform.textTransforms,
   textAligns,
-  textColors,
   transform.fontStyles,
   transform.fontSmoothings,
   transform.boxShadows,
@@ -986,7 +1023,6 @@ exports.sizes = sizes;
 exports.svgUtilities = svgUtilities;
 exports.tabSizes = tabSizes;
 exports.textAligns = textAligns;
-exports.textColors = textColors;
 exports.textDecorations = textDecorations;
 exports.textIndents = textIndents;
 exports.textShadows = textShadows;

package/dist/rules.d.cts

@@ -16,10 +16,6 @@ declare function handlerBorderStyle([, a, s]: string[]): CSSEntries | undefined;
  * @example op10 op-30 opacity-100
  */
 declare const opacity: Rule[];
-/**
- * @example c-red color-red5 text-red-300
- */
-declare const textColors: Rule[];
 declare const bgColors: Rule[];
 declare const colorScheme: Rule[];
 
@@ -130,4 +126,4 @@ declare const textShadows: Rule<Theme>[];
 declare const cssVariables: Rule[];
 declare const cssProperty: Rule[];
 
-export { alignments, appearance, appearances, aspectRatio, bgColors, borderStyles, borders, boxShadows, boxShadowsBase, boxSizing, breaks, colorScheme, containerParent, contains, contentVisibility, contents, cssProperty, cssVariables, cursors, displays, flex, flexGridJustifiesAlignments, floats, fontSmoothings, fontStyles, fonts, gaps, grids, handlerBorderStyle, insets, justifies, margins, opacity, orders, outline, overflows, paddings, placements, pointerEvents, positions, questionMark, resizes, ringBase, rings, rules, sizes, svgUtilities, tabSizes, textAligns, textColors, textDecorations, textIndents, textOverflows, textShadows, textStrokes, textTransforms, textWraps, transformBase, transforms, transitions, userSelects, varEmpty, verticalAligns, whitespaces, willChange, zIndexes };
+export { alignments, appearance, appearances, aspectRatio, bgColors, borderStyles, borders, boxShadows, boxShadowsBase, boxSizing, breaks, colorScheme, containerParent, contains, contentVisibility, contents, cssProperty, cssVariables, cursors, displays, flex, flexGridJustifiesAlignments, floats, fontSmoothings, fontStyles, fonts, gaps, grids, handlerBorderStyle, insets, justifies, margins, opacity, orders, outline, overflows, paddings, placements, pointerEvents, positions, questionMark, resizes, ringBase, rings, rules, sizes, svgUtilities, tabSizes, textAligns, textDecorations, textIndents, textOverflows, textShadows, textStrokes, textTransforms, textWraps, transformBase, transforms, transitions, userSelects, varEmpty, verticalAligns, whitespaces, willChange, zIndexes };

package/dist/rules.d.mts

@@ -16,10 +16,6 @@ declare function handlerBorderStyle([, a, s]: string[]): CSSEntries | undefined;
  * @example op10 op-30 opacity-100
  */
 declare const opacity: Rule[];
-/**
- * @example c-red color-red5 text-red-300
- */
-declare const textColors: Rule[];
 declare const bgColors: Rule[];
 declare const colorScheme: Rule[];
 
@@ -130,4 +126,4 @@ declare const textShadows: Rule<Theme>[];
 declare const cssVariables: Rule[];
 declare const cssProperty: Rule[];
 
-export { alignments, appearance, appearances, aspectRatio, bgColors, borderStyles, borders, boxShadows, boxShadowsBase, boxSizing, breaks, colorScheme, containerParent, contains, contentVisibility, contents, cssProperty, cssVariables, cursors, displays, flex, flexGridJustifiesAlignments, floats, fontSmoothings, fontStyles, fonts, gaps, grids, handlerBorderStyle, insets, justifies, margins, opacity, orders, outline, overflows, paddings, placements, pointerEvents, positions, questionMark, resizes, ringBase, rings, rules, sizes, svgUtilities, tabSizes, textAligns, textColors, textDecorations, textIndents, textOverflows, textShadows, textStrokes, textTransforms, textWraps, transformBase, transforms, transitions, userSelects, varEmpty, verticalAligns, whitespaces, willChange, zIndexes };
+export { alignments, appearance, appearances, aspectRatio, bgColors, borderStyles, borders, boxShadows, boxShadowsBase, boxSizing, breaks, colorScheme, containerParent, contains, contentVisibility, contents, cssProperty, cssVariables, cursors, displays, flex, flexGridJustifiesAlignments, floats, fontSmoothings, fontStyles, fonts, gaps, grids, handlerBorderStyle, insets, justifies, margins, opacity, orders, outline, overflows, paddings, placements, pointerEvents, positions, questionMark, resizes, ringBase, rings, rules, sizes, svgUtilities, tabSizes, textAligns, textDecorations, textIndents, textOverflows, textShadows, textStrokes, textTransforms, textWraps, transformBase, transforms, transitions, userSelects, varEmpty, verticalAligns, whitespaces, willChange, zIndexes };

package/dist/rules.d.ts

@@ -16,10 +16,6 @@ declare function handlerBorderStyle([, a, s]: string[]): CSSEntries | undefined;
  * @example op10 op-30 opacity-100
  */
 declare const opacity: Rule[];
-/**
- * @example c-red color-red5 text-red-300
- */
-declare const textColors: Rule[];
 declare const bgColors: Rule[];
 declare const colorScheme: Rule[];
 
@@ -130,4 +126,4 @@ declare const textShadows: Rule<Theme>[];
 declare const cssVariables: Rule[];
 declare const cssProperty: Rule[];
 
-export { alignments, appearance, appearances, aspectRatio, bgColors, borderStyles, borders, boxShadows, boxShadowsBase, boxSizing, breaks, colorScheme, containerParent, contains, contentVisibility, contents, cssProperty, cssVariables, cursors, displays, flex, flexGridJustifiesAlignments, floats, fontSmoothings, fontStyles, fonts, gaps, grids, handlerBorderStyle, insets, justifies, margins, opacity, orders, outline, overflows, paddings, placements, pointerEvents, positions, questionMark, resizes, ringBase, rings, rules, sizes, svgUtilities, tabSizes, textAligns, textColors, textDecorations, textIndents, textOverflows, textShadows, textStrokes, textTransforms, textWraps, transformBase, transforms, transitions, userSelects, varEmpty, verticalAligns, whitespaces, willChange, zIndexes };
+export { alignments, appearance, appearances, aspectRatio, bgColors, borderStyles, borders, boxShadows, boxShadowsBase, boxSizing, breaks, colorScheme, containerParent, contains, contentVisibility, contents, cssProperty, cssVariables, cursors, displays, flex, flexGridJustifiesAlignments, floats, fontSmoothings, fontStyles, fonts, gaps, grids, handlerBorderStyle, insets, justifies, margins, opacity, orders, outline, overflows, paddings, placements, pointerEvents, positions, questionMark, resizes, ringBase, rings, rules, sizes, svgUtilities, tabSizes, textAligns, textDecorations, textIndents, textOverflows, textShadows, textStrokes, textTransforms, textWraps, transformBase, transforms, transitions, userSelects, varEmpty, verticalAligns, whitespaces, willChange, zIndexes };