@unocss/preset-mini 0.39.3 → 0.41.1

package/dist/chunks/default2.cjs

@@ -15,17 +15,18 @@ const verticalAlignAlias = {
   "text-top": "text-top",
   "text-bottom": "text-bottom",
   "sub": "sub",
-  "super": "super"
+  "super": "super",
+  ...Object.fromEntries(utilities.globalKeywords.map((x) => [x, x]))
 };
 const verticalAligns = [
-  [/^(?:vertical|align|v)-(.+)$/, ([, v]) => ({ "vertical-align": verticalAlignAlias[v] }), { autocomplete: `(vertical|align|v)-(${Object.keys(verticalAlignAlias).join("|")})` }]
+  [/^(?:vertical|align|v)-([-\w]+)$/, ([, v]) => ({ "vertical-align": verticalAlignAlias[v] }), { autocomplete: `(vertical|align|v)-(${Object.keys(verticalAlignAlias).join("|")})` }]
 ];
 const textAligns = ["center", "left", "right", "justify", "start", "end", ...utilities.globalKeywords].map((v) => [`text-${v}`, { "text-align": v }]);
 
 const outline = [
-  [/^outline-(?:width-|size-)?(.+)$/, ([, d], { theme }) => ({ "outline-width": theme.lineWidth?.[d] ?? utilities.handler.bracket.cssvar.px(d) }), { autocomplete: "outline-(width|size)-<num>" }],
+  [/^outline-(?:width-|size-)?(.+)$/, ([, d], { theme }) => ({ "outline-width": theme.lineWidth?.[d] ?? utilities.handler.bracket.cssvar.global.px(d) }), { autocomplete: "outline-(width|size)-<num>" }],
   [/^outline-(?:color-)?(.+)$/, utilities.colorResolver("outline-color", "outline-color"), { autocomplete: "outline-$colors" }],
-  [/^outline-offset-(.+)$/, ([, d], { theme }) => ({ "outline-offset": theme.lineWidth?.[d] ?? utilities.handler.bracket.cssvar.px(d) }), { autocomplete: "outline-(offset)-<num>" }],
+  [/^outline-offset-(.+)$/, ([, d], { theme }) => ({ "outline-offset": theme.lineWidth?.[d] ?? utilities.handler.bracket.cssvar.global.px(d) }), { autocomplete: "outline-(offset)-<num>" }],
   ["outline", { "outline-style": "solid" }],
   ...["auto", "dashed", "dotted", "double", "hidden", "solid", "groove", "ridge", "inset", "outset", ...utilities.globalKeywords].map((v) => [`outline-${v}`, { "outline-style": v }]),
   ["outline-none", { "outline": "2px solid transparent", "outline-offset": "2px" }]
@@ -119,7 +120,7 @@ function handlerBorder(m, ctx) {
   }
 }
 function handlerBorderSize([, a = "", b], { theme }) {
-  const v = theme.lineWidth?.[b || "DEFAULT"] ?? utilities.handler.bracket.cssvar.px(b || "1");
+  const v = theme.lineWidth?.[b || "DEFAULT"] ?? utilities.handler.bracket.cssvar.global.px(b || "1");
   if (a in utilities.directionMap && v != null)
     return utilities.directionMap[a].map((i) => [`border${i}-width`, v]);
 }
@@ -134,7 +135,7 @@ function handlerBorderOpacity([, a = "", opacity]) {
     return utilities.directionMap[a].map((i) => [`--un-border${i}-opacity`, v]);
 }
 function handlerRounded([, a = "", s], { theme }) {
-  const v = theme.borderRadius?.[s || "DEFAULT"] || utilities.handler.bracket.cssvar.fraction.rem(s || "1");
+  const v = theme.borderRadius?.[s || "DEFAULT"] || utilities.handler.bracket.cssvar.global.fraction.rem(s || "1");
   if (a in utilities.cornerMap && v != null)
     return utilities.cornerMap[a].map((i) => [`border${i}-radius`, v]);
 }
@@ -198,7 +199,8 @@ const transitions = [
     ([, v]) => ({ "transition-property": utilities.handler.global(v) || transitionProperty(v) }),
     { autocomplete: [`transition-property-(${[...utilities.globalKeywords, ...Object.keys(transitionPropertyGroup)].join("|")})`] }
   ],
-  ["transition-none", { transition: "none" }]
+  ["transition-none", { transition: "none" }],
+  ...utilities.makeGlobalStaticRules("transition")
 ];
 
 const flex = [
@@ -258,7 +260,7 @@ const fonts = [
   ],
   [/^text-size-(.+)$/, ([, s], { theme }) => {
     const themed = core.toArray(theme.fontSize?.[s]);
-    const size = themed?.[0] ?? utilities.handler.bracket.cssvar.rem(s);
+    const size = themed?.[0] ?? utilities.handler.bracket.cssvar.global.rem(s);
     if (size != null)
       return { "font-size": size };
   }, { autocomplete: "text-size-$fontSize" }],
@@ -317,7 +319,7 @@ const textShadows = [
         "text-shadow": "var(--un-text-shadow)"
       };
     }
