@unocss/preset-mini 0.17.3 → 0.20.0

package/dist/chunks/default2.cjs

@@ -46,6 +46,12 @@ const borders = [
   [/^(?:border|b)()-(.+)$/, handlerBorderColor],
   [/^(?:border|b)-([^-]+)(?:-(.+))?$/, handlerBorderColor],
   [/^(?:border|b)-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-border-opacity": utilities.handler.bracket.percent(opacity) })],
+  [/^(?:border|b)-([^-]+)-op(?:acity)?-?(.+)$/, ([, a, opacity]) => {
+    const v = utilities.handler.bracket.percent(opacity);
+    const d = utilities.directionMap[a];
+    if (v !== void 0 && d)
+      return d.map((i) => [`--un-border${i}-opacity`, v]);
+  }],
   [/^(?:border-)?(?:rounded|rd)$/, handlerRounded],
   [/^(?:border-)?(?:rounded|rd)(?:-(.+))?$/, handlerRounded],
   [/^(?:border-)?(?:rounded|rd)(?:-([^-]+))?(?:-(.+))?$/, handlerRounded],
@@ -55,6 +61,43 @@ const borders = [
   ["border-double", { "border-style": "double" }],
   ["border-none", { "border-style": "none" }]
 ];
+const borderHasColor = (color, { theme }) => {
+  return color !== void 0 && !!utilities.parseColor(color, theme)?.color;
+};
+const borderColorResolver = (direction) => ([, body], { theme }) => {
+  const data = utilities.parseColor(body, theme);
+  if (!data)
+    return;
+  const { opacity, color, rgba } = data;
+  if (!color)
+    return;
+  const a = opacity ? opacity[0] === "[" ? utilities.handler.bracket.percent(opacity) : parseFloat(opacity) / 100 : rgba?.[3];
+  if (rgba) {
+    if (a != null && !Number.isNaN(a)) {
+      rgba[3] = typeof a === "string" && !a.includes("%") ? parseFloat(a) : a;
+      return {
+        [`border${direction}-color`]: `rgba(${rgba.join(",")})`
+      };
+    } else {
+      if (direction === "") {
+        return {
+          "--un-border-opacity": 1,
+          [`border${direction}-color`]: `rgba(${rgba.slice(0, 3).join(",")},var(--un-border${direction}-opacity))`
+        };
+      } else {
+        return {
+          "--un-border-opacity": 1,
+          [`--un-border${direction}-opacity`]: "var(--un-border-opacity)",
+          [`border${direction}-color`]: `rgba(${rgba.slice(0, 3).join(",")},var(--un-border${direction}-opacity))`
+        };
+      }
+    }
+  } else {
+    return {
+      [`border${direction}-color`]: color.replace("%alpha", `${a || 1}`)
+    };
+  }
+};
 function handlerBorder(m) {
   const borderSizes = handlerBorderSize(m);
   if (borderSizes) {
@@ -71,8 +114,8 @@ function handlerBorderSize([, a, b]) {
     return utilities.directionMap[d].map((i) => [`border${i}-width`, v]);
 }
 function handlerBorderColor([, a, c], ctx) {
-  if (c !== void 0 && utilities.colorResolver("border-color", "border")(["", c], ctx)) {
-    return Object.assign({}, ...utilities.directionMap[utilities.directionMap[a] ? a : ""].map((i) => utilities.colorResolver(`border${i}-color`, "border")(["", c], ctx)));
+  if (borderHasColor(c, ctx)) {
+    return Object.assign({}, ...utilities.directionMap[utilities.directionMap[a] ? a : ""].map((i) => borderColorResolver(i)(["", c], ctx)));
   }
 }
 function handlerRounded([, a, b], { theme }) {
@@ -130,7 +173,7 @@ const flex = [
   ["flex-auto", { flex: "1 1 auto" }],
   ["flex-initial", { flex: "0 1 auto" }],
   ["flex-none", { flex: "none" }],
-  [/^flex-\[(.+)\]$/, ([, d]) => ({ flex: d })],
+  [/^flex-(\[.+\])$/, ([, d]) => ({ flex: utilities.handler.bracket(d).replace(/\d+\/\d+/, ($1) => utilities.handler.fraction($1)) })],
   ["flex-shrink", { "flex-shrink": 1 }],
   ["flex-shrink-0", { "flex-shrink": 0 }],
   ["flex-grow", { "flex-grow": 1 }],
@@ -293,12 +336,12 @@ const grids = [
   [/^(?:grid-)?auto-cols-([\w.-]+)$/, ([, v], { theme }) => ({ "grid-auto-columns": autoDirection(v, theme) })],
   [/^(?:grid-)?auto-flow-([\w.-]+)$/, ([, v]) => ({ "grid-auto-flow": v.replace("col", "column").split("-").join(" ") })],
   [/^(?:grid-)?auto-rows-([\w.-]+)$/, ([, v], { theme }) => ({ "grid-auto-rows": autoDirection(v, theme) })],
+  [/^grid-cols-(.+)$/, ([, v]) => ({ "grid-template-columns": utilities.handler.bracket(v) })],
+  [/^grid-rows-(.+)$/, ([, v]) => ({ "grid-template-rows": utilities.handler.bracket(v) })],
   [/^grid-cols-minmax-([\w.-]+)$/, ([, d]) => ({ "grid-template-columns": `repeat(auto-fill,minmax(${d},1fr))` })],
   [/^grid-rows-minmax-([\w.-]+)$/, ([, d]) => ({ "grid-template-rows": `repeat(auto-fill,minmax(${d},1fr))` })],
   [/^grid-cols-(\d+)$/, ([, d]) => ({ "grid-template-columns": `repeat(${d},minmax(0,1fr))` })],
-  [/^grid-rows-(\d+)$/, ([, d]) => ({ "grid-template-rows": `repeat(${d},minmax(0,1fr))` })],
-  [/^grid-cols-\[(.+)\]$/, ([, v]) => ({ "grid-template-columns": v.replace(/,/g, " ") })],
-  [/^grid-rows-\[(.+)\]$/, ([, v]) => ({ "grid-template-rows": v.replace(/,/g, " ") })]
+  [/^grid-rows-(\d+)$/, ([, d]) => ({ "grid-template-rows": `repeat(${d},minmax(0,1fr))` })]
 ];
 
 const overflowValues = [
@@ -314,11 +357,8 @@ const overflows = [
 
 const basicSet = ["auto", "start", "end", "center", "stretch"];
 const positions = [
-  ["relative", { position: "relative" }],
-  ["absolute", { position: "absolute" }],
-  ["fixed", { position: "fixed" }],
-  ["sticky", { position: "sticky" }],
-  ["static", { position: "static" }]
+  [/^(?:position-|pos-)?(relative|absolute|fixed|sticky)$/, ([, v]) => ({ position: v })],
+  [/^(?:position-|pos-)?(static)$/, ([, v]) => ({ position: v })]
 ];
 const justifies = [
   ["justify-start", { "justify-content": "flex-start" }],
@@ -369,8 +409,8 @@ function handleInsetValue(v) {
   return { auto: "auto", full: "100%" }[v] ?? utilities.handler.bracket.fraction.cssvar.auto.rem(v);
 }
 const insets = [
-  [/^(top|left|right|bottom|inset)-(.+)$/, ([, d, v]) => ({ [d]: handleInsetValue(v) })],
-  [/^inset-([xy])-(.+)$/, ([, d, v]) => {
+  [/^(?:position-|pos-)?(top|left|right|bottom|inset)-(.+)$/, ([, d, v]) => ({ [d]: handleInsetValue(v) })],
+  [/^(?:position-|pos-)?inset-([xy])-(.+)$/, ([, d, v]) => {
     const r = handleInsetValue(v);
     if (r != null && d in utilities.directionMap)
       return utilities.directionMap[d].map((i) => [i.slice(1), r]);
@@ -524,10 +564,8 @@ const boxShadows = [
         "box-shadow": "var(--un-ring-offset-shadow, 0 0 #0000), var(--un-ring-shadow, 0 0 #0000), var(--un-shadow)"
       };
     }
-    const color = colorResolver(d, theme);
-    if (color)
-      return color;
-  }]
+  }],
+  [/^shadow-(.+)$/, ([, d], { theme }) => colorResolver(d, theme)]
 ];
 
 function getPropName(minmax, hw) {
@@ -600,6 +638,8 @@ const transforms = [
   [/^scale-([xyz])-(.+)$/, handleScale],
   [/^rotate-(.+)$/, handleRotate],
   [/^rotate-((?!\[)[^-]+?)(?:deg)?$/, handleRotateWithUnit],
+  [/^skew-([xy])-(.+)$/, handleSkew],
+  [/^skew-([xy])-((?!\[)[^-]+?)(?:deg)?$/, handleSkewWithUnit],
   ["transform-gpu", transformGpu],
   ["transform-cpu", transformCpu],
   ["transform-none", { transform: "none" }],
@@ -653,6 +693,24 @@ function handleRotate([, b]) {
     ];
   }
 }
+function handleSkewWithUnit([, d, b]) {
+  const v = utilities.handler.bracket.number(b);
+  if (v != null) {
+    return [
+      transformBase,
+      { [`--un-skew-${d}`]: `${v}deg` }
+    ];
+  }
+}
+function handleSkew([, d, b]) {
+  const v = utilities.handler.bracket(b);
+  if (v != null) {
+    return [
+      transformBase,
+      { [`--un-skew-${d}`]: v }
+    ];
+  }
+}
 
 const variablesAbbrMap = {
   "visible": "visibility",

package/dist/chunks/default2.mjs

@@ -1,4 +1,4 @@
-import { h as handler, c as colorResolver$1, d as directionMap, a as cornerMap, p as parseColor, b as capitalize, e as directionSize, x as xyzMap } from './utilities.mjs';
+import { h as handler, c as colorResolver$1, d as directionMap, p as parseColor, a as cornerMap, b as capitalize, e as directionSize, x as xyzMap } from './utilities.mjs';
 import { toArray } from '@unocss/core';
 import { C as CONTROL_BYPASS_PSEUDO_CLASS } from './pseudo.mjs';
 
@@ -44,6 +44,12 @@ const borders = [
   [/^(?:border|b)()-(.+)$/, handlerBorderColor],
   [/^(?:border|b)-([^-]+)(?:-(.+))?$/, handlerBorderColor],
   [/^(?:border|b)-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-border-opacity": handler.bracket.percent(opacity) })],
+  [/^(?:border|b)-([^-]+)-op(?:acity)?-?(.+)$/, ([, a, opacity]) => {
+    const v = handler.bracket.percent(opacity);
+    const d = directionMap[a];
+    if (v !== void 0 && d)
+      return d.map((i) => [`--un-border${i}-opacity`, v]);
+  }],
   [/^(?:border-)?(?:rounded|rd)$/, handlerRounded],
   [/^(?:border-)?(?:rounded|rd)(?:-(.+))?$/, handlerRounded],
   [/^(?:border-)?(?:rounded|rd)(?:-([^-]+))?(?:-(.+))?$/, handlerRounded],
@@ -53,6 +59,43 @@ const borders = [
   ["border-double", { "border-style": "double" }],
   ["border-none", { "border-style": "none" }]
 ];
+const borderHasColor = (color, { theme }) => {
+  return color !== void 0 && !!parseColor(color, theme)?.color;
+};
+const borderColorResolver = (direction) => ([, body], { theme }) => {
+  const data = parseColor(body, theme);
+  if (!data)
+    return;
+  const { opacity, color, rgba } = data;
+  if (!color)
+    return;
+  const a = opacity ? opacity[0] === "[" ? handler.bracket.percent(opacity) : parseFloat(opacity) / 100 : rgba?.[3];
+  if (rgba) {
+    if (a != null && !Number.isNaN(a)) {
+      rgba[3] = typeof a === "string" && !a.includes("%") ? parseFloat(a) : a;
+      return {
+        [`border${direction}-color`]: `rgba(${rgba.join(",")})`
+      };
+    } else {
+      if (direction === "") {
+        return {
+          "--un-border-opacity": 1,
+          [`border${direction}-color`]: `rgba(${rgba.slice(0, 3).join(",")},var(--un-border${direction}-opacity))`
+        };
+      } else {
+        return {
+          "--un-border-opacity": 1,
+          [`--un-border${direction}-opacity`]: "var(--un-border-opacity)",
+          [`border${direction}-color`]: `rgba(${rgba.slice(0, 3).join(",")},var(--un-border${direction}-opacity))`
+        };
+      }
+    }
+  } else {
+    return {
+      [`border${direction}-color`]: color.replace("%alpha", `${a || 1}`)
+    };
+  }
+};
 function handlerBorder(m) {
   const borderSizes = handlerBorderSize(m);
   if (borderSizes) {
@@ -69,8 +112,8 @@ function handlerBorderSize([, a, b]) {
     return directionMap[d].map((i) => [`border${i}-width`, v]);
 }
 function handlerBorderColor([, a, c], ctx) {
-  if (c !== void 0 && colorResolver$1("border-color", "border")(["", c], ctx)) {
-    return Object.assign({}, ...directionMap[directionMap[a] ? a : ""].map((i) => colorResolver$1(`border${i}-color`, "border")(["", c], ctx)));
+  if (borderHasColor(c, ctx)) {
+    return Object.assign({}, ...directionMap[directionMap[a] ? a : ""].map((i) => borderColorResolver(i)(["", c], ctx)));
   }
 }
 function handlerRounded([, a, b], { theme }) {
@@ -128,7 +171,7 @@ const flex = [
   ["flex-auto", { flex: "1 1 auto" }],
   ["flex-initial", { flex: "0 1 auto" }],
   ["flex-none", { flex: "none" }],
-  [/^flex-\[(.+)\]$/, ([, d]) => ({ flex: d })],
+  [/^flex-(\[.+\])$/, ([, d]) => ({ flex: handler.bracket(d).replace(/\d+\/\d+/, ($1) => handler.fraction($1)) })],
   ["flex-shrink", { "flex-shrink": 1 }],
   ["flex-shrink-0", { "flex-shrink": 0 }],
   ["flex-grow", { "flex-grow": 1 }],
@@ -291,12 +334,12 @@ const grids = [
   [/^(?:grid-)?auto-cols-([\w.-]+)$/, ([, v], { theme }) => ({ "grid-auto-columns": autoDirection(v, theme) })],
   [/^(?:grid-)?auto-flow-([\w.-]+)$/, ([, v]) => ({ "grid-auto-flow": v.replace("col", "column").split("-").join(" ") })],
   [/^(?:grid-)?auto-rows-([\w.-]+)$/, ([, v], { theme }) => ({ "grid-auto-rows": autoDirection(v, theme) })],
+  [/^grid-cols-(.+)$/, ([, v]) => ({ "grid-template-columns": handler.bracket(v) })],
+  [/^grid-rows-(.+)$/, ([, v]) => ({ "grid-template-rows": handler.bracket(v) })],
   [/^grid-cols-minmax-([\w.-]+)$/, ([, d]) => ({ "grid-template-columns": `repeat(auto-fill,minmax(${d},1fr))` })],
   [/^grid-rows-minmax-([\w.-]+)$/, ([, d]) => ({ "grid-template-rows": `repeat(auto-fill,minmax(${d},1fr))` })],
   [/^grid-cols-(\d+)$/, ([, d]) => ({ "grid-template-columns": `repeat(${d},minmax(0,1fr))` })],
-  [/^grid-rows-(\d+)$/, ([, d]) => ({ "grid-template-rows": `repeat(${d},minmax(0,1fr))` })],
-  [/^grid-cols-\[(.+)\]$/, ([, v]) => ({ "grid-template-columns": v.replace(/,/g, " ") })],
-  [/^grid-rows-\[(.+)\]$/, ([, v]) => ({ "grid-template-rows": v.replace(/,/g, " ") })]
+  [/^grid-rows-(\d+)$/, ([, d]) => ({ "grid-template-rows": `repeat(${d},minmax(0,1fr))` })]
 ];
 
 const overflowValues = [
@@ -312,11 +355,8 @@ const overflows = [
 
 const basicSet = ["auto", "start", "end", "center", "stretch"];
 const positions = [
-  ["relative", { position: "relative" }],
-  ["absolute", { position: "absolute" }],
-  ["fixed", { position: "fixed" }],
-  ["sticky", { position: "sticky" }],
-  ["static", { position: "static" }]
+  [/^(?:position-|pos-)?(relative|absolute|fixed|sticky)$/, ([, v]) => ({ position: v })],
+  [/^(?:position-|pos-)?(static)$/, ([, v]) => ({ position: v })]
 ];
 const justifies = [
   ["justify-start", { "justify-content": "flex-start" }],
@@ -367,8 +407,8 @@ function handleInsetValue(v) {
   return { auto: "auto", full: "100%" }[v] ?? handler.bracket.fraction.cssvar.auto.rem(v);
 }
 const insets = [
-  [/^(top|left|right|bottom|inset)-(.+)$/, ([, d, v]) => ({ [d]: handleInsetValue(v) })],
-  [/^inset-([xy])-(.+)$/, ([, d, v]) => {
+  [/^(?:position-|pos-)?(top|left|right|bottom|inset)-(.+)$/, ([, d, v]) => ({ [d]: handleInsetValue(v) })],
+  [/^(?:position-|pos-)?inset-([xy])-(.+)$/, ([, d, v]) => {
     const r = handleInsetValue(v);
     if (r != null && d in directionMap)
       return directionMap[d].map((i) => [i.slice(1), r]);
@@ -522,10 +562,8 @@ const boxShadows = [
         "box-shadow": "var(--un-ring-offset-shadow, 0 0 #0000), var(--un-ring-shadow, 0 0 #0000), var(--un-shadow)"
       };
     }
-    const color = colorResolver(d, theme);
-    if (color)
-      return color;
-  }]
+  }],
+  [/^shadow-(.+)$/, ([, d], { theme }) => colorResolver(d, theme)]
 ];
 
 function getPropName(minmax, hw) {
@@ -598,6 +636,8 @@ const transforms = [
   [/^scale-([xyz])-(.+)$/, handleScale],
   [/^rotate-(.+)$/, handleRotate],
   [/^rotate-((?!\[)[^-]+?)(?:deg)?$/, handleRotateWithUnit],
+  [/^skew-([xy])-(.+)$/, handleSkew],
+  [/^skew-([xy])-((?!\[)[^-]+?)(?:deg)?$/, handleSkewWithUnit],
   ["transform-gpu", transformGpu],
   ["transform-cpu", transformCpu],
   ["transform-none", { transform: "none" }],
@@ -651,6 +691,24 @@ function handleRotate([, b]) {
     ];
   }
 }
+function handleSkewWithUnit([, d, b]) {
+  const v = handler.bracket.number(b);
+  if (v != null) {
+    return [
+      transformBase,
+      { [`--un-skew-${d}`]: `${v}deg` }
+    ];
+  }
+}
+function handleSkew([, d, b]) {
+  const v = handler.bracket(b);
+  if (v != null) {
+    return [
+      transformBase,
+      { [`--un-skew-${d}`]: v }
+    ];
+  }
+}
 
 const variablesAbbrMap = {
   "visible": "visibility",

package/dist/chunks/default3.cjs

@@ -4,7 +4,7 @@ const variants$1 = require('./variants.cjs');
 const pseudo = require('./pseudo.cjs');
 
 const regexCache = {};
-const variantBreakpoints = (matcher, _, theme) => {
+const variantBreakpoints = (matcher, { theme }) => {
   const variantEntries = Object.entries(theme.breakpoints || {}).map(([point, size], idx) => [point, size, idx]);
   for (const [point, size, idx] of variantEntries) {
     if (!regexCache[point])
@@ -46,25 +46,41 @@ const variantCombinators = [
   variants$1.variantMatcher("svg", (input) => `${input} svg *`)
 ];
 
-const variantColorsClass = [
-  variants$1.variantMatcher("dark", (input) => `.dark $$ ${input}`),
-  variants$1.variantMatcher("light", (input) => `.light $$ ${input}`)
-];
-const variantColorsMedia = [
-  (v) => {
-    const dark = variants$1.variantMatcher("dark")(v);
-    if (dark) {
-      return {
-        ...dark,
-        parent: "@media (prefers-color-scheme: dark)"
-      };
+const variantColorsMediaOrClass = [
+  (v, { options: { dark } }) => {
+    if (dark === "class") {
+      const match = variants$1.variantMatcher("dark", (input) => `.dark $$ ${input}`)(v);
+      if (match)
+        return match;
     }
-    const light = variants$1.variantMatcher("light")(v);
-    if (light) {
-      return {
-        ...light,
-        parent: "@media (prefers-color-scheme: light)"
-      };
+  },
+  (v, { options: { dark } }) => {
+    if (dark === "class") {
+      const match = variants$1.variantMatcher("light", (input) => `.light $$ ${input}`)(v);
+      if (match)
+        return match;
+    }
+  },
+  (v, { options: { dark } }) => {
+    if (dark === "media") {
+      const match = variants$1.variantMatcher("dark")(v);
+      if (match) {
+        return {
+          ...match,
+          parent: "@media (prefers-color-scheme: dark)"
+        };
+      }
+    }
+  },
+  (v, { options: { dark } }) => {
+    if (dark === "media") {
+      const match = variants$1.variantMatcher("light")(v);
+      if (match) {
+        return {
+          ...match,
+          parent: "@media (prefers-color-scheme: light)"
+        };
+      }
     }
   }
 ];
@@ -113,22 +129,36 @@ const variantSpace = (matcher) => {
   }
 };
 
+const variantPrint = (v) => {
+  const print = variants$1.variantMatcher("print")(v);
+  if (print) {
+    return {
+      ...print,
+      parent: "@media print"
+    };
+  }
+};
+
 const variants = [
   variantSpace,
   variantNegative,
   variantImportant,
+  variantPrint,
   variantBreakpoints,
   ...variantCombinators,
   pseudo.variantPseudoClasses,
+  pseudo.variantPseudoClassFunctions,
+  pseudo.variantTaggedPseudoClasses,
   pseudo.variantPseudoElements,
-  pseudo.partClasses
+  pseudo.partClasses,
+  ...variantColorsMediaOrClass
 ];
 
 exports.variantBreakpoints = variantBreakpoints;
-exports.variantColorsClass = variantColorsClass;
-exports.variantColorsMedia = variantColorsMedia;
+exports.variantColorsMediaOrClass = variantColorsMediaOrClass;
 exports.variantCombinators = variantCombinators;
 exports.variantImportant = variantImportant;
 exports.variantNegative = variantNegative;
+exports.variantPrint = variantPrint;
 exports.variantSpace = variantSpace;
 exports.variants = variants;

package/dist/chunks/default3.mjs

@@ -1,8 +1,8 @@
 import { v as variantMatcher } from './variants.mjs';
-import { v as variantPseudoClasses, a as variantPseudoElements, p as partClasses } from './pseudo.mjs';
+import { v as variantPseudoClasses, a as variantPseudoClassFunctions, b as variantTaggedPseudoClasses, c as variantPseudoElements, p as partClasses } from './pseudo.mjs';
 
 const regexCache = {};
-const variantBreakpoints = (matcher, _, theme) => {
+const variantBreakpoints = (matcher, { theme }) => {
   const variantEntries = Object.entries(theme.breakpoints || {}).map(([point, size], idx) => [point, size, idx]);
   for (const [point, size, idx] of variantEntries) {
     if (!regexCache[point])
@@ -44,25 +44,41 @@ const variantCombinators = [
   variantMatcher("svg", (input) => `${input} svg *`)
 ];
 
-const variantColorsClass = [
-  variantMatcher("dark", (input) => `.dark $$ ${input}`),
-  variantMatcher("light", (input) => `.light $$ ${input}`)
-];
-const variantColorsMedia = [
-  (v) => {
-    const dark = variantMatcher("dark")(v);
-    if (dark) {
-      return {
-        ...dark,
-        parent: "@media (prefers-color-scheme: dark)"
-      };
+const variantColorsMediaOrClass = [
+  (v, { options: { dark } }) => {
+    if (dark === "class") {
+      const match = variantMatcher("dark", (input) => `.dark $$ ${input}`)(v);
+      if (match)
+        return match;
     }
-    const light = variantMatcher("light")(v);
-    if (light) {
-      return {
-        ...light,
-        parent: "@media (prefers-color-scheme: light)"
-      };
+  },
+  (v, { options: { dark } }) => {
+    if (dark === "class") {
+      const match = variantMatcher("light", (input) => `.light $$ ${input}`)(v);
+      if (match)
+        return match;
+    }
+  },
+  (v, { options: { dark } }) => {
+    if (dark === "media") {
+      const match = variantMatcher("dark")(v);
+      if (match) {
+        return {
+          ...match,
+          parent: "@media (prefers-color-scheme: dark)"
+        };
+      }
+    }
+  },
+  (v, { options: { dark } }) => {
+    if (dark === "media") {
+      const match = variantMatcher("light")(v);
+      if (match) {
+        return {
+          ...match,
+          parent: "@media (prefers-color-scheme: light)"
+        };
+      }
     }
   }
 ];
@@ -111,15 +127,29 @@ const variantSpace = (matcher) => {
   }
 };
 
+const variantPrint = (v) => {
+  const print = variantMatcher("print")(v);
+  if (print) {
+    return {
+      ...print,
+      parent: "@media print"
+    };
+  }
+};
+
 const variants = [
   variantSpace,
   variantNegative,
   variantImportant,
+  variantPrint,
   variantBreakpoints,
   ...variantCombinators,
   variantPseudoClasses,
+  variantPseudoClassFunctions,
+  variantTaggedPseudoClasses,
   variantPseudoElements,
-  partClasses
+  partClasses,
+  ...variantColorsMediaOrClass
 ];
 
-export { variantColorsMedia as a, variantColorsClass as b, variantBreakpoints as c, variantCombinators as d, variantImportant as e, variantNegative as f, variantSpace as g, variants as v };
+export { variantBreakpoints as a, variantCombinators as b, variantColorsMediaOrClass as c, variantImportant as d, variantNegative as e, variantSpace as f, variantPrint as g, variants as v };

package/dist/chunks/pseudo.cjs

@@ -47,13 +47,39 @@ const PseudoElements = [
   "first-line",
   "selection"
 ];
+const PseudoClassFunctions = [
+  "not",
+  "is",
+  "where",
+  "has"
+];
 const PartClassesRE = /(part-\[(.+)]:)(.+)/;
 const PseudoElementsRE = new RegExp(`^(${PseudoElements.join("|")})[:-]`);
 const PseudoClassesStr = Object.keys(PseudoClasses).join("|");
+const PseudoClassFunctionsStr = PseudoClassFunctions.join("|");
 const PseudoClassesRE = new RegExp(`^(${PseudoClassesStr})[:-]`);
-const PseudoClassesNotRE = new RegExp(`^not-(${PseudoClassesStr})[:-]`);
-const PseudoClassesGroupRE = new RegExp(`^group-((not-)?(${PseudoClassesStr}))[:-]`);
-const PseudoClassesPeerRE = new RegExp(`^peer-((not-)?(${PseudoClassesStr}))[:-]`);
+const PseudoClassFunctionsRE = new RegExp(`^(${PseudoClassFunctionsStr})-(${PseudoClassesStr})[:-]`);
+function shouldAdd(entires) {
+  return !entires.find((i) => i[0] === CONTROL_BYPASS_PSEUDO_CLASS) || void 0;
+}
+const taggedPseudoClassMatcher = (tag, parent, combinator) => {
+  const re = new RegExp(`^${tag}-((?:(${PseudoClassFunctionsStr})-)?(${PseudoClassesStr}))[:-]`);
+  const rawRe = new RegExp(`^${core.escapeRegExp(parent)}:`);
+  return (input) => {
+    const match = input.match(re);
+    if (match) {
+      let pseudo = PseudoClasses[match[3]] || match[3];
+      if (match[2])
+        pseudo = `${match[2]}(:${pseudo})`;
+      return {
+        matcher: input.slice(match[1].length + tag.length + 2),
+        selector: (s, body) => {
+          return shouldAdd(body) && rawRe.test(s) ? s.replace(rawRe, `${parent}:${pseudo}:`) : `${parent}:${pseudo}${combinator}${s}`;
+        }
+      };
+    }
+  };
+};
 const variantPseudoElements = (input) => {
   const match = input.match(PseudoElementsRE);
   if (match) {
@@ -63,12 +89,9 @@ const variantPseudoElements = (input) => {
     };
   }
 };
-function shouldAdd(entires) {
-  return !entires.find((i) => i[0] === CONTROL_BYPASS_PSEUDO_CLASS) || void 0;
-}
 const variantPseudoClasses = {
   match: (input) => {
-    let match = input.match(PseudoClassesRE);
+    const match = input.match(PseudoClassesRE);
     if (match) {
       const pseudo = PseudoClasses[match[1]] || match[1];
       return {
@@ -76,37 +99,34 @@ const variantPseudoClasses = {
         selector: (s, body) => shouldAdd(body) && `${s}:${pseudo}`
       };
     }
-    match = input.match(PseudoClassesNotRE);
-    if (match) {
-      const pseudo = PseudoClasses[match[1]] || match[1];
-      return {
-        matcher: input.slice(match[1].length + 5),
-        selector: (s, body) => shouldAdd(body) && `${s}:not(:${pseudo})`
-      };
-    }
-    match = input.match(PseudoClassesGroupRE);
-    if (match) {
-      let pseudo = PseudoClasses[match[3]] || match[3];
-      if (match[2])
-        pseudo = `not(:${pseudo})`;
-      return {
-        matcher: input.slice(match[1].length + 7),
-        selector: (s, body) => shouldAdd(body) && s.includes(".group:") ? s.replace(/\.group:/, `.group:${pseudo}:`) : `.group:${pseudo} ${s}`
-      };
-    }
-    match = input.match(PseudoClassesPeerRE);
+  },
+  multiPass: true
+};
+const variantPseudoClassFunctions = {
+  match: (input) => {
+    const match = input.match(PseudoClassFunctionsRE);
     if (match) {
-      let pseudo = PseudoClasses[match[3]] || match[3];
-      if (match[2])
-        pseudo = `not(:${pseudo})`;
+      const fn = match[1];
+      const pseudo = PseudoClasses[match[2]] || match[2];
       return {
-        matcher: input.slice(match[1].length + 6),
-        selector: (s, body) => shouldAdd(body) && s.includes(".peer:") ? s.replace(/\.peer:/, `.peer:${pseudo}:`) : `.peer:${pseudo}~${s}`
+        matcher: input.slice(match[1].length + match[2].length + 2),
+        selector: (s, body) => shouldAdd(body) && `${s}:${fn}(:${pseudo})`
       };
     }
   },
   multiPass: true
 };
+const variantTaggedPseudoClasses = {
+  match: (input, { options: { attributifyPseudo } }) => {
+    const g = taggedPseudoClassMatcher("group", attributifyPseudo ? '[group=""]' : ".group", " ")(input);
+    if (g)
+      return g;
+    const p = taggedPseudoClassMatcher("peer", attributifyPseudo ? '[peer=""]' : ".peer", "~")(input);
+    if (p)
+      return p;
+  },
+  multiPass: true
+};
 const partClasses = {
   match: (input) => {
     const match = input.match(PartClassesRE);
@@ -124,7 +144,8 @@ const partClasses = {
 };
 
 exports.CONTROL_BYPASS_PSEUDO_CLASS = CONTROL_BYPASS_PSEUDO_CLASS;
-exports.PseudoClasses = PseudoClasses;
 exports.partClasses = partClasses;
+exports.variantPseudoClassFunctions = variantPseudoClassFunctions;
 exports.variantPseudoClasses = variantPseudoClasses;
 exports.variantPseudoElements = variantPseudoElements;
+exports.variantTaggedPseudoClasses = variantTaggedPseudoClasses;

package/dist/chunks/pseudo.mjs

@@ -1,4 +1,4 @@
-import { toArray } from '@unocss/core';
+import { toArray, escapeRegExp } from '@unocss/core';
 
 const CONTROL_BYPASS_PSEUDO_CLASS = "$$no-pseudo";
 const PseudoClasses = Object.fromEntries([
@@ -45,13 +45,39 @@ const PseudoElements = [
   "first-line",
   "selection"
 ];
+const PseudoClassFunctions = [
+  "not",
+  "is",
+  "where",
+  "has"
+];
 const PartClassesRE = /(part-\[(.+)]:)(.+)/;
 const PseudoElementsRE = new RegExp(`^(${PseudoElements.join("|")})[:-]`);
 const PseudoClassesStr = Object.keys(PseudoClasses).join("|");
+const PseudoClassFunctionsStr = PseudoClassFunctions.join("|");
 const PseudoClassesRE = new RegExp(`^(${PseudoClassesStr})[:-]`);
-const PseudoClassesNotRE = new RegExp(`^not-(${PseudoClassesStr})[:-]`);
-const PseudoClassesGroupRE = new RegExp(`^group-((not-)?(${PseudoClassesStr}))[:-]`);
-const PseudoClassesPeerRE = new RegExp(`^peer-((not-)?(${PseudoClassesStr}))[:-]`);
+const PseudoClassFunctionsRE = new RegExp(`^(${PseudoClassFunctionsStr})-(${PseudoClassesStr})[:-]`);
+function shouldAdd(entires) {
+  return !entires.find((i) => i[0] === CONTROL_BYPASS_PSEUDO_CLASS) || void 0;
+}
+const taggedPseudoClassMatcher = (tag, parent, combinator) => {
+  const re = new RegExp(`^${tag}-((?:(${PseudoClassFunctionsStr})-)?(${PseudoClassesStr}))[:-]`);
+  const rawRe = new RegExp(`^${escapeRegExp(parent)}:`);
+  return (input) => {
+    const match = input.match(re);
+    if (match) {
+      let pseudo = PseudoClasses[match[3]] || match[3];
+      if (match[2])
+        pseudo = `${match[2]}(:${pseudo})`;
+      return {
+        matcher: input.slice(match[1].length + tag.length + 2),
+        selector: (s, body) => {
+          return shouldAdd(body) && rawRe.test(s) ? s.replace(rawRe, `${parent}:${pseudo}:`) : `${parent}:${pseudo}${combinator}${s}`;
+        }
+      };
+    }
+  };
+};
 const variantPseudoElements = (input) => {
   const match = input.match(PseudoElementsRE);
   if (match) {
@@ -61,12 +87,9 @@ const variantPseudoElements = (input) => {
     };
   }
 };
-function shouldAdd(entires) {
-  return !entires.find((i) => i[0] === CONTROL_BYPASS_PSEUDO_CLASS) || void 0;
-}
 const variantPseudoClasses = {
   match: (input) => {
-    let match = input.match(PseudoClassesRE);
+    const match = input.match(PseudoClassesRE);
     if (match) {
       const pseudo = PseudoClasses[match[1]] || match[1];
       return {
@@ -74,37 +97,34 @@ const variantPseudoClasses = {
         selector: (s, body) => shouldAdd(body) && `${s}:${pseudo}`
       };
     }
-    match = input.match(PseudoClassesNotRE);
-    if (match) {
-      const pseudo = PseudoClasses[match[1]] || match[1];
-      return {
-        matcher: input.slice(match[1].length + 5),
-        selector: (s, body) => shouldAdd(body) && `${s}:not(:${pseudo})`
-      };
-    }
-    match = input.match(PseudoClassesGroupRE);
-    if (match) {
-      let pseudo = PseudoClasses[match[3]] || match[3];
-      if (match[2])
-        pseudo = `not(:${pseudo})`;
-      return {
-        matcher: input.slice(match[1].length + 7),
-        selector: (s, body) => shouldAdd(body) && s.includes(".group:") ? s.replace(/\.group:/, `.group:${pseudo}:`) : `.group:${pseudo} ${s}`
-      };
-    }
-    match = input.match(PseudoClassesPeerRE);
+  },
+  multiPass: true
+};
+const variantPseudoClassFunctions = {
+  match: (input) => {
+    const match = input.match(PseudoClassFunctionsRE);
     if (match) {
-      let pseudo = PseudoClasses[match[3]] || match[3];
-      if (match[2])
-        pseudo = `not(:${pseudo})`;
+      const fn = match[1];
+      const pseudo = PseudoClasses[match[2]] || match[2];
       return {
-        matcher: input.slice(match[1].length + 6),
-        selector: (s, body) => shouldAdd(body) && s.includes(".peer:") ? s.replace(/\.peer:/, `.peer:${pseudo}:`) : `.peer:${pseudo}~${s}`
+        matcher: input.slice(match[1].length + match[2].length + 2),
+        selector: (s, body) => shouldAdd(body) && `${s}:${fn}(:${pseudo})`
       };
     }
   },
   multiPass: true
 };
+const variantTaggedPseudoClasses = {
+  match: (input, { options: { attributifyPseudo } }) => {
+    const g = taggedPseudoClassMatcher("group", attributifyPseudo ? '[group=""]' : ".group", " ")(input);
+    if (g)
+      return g;
+    const p = taggedPseudoClassMatcher("peer", attributifyPseudo ? '[peer=""]' : ".peer", "~")(input);
+    if (p)
+      return p;
+  },
+  multiPass: true
+};
 const partClasses = {
   match: (input) => {
     const match = input.match(PartClassesRE);
@@ -121,4 +141,4 @@ const partClasses = {
   multiPass: true
 };
 
-export { CONTROL_BYPASS_PSEUDO_CLASS as C, PseudoClasses as P, variantPseudoElements as a, partClasses as p, variantPseudoClasses as v };
+export { CONTROL_BYPASS_PSEUDO_CLASS as C, variantPseudoClassFunctions as a, variantTaggedPseudoClasses as b, variantPseudoElements as c, partClasses as p, variantPseudoClasses as v };

package/dist/{colors-d6b5a5b4.d.ts → colors-6d634692.d.ts}

@@ -1,4 +1,4 @@
-import { T as Theme } from './types-7963d0b3';
+import { T as Theme } from './types-a2d2b52f';
 
 declare const colors: Theme['colors'];
 

package/dist/colors.d.ts

@@ -1,2 +1,2 @@
-export { c as colors } from './colors-d6b5a5b4';
-import './types-7963d0b3';
+export { c as colors } from './colors-6d634692';
+import './types-a2d2b52f';

package/dist/{default-c7c67d23.d.ts → default-958434b6.d.ts}

@@ -1,4 +1,4 @@
-import { T as Theme } from './types-7963d0b3';
+import { T as Theme } from './types-a2d2b52f';
 
 declare const theme: Theme;
 

package/dist/index.cjs

@@ -11,16 +11,27 @@ require('@unocss/core');
 require('./chunks/pseudo.cjs');
 require('./chunks/variants.cjs');
 
-const presetMini = (options = {}) => ({
-  name: "@unocss/preset-mini",
-  theme: _default.theme,
-  rules: _default$1.rules,
-  variants: [
-    ..._default$2.variants,
-    ...options.dark === "media" ? _default$2.variantColorsMedia : _default$2.variantColorsClass
-  ],
-  options
-});
+const presetMini = (options = {}) => {
+  options.dark = options.dark ?? "class";
+  options.attributifyPseudo = options.attributifyPseudo ?? false;
+  return {
+    name: "@unocss/preset-mini",
+    theme: _default.theme,
+    rules: _default$1.rules,
+    variants: _default$2.variants,
+    options,
+    postprocess: options.variablePrefix && options.variablePrefix !== "un-" ? VarPrefixPostprocessor(options.variablePrefix) : void 0
+  };
+};
+function VarPrefixPostprocessor(prefix) {
+  return (obj) => {
+    obj.entries.forEach((i) => {
+      i[0] = i[0].replace(/^--un-/, `--${prefix}`);
+      if (typeof i[1] === "string")
+        i[1] = i[1].replace(/var\(--un-/g, `var(--${prefix}`);
+    });
+  };
+}
 
 exports.theme = _default.theme;
 exports.colors = colors.colors;

package/dist/index.d.ts

@@ -1,14 +1,22 @@
-import { Preset } from '@unocss/core';
-import { T as Theme } from './types-7963d0b3';
-export { T as Theme } from './types-7963d0b3';
-export { t as theme } from './default-c7c67d23';
-export { c as colors } from './colors-d6b5a5b4';
+import { PresetOptions, Preset } from '@unocss/core';
+import { T as Theme } from './types-a2d2b52f';
+export { T as Theme, a as ThemeAnimation } from './types-a2d2b52f';
+export { t as theme } from './default-958434b6';
+export { c as colors } from './colors-6d634692';
 
-interface PresetMiniOptions {
+interface PresetMiniOptions extends PresetOptions {
     /**
      * @default 'class'
      */
     dark?: 'class' | 'media';
+    /**
+     * @default false
+     */
+    attributifyPseudo?: Boolean;
+    /**
+     * @default 'un-'
+     */
+    variablePrefix?: string;
 }
 declare const presetMini: (options?: PresetMiniOptions) => Preset<Theme>;
 

package/dist/index.mjs

@@ -1,22 +1,33 @@
 import { t as theme } from './chunks/default.mjs';
 export { t as theme } from './chunks/default.mjs';
 import { r as rules } from './chunks/default2.mjs';
-import { v as variants, a as variantColorsMedia, b as variantColorsClass } from './chunks/default3.mjs';
+import { v as variants } from './chunks/default3.mjs';
 export { c as colors } from './chunks/colors.mjs';
 import './chunks/utilities.mjs';
 import '@unocss/core';
 import './chunks/pseudo.mjs';
 import './chunks/variants.mjs';
 
-const presetMini = (options = {}) => ({
-  name: "@unocss/preset-mini",
-  theme,
-  rules,
-  variants: [
-    ...variants,
-    ...options.dark === "media" ? variantColorsMedia : variantColorsClass
-  ],
-  options
-});
+const presetMini = (options = {}) => {
+  options.dark = options.dark ?? "class";
+  options.attributifyPseudo = options.attributifyPseudo ?? false;
+  return {
+    name: "@unocss/preset-mini",
+    theme,
+    rules,
+    variants,
+    options,
+    postprocess: options.variablePrefix && options.variablePrefix !== "un-" ? VarPrefixPostprocessor(options.variablePrefix) : void 0
+  };
+};
+function VarPrefixPostprocessor(prefix) {
+  return (obj) => {
+    obj.entries.forEach((i) => {
+      i[0] = i[0].replace(/^--un-/, `--${prefix}`);
+      if (typeof i[1] === "string")
+        i[1] = i[1].replace(/var\(--un-/g, `var(--${prefix}`);
+    });
+  };
+}
 
 export { presetMini as default, presetMini };

package/dist/rules.d.ts

@@ -1,5 +1,5 @@
 import { Rule } from '@unocss/core';
-import { T as Theme } from './types-7963d0b3';
+import { T as Theme } from './types-a2d2b52f';
 
 declare const verticalAligns: Rule[];
 declare const textAligns: Rule[];

package/dist/theme.d.ts

@@ -1,7 +1,7 @@
-export { c as colors } from './colors-d6b5a5b4';
-export { t as theme } from './default-c7c67d23';
-import { T as Theme } from './types-7963d0b3';
-export { T as Theme } from './types-7963d0b3';
+export { c as colors } from './colors-6d634692';
+export { t as theme } from './default-958434b6';
+import { T as Theme } from './types-a2d2b52f';
+export { T as Theme, a as ThemeAnimation } from './types-a2d2b52f';
 
 declare const blur: {
     DEFAULT: string;

package/dist/{types-7963d0b3.d.ts → types-a2d2b52f.d.ts}

@@ -1,3 +1,9 @@
+interface ThemeAnimation {
+    keyframes?: Record<string, string>;
+    durations?: Record<string, string>;
+    timingFns?: Record<string, string>;
+    properties?: Record<string, object>;
+}
 interface Theme {
     width?: Record<string, string>;
     height?: Record<string, string>;
@@ -19,6 +25,7 @@ interface Theme {
     textStrokeWidth?: Record<string, string>;
     blur?: Record<string, string>;
     dropShadow?: Record<string, string | string[]>;
+    animation?: ThemeAnimation;
 }
 
-export { Theme as T };
+export { Theme as T, ThemeAnimation as a };

package/dist/utils.d.ts

@@ -1,6 +1,6 @@
 import * as _unocss_core from '@unocss/core';
 import { VariantHandler, DynamicMatcher, ParsedColorValue } from '@unocss/core';
-import { T as Theme } from './types-7963d0b3';
+import { T as Theme } from './types-a2d2b52f';
 
 declare const directionMap: Record<string, string[]>;
 declare const cornerMap: Record<string, string[]>;

package/dist/variants.cjs

@@ -10,15 +10,16 @@ require('@unocss/core');
 
 
 exports.variantBreakpoints = _default.variantBreakpoints;
-exports.variantColorsClass = _default.variantColorsClass;
-exports.variantColorsMedia = _default.variantColorsMedia;
+exports.variantColorsMediaOrClass = _default.variantColorsMediaOrClass;
 exports.variantCombinators = _default.variantCombinators;
 exports.variantImportant = _default.variantImportant;
 exports.variantNegative = _default.variantNegative;
+exports.variantPrint = _default.variantPrint;
 exports.variantSpace = _default.variantSpace;
 exports.variants = _default.variants;
 exports.CONTROL_BYPASS_PSEUDO_CLASS = pseudo.CONTROL_BYPASS_PSEUDO_CLASS;
-exports.PseudoClasses = pseudo.PseudoClasses;
 exports.partClasses = pseudo.partClasses;
+exports.variantPseudoClassFunctions = pseudo.variantPseudoClassFunctions;
 exports.variantPseudoClasses = pseudo.variantPseudoClasses;
 exports.variantPseudoElements = pseudo.variantPseudoElements;
+exports.variantTaggedPseudoClasses = pseudo.variantTaggedPseudoClasses;

package/dist/variants.d.ts

@@ -1,12 +1,11 @@
 import { Variant, VariantFunction, VariantObject } from '@unocss/core';
-import { T as Theme } from './types-7963d0b3';
+import { T as Theme } from './types-a2d2b52f';
 
 declare const variantBreakpoints: Variant<Theme>;
 
 declare const variantCombinators: Variant[];
 
-declare const variantColorsClass: Variant[];
-declare const variantColorsMedia: Variant[];
+declare const variantColorsMediaOrClass: Variant[];
 
 declare const variants: Variant<Theme>[];
 
@@ -14,10 +13,13 @@ declare const variantImportant: Variant;
 declare const variantNegative: Variant;
 declare const variantSpace: Variant;
 
+declare const variantPrint: VariantFunction;
+
 declare const CONTROL_BYPASS_PSEUDO_CLASS = "$$no-pseudo";
-declare const PseudoClasses: Record<string, string | undefined>;
 declare const variantPseudoElements: VariantFunction;
 declare const variantPseudoClasses: VariantObject;
+declare const variantPseudoClassFunctions: VariantObject;
+declare const variantTaggedPseudoClasses: VariantObject;
 declare const partClasses: VariantObject;
 
-export { CONTROL_BYPASS_PSEUDO_CLASS, PseudoClasses, partClasses, variantBreakpoints, variantColorsClass, variantColorsMedia, variantCombinators, variantImportant, variantNegative, variantPseudoClasses, variantPseudoElements, variantSpace, variants };
+export { CONTROL_BYPASS_PSEUDO_CLASS, partClasses, variantBreakpoints, variantColorsMediaOrClass, variantCombinators, variantImportant, variantNegative, variantPrint, variantPseudoClassFunctions, variantPseudoClasses, variantPseudoElements, variantSpace, variantTaggedPseudoClasses, variants };

package/dist/variants.mjs

@@ -1,4 +1,4 @@
-export { c as variantBreakpoints, b as variantColorsClass, a as variantColorsMedia, d as variantCombinators, e as variantImportant, f as variantNegative, g as variantSpace, v as variants } from './chunks/default3.mjs';
-export { C as CONTROL_BYPASS_PSEUDO_CLASS, P as PseudoClasses, p as partClasses, v as variantPseudoClasses, a as variantPseudoElements } from './chunks/pseudo.mjs';
+export { a as variantBreakpoints, c as variantColorsMediaOrClass, b as variantCombinators, d as variantImportant, e as variantNegative, g as variantPrint, f as variantSpace, v as variants } from './chunks/default3.mjs';
+export { C as CONTROL_BYPASS_PSEUDO_CLASS, p as partClasses, a as variantPseudoClassFunctions, v as variantPseudoClasses, c as variantPseudoElements, b as variantTaggedPseudoClasses } from './chunks/pseudo.mjs';
 import './chunks/variants.mjs';
 import '@unocss/core';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unocss/preset-mini",
-  "version": "0.17.3",
+  "version": "0.20.0",
   "description": "The minimal preset for UnoCSS",
   "keywords": [
     "unocss",
@@ -61,7 +61,7 @@
     "*.css"
   ],
   "dependencies": {
-    "@unocss/core": "0.17.3"
+    "@unocss/core": "0.20.0"
   },
   "scripts": {
     "build": "unbuild",