@unocss/preset-mini 0.24.3 → 0.26.0

package/dist/chunks/default.cjs

@@ -188,6 +188,29 @@ const maxHeight = {
   screen: "100vh"
 };
 
+const gridAutoColumn = {
+  "xs": "0.75rem",
+  "sm": "0.875rem",
+  "base": "1rem",
+  "lg": "1.125rem",
+  "xl": "1.25rem",
+  "2xl": "1.5rem",
+  "3xl": "1.875rem",
+  "4xl": "2.25rem",
+  "5xl": "3rem",
+  "6xl": "3.75rem",
+  "7xl": "4.5rem",
+  "8xl": "6rem",
+  "9xl": "8rem"
+};
+const gridAutoRow = gridAutoColumn;
+const gridColumn = {};
+const gridRow = gridColumn;
+const gridTemplateColumn = {
+  none: "none"
+};
+const gridTemplateRow = gridTemplateColumn;
+
 const theme = {
   width,
   height,
@@ -216,7 +239,13 @@ const theme = {
   textStrokeWidth,
   blur,
   dropShadow,
-  easing
+  easing,
+  gridAutoColumn,
+  gridAutoRow,
+  gridColumn,
+  gridRow,
+  gridTemplateColumn,
+  gridTemplateRow
 };
 
 exports.baseSize = baseSize;
@@ -228,6 +257,12 @@ exports.dropShadow = dropShadow;
 exports.easing = easing;
 exports.fontFamily = fontFamily;
 exports.fontSize = fontSize;
+exports.gridAutoColumn = gridAutoColumn;
+exports.gridAutoRow = gridAutoRow;
+exports.gridColumn = gridColumn;
+exports.gridRow = gridRow;
+exports.gridTemplateColumn = gridTemplateColumn;
+exports.gridTemplateRow = gridTemplateRow;
 exports.height = height;
 exports.letterSpacing = letterSpacing;
 exports.lineHeight = lineHeight;

package/dist/chunks/default.mjs

@@ -186,6 +186,29 @@ const maxHeight = {
   screen: "100vh"
 };
 
+const gridAutoColumn = {
+  "xs": "0.75rem",
+  "sm": "0.875rem",
+  "base": "1rem",
+  "lg": "1.125rem",
+  "xl": "1.25rem",
+  "2xl": "1.5rem",
+  "3xl": "1.875rem",
+  "4xl": "2.25rem",
+  "5xl": "3rem",
+  "6xl": "3.75rem",
+  "7xl": "4.5rem",
+  "8xl": "6rem",
+  "9xl": "8rem"
+};
+const gridAutoRow = gridAutoColumn;
+const gridColumn = {};
+const gridRow = gridColumn;
+const gridTemplateColumn = {
+  none: "none"
+};
+const gridTemplateRow = gridTemplateColumn;
+
 const theme = {
   width,
   height,
@@ -214,7 +237,13 @@ const theme = {
   textStrokeWidth,
   blur,
   dropShadow,
-  easing
+  easing,
+  gridAutoColumn,
+  gridAutoRow,
+  gridColumn,
+  gridRow,
+  gridTemplateColumn,
+  gridTemplateRow
 };
 
-export { fontSize as a, blur as b, textIndent as c, dropShadow as d, textStrokeWidth as e, fontFamily as f, textShadow as g, letterSpacing as h, breakpoints as i, borderRadius as j, boxShadow as k, lineHeight as l, easing as m, baseSize as n, width as o, maxWidth as p, height as q, maxHeight as r, theme as t, verticalBreakpoints as v, wordSpacing as w };
+export { maxHeight as A, fontSize as a, blur as b, textIndent as c, dropShadow as d, textStrokeWidth as e, fontFamily as f, textShadow as g, letterSpacing as h, gridAutoColumn as i, gridAutoRow as j, gridColumn as k, lineHeight as l, gridRow as m, gridTemplateColumn as n, gridTemplateRow as o, breakpoints as p, borderRadius as q, boxShadow as r, easing as s, theme as t, baseSize as u, verticalBreakpoints as v, wordSpacing as w, width as x, maxWidth as y, height as z };

package/dist/chunks/default2.cjs

@@ -75,10 +75,7 @@ const borders = [
   ["border-hidden", { "border-style": "hidden" }],
   ["border-none", { "border-style": "none" }]
 ];
-const borderHasColor = (color, { theme }) => {
-  return color !== void 0 && !!utilities.parseColor(color, theme)?.color;
-};
-const borderColorResolver = (direction) => ([, body], { theme }) => {
+const borderColorResolver = (direction) => ([, body], theme) => {
   const data = utilities.parseColor(body, theme);
   if (!data)
     return;
@@ -121,9 +118,9 @@ function handlerBorderSize([, a = "", b = "1"]) {
   if (a in utilities.directionMap && v != null)
     return utilities.directionMap[a].map((i) => [`border${i}-width`, v]);
 }
-function handlerBorderColor([, a = "", c], ctx) {
-  if (a in utilities.directionMap && borderHasColor(c, ctx)) {
-    return Object.assign({}, ...utilities.directionMap[a].map((i) => borderColorResolver(i)(["", c], ctx)));
+function handlerBorderColor([, a = "", c], { theme }) {
+  if (a in utilities.directionMap && utilities.hasParseableColor(c, theme)) {
+    return Object.assign({}, ...utilities.directionMap[a].map((i) => borderColorResolver(i)(["", c], theme)));
   }
 }
 function handlerBorderOpacity([, a = "", opacity]) {
@@ -223,7 +220,7 @@ const fonts = [
         "line-height": height
       };
     }
-    return { "font-size": utilities.handler.bracket.rem(s) };
+    return { "font-size": utilities.handler.bracketOfLength.rem(s) };
   }],
   [/^text-size-(.+)$/, ([, s]) => ({ "font-size": utilities.handler.bracket.cssvar.rem(s) })],
   [/^(?:font|fw)-?([^-]+)$/, ([, s]) => ({ "font-weight": weightMap[s] || utilities.handler.number(s) })],
@@ -286,11 +283,12 @@ const gaps = [
 ];
 
 const rowCol = (s) => s.replace("col", "column");
-const autoDirection = (selector, theme) => {
-  const v = theme.fontSize?.[selector];
+const rowColTheme = (s) => s[0] === "r" ? "Row" : "Column";
+const autoDirection = (c, theme, prop) => {
+  const v = theme[`gridAuto${rowColTheme(c)}`]?.[prop];
   if (v != null)
-    return core.toArray(v)[0];
-  switch (selector) {
+    return v;
+  switch (prop) {
     case "min":
       return "min-content";
     case "max":
@@ -298,12 +296,14 @@ const autoDirection = (selector, theme) => {
     case "fr":
       return "minmax(0,1fr)";
   }
-  return utilities.handler.bracket.cssvar.auto.rem(selector);
+  return utilities.handler.bracket.cssvar.auto.rem(prop);
 };
 const grids = [
   ["grid", { display: "grid" }],
   ["inline-grid", { display: "inline-grid" }],
-  [/^(?:grid-)?(row|col)-(.+)$/, ([, c, v]) => ({ [`grid-${rowCol(c)}`]: utilities.handler.bracket.cssvar.auto(v) })],
+  [/^(?:grid-)?(row|col)-(.+)$/, ([, c, v], { theme }) => ({
+    [`grid-${rowCol(c)}`]: theme[`grid${rowColTheme(c)}`]?.[v] ?? utilities.handler.bracket.cssvar.auto(v)
+  })],
   [/^(?:grid-)?(row|col)-span-(.+)$/, ([, c, s]) => {
     if (s === "full")
       return { [`grid-${rowCol(c)}`]: "1/-1" };
@@ -313,10 +313,12 @@ const grids = [
   }],
   [/^(?:grid-)?(row|col)-start-(.+)$/, ([, c, v]) => ({ [`grid-${rowCol(c)}-start`]: utilities.handler.bracket.cssvar(v) ?? v })],
   [/^(?:grid-)?(row|col)-end-(.+)$/, ([, c, v]) => ({ [`grid-${rowCol(c)}-end`]: utilities.handler.bracket.cssvar(v) ?? v })],
-  [/^(?:grid-)?auto-(rows|cols)-(.+)$/, ([, c, v], { theme }) => ({ [`grid-auto-${rowCol(c)}`]: autoDirection(v, theme) })],
+  [/^(?:grid-)?auto-(rows|cols)-(.+)$/, ([, c, v], { theme }) => ({ [`grid-auto-${rowCol(c)}`]: autoDirection(c, theme, v) })],
   [/^(?:grid-auto-flow|auto-flow|grid-flow)-(.+)$/, ([, v]) => ({ "grid-auto-flow": utilities.handler.bracket.cssvar(v) })],
   [/^(?:grid-auto-flow|auto-flow|grid-flow)-((?:row|col)(?:-dense)?)$/, ([, v]) => ({ "grid-auto-flow": rowCol(v).replace("-", " ") })],
-  [/^grid-(rows|cols)-(.+)$/, ([, c, v]) => ({ [`grid-template-${rowCol(c)}`]: utilities.handler.bracket.cssvar(v) })],
+  [/^grid-(rows|cols)-(.+)$/, ([, c, v], { theme }) => ({
+    [`grid-template-${rowCol(c)}`]: theme[`gridTemplate${rowColTheme(c)}`]?.[v] ?? utilities.handler.bracket.cssvar(v)
+  })],
   [/^grid-(rows|cols)-minmax-([\w.-]+)$/, ([, c, d]) => ({ [`grid-template-${rowCol(c)}`]: `repeat(auto-fill,minmax(${d},1fr))` })],
   [/^grid-(rows|cols)-(\d+)$/, ([, c, d]) => ({ [`grid-template-${rowCol(c)}`]: `repeat(${d},minmax(0,1fr))` })],
   ["grid-rows-none", { "grid-template-rows": "none" }],
@@ -472,6 +474,7 @@ const whitespaces = [
   [/^(?:whitespace|ws)-(normal|nowrap|pre|pre-line|pre-wrap)$/, ([, v]) => ({ "white-space": v })]
 ];
 const contents = [
+  [/^content-\[(.+)\]$/, ([, v]) => ({ content: `"${v}"` })],
   ["content-empty", { content: '""' }],
   ["content-none", { content: '""' }]
 ];
@@ -508,45 +511,19 @@ const fontSmoothings = [
   }]
 ];
 
-const shadowBase = {
-  [core.CONTROL_SHORTCUT_NO_MERGE]: "",
-  "--un-ring-offset-shadow": "0 0 #0000",
-  "--un-ring-shadow": "0 0 #0000",
-  "--un-shadow-inset": varEmpty,
-  "--un-shadow": "0 0 #0000"
-};
-const boxShadows = [
-  [/^shadow(?:-(.+))?$/, ([, d], { theme }) => {
-    const v = theme.boxShadow?.[d || "DEFAULT"];
-    if (v) {
-      return [
-        shadowBase,
-        {
-          "--un-shadow": utilities.colorableShadows(v, "--un-shadow-color").join(","),
-          "box-shadow": "var(--un-ring-offset-shadow, 0 0 #0000), var(--un-ring-shadow, 0 0 #0000), var(--un-shadow)"
-        }
-      ];
-    }
-  }],
-  [/^shadow-(.+)$/, utilities.colorResolver("--un-shadow-color", "shadow")],
-  [/^shadow-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-shadow-opacity": utilities.handler.bracket.percent(opacity) })],
-  ["shadow-inset", { "--un-shadow-inset": "inset" }]
-];
-
-const ringBase = {
-  ...shadowBase,
-  "--un-ring-inset": varEmpty,
-  "--un-ring-offset-width": "0px",
-  "--un-ring-offset-color": "#fff",
-  "--un-ring-width": "0px",
-  "--un-ring-color": "rgba(147,197,253,0.5)"
-};
 const rings = [
   [/^ring(?:-(.+))?$/, ([, d]) => {
     const value = utilities.handler.px(d || "1");
     if (value) {
       return [
-        ringBase,
+        {
+          [core.CONTROL_SHORTCUT_NO_MERGE]: "",
+          "--un-ring-inset": varEmpty,
+          "--un-ring-offset-width": "0px",
+          "--un-ring-offset-color": "#fff",
+          "--un-ring-width": "0px",
+          "--un-ring-color": "rgba(147,197,253,0.5)"
+        },
         {
           "--un-ring-width": value,
           "--un-ring-offset-shadow": "var(--un-ring-inset) 0 0 0 var(--un-ring-offset-width) var(--un-ring-offset-color)",
@@ -566,6 +543,28 @@ const rings = [
   ["ring-inset", { "--un-ring-inset": "inset" }]
 ];
 
+const boxShadows = [
+  [/^shadow(?:-(.+))?$/, ([, d], { theme }) => {
+    const v = theme.boxShadow?.[d || "DEFAULT"];
+    if (v) {
+      return [
+        {
+          [core.CONTROL_SHORTCUT_NO_MERGE]: "",
+          "--un-shadow-inset": varEmpty,
+          "--un-shadow": "0 0 #0000"
+        },
+        {
+          "--un-shadow": utilities.colorableShadows(v, "--un-shadow-color").join(","),
+          "box-shadow": "var(--un-ring-offset-shadow, 0 0 #0000), var(--un-ring-shadow, 0 0 #0000), var(--un-shadow)"
+        }
+      ];
+    }
+  }],
+  [/^shadow-(.+)$/, utilities.colorResolver("--un-shadow-color", "shadow")],
+  [/^shadow-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-shadow-opacity": utilities.handler.bracket.percent(opacity) })],
+  ["shadow-inset", { "--un-shadow-inset": "inset" }]
+];
+
 const sizeMapping = {
   h: "height",
   w: "width",
@@ -941,7 +940,6 @@ exports.questionMark = questionMark;
 exports.resizes = resizes;
 exports.rings = rings;
 exports.rules = rules;
-exports.shadowBase = shadowBase;
 exports.sizes = sizes;
 exports.svgUtilities = svgUtilities;
 exports.tabSizes = tabSizes;

package/dist/chunks/default2.mjs

@@ -1,4 +1,4 @@
-import { h as handler, c as colorResolver, d as directionMap, p as parseColor, a as colorToString, b as cornerMap, e as colorableShadows, i as insetMap, f as directionSize, g as positionMap, x as xyzMap } from './utilities.mjs';
+import { h as handler, c as colorResolver, d as directionMap, a as hasParseableColor, p as parseColor, b as colorToString, e as cornerMap, f as colorableShadows, i as insetMap, g as directionSize, j as positionMap, x as xyzMap } from './utilities.mjs';
 import { toArray, CONTROL_SHORTCUT_NO_MERGE } from '@unocss/core';
 
 const verticalAlignAlias = {
@@ -73,10 +73,7 @@ const borders = [
   ["border-hidden", { "border-style": "hidden" }],
   ["border-none", { "border-style": "none" }]
 ];
-const borderHasColor = (color, { theme }) => {
-  return color !== void 0 && !!parseColor(color, theme)?.color;
-};
-const borderColorResolver = (direction) => ([, body], { theme }) => {
+const borderColorResolver = (direction) => ([, body], theme) => {
   const data = parseColor(body, theme);
   if (!data)
     return;
@@ -119,9 +116,9 @@ function handlerBorderSize([, a = "", b = "1"]) {
   if (a in directionMap && v != null)
     return directionMap[a].map((i) => [`border${i}-width`, v]);
 }
-function handlerBorderColor([, a = "", c], ctx) {
-  if (a in directionMap && borderHasColor(c, ctx)) {
-    return Object.assign({}, ...directionMap[a].map((i) => borderColorResolver(i)(["", c], ctx)));
+function handlerBorderColor([, a = "", c], { theme }) {
+  if (a in directionMap && hasParseableColor(c, theme)) {
+    return Object.assign({}, ...directionMap[a].map((i) => borderColorResolver(i)(["", c], theme)));
   }
 }
 function handlerBorderOpacity([, a = "", opacity]) {
@@ -221,7 +218,7 @@ const fonts = [
         "line-height": height
       };
     }
-    return { "font-size": handler.bracket.rem(s) };
+    return { "font-size": handler.bracketOfLength.rem(s) };
   }],
   [/^text-size-(.+)$/, ([, s]) => ({ "font-size": handler.bracket.cssvar.rem(s) })],
   [/^(?:font|fw)-?([^-]+)$/, ([, s]) => ({ "font-weight": weightMap[s] || handler.number(s) })],
@@ -284,11 +281,12 @@ const gaps = [
 ];
 
 const rowCol = (s) => s.replace("col", "column");
-const autoDirection = (selector, theme) => {
-  const v = theme.fontSize?.[selector];
+const rowColTheme = (s) => s[0] === "r" ? "Row" : "Column";
+const autoDirection = (c, theme, prop) => {
+  const v = theme[`gridAuto${rowColTheme(c)}`]?.[prop];
   if (v != null)
-    return toArray(v)[0];
-  switch (selector) {
+    return v;
+  switch (prop) {
     case "min":
       return "min-content";
     case "max":
@@ -296,12 +294,14 @@ const autoDirection = (selector, theme) => {
     case "fr":
       return "minmax(0,1fr)";
   }
-  return handler.bracket.cssvar.auto.rem(selector);
+  return handler.bracket.cssvar.auto.rem(prop);
 };
 const grids = [
   ["grid", { display: "grid" }],
   ["inline-grid", { display: "inline-grid" }],
-  [/^(?:grid-)?(row|col)-(.+)$/, ([, c, v]) => ({ [`grid-${rowCol(c)}`]: handler.bracket.cssvar.auto(v) })],
+  [/^(?:grid-)?(row|col)-(.+)$/, ([, c, v], { theme }) => ({
+    [`grid-${rowCol(c)}`]: theme[`grid${rowColTheme(c)}`]?.[v] ?? handler.bracket.cssvar.auto(v)
+  })],
   [/^(?:grid-)?(row|col)-span-(.+)$/, ([, c, s]) => {
     if (s === "full")
       return { [`grid-${rowCol(c)}`]: "1/-1" };
@@ -311,10 +311,12 @@ const grids = [
   }],
   [/^(?:grid-)?(row|col)-start-(.+)$/, ([, c, v]) => ({ [`grid-${rowCol(c)}-start`]: handler.bracket.cssvar(v) ?? v })],
   [/^(?:grid-)?(row|col)-end-(.+)$/, ([, c, v]) => ({ [`grid-${rowCol(c)}-end`]: handler.bracket.cssvar(v) ?? v })],
-  [/^(?:grid-)?auto-(rows|cols)-(.+)$/, ([, c, v], { theme }) => ({ [`grid-auto-${rowCol(c)}`]: autoDirection(v, theme) })],
+  [/^(?:grid-)?auto-(rows|cols)-(.+)$/, ([, c, v], { theme }) => ({ [`grid-auto-${rowCol(c)}`]: autoDirection(c, theme, v) })],
   [/^(?:grid-auto-flow|auto-flow|grid-flow)-(.+)$/, ([, v]) => ({ "grid-auto-flow": handler.bracket.cssvar(v) })],
   [/^(?:grid-auto-flow|auto-flow|grid-flow)-((?:row|col)(?:-dense)?)$/, ([, v]) => ({ "grid-auto-flow": rowCol(v).replace("-", " ") })],
-  [/^grid-(rows|cols)-(.+)$/, ([, c, v]) => ({ [`grid-template-${rowCol(c)}`]: handler.bracket.cssvar(v) })],
+  [/^grid-(rows|cols)-(.+)$/, ([, c, v], { theme }) => ({
+    [`grid-template-${rowCol(c)}`]: theme[`gridTemplate${rowColTheme(c)}`]?.[v] ?? handler.bracket.cssvar(v)
+  })],
   [/^grid-(rows|cols)-minmax-([\w.-]+)$/, ([, c, d]) => ({ [`grid-template-${rowCol(c)}`]: `repeat(auto-fill,minmax(${d},1fr))` })],
   [/^grid-(rows|cols)-(\d+)$/, ([, c, d]) => ({ [`grid-template-${rowCol(c)}`]: `repeat(${d},minmax(0,1fr))` })],
   ["grid-rows-none", { "grid-template-rows": "none" }],
@@ -470,6 +472,7 @@ const whitespaces = [
   [/^(?:whitespace|ws)-(normal|nowrap|pre|pre-line|pre-wrap)$/, ([, v]) => ({ "white-space": v })]
 ];
 const contents = [
+  [/^content-\[(.+)\]$/, ([, v]) => ({ content: `"${v}"` })],
   ["content-empty", { content: '""' }],
   ["content-none", { content: '""' }]
 ];
@@ -506,45 +509,19 @@ const fontSmoothings = [
   }]
 ];
 
-const shadowBase = {
-  [CONTROL_SHORTCUT_NO_MERGE]: "",
-  "--un-ring-offset-shadow": "0 0 #0000",
-  "--un-ring-shadow": "0 0 #0000",
-  "--un-shadow-inset": varEmpty,
-  "--un-shadow": "0 0 #0000"
-};
-const boxShadows = [
-  [/^shadow(?:-(.+))?$/, ([, d], { theme }) => {
-    const v = theme.boxShadow?.[d || "DEFAULT"];
-    if (v) {
-      return [
-        shadowBase,
-        {
-          "--un-shadow": colorableShadows(v, "--un-shadow-color").join(","),
-          "box-shadow": "var(--un-ring-offset-shadow, 0 0 #0000), var(--un-ring-shadow, 0 0 #0000), var(--un-shadow)"
-        }
-      ];
-    }
-  }],
-  [/^shadow-(.+)$/, colorResolver("--un-shadow-color", "shadow")],
-  [/^shadow-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-shadow-opacity": handler.bracket.percent(opacity) })],
-  ["shadow-inset", { "--un-shadow-inset": "inset" }]
-];
-
-const ringBase = {
-  ...shadowBase,
-  "--un-ring-inset": varEmpty,
-  "--un-ring-offset-width": "0px",
-  "--un-ring-offset-color": "#fff",
-  "--un-ring-width": "0px",
-  "--un-ring-color": "rgba(147,197,253,0.5)"
-};
 const rings = [
   [/^ring(?:-(.+))?$/, ([, d]) => {
     const value = handler.px(d || "1");
     if (value) {
       return [
-        ringBase,
+        {
+          [CONTROL_SHORTCUT_NO_MERGE]: "",
+          "--un-ring-inset": varEmpty,
+          "--un-ring-offset-width": "0px",
+          "--un-ring-offset-color": "#fff",
+          "--un-ring-width": "0px",
+          "--un-ring-color": "rgba(147,197,253,0.5)"
+        },
         {
           "--un-ring-width": value,
           "--un-ring-offset-shadow": "var(--un-ring-inset) 0 0 0 var(--un-ring-offset-width) var(--un-ring-offset-color)",
@@ -564,6 +541,28 @@ const rings = [
   ["ring-inset", { "--un-ring-inset": "inset" }]
 ];
 
+const boxShadows = [
+  [/^shadow(?:-(.+))?$/, ([, d], { theme }) => {
+    const v = theme.boxShadow?.[d || "DEFAULT"];
+    if (v) {
+      return [
+        {
+          [CONTROL_SHORTCUT_NO_MERGE]: "",
+          "--un-shadow-inset": varEmpty,
+          "--un-shadow": "0 0 #0000"
+        },
+        {
+          "--un-shadow": colorableShadows(v, "--un-shadow-color").join(","),
+          "box-shadow": "var(--un-ring-offset-shadow, 0 0 #0000), var(--un-ring-shadow, 0 0 #0000), var(--un-shadow)"
+        }
+      ];
+    }
+  }],
+  [/^shadow-(.+)$/, colorResolver("--un-shadow-color", "shadow")],
+  [/^shadow-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-shadow-opacity": handler.bracket.percent(opacity) })],
+  ["shadow-inset", { "--un-shadow-inset": "inset" }]
+];
+
 const sizeMapping = {
   h: "height",
   w: "width",
@@ -903,4 +902,4 @@ const rules = [
   questionMark
 ].flat(1);
 
-export { cssVariables as $, boxShadows as A, sizes as B, aspectRatio as C, paddings as D, margins as E, varEmpty as F, displays as G, appearances as H, cursors as I, pointerEvents as J, resizes as K, userSelects as L, whitespaces as M, contents as N, breaks as O, textOverflows as P, textTransforms as Q, fontStyles as R, fontSmoothings as S, svgUtilities as T, transforms as U, transitions as V, fonts as W, tabSizes as X, textIndents as Y, textStrokes as Z, textShadows as _, appearance as a, cssProperty as a0, textDecorations as a1, borders as b, opacity as c, textColors as d, bgColors as e, flex as f, gaps as g, grids as h, overflows as i, justifies as j, orders as k, alignments as l, placements as m, insets as n, outline as o, positions as p, floats as q, rules as r, boxSizing as s, textAligns as t, questionMark as u, verticalAligns as v, willChange as w, rings as x, shadowBase as y, zIndexes as z };
+export { cssProperty as $, sizes as A, aspectRatio as B, paddings as C, margins as D, varEmpty as E, displays as F, appearances as G, cursors as H, pointerEvents as I, resizes as J, userSelects as K, whitespaces as L, contents as M, breaks as N, textOverflows as O, textTransforms as P, fontStyles as Q, fontSmoothings as R, svgUtilities as S, transforms as T, transitions as U, fonts as V, tabSizes as W, textIndents as X, textStrokes as Y, textShadows as Z, cssVariables as _, appearance as a, textDecorations as a0, borders as b, opacity as c, textColors as d, bgColors as e, flex as f, gaps as g, grids as h, overflows as i, justifies as j, orders as k, alignments as l, placements as m, insets as n, outline as o, positions as p, floats as q, rules as r, boxSizing as s, textAligns as t, questionMark as u, verticalAligns as v, willChange as w, rings as x, boxShadows as y, zIndexes as z };

package/dist/chunks/default3.cjs

@@ -61,15 +61,17 @@ const variantCombinators = [
   scopeMatcher(true, "peer", "&&-c~&&-s")
 ];
 
-const variantMotions = [
-  variants$1.variantParentMatcher("motion-reduce", "@media (prefers-reduced-motion: reduce)"),
-  variants$1.variantParentMatcher("motion-safe", "@media (prefers-reduced-motion: no-preference)")
-];
-const variantOrientations = [
-  variants$1.variantParentMatcher("landscape", "@media (orientation: landscape)"),
-  variants$1.variantParentMatcher("portrait", "@media (orientation: portrait)")
-];
 const variantPrint = variants$1.variantParentMatcher("print", "@media print");
+const variantCustomMedia = (matcher, { theme }) => {
+  const match = matcher.match(/^media-([_\d\w]+)[:-]/);
+  if (match) {
+    const media = theme.media?.[match[1]] ?? `(--${match[1]})`;
+    return {
+      matcher: matcher.slice(match[0].length),
+      parent: `@media ${media}`
+    };
+  }
+};
 
 const variantColorsMediaOrClass = (options = {}) => {
   if (options?.dark === "class") {
@@ -89,9 +91,20 @@ const variantLanguageDirections = [
   variants$1.variantMatcher("ltr", (input) => `[dir="ltr"] $$ ${input}`)
 ];
 
+const variantSelector = {
+  match(matcher) {
+    const match = matcher.match(/^selector-\[(.+?)\][:-]/);
+    if (match) {
+      return {
+        matcher: matcher.slice(match[0].length),
+        selector: () => match[1]
+      };
+    }
+  }
+};
 const variantLayer = {
   match(matcher) {
-    const match = matcher.match(/layer-([\d\w]+)[:-]/);
+    const match = matcher.match(/^layer-([_\d\w]+)[:-]/);
     if (match) {
       return {
         matcher: matcher.slice(match[0].length),
@@ -100,6 +113,17 @@ const variantLayer = {
     }
   }
 };
+const variantScope = {
+  match(matcher) {
+    const match = matcher.match(/^scope-([_\d\w]+)[:-]/);
+    if (match) {
+      return {
+        matcher: matcher.slice(match[0].length),
+        selector: (s) => `.${match[1]} $$ ${s}`
+      };
+    }
+  }
+};
 const variantImportant = {
   match(matcher) {
     if (matcher.startsWith("!")) {
@@ -291,12 +315,12 @@ const partClasses = {
 };
 
 const variants = (options) => [
+  variantSelector,
   variantLayer,
   variantNegative,
   variantImportant,
   variantPrint,
-  ...variantOrientations,
-  ...variantMotions,
+  variantCustomMedia,
   variantBreakpoints,
   ...variantCombinators,
   variantPseudoClasses,
@@ -305,22 +329,24 @@ const variants = (options) => [
   variantPseudoElements,
   partClasses,
   ...variantColorsMediaOrClass(options),
-  ...variantLanguageDirections
+  ...variantLanguageDirections,
+  variantScope
 ];
 
 exports.partClasses = partClasses;
 exports.variantBreakpoints = variantBreakpoints;
 exports.variantColorsMediaOrClass = variantColorsMediaOrClass;
 exports.variantCombinators = variantCombinators;
+exports.variantCustomMedia = variantCustomMedia;
 exports.variantImportant = variantImportant;
 exports.variantLanguageDirections = variantLanguageDirections;
 exports.variantLayer = variantLayer;
-exports.variantMotions = variantMotions;
 exports.variantNegative = variantNegative;
-exports.variantOrientations = variantOrientations;
 exports.variantPrint = variantPrint;
 exports.variantPseudoClassFunctions = variantPseudoClassFunctions;
 exports.variantPseudoClasses = variantPseudoClasses;
 exports.variantPseudoElements = variantPseudoElements;
+exports.variantScope = variantScope;
+exports.variantSelector = variantSelector;
 exports.variantTaggedPseudoClasses = variantTaggedPseudoClasses;
 exports.variants = variants;

package/dist/chunks/default3.mjs

@@ -59,15 +59,17 @@ const variantCombinators = [
   scopeMatcher(true, "peer", "&&-c~&&-s")
 ];
 
-const variantMotions = [
-  variantParentMatcher("motion-reduce", "@media (prefers-reduced-motion: reduce)"),
-  variantParentMatcher("motion-safe", "@media (prefers-reduced-motion: no-preference)")
-];
-const variantOrientations = [
-  variantParentMatcher("landscape", "@media (orientation: landscape)"),
-  variantParentMatcher("portrait", "@media (orientation: portrait)")
-];
 const variantPrint = variantParentMatcher("print", "@media print");
+const variantCustomMedia = (matcher, { theme }) => {
+  const match = matcher.match(/^media-([_\d\w]+)[:-]/);
+  if (match) {
+    const media = theme.media?.[match[1]] ?? `(--${match[1]})`;
+    return {
+      matcher: matcher.slice(match[0].length),
+      parent: `@media ${media}`
+    };
+  }
+};
 
 const variantColorsMediaOrClass = (options = {}) => {
   if (options?.dark === "class") {
@@ -87,9 +89,20 @@ const variantLanguageDirections = [
   variantMatcher("ltr", (input) => `[dir="ltr"] $$ ${input}`)
 ];
 
+const variantSelector = {
+  match(matcher) {
+    const match = matcher.match(/^selector-\[(.+?)\][:-]/);
+    if (match) {
+      return {
+        matcher: matcher.slice(match[0].length),
+        selector: () => match[1]
+      };
+    }
+  }
+};
 const variantLayer = {
   match(matcher) {
-    const match = matcher.match(/layer-([\d\w]+)[:-]/);
+    const match = matcher.match(/^layer-([_\d\w]+)[:-]/);
     if (match) {
       return {
         matcher: matcher.slice(match[0].length),
@@ -98,6 +111,17 @@ const variantLayer = {
     }
   }
 };
+const variantScope = {
+  match(matcher) {
+    const match = matcher.match(/^scope-([_\d\w]+)[:-]/);
+    if (match) {
+      return {
+        matcher: matcher.slice(match[0].length),
+        selector: (s) => `.${match[1]} $$ ${s}`
+      };
+    }
+  }
+};
 const variantImportant = {
   match(matcher) {
     if (matcher.startsWith("!")) {
@@ -289,12 +313,12 @@ const partClasses = {
 };
 
 const variants = (options) => [
+  variantSelector,
   variantLayer,
   variantNegative,
   variantImportant,
   variantPrint,
-  ...variantOrientations,
-  ...variantMotions,
+  variantCustomMedia,
   variantBreakpoints,
   ...variantCombinators,
   variantPseudoClasses,
@@ -303,7 +327,8 @@ const variants = (options) => [
   variantPseudoElements,
   partClasses,
   ...variantColorsMediaOrClass(options),
-  ...variantLanguageDirections
+  ...variantLanguageDirections,
+  variantScope
 ];
 
-export { variantBreakpoints as a, variantCombinators as b, variantMotions as c, variantOrientations as d, variantPrint as e, variantColorsMediaOrClass as f, variantLanguageDirections as g, variantLayer as h, variantImportant as i, variantNegative as j, variantPseudoElements as k, variantPseudoClasses as l, variantPseudoClassFunctions as m, variantTaggedPseudoClasses as n, 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, variantLayer as h, variantScope as i, variantImportant as j, variantNegative as k, variantPseudoElements as l, variantPseudoClasses as m, variantPseudoClassFunctions as n, variantTaggedPseudoClasses as o, partClasses as p, variants as v };