-    return { "text-shadow": utilities.handler.bracket.cssvar(s) };
+    return { "text-shadow": utilities.handler.bracket.cssvar.global(s) };
   }, { autocomplete: "text-shadow-$textShadow" }],
   [/^text-shadow-color-(.+)$/, utilities.colorResolver("--un-text-shadow-color", "text-shadow"), { autocomplete: "text-shadow-color-$colors" }],
   [/^text-shadow-color-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-text-shadow-opacity": utilities.handler.bracket.percent(opacity) }), { autocomplete: "text-shadow-color-(op|opacity)-<percent>" }]
@@ -329,7 +331,7 @@ const directions = {
   "y": "row-"
 };
 const handleGap = ([, d = "", s], { theme }) => {
-  const v = theme.spacing?.[s] ?? utilities.handler.bracket.cssvar.rem(s);
+  const v = theme.spacing?.[s] ?? utilities.handler.bracket.cssvar.global.rem(s);
   if (v != null) {
     return {
       [`grid-${directions[d]}gap`]: v,
@@ -390,7 +392,8 @@ const overflowValues = [
   "hidden",
   "clip",
   "visible",
-  "scroll"
+  "scroll",
+  ...utilities.globalKeywords
 ];
 const overflows = [
   [/^(?:overflow|of)-(.+)$/, ([, v]) => overflowValues.includes(v) ? { overflow: v } : void 0, { autocomplete: [`(overflow|of)-(${overflowValues.join("|")})`, `(overflow|of)-(x|y)-(${overflowValues.join("|")})`] }],
@@ -399,6 +402,7 @@ const overflows = [
 
 const positions = [
   [/^(?:position-|pos-)?(relative|absolute|fixed|sticky)$/, ([, v]) => ({ position: v })],
+  [/^(?:position-|pos-)([-\w]+)$/, ([, v]) => utilities.globalKeywords.includes(v) ? { position: v } : void 0],
   [/^(?:position-|pos-)?(static)$/, ([, v]) => ({ position: v })]
 ];
 const justifies = [
@@ -408,15 +412,18 @@ const justifies = [
   ["justify-between", { "justify-content": "space-between" }],
   ["justify-around", { "justify-content": "space-around" }],
   ["justify-evenly", { "justify-content": "space-evenly" }],
+  ...utilities.makeGlobalStaticRules("justify", "justify-content"),
   ["justify-items-start", { "justify-items": "start" }],
   ["justify-items-end", { "justify-items": "end" }],
   ["justify-items-center", { "justify-items": "center" }],
   ["justify-items-stretch", { "justify-items": "stretch" }],
+  ...utilities.makeGlobalStaticRules("justify-items"),
   ["justify-self-auto", { "justify-self": "auto" }],
   ["justify-self-start", { "justify-self": "start" }],
   ["justify-self-end", { "justify-self": "end" }],
   ["justify-self-center", { "justify-self": "center" }],
-  ["justify-self-stretch", { "justify-self": "stretch" }]
+  ["justify-self-stretch", { "justify-self": "stretch" }],
+  ...utilities.makeGlobalStaticRules("justify-self")
 ];
 const orders = [
   [/^order-(.+)$/, ([, v]) => ({ order: utilities.handler.bracket.cssvar.number(v) })],
@@ -431,17 +438,20 @@ const alignments = [
   ["content-between", { "align-content": "space-between" }],
   ["content-around", { "align-content": "space-around" }],
   ["content-evenly", { "align-content": "space-evenly" }],
+  ...utilities.makeGlobalStaticRules("content", "align-content"),
   ["items-start", { "align-items": "flex-start" }],
   ["items-end", { "align-items": "flex-end" }],
   ["items-center", { "align-items": "center" }],
   ["items-baseline", { "align-items": "baseline" }],
   ["items-stretch", { "align-items": "stretch" }],
+  ...utilities.makeGlobalStaticRules("items", "align-items"),
   ["self-auto", { "align-self": "auto" }],
   ["self-start", { "align-self": "flex-start" }],
   ["self-end", { "align-self": "flex-end" }],
   ["self-center", { "align-self": "center" }],
   ["self-stretch", { "align-self": "stretch" }],
-  ["self-baseline", { "align-self": "baseline" }]
+  ["self-baseline", { "align-self": "baseline" }],
+  ...utilities.makeGlobalStaticRules("self", "align-self")
 ];
 const placements = [
   ["place-content-center", { "place-content": "center" }],
@@ -451,18 +461,21 @@ const placements = [
   ["place-content-around", { "place-content": "space-around" }],
   ["place-content-evenly", { "place-content": "space-evenly" }],
   ["place-content-stretch", { "place-content": "stretch" }],
+  ...utilities.makeGlobalStaticRules("place-content"),
   ["place-items-start", { "place-items": "start" }],
   ["place-items-end", { "place-items": "end" }],
   ["place-items-center", { "place-items": "center" }],
   ["place-items-stretch", { "place-items": "stretch" }],
+  ...utilities.makeGlobalStaticRules("place-items"),
   ["place-self-auto", { "place-self": "auto" }],
   ["place-self-start", { "place-self": "start" }],
   ["place-self-end", { "place-self": "end" }],
   ["place-self-center", { "place-self": "center" }],
-  ["place-self-stretch", { "place-self": "stretch" }]
+  ["place-self-stretch", { "place-self": "stretch" }],
+  ...utilities.makeGlobalStaticRules("place-self")
 ];
 function handleInsetValue(v, { theme }) {
-  return theme.spacing?.[v] ?? utilities.handler.bracket.cssvar.auto.fraction.rem(v);
+  return theme.spacing?.[v] ?? utilities.handler.bracket.cssvar.global.auto.fraction.rem(v);
 }
 function handleInsetValues([, d, v], ctx) {
   const r = handleInsetValue(v, ctx);
@@ -492,18 +505,21 @@ const floats = [
   ["float-left", { float: "left" }],
   ["float-right", { float: "right" }],
   ["float-none", { float: "none" }],
+  ...utilities.makeGlobalStaticRules("float"),
   ["clear-left", { clear: "left" }],
   ["clear-right", { clear: "right" }],
   ["clear-both", { clear: "both" }],
-  ["clear-none", { clear: "none" }]
+  ["clear-none", { clear: "none" }],
+  ...utilities.makeGlobalStaticRules("clear")
 ];
 const zIndexes = [
   [/^z([\d.]+)$/, ([, v]) => ({ "z-index": utilities.handler.number(v) })],
-  [/^z-(.+)$/, ([, v]) => ({ "z-index": utilities.handler.bracket.cssvar.auto.number(v) }), { autocomplete: "z-<num>" }]
+  [/^z-(.+)$/, ([, v]) => ({ "z-index": utilities.handler.bracket.cssvar.global.auto.number(v) }), { autocomplete: "z-<num>" }]
 ];
 const boxSizing = [
   ["box-border", { "box-sizing": "border-box" }],
-  ["box-content", { "box-sizing": "content-box" }]
+  ["box-content", { "box-sizing": "content-box" }],
+  ...utilities.makeGlobalStaticRules("box", "box-sizing")
 ];
 
 const sizeMapping = {
@@ -526,7 +542,7 @@ function getSizeValue(minmax, hw, theme, prop) {
     case "min":
       return `${prop}-content`;
   }
-  return utilities.handler.bracket.cssvar.auto.fraction.rem(prop);
+  return utilities.handler.bracket.cssvar.global.auto.fraction.rem(prop);
 }
 const sizes = [
   [
@@ -561,7 +577,7 @@ function getAspectRatio(prop) {
     case "video":
       return "16/9";
   }
-  return utilities.handler.bracket.cssvar.auto.number(prop);
+  return utilities.handler.bracket.cssvar.global.auto.number(prop);
 }
 const aspectRatio = [
   [/^aspect-(?:ratio-)?(.+)$/, ([, d]) => ({ "aspect-ratio": getAspectRatio(d) }), { autocomplete: ["aspect-(square|video)", "aspect-ratio-(square|video)"] }]
@@ -624,7 +640,7 @@ ${constructCSS({ animation: "__un_qm 0.5s ease-in-out alternate infinite" })}`;
 const decorationStyles = ["solid", "double", "dotted", "dashed", "wavy", ...utilities.globalKeywords];
 const textDecorations = [
   [/^(?:decoration-)?(underline|overline|line-through)$/, ([, s]) => ({ "text-decoration-line": s }), { autocomplete: "decoration-(underline|overline|line-through)" }],
-  [/^(?:underline|decoration)-(?:size-)?(.+)$/, ([, s], { theme }) => ({ "text-decoration-thickness": theme.lineWidth?.[s] ?? utilities.handler.bracket.cssvar.px(s) }), { autocomplete: "(underline|decoration)-<num>" }],
+  [/^(?:underline|decoration)-(?:size-)?(.+)$/, ([, s], { theme }) => ({ "text-decoration-thickness": theme.lineWidth?.[s] ?? utilities.handler.bracket.cssvar.global.px(s) }), { autocomplete: "(underline|decoration)-<num>" }],
   [/^(?:underline|decoration)-(auto|from-font)$/, ([, s]) => ({ "text-decoration-thickness": s }), { autocomplete: "(underline|decoration)-(auto|from-font)" }],
   [/^(?:underline|decoration)-(.+)$/, (match, ctx) => {
     const result = utilities.colorResolver("text-decoration-color", "line")(match, ctx);
@@ -636,7 +652,7 @@ const textDecorations = [
     }
   }, { autocomplete: "(underline|decoration)-$colors" }],
   [/^(?:underline|decoration)-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-line-opacity": utilities.handler.bracket.percent(opacity) }), { autocomplete: "(underline|decoration)-(op|opacity)-<percent>" }],
-  [/^(?:underline|decoration)-offset-(.+)$/, ([, s], { theme }) => ({ "text-underline-offset": theme.lineWidth?.[s] ?? utilities.handler.auto.bracket.cssvar.px(s) }), { autocomplete: "(underline|decoration)-(offset)-<num>" }],
+  [/^(?:underline|decoration)-offset-(.+)$/, ([, s], { theme }) => ({ "text-underline-offset": theme.lineWidth?.[s] ?? utilities.handler.auto.bracket.cssvar.global.px(s) }), { autocomplete: "(underline|decoration)-(offset)-<num>" }],
   ...decorationStyles.map((v) => [`underline-${v}`, { "text-decoration-style": v }]),
   ...decorationStyles.map((v) => [`decoration-${v}`, { "text-decoration-style": v }]),
   ["no-underline", { "text-decoration": "none" }],

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, 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 './utilities.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';
 
@@ -13,17 +13,18 @@ const verticalAlignAlias = {
   "text-top": "text-top",
   "text-bottom": "text-bottom",
   "sub": "sub",
-  "super": "super"
+  "super": "super",
+  ...Object.fromEntries(globalKeywords.map((x) => [x, x]))
 };
 const verticalAligns = [
-  [/^(?:vertical|align|v)-(.+)$/, ([, v]) => ({ "vertical-align": verticalAlignAlias[v] }), { autocomplete: `(vertical|align|v)-(${Object.keys(verticalAlignAlias).join("|")})` }]
+  [/^(?:vertical|align|v)-([-\w]+)$/, ([, v]) => ({ "vertical-align": verticalAlignAlias[v] }), { autocomplete: `(vertical|align|v)-(${Object.keys(verticalAlignAlias).join("|")})` }]
 ];
 const textAligns = ["center", "left", "right", "justify", "start", "end", ...globalKeywords].map((v) => [`text-${v}`, { "text-align": v }]);
 
 const outline = [
-  [/^outline-(?:width-|size-)?(.+)$/, ([, d], { theme }) => ({ "outline-width": theme.lineWidth?.[d] ?? handler.bracket.cssvar.px(d) }), { autocomplete: "outline-(width|size)-<num>" }],
+  [/^outline-(?:width-|size-)?(.+)$/, ([, d], { theme }) => ({ "outline-width": theme.lineWidth?.[d] ?? handler.bracket.cssvar.global.px(d) }), { autocomplete: "outline-(width|size)-<num>" }],
   [/^outline-(?:color-)?(.+)$/, colorResolver("outline-color", "outline-color"), { autocomplete: "outline-$colors" }],
-  [/^outline-offset-(.+)$/, ([, d], { theme }) => ({ "outline-offset": theme.lineWidth?.[d] ?? handler.bracket.cssvar.px(d) }), { autocomplete: "outline-(offset)-<num>" }],
+  [/^outline-offset-(.+)$/, ([, d], { theme }) => ({ "outline-offset": theme.lineWidth?.[d] ?? handler.bracket.cssvar.global.px(d) }), { autocomplete: "outline-(offset)-<num>" }],
   ["outline", { "outline-style": "solid" }],
   ...["auto", "dashed", "dotted", "double", "hidden", "solid", "groove", "ridge", "inset", "outset", ...globalKeywords].map((v) => [`outline-${v}`, { "outline-style": v }]),
   ["outline-none", { "outline": "2px solid transparent", "outline-offset": "2px" }]
@@ -117,7 +118,7 @@ function handlerBorder(m, ctx) {
   }
 }
 function handlerBorderSize([, a = "", b], { theme }) {
-  const v = theme.lineWidth?.[b || "DEFAULT"] ?? handler.bracket.cssvar.px(b || "1");
+  const v = theme.lineWidth?.[b || "DEFAULT"] ?? handler.bracket.cssvar.global.px(b || "1");
   if (a in directionMap && v != null)
     return directionMap[a].map((i) => [`border${i}-width`, v]);
 }
@@ -132,7 +133,7 @@ function handlerBorderOpacity([, a = "", opacity]) {
     return directionMap[a].map((i) => [`--un-border${i}-opacity`, v]);
 }
 function handlerRounded([, a = "", s], { theme }) {
-  const v = theme.borderRadius?.[s || "DEFAULT"] || handler.bracket.cssvar.fraction.rem(s || "1");
+  const v = theme.borderRadius?.[s || "DEFAULT"] || handler.bracket.cssvar.global.fraction.rem(s || "1");
   if (a in cornerMap && v != null)
     return cornerMap[a].map((i) => [`border${i}-radius`, v]);
 }
@@ -196,7 +197,8 @@ const transitions = [
     ([, v]) => ({ "transition-property": handler.global(v) || transitionProperty(v) }),
     { autocomplete: [`transition-property-(${[...globalKeywords, ...Object.keys(transitionPropertyGroup)].join("|")})`] }
   ],
-  ["transition-none", { transition: "none" }]
+  ["transition-none", { transition: "none" }],
+  ...makeGlobalStaticRules("transition")
 ];
 
 const flex = [
@@ -256,7 +258,7 @@ const fonts = [
   ],
   [/^text-size-(.+)$/, ([, s], { theme }) => {
     const themed = toArray(theme.fontSize?.[s]);
-    const size = themed?.[0] ?? handler.bracket.cssvar.rem(s);
+    const size = themed?.[0] ?? handler.bracket.cssvar.global.rem(s);
     if (size != null)
       return { "font-size": size };
   }, { autocomplete: "text-size-$fontSize" }],
@@ -315,7 +317,7 @@ const textShadows = [
         "text-shadow": "var(--un-text-shadow)"
       };
     }
-    return { "text-shadow": handler.bracket.cssvar(s) };
+    return { "text-shadow": handler.bracket.cssvar.global(s) };
   }, { autocomplete: "text-shadow-$textShadow" }],
   [/^text-shadow-color-(.+)$/, colorResolver("--un-text-shadow-color", "text-shadow"), { autocomplete: "text-shadow-color-$colors" }],
   [/^text-shadow-color-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-text-shadow-opacity": handler.bracket.percent(opacity) }), { autocomplete: "text-shadow-color-(op|opacity)-<percent>" }]
@@ -327,7 +329,7 @@ const directions = {
   "y": "row-"
 };
 const handleGap = ([, d = "", s], { theme }) => {
-  const v = theme.spacing?.[s] ?? handler.bracket.cssvar.rem(s);
+  const v = theme.spacing?.[s] ?? handler.bracket.cssvar.global.rem(s);
   if (v != null) {
     return {
       [`grid-${directions[d]}gap`]: v,
@@ -388,7 +390,8 @@ const overflowValues = [
   "hidden",
   "clip",
   "visible",
-  "scroll"
+  "scroll",
+  ...globalKeywords
 ];
 const overflows = [
   [/^(?:overflow|of)-(.+)$/, ([, v]) => overflowValues.includes(v) ? { overflow: v } : void 0, { autocomplete: [`(overflow|of)-(${overflowValues.join("|")})`, `(overflow|of)-(x|y)-(${overflowValues.join("|")})`] }],
@@ -397,6 +400,7 @@ const overflows = [
 
 const positions = [
   [/^(?:position-|pos-)?(relative|absolute|fixed|sticky)$/, ([, v]) => ({ position: v })],
+  [/^(?:position-|pos-)([-\w]+)$/, ([, v]) => globalKeywords.includes(v) ? { position: v } : void 0],
   [/^(?:position-|pos-)?(static)$/, ([, v]) => ({ position: v })]
 ];
 const justifies = [
@@ -406,15 +410,18 @@ const justifies = [
   ["justify-between", { "justify-content": "space-between" }],
   ["justify-around", { "justify-content": "space-around" }],
   ["justify-evenly", { "justify-content": "space-evenly" }],
+  ...makeGlobalStaticRules("justify", "justify-content"),
   ["justify-items-start", { "justify-items": "start" }],
   ["justify-items-end", { "justify-items": "end" }],
   ["justify-items-center", { "justify-items": "center" }],
   ["justify-items-stretch", { "justify-items": "stretch" }],
+  ...makeGlobalStaticRules("justify-items"),
   ["justify-self-auto", { "justify-self": "auto" }],
   ["justify-self-start", { "justify-self": "start" }],
   ["justify-self-end", { "justify-self": "end" }],
   ["justify-self-center", { "justify-self": "center" }],
-  ["justify-self-stretch", { "justify-self": "stretch" }]
+  ["justify-self-stretch", { "justify-self": "stretch" }],
+  ...makeGlobalStaticRules("justify-self")
 ];
 const orders = [
   [/^order-(.+)$/, ([, v]) => ({ order: handler.bracket.cssvar.number(v) })],
@@ -429,17 +436,20 @@ const alignments = [
   ["content-between", { "align-content": "space-between" }],
   ["content-around", { "align-content": "space-around" }],
   ["content-evenly", { "align-content": "space-evenly" }],
+  ...makeGlobalStaticRules("content", "align-content"),
   ["items-start", { "align-items": "flex-start" }],
   ["items-end", { "align-items": "flex-end" }],
   ["items-center", { "align-items": "center" }],
   ["items-baseline", { "align-items": "baseline" }],
   ["items-stretch", { "align-items": "stretch" }],
+  ...makeGlobalStaticRules("items", "align-items"),
   ["self-auto", { "align-self": "auto" }],
   ["self-start", { "align-self": "flex-start" }],
   ["self-end", { "align-self": "flex-end" }],
   ["self-center", { "align-self": "center" }],
   ["self-stretch", { "align-self": "stretch" }],
-  ["self-baseline", { "align-self": "baseline" }]
+  ["self-baseline", { "align-self": "baseline" }],
+  ...makeGlobalStaticRules("self", "align-self")
 ];
 const placements = [
   ["place-content-center", { "place-content": "center" }],
@@ -449,18 +459,21 @@ const placements = [
   ["place-content-around", { "place-content": "space-around" }],
   ["place-content-evenly", { "place-content": "space-evenly" }],
   ["place-content-stretch", { "place-content": "stretch" }],
+  ...makeGlobalStaticRules("place-content"),
   ["place-items-start", { "place-items": "start" }],
   ["place-items-end", { "place-items": "end" }],
   ["place-items-center", { "place-items": "center" }],
   ["place-items-stretch", { "place-items": "stretch" }],
+  ...makeGlobalStaticRules("place-items"),
   ["place-self-auto", { "place-self": "auto" }],
   ["place-self-start", { "place-self": "start" }],
   ["place-self-end", { "place-self": "end" }],
   ["place-self-center", { "place-self": "center" }],
-  ["place-self-stretch", { "place-self": "stretch" }]
+  ["place-self-stretch", { "place-self": "stretch" }],
+  ...makeGlobalStaticRules("place-self")
 ];
 function handleInsetValue(v, { theme }) {
-  return theme.spacing?.[v] ?? handler.bracket.cssvar.auto.fraction.rem(v);
+  return theme.spacing?.[v] ?? handler.bracket.cssvar.global.auto.fraction.rem(v);
 }
 function handleInsetValues([, d, v], ctx) {
   const r = handleInsetValue(v, ctx);
@@ -490,18 +503,21 @@ const floats = [
   ["float-left", { float: "left" }],
   ["float-right", { float: "right" }],
   ["float-none", { float: "none" }],
+  ...makeGlobalStaticRules("float"),
   ["clear-left", { clear: "left" }],
   ["clear-right", { clear: "right" }],
   ["clear-both", { clear: "both" }],
-  ["clear-none", { clear: "none" }]
+  ["clear-none", { clear: "none" }],
+  ...makeGlobalStaticRules("clear")
 ];
 const zIndexes = [
   [/^z([\d.]+)$/, ([, v]) => ({ "z-index": handler.number(v) })],
-  [/^z-(.+)$/, ([, v]) => ({ "z-index": handler.bracket.cssvar.auto.number(v) }), { autocomplete: "z-<num>" }]
+  [/^z-(.+)$/, ([, v]) => ({ "z-index": handler.bracket.cssvar.global.auto.number(v) }), { autocomplete: "z-<num>" }]
 ];
 const boxSizing = [
   ["box-border", { "box-sizing": "border-box" }],
-  ["box-content", { "box-sizing": "content-box" }]
+  ["box-content", { "box-sizing": "content-box" }],
+  ...makeGlobalStaticRules("box", "box-sizing")
 ];
 
 const sizeMapping = {
@@ -524,7 +540,7 @@ function getSizeValue(minmax, hw, theme, prop) {
     case "min":
       return `${prop}-content`;
   }
-  return handler.bracket.cssvar.auto.fraction.rem(prop);
+  return handler.bracket.cssvar.global.auto.fraction.rem(prop);
 }
 const sizes = [
   [
@@ -559,7 +575,7 @@ function getAspectRatio(prop) {
     case "video":
       return "16/9";
   }
-  return handler.bracket.cssvar.auto.number(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)"] }]
@@ -622,7 +638,7 @@ ${constructCSS({ animation: "__un_qm 0.5s ease-in-out alternate infinite" })}`;
 const decorationStyles = ["solid", "double", "dotted", "dashed", "wavy", ...globalKeywords];
 const textDecorations = [
   [/^(?:decoration-)?(underline|overline|line-through)$/, ([, s]) => ({ "text-decoration-line": s }), { autocomplete: "decoration-(underline|overline|line-through)" }],
-  [/^(?:underline|decoration)-(?:size-)?(.+)$/, ([, s], { theme }) => ({ "text-decoration-thickness": theme.lineWidth?.[s] ?? handler.bracket.cssvar.px(s) }), { autocomplete: "(underline|decoration)-<num>" }],
+  [/^(?:underline|decoration)-(?:size-)?(.+)$/, ([, s], { theme }) => ({ "text-decoration-thickness": theme.lineWidth?.[s] ?? handler.bracket.cssvar.global.px(s) }), { autocomplete: "(underline|decoration)-<num>" }],
   [/^(?:underline|decoration)-(auto|from-font)$/, ([, s]) => ({ "text-decoration-thickness": s }), { autocomplete: "(underline|decoration)-(auto|from-font)" }],
   [/^(?:underline|decoration)-(.+)$/, (match, ctx) => {
     const result = colorResolver("text-decoration-color", "line")(match, ctx);
@@ -634,7 +650,7 @@ const textDecorations = [
     }
   }, { autocomplete: "(underline|decoration)-$colors" }],
   [/^(?:underline|decoration)-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-line-opacity": handler.bracket.percent(opacity) }), { autocomplete: "(underline|decoration)-(op|opacity)-<percent>" }],
-  [/^(?:underline|decoration)-offset-(.+)$/, ([, s], { theme }) => ({ "text-underline-offset": theme.lineWidth?.[s] ?? handler.auto.bracket.cssvar.px(s) }), { autocomplete: "(underline|decoration)-(offset)-<num>" }],
+  [/^(?:underline|decoration)-offset-(.+)$/, ([, s], { theme }) => ({ "text-underline-offset": theme.lineWidth?.[s] ?? handler.auto.bracket.cssvar.global.px(s) }), { autocomplete: "(underline|decoration)-(offset)-<num>" }],
   ...decorationStyles.map((v) => [`underline-${v}`, { "text-decoration-style": v }]),
   ...decorationStyles.map((v) => [`decoration-${v}`, { "text-decoration-style": v }]),
   ["no-underline", { "text-decoration": "none" }],

package/dist/chunks/default3.cjs

@@ -32,22 +32,35 @@ const variantBreakpoints = {
         order -= idx + 1;
         return {
           matcher: m,
-          parent: [`@media (max-width: ${calcMaxWidthBySize(size)})`, order]
+          handle: (input, next) => next({
+            ...input,
+            parent: `${input.parent ? `${input.parent} $$ ` : ""}@media (max-width: ${calcMaxWidthBySize(size)})`,
+            parentOrder: order
+          })
         };
       }
       order += idx + 1;
       if (isAtPrefix && idx < variantEntries.length - 1) {
         return {
           matcher: m,
-          parent: [`@media (min-width: ${size}) and (max-width: ${calcMaxWidthBySize(variantEntries[idx + 1][1])})`, order]
+          handle: (input, next) => next({
+            ...input,
+            parent: `${input.parent ? `${input.parent} $$ ` : ""}@media (min-width: ${size}) and (max-width: ${calcMaxWidthBySize(variantEntries[idx + 1][1])})`,
+            parentOrder: order
+          })
         };
       }
       return {
         matcher: m,
-        parent: [`@media (min-width: ${size})`, order]
+        handle: (input, next) => next({
+          ...input,
+          parent: `${input.parent ? `${input.parent} $$ ` : ""}@media (min-width: ${size})`,
+          parentOrder: order
+        })
       };
     }
   },
+  multiPass: true,
   autocomplete: "(at-|lt-|)$breakpoints:"
 };
 
@@ -63,7 +76,8 @@ const scopeMatcher = (strict, name, template) => {
           selector: (s) => template.replace("&&-s", s).replace("&&-c", match[1] ?? "*")
         };
       }
-    }
+    },
+    multiPass: true
   };
 };
 const variantCombinators = [
@@ -87,17 +101,21 @@ const variantCustomMedia = {
       const media = theme.media?.[match[1]] ?? `(--${match[1]})`;
       return {
         matcher: matcher.slice(match[0].length),
-        parent: `@media ${media}`
+        handle: (input, next) => next({
+          ...input,
+          parent: `${input.parent ? `${input.parent} $$ ` : ""}@media ${media}`
+        })
       };
     }
-  }
+  },
+  multiPass: true
 };
 
 const variantColorsMediaOrClass = (options = {}) => {
   if (options?.dark === "class") {
     return [
-      variants$1.variantMatcher("dark", (input) => `.dark $$ ${input}`),
-      variants$1.variantMatcher("light", (input) => `.light $$ ${input}`)
+      variants$1.variantMatcher("dark", (input) => ({ prefix: `.dark $$ ${input.prefix}` })),
+      variants$1.variantMatcher("light", (input) => ({ prefix: `.light $$ ${input.prefix}` }))
     ];
   }
   return [
@@ -107,8 +125,8 @@ const variantColorsMediaOrClass = (options = {}) => {
 };
 
 const variantLanguageDirections = [
-  variants$1.variantMatcher("rtl", (input) => `[dir="rtl"] $$ ${input}`),
-  variants$1.variantMatcher("ltr", (input) => `[dir="ltr"] $$ ${input}`)
+  variants$1.variantMatcher("rtl", (input) => ({ prefix: `[dir="rtl"] $$ ${input.prefix}` })),
+  variants$1.variantMatcher("ltr", (input) => ({ prefix: `[dir="ltr"] $$ ${input.prefix}` }))
 ];
 
 const variantSelector = {
@@ -130,7 +148,10 @@ const variantCssLayer = {
     if (match) {
       return {
         matcher: matcher.slice(match[0].length),
-        parent: `@layer ${match[1]}`
+        handle: (input, next) => next({
+          ...input,
+          parent: `${input.parent ? `${input.parent} $$ ` : ""}@layer ${match[1]}`
+        })
       };
     }
   }
@@ -159,6 +180,30 @@ 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
+          });
+        }
+      };
+    }
+  },
+  multiPass: true
+};
 
 const numberRE = /[0-9.]+(?:[a-z]+|%)?/;
 const ignoreProps = [
@@ -282,7 +327,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)}:`);
   const pseudoRE = new RegExp(`^${tag}-((?:(${PseudoClassFunctionsStr})-)?(${PseudoClassesStr}))[:-]`);
   const pseudoColonRE = new RegExp(`^${tag}-((?:(${PseudoClassFunctionsStr})-)?(${PseudoClassesColonStr}))[:]`);
   return {
@@ -295,8 +340,11 @@ const taggedPseudoClassMatcher = (tag, parent, combinator) => {
           pseudo = `:${match[2]}(${pseudo})`;
         return {
           matcher: input.slice(match[0].length),
-          selector: (s) => rawRe.test(s) ? s.replace(rawRe, `${parent}${pseudo}:`) : `${parent}${pseudo}${combinator}${s}`,
-          sort: sortValue(match[3])
+          handle: (input2, next) => next({
+            ...input2,
+            prefix: rawRe.test(input2.prefix) ? input2.prefix.replace(rawRe, `${parent}${pseudo}:`) : `${parent}${pseudo}${combinator}${input2.prefix}`,
+            sort: sortValue(match[3])
+          })
         };
       }
     }
@@ -314,8 +362,18 @@ const variantPseudoClassesAndElements = {
       const pseudo = PseudoClasses[match[1]] || PseudoClassesColon[match[1]] || `:${match[1]}`;
       return {
         matcher: input.slice(match[0].length),
-        selector: (s) => `${s}${pseudo}`,
-        sort: sortValue(match[1])
+        handle: (input2, next) => {
+          const selectors = pseudo.startsWith("::") ? {
+            pseudo: `${input2.pseudo}${pseudo}`
+          } : {
+            selector: `${input2.selector}${pseudo}`
+          };
+          return next({
+            ...input2,
+            ...selectors,
+            sort: sortValue(match[1])
+          });
+        }
       };
     }
   },
@@ -376,6 +434,7 @@ const partClasses = {
 };
 
 const variants = (options) => [
+  variantVariables,
   variantCssLayer,
   variantSelector,
   variantInternalLayer,
@@ -410,4 +469,5 @@ exports.variantPseudoClassesAndElements = variantPseudoClassesAndElements;
 exports.variantScope = variantScope;
 exports.variantSelector = variantSelector;
 exports.variantTaggedPseudoClasses = variantTaggedPseudoClasses;
+exports.variantVariables = variantVariables;
 exports.variants = variants;

package/dist/chunks/default3.mjs

@@ -1,4 +1,4 @@
-import { k as resolveBreakpoints, C as CONTROL_MINI_NO_NEGATIVE } from './utilities.mjs';
+import { k as resolveBreakpoints, h as handler, C as CONTROL_MINI_NO_NEGATIVE } from './utilities.mjs';
 import { v as variantParentMatcher, a as variantMatcher } from './variants.mjs';
 import { escapeRegExp } from '@unocss/core';
 
@@ -30,22 +30,35 @@ const variantBreakpoints = {
         order -= idx + 1;
         return {
           matcher: m,
-          parent: [`@media (max-width: ${calcMaxWidthBySize(size)})`, order]
+          handle: (input, next) => next({
+            ...input,
+            parent: `${input.parent ? `${input.parent} $$ ` : ""}@media (max-width: ${calcMaxWidthBySize(size)})`,
+            parentOrder: order
+          })
         };
       }
       order += idx + 1;
       if (isAtPrefix && idx < variantEntries.length - 1) {
         return {
           matcher: m,
-          parent: [`@media (min-width: ${size}) and (max-width: ${calcMaxWidthBySize(variantEntries[idx + 1][1])})`, order]
+          handle: (input, next) => next({
+            ...input,
+            parent: `${input.parent ? `${input.parent} $$ ` : ""}@media (min-width: ${size}) and (max-width: ${calcMaxWidthBySize(variantEntries[idx + 1][1])})`,
+            parentOrder: order
+          })
         };
       }
       return {
         matcher: m,
-        parent: [`@media (min-width: ${size})`, order]
+        handle: (input, next) => next({
+          ...input,
+          parent: `${input.parent ? `${input.parent} $$ ` : ""}@media (min-width: ${size})`,
+          parentOrder: order
+        })
       };
     }
   },
+  multiPass: true,
   autocomplete: "(at-|lt-|)$breakpoints:"
 };
 
@@ -61,7 +74,8 @@ const scopeMatcher = (strict, name, template) => {
           selector: (s) => template.replace("&&-s", s).replace("&&-c", match[1] ?? "*")
         };
       }
-    }
+    },
+    multiPass: true
   };
 };
 const variantCombinators = [
@@ -85,17 +99,21 @@ const variantCustomMedia = {
       const media = theme.media?.[match[1]] ?? `(--${match[1]})`;
       return {
         matcher: matcher.slice(match[0].length),
-        parent: `@media ${media}`
+        handle: (input, next) => next({
+          ...input,
+          parent: `${input.parent ? `${input.parent} $$ ` : ""}@media ${media}`
+        })
       };
     }
-  }
+  },
+  multiPass: true
 };
 
 const variantColorsMediaOrClass = (options = {}) => {
   if (options?.dark === "class") {
     return [
-      variantMatcher("dark", (input) => `.dark $$ ${input}`),
-      variantMatcher("light", (input) => `.light $$ ${input}`)
+      variantMatcher("dark", (input) => ({ prefix: `.dark $$ ${input.prefix}` })),
+      variantMatcher("light", (input) => ({ prefix: `.light $$ ${input.prefix}` }))
     ];
   }
   return [
@@ -105,8 +123,8 @@ const variantColorsMediaOrClass = (options = {}) => {
 };
 
 const variantLanguageDirections = [
-  variantMatcher("rtl", (input) => `[dir="rtl"] $$ ${input}`),
-  variantMatcher("ltr", (input) => `[dir="ltr"] $$ ${input}`)
+  variantMatcher("rtl", (input) => ({ prefix: `[dir="rtl"] $$ ${input.prefix}` })),
+  variantMatcher("ltr", (input) => ({ prefix: `[dir="ltr"] $$ ${input.prefix}` }))
 ];
 
 const variantSelector = {
@@ -128,7 +146,10 @@ const variantCssLayer = {
     if (match) {
       return {
         matcher: matcher.slice(match[0].length),
-        parent: `@layer ${match[1]}`
+        handle: (input, next) => next({
+          ...input,
+          parent: `${input.parent ? `${input.parent} $$ ` : ""}@layer ${match[1]}`
+        })
       };
     }
   }
@@ -157,6 +178,30 @@ 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
+          });
+        }
+      };
+    }
+  },
+  multiPass: true
+};
 
 const numberRE = /[0-9.]+(?:[a-z]+|%)?/;
 const ignoreProps = [
@@ -280,7 +325,7 @@ const sortValue = (pseudo) => {
     return 1;
 };
 const taggedPseudoClassMatcher = (tag, parent, combinator) => {
-  const rawRe = new RegExp(`^${escapeRegExp(parent)}:`);
+  const rawRe = new RegExp(`${escapeRegExp(parent)}:`);
   const pseudoRE = new RegExp(`^${tag}-((?:(${PseudoClassFunctionsStr})-)?(${PseudoClassesStr}))[:-]`);
   const pseudoColonRE = new RegExp(`^${tag}-((?:(${PseudoClassFunctionsStr})-)?(${PseudoClassesColonStr}))[:]`);
   return {
@@ -293,8 +338,11 @@ const taggedPseudoClassMatcher = (tag, parent, combinator) => {
           pseudo = `:${match[2]}(${pseudo})`;
         return {
           matcher: input.slice(match[0].length),
-          selector: (s) => rawRe.test(s) ? s.replace(rawRe, `${parent}${pseudo}:`) : `${parent}${pseudo}${combinator}${s}`,
-          sort: sortValue(match[3])
+          handle: (input2, next) => next({
+            ...input2,
+            prefix: rawRe.test(input2.prefix) ? input2.prefix.replace(rawRe, `${parent}${pseudo}:`) : `${parent}${pseudo}${combinator}${input2.prefix}`,
+            sort: sortValue(match[3])
+          })
         };
       }
     }
@@ -312,8 +360,18 @@ const variantPseudoClassesAndElements = {
       const pseudo = PseudoClasses[match[1]] || PseudoClassesColon[match[1]] || `:${match[1]}`;
       return {
         matcher: input.slice(match[0].length),
-        selector: (s) => `${s}${pseudo}`,
-        sort: sortValue(match[1])
+        handle: (input2, next) => {
+          const selectors = pseudo.startsWith("::") ? {
+            pseudo: `${input2.pseudo}${pseudo}`
+          } : {
+            selector: `${input2.selector}${pseudo}`
+          };
+          return next({
+            ...input2,
+            ...selectors,
+            sort: sortValue(match[1])
+          });
+        }
       };
     }
   },
@@ -374,6 +432,7 @@ const partClasses = {
 };
 
 const variants = (options) => [
+  variantVariables,
   variantCssLayer,
   variantSelector,
   variantInternalLayer,
@@ -392,4 +451,4 @@ const variants = (options) => [
   variantScope
 ];
 
-export { variantBreakpoints as a, variantCombinators as b, variantPrint as c, variantCustomMedia as d, variantColorsMediaOrClass as e, variantLanguageDirections as f, variantSelector as g, variantCssLayer as h, variantInternalLayer as i, variantScope as j, variantPseudoClassesAndElements as k, variantPseudoClassFunctions as l, variantTaggedPseudoClasses as m, variantImportant as n, variantNegative as o, partClasses as p, variants as v };
+export { variantBreakpoints as a, variantCombinators as b, variantPrint as c, variantCustomMedia as d, variantColorsMediaOrClass as e, variantLanguageDirections as f, variantSelector as g, variantCssLayer as h, variantInternalLayer as i, variantScope as j, variantVariables as k, variantPseudoClassesAndElements as l, variantPseudoClassFunctions as m, variantTaggedPseudoClasses as n, variantImportant as o, partClasses as p, variantNegative as q, variants as v };

package/dist/chunks/transform.cjs

@@ -11,35 +11,43 @@ const displays = [
   ["flow-root", { display: "flow-root" }],
   ["list-item", { display: "list-item" }],
   ["hidden", { display: "none" }],
-  [/^display-(.+)$/, ([, c]) => ({ display: utilities.handler.bracket.cssvar(c) || c })]
+  [/^display-(.+)$/, ([, c]) => ({ display: utilities.handler.bracket.cssvar.global(c) || c })]
 ];
 const appearances = [
   ["visible", { visibility: "visible" }],
   ["invisible", { visibility: "hidden" }],
   ["backface-visible", { "backface-visibility": "visible" }],
-  ["backface-hidden", { "backface-visibility": "hidden" }]
+  ["backface-hidden", { "backface-visibility": "hidden" }],
+  ...utilities.makeGlobalStaticRules("backface", "backface-visibility")
 ];
 const cursors = [
-  [/^cursor-(.+)$/, ([, c]) => ({ cursor: utilities.handler.bracket.cssvar(c) || c })]
+  [/^cursor-(.+)$/, ([, c]) => ({ cursor: utilities.handler.bracket.cssvar.global(c) || c })]
 ];
 const pointerEvents = [
   ["pointer-events-auto", { "pointer-events": "auto" }],
-  ["pointer-events-none", { "pointer-events": "none" }]
+  ["pointer-events-none", { "pointer-events": "none" }],
+  ...utilities.makeGlobalStaticRules("pointer-events")
 ];
 const resizes = [
   ["resize-x", { resize: "horizontal" }],
   ["resize-y", { resize: "vertical" }],
   ["resize", { resize: "both" }],
-  ["resize-none", { resize: "none" }]
+  ["resize-none", { resize: "none" }],
+  ...utilities.makeGlobalStaticRules("resize")
 ];
 const userSelects = [
   ["select-auto", { "user-select": "auto" }],
   ["select-all", { "user-select": "all" }],
   ["select-text", { "user-select": "text" }],
-  ["select-none", { "user-select": "none" }]
+  ["select-none", { "user-select": "none" }],
+  ...utilities.makeGlobalStaticRules("select", "user-select")
 ];
 const whitespaces = [
-  [/^(?:whitespace|ws)-(normal|nowrap|pre|pre-line|pre-wrap|break-spaces)$/, ([, v]) => ({ "white-space": v }), { autocomplete: "(whitespace|ws)-(normal|nowrap|pre|pre-line|pre-wrap|break-spaces)" }]
+  [
+    /^(?:whitespace-|ws-)([-\w]+)$/,
+    ([, v]) => ["normal", "nowrap", "pre", "pre-line", "pre-wrap", "break-spaces", ...utilities.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}"` })],
@@ -61,7 +69,8 @@ const textTransforms = [
   ["case-upper", { "text-transform": "uppercase" }],
   ["case-lower", { "text-transform": "lowercase" }],
   ["case-capital", { "text-transform": "capitalize" }],
-  ["case-normal", { "text-transform": "none" }]
+  ["case-normal", { "text-transform": "none" }],
+  ...utilities.makeGlobalStaticRules("case", "text-transform")
 ];
 const fontStyles = [
   ["italic", { "font-style": "italic" }],
@@ -209,7 +218,8 @@ const transforms = [
   ["transform", { transform: transformCpu }],
   ["transform-cpu", { transform: transformCpu }],
   ["transform-gpu", { transform: transformGpu }],
-  ["transform-none", { transform: "none" }]
+  ["transform-none", { transform: "none" }],
+  ...utilities.makeGlobalStaticRules("transform")
 ];
 function handleTranslate([, d, b], { theme }) {
   const v = theme.spacing?.[b] ?? utilities.handler.bracket.cssvar.fraction.rem(b);

package/dist/chunks/transform.mjs

@@ -1,4 +1,4 @@
-import { h as handler, c as colorResolver, i as colorableShadows, m as positionMap, x as xyzMap } from './utilities.mjs';
+import { h as handler, m as makeGlobalStaticRules, g as globalKeywords, c as colorResolver, i as colorableShadows, n as positionMap, x as xyzMap } from './utilities.mjs';
 
 const varEmpty = "var(--un-empty,/*!*/ /*!*/)";
 const displays = [
@@ -9,35 +9,43 @@ const displays = [
   ["flow-root", { display: "flow-root" }],
   ["list-item", { display: "list-item" }],
   ["hidden", { display: "none" }],
-  [/^display-(.+)$/, ([, c]) => ({ display: handler.bracket.cssvar(c) || c })]
+  [/^display-(.+)$/, ([, c]) => ({ display: handler.bracket.cssvar.global(c) || c })]
 ];
 const appearances = [
   ["visible", { visibility: "visible" }],
   ["invisible", { visibility: "hidden" }],
   ["backface-visible", { "backface-visibility": "visible" }],
-  ["backface-hidden", { "backface-visibility": "hidden" }]
+  ["backface-hidden", { "backface-visibility": "hidden" }],
+  ...makeGlobalStaticRules("backface", "backface-visibility")
 ];
 const cursors = [
-  [/^cursor-(.+)$/, ([, c]) => ({ cursor: handler.bracket.cssvar(c) || c })]
+  [/^cursor-(.+)$/, ([, c]) => ({ cursor: handler.bracket.cssvar.global(c) || c })]
 ];
 const pointerEvents = [
   ["pointer-events-auto", { "pointer-events": "auto" }],
-  ["pointer-events-none", { "pointer-events": "none" }]
+  ["pointer-events-none", { "pointer-events": "none" }],
+  ...makeGlobalStaticRules("pointer-events")
 ];
 const resizes = [
   ["resize-x", { resize: "horizontal" }],
   ["resize-y", { resize: "vertical" }],
   ["resize", { resize: "both" }],
-  ["resize-none", { resize: "none" }]
+  ["resize-none", { resize: "none" }],
+  ...makeGlobalStaticRules("resize")
 ];
 const userSelects = [
   ["select-auto", { "user-select": "auto" }],
   ["select-all", { "user-select": "all" }],
   ["select-text", { "user-select": "text" }],
-  ["select-none", { "user-select": "none" }]
+  ["select-none", { "user-select": "none" }],
+  ...makeGlobalStaticRules("select", "user-select")
 ];
 const whitespaces = [
-  [/^(?:whitespace|ws)-(normal|nowrap|pre|pre-line|pre-wrap|break-spaces)$/, ([, v]) => ({ "white-space": v }), { autocomplete: "(whitespace|ws)-(normal|nowrap|pre|pre-line|pre-wrap|break-spaces)" }]
+  [
+    /^(?:whitespace-|ws-)([-\w]+)$/,
+    ([, v]) => ["normal", "nowrap", "pre", "pre-line", "pre-wrap", "break-spaces", ...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}"` })],
@@ -59,7 +67,8 @@ const textTransforms = [
   ["case-upper", { "text-transform": "uppercase" }],
   ["case-lower", { "text-transform": "lowercase" }],
   ["case-capital", { "text-transform": "capitalize" }],
-  ["case-normal", { "text-transform": "none" }]
+  ["case-normal", { "text-transform": "none" }],
+  ...makeGlobalStaticRules("case", "text-transform")
 ];
 const fontStyles = [
   ["italic", { "font-style": "italic" }],
@@ -207,7 +216,8 @@ const transforms = [
   ["transform", { transform: transformCpu }],
   ["transform-cpu", { transform: transformCpu }],
   ["transform-gpu", { transform: transformGpu }],
-  ["transform-none", { transform: "none" }]
+  ["transform-none", { transform: "none" }],
+  ...makeGlobalStaticRules("transform")
 ];
 function handleTranslate([, d, b], { theme }) {
   const v = theme.spacing?.[b] ?? handler.bracket.cssvar.fraction.rem(b);

package/dist/chunks/utilities.cjs

@@ -449,7 +449,7 @@ function bracketWithType(str, type) {
     else if (type && match[1] === type)
       base = str.slice(match[0].length, -1);
     if (base !== void 0) {
-      return base.replace(/(url\(.*?\))/g, (v) => v.replace(/_/g, "\\_")).replace(/([^\\])_/g, "$1 ").replace(/calc\((.*)/g, (v) => {
+      return base.replace(/(url\(.*?\))/g, (v) => v.replace(/_/g, "\\_")).replace(/([^\\])_/g, "$1 ").replace(/(?:calc|clamp|max|min)\((.*)/g, (v) => {
         return v.replace(/(-?\d*\.?\d(?!\b-.+[,)](?![^+\-/*])\D)(?:%|[a-z]+)?|\))([+\-/*])/g, "$1 $2 ");
       });
     }
@@ -528,7 +528,7 @@ const h = handler;
 
 const CONTROL_MINI_NO_NEGATIVE = "$$mini-no-negative";
 const directionSize = (propertyPrefix) => ([_, direction, size], { theme }) => {
-  const v = theme.spacing?.[size || "DEFAULT"] ?? handler.bracket.cssvar.auto.fraction.rem(size);
+  const v = theme.spacing?.[size || "DEFAULT"] ?? handler.bracket.cssvar.global.auto.fraction.rem(size);
   if (v != null)
     return directionMap[direction].map((i) => [`${propertyPrefix}${i}`, v]);
 };
@@ -639,6 +639,9 @@ const resolveVerticalBreakpoints = ({ theme, generator }) => {
     verticalBreakpoints = theme.verticalBreakpoints;
   return verticalBreakpoints;
 };
+const makeGlobalStaticRules = (prefix, property) => {
+  return globalKeywords.map((keyword) => [`${prefix}-${keyword}`, { [property ?? prefix]: keyword }]);
+};
 
 exports.CONTROL_MINI_NO_NEGATIVE = CONTROL_MINI_NO_NEGATIVE;
 exports.colorOpacityToString = colorOpacityToString;
@@ -655,6 +658,7 @@ exports.handler = handler;
 exports.hasParseableColor = hasParseableColor;
 exports.hex2rgba = hex2rgba;
 exports.insetMap = insetMap;
+exports.makeGlobalStaticRules = makeGlobalStaticRules;
 exports.parseColor = parseColor;
 exports.parseCssColor = parseCssColor;
 exports.positionMap = positionMap;

package/dist/chunks/utilities.mjs

@@ -447,7 +447,7 @@ function bracketWithType(str, type) {
     else if (type && match[1] === type)
       base = str.slice(match[0].length, -1);
     if (base !== void 0) {
-      return base.replace(/(url\(.*?\))/g, (v) => v.replace(/_/g, "\\_")).replace(/([^\\])_/g, "$1 ").replace(/calc\((.*)/g, (v) => {
+      return base.replace(/(url\(.*?\))/g, (v) => v.replace(/_/g, "\\_")).replace(/([^\\])_/g, "$1 ").replace(/(?:calc|clamp|max|min)\((.*)/g, (v) => {
         return v.replace(/(-?\d*\.?\d(?!\b-.+[,)](?![^+\-/*])\D)(?:%|[a-z]+)?|\))([+\-/*])/g, "$1 $2 ");
       });
     }
@@ -526,7 +526,7 @@ const h = handler;
 
 const CONTROL_MINI_NO_NEGATIVE = "$$mini-no-negative";
 const directionSize = (propertyPrefix) => ([_, direction, size], { theme }) => {
-  const v = theme.spacing?.[size || "DEFAULT"] ?? handler.bracket.cssvar.auto.fraction.rem(size);
+  const v = theme.spacing?.[size || "DEFAULT"] ?? handler.bracket.cssvar.global.auto.fraction.rem(size);
   if (v != null)
     return directionMap[direction].map((i) => [`${propertyPrefix}${i}`, v]);
 };
@@ -637,5 +637,8 @@ const resolveVerticalBreakpoints = ({ theme, generator }) => {
     verticalBreakpoints = theme.verticalBreakpoints;
   return verticalBreakpoints;
 };
+const makeGlobalStaticRules = (prefix, property) => {
+  return globalKeywords.map((keyword) => [`${prefix}-${keyword}`, { [property ?? prefix]: keyword }]);
+};
 
-export { CONTROL_MINI_NO_NEGATIVE as C, hasParseableColor as a, colorToString as b, colorResolver as c, directionMap as d, colorOpacityToString as e, cornerMap as f, globalKeywords as g, handler as h, colorableShadows as i, insetMap as j, resolveBreakpoints as k, directionSize as l, positionMap as m, hex2rgba as n, parseCssColor as o, parseColor as p, getComponents as q, resolveVerticalBreakpoints as r, h as s, valueHandlers as v, xyzMap as x };
+export { CONTROL_MINI_NO_NEGATIVE as C, hasParseableColor as a, colorToString as b, colorResolver as c, directionMap as d, colorOpacityToString as e, cornerMap as f, globalKeywords as g, handler as h, colorableShadows as i, insetMap as j, resolveBreakpoints as k, directionSize as l, makeGlobalStaticRules as m, positionMap as n, hex2rgba as o, parseColor as p, parseCssColor as q, resolveVerticalBreakpoints as r, getComponents as s, h as t, valueHandlers as v, xyzMap as x };

package/dist/chunks/variants.cjs

@@ -2,7 +2,7 @@
 
 const core = require('@unocss/core');
 
-const variantMatcher = (name, selector) => {
+const variantMatcher = (name, handler) => {
   const re = new RegExp(`^${core.escapeRegExp(name)}[:-]`);
   return {
     name,
@@ -11,7 +11,10 @@ const variantMatcher = (name, selector) => {
       if (match) {
         return {
           matcher: input.slice(match[0].length),
-          selector
+          handle: (input2, next) => next({
+            ...input2,
+            ...handler(input2)
+          })
         };
       }
     },
@@ -27,7 +30,10 @@ const variantParentMatcher = (name, parent) => {
       if (match) {
         return {
           matcher: input.slice(match[0].length),
-          parent
+          handle: (input2, next) => next({
+            ...input2,
+            parent: `${input2.parent ? `${input2.parent} $$ ` : ""}${parent}`
+          })
         };
       }
     },

package/dist/chunks/variants.mjs

@@ -1,6 +1,6 @@
 import { escapeRegExp } from '@unocss/core';
 
-const variantMatcher = (name, selector) => {
+const variantMatcher = (name, handler) => {
   const re = new RegExp(`^${escapeRegExp(name)}[:-]`);
   return {
     name,
@@ -9,7 +9,10 @@ const variantMatcher = (name, selector) => {
       if (match) {
         return {
           matcher: input.slice(match[0].length),
-          selector
+          handle: (input2, next) => next({
+            ...input2,
+            ...handler(input2)
+          })
         };
       }
     },
@@ -25,7 +28,10 @@ const variantParentMatcher = (name, parent) => {
       if (match) {
         return {
           matcher: input.slice(match[0].length),
-          parent
+          handle: (input2, next) => next({
+            ...input2,
+            parent: `${input2.parent ? `${input2.parent} $$ ` : ""}${parent}`
+          })
         };
       }
     },

package/dist/index.cjs

@@ -15,8 +15,10 @@ const preflights = [
   {
     layer: "preflights",
     getCSS(ctx) {
-      if (ctx.theme.preflightBase)
-        return `*,::before,::after{${core.entriesToCss(Object.entries(ctx.theme.preflightBase))}}`;
+      if (ctx.theme.preflightBase) {
+        const css = core.entriesToCss(Object.entries(ctx.theme.preflightBase));
+        return `*,::before,::after{${css}}::backdrop{${css}}`;
+      }
     }
   }
 ];

package/dist/index.d.ts

@@ -3,7 +3,7 @@ import { T as Theme } from './types-2a2972f5.js';
 export { T as Theme, a as ThemeAnimation } from './types-2a2972f5.js';
 export { t as theme } from './default-08edad2c.js';
 export { c as colors } from './colors-b075335e.js';
-export { p as parseColor } from './utilities-c3da10e0.js';
+export { p as parseColor } from './utilities-02300cd4.js';
 
 declare const preflights: Preflight[];
 

package/dist/index.mjs

@@ -12,8 +12,10 @@ const preflights = [
   {
     layer: "preflights",
     getCSS(ctx) {
-      if (ctx.theme.preflightBase)
-        return `*,::before,::after{${entriesToCss(Object.entries(ctx.theme.preflightBase))}}`;
+      if (ctx.theme.preflightBase) {
+        const css = entriesToCss(Object.entries(ctx.theme.preflightBase));
+        return `*,::before,::after{${css}}::backdrop{${css}}`;
+      }
     }
   }
 ];

package/dist/{utilities-c3da10e0.d.ts → utilities-02300cd4.d.ts}

@@ -1,4 +1,4 @@
-import { RuleContext, CSSEntries, ParsedColorValue, CSSObject, VariantContext } from '@unocss/core';
+import { RuleContext, CSSEntries, ParsedColorValue, CSSObject, VariantContext, Rule } from '@unocss/core';
 import { T as Theme } from './types-2a2972f5.js';
 
 declare const CONTROL_MINI_NO_NEGATIVE = "$$mini-no-negative";
@@ -55,5 +55,6 @@ declare const colorableShadows: (shadows: string | string[], colorVar: string) =
 declare const hasParseableColor: (color: string | undefined, theme: Theme) => boolean;
 declare const resolveBreakpoints: ({ theme, generator }: Readonly<VariantContext<Theme>>) => Record<string, string> | undefined;
 declare const resolveVerticalBreakpoints: ({ theme, generator }: Readonly<VariantContext<Theme>>) => Record<string, string> | undefined;
+declare const makeGlobalStaticRules: (prefix: string, property?: string) => Rule<{}>[];
 
-export { CONTROL_MINI_NO_NEGATIVE as C, colorableShadows as a, resolveVerticalBreakpoints as b, colorResolver as c, directionSize as d, hasParseableColor as h, parseColor as p, resolveBreakpoints as r };
+export { CONTROL_MINI_NO_NEGATIVE as C, colorableShadows as a, resolveVerticalBreakpoints as b, colorResolver as c, directionSize as d, hasParseableColor as h, makeGlobalStaticRules as m, parseColor as p, resolveBreakpoints as r };

package/dist/utils.cjs

@@ -23,6 +23,7 @@ exports.handler = utilities.handler;
 exports.hasParseableColor = utilities.hasParseableColor;
 exports.hex2rgba = utilities.hex2rgba;
 exports.insetMap = utilities.insetMap;
+exports.makeGlobalStaticRules = utilities.makeGlobalStaticRules;
 exports.parseColor = utilities.parseColor;
 exports.parseCssColor = utilities.parseCssColor;
 exports.positionMap = utilities.positionMap;

package/dist/utils.d.ts

@@ -1,6 +1,6 @@
 import * as _unocss_core from '@unocss/core';
-import { RGBAColorValue, CSSColorValue, VariantObject } from '@unocss/core';
-export { C as CONTROL_MINI_NO_NEGATIVE, c as colorResolver, a as colorableShadows, d as directionSize, h as hasParseableColor, p as parseColor, r as resolveBreakpoints, b as resolveVerticalBreakpoints } from './utilities-c3da10e0.js';
+import { RGBAColorValue, CSSColorValue, VariantHandlerContext, VariantObject } from '@unocss/core';
+export { C as CONTROL_MINI_NO_NEGATIVE, c as colorResolver, a as colorableShadows, d as directionSize, h as hasParseableColor, m as makeGlobalStaticRules, p as parseColor, r as resolveBreakpoints, b as resolveVerticalBreakpoints } from './utilities-02300cd4.js';
 import './types-2a2972f5.js';
 
 declare function hex2rgba(hex?: string): RGBAColorValue | undefined;
@@ -76,7 +76,7 @@ declare namespace handlers {
 declare const handler: _unocss_core.ValueHandler<"number" | "auto" | "global" | "position" | "numberWithUnit" | "rem" | "px" | "percent" | "fraction" | "bracket" | "bracketOfColor" | "bracketOfLength" | "bracketOfPosition" | "cssvar" | "time" | "degree" | "properties">;
 declare const h: _unocss_core.ValueHandler<"number" | "auto" | "global" | "position" | "numberWithUnit" | "rem" | "px" | "percent" | "fraction" | "bracket" | "bracketOfColor" | "bracketOfLength" | "bracketOfPosition" | "cssvar" | "time" | "degree" | "properties">;
 
-declare const variantMatcher: (name: string, selector?: ((input: string) => string | undefined) | undefined) => VariantObject;
+declare const variantMatcher: (name: string, handler: (input: VariantHandlerContext) => Record<string, any>) => VariantObject;
 declare const variantParentMatcher: (name: string, parent: string) => VariantObject;
 
 export { colorOpacityToString, colorToString, cornerMap, directionMap, getComponents, globalKeywords, h, handler, hex2rgba, insetMap, parseCssColor, positionMap, handlers as valueHandlers, variantMatcher, variantParentMatcher, xyzMap };

package/dist/utils.mjs

@@ -1,3 +1,3 @@
-export { C as CONTROL_MINI_NO_NEGATIVE, e as colorOpacityToString, c as colorResolver, b as colorToString, i as colorableShadows, f as cornerMap, d as directionMap, l as directionSize, q as getComponents, g as globalKeywords, s as h, h as handler, a as hasParseableColor, n as hex2rgba, j as insetMap, p as parseColor, o as parseCssColor, m as positionMap, k as resolveBreakpoints, r as resolveVerticalBreakpoints, v as valueHandlers, x as xyzMap } from './chunks/utilities.mjs';
+export { C as CONTROL_MINI_NO_NEGATIVE, e as colorOpacityToString, c as colorResolver, b as colorToString, i as colorableShadows, f as cornerMap, d as directionMap, l as directionSize, s as getComponents, g as globalKeywords, t as h, h as handler, a as hasParseableColor, o as hex2rgba, j as insetMap, m as makeGlobalStaticRules, p as parseColor, q as parseCssColor, n as positionMap, k as resolveBreakpoints, r as resolveVerticalBreakpoints, v as valueHandlers, x as xyzMap } from './chunks/utilities.mjs';
 export { a as variantMatcher, v as variantParentMatcher } from './chunks/variants.mjs';
 import '@unocss/core';

package/dist/variants.cjs

@@ -25,4 +25,5 @@ exports.variantPseudoClassesAndElements = _default.variantPseudoClassesAndElemen
 exports.variantScope = _default.variantScope;
 exports.variantSelector = _default.variantSelector;
 exports.variantTaggedPseudoClasses = _default.variantTaggedPseudoClasses;
+exports.variantVariables = _default.variantVariables;
 exports.variants = _default.variants;

package/dist/variants.d.ts

@@ -3,7 +3,7 @@ import { T as Theme } from './types-2a2972f5.js';
 import { PresetMiniOptions } from './index.js';
 import './default-08edad2c.js';
 import './colors-b075335e.js';
-import './utilities-c3da10e0.js';
+import './utilities-02300cd4.js';
 
 declare const variantBreakpoints: Variant<Theme>;
 
@@ -22,6 +22,7 @@ declare const variantSelector: Variant;
 declare const variantCssLayer: Variant;
 declare const variantInternalLayer: Variant;
 declare const variantScope: Variant;
+declare const variantVariables: Variant;
 
 declare const variantPseudoClassesAndElements: VariantObject;
 declare const variantPseudoClassFunctions: VariantObject;
@@ -32,4 +33,4 @@ declare const variantImportant: Variant;
 
 declare const variantNegative: Variant;
 
-export { partClasses, variantBreakpoints, variantColorsMediaOrClass, variantCombinators, variantCssLayer, variantCustomMedia, variantImportant, variantInternalLayer, variantLanguageDirections, variantNegative, variantPrint, variantPseudoClassFunctions, variantPseudoClassesAndElements, variantScope, variantSelector, variantTaggedPseudoClasses, variants };
+export { partClasses, variantBreakpoints, variantColorsMediaOrClass, variantCombinators, variantCssLayer, variantCustomMedia, variantImportant, variantInternalLayer, variantLanguageDirections, variantNegative, variantPrint, variantPseudoClassFunctions, variantPseudoClassesAndElements, variantScope, variantSelector, variantTaggedPseudoClasses, variantVariables, variants };

package/dist/variants.mjs

@@ -1,4 +1,4 @@
-export { p as partClasses, a as variantBreakpoints, e as variantColorsMediaOrClass, b as variantCombinators, h as variantCssLayer, d as variantCustomMedia, n as variantImportant, i as variantInternalLayer, f as variantLanguageDirections, o as variantNegative, c as variantPrint, l as variantPseudoClassFunctions, k as variantPseudoClassesAndElements, j as variantScope, g as variantSelector, m as variantTaggedPseudoClasses, v as variants } from './chunks/default3.mjs';
+export { p as partClasses, a as variantBreakpoints, e as variantColorsMediaOrClass, b as variantCombinators, h as variantCssLayer, d as variantCustomMedia, o as variantImportant, i as variantInternalLayer, f as variantLanguageDirections, q as variantNegative, c as variantPrint, m as variantPseudoClassFunctions, l as variantPseudoClassesAndElements, j as variantScope, g as variantSelector, n as variantTaggedPseudoClasses, k as variantVariables, v as variants } from './chunks/default3.mjs';
 import './chunks/utilities.mjs';
 import '@unocss/core';
 import './chunks/variants.mjs';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unocss/preset-mini",
-  "version": "0.39.3",
+  "version": "0.41.1",
   "description": "The minimal preset for UnoCSS",
   "author": "Anthony Fu <anthonyfu117@hotmail.com>",
   "license": "MIT",
@@ -61,7 +61,7 @@
     "*.css"
   ],
   "dependencies": {
-    "@unocss/core": "0.39.3"
+    "@unocss/core": "0.41.1"
   },
   "scripts": {
     "build": "unbuild",