@unocss/preset-mini 0.20.0 → 0.21.0

package/dist/chunks/utilities.cjs

@@ -35,8 +35,33 @@ const xyzMap = {
   "z": ["-z"],
   "": ["-x", "-y"]
 };
+const basePositionMap = [
+  "top",
+  "top center",
+  "top left",
+  "top right",
+  "bottom",
+  "bottom center",
+  "bottom left",
+  "bottom right",
+  "left",
+  "left center",
+  "left top",
+  "left bottom",
+  "right",
+  "right center",
+  "right top",
+  "right bottom",
+  "center",
+  "center top",
+  "center bottom",
+  "center left",
+  "center right",
+  "center center"
+];
+const positionMap = Object.assign({}, ...basePositionMap.map((p) => ({ [p.replace(/ /, "-")]: p })), ...basePositionMap.map((p) => ({ [p.replace(/\b(\w)\w+/g, "$1").replace(/ /, "")]: p })));
 
-const cssBasicProps = [
+const cssProps = [
   "color",
   "border-color",
   "background-color",
@@ -53,17 +78,13 @@ const cssBasicProps = [
   "zoom",
   "text-shadow",
   "transform",
-  "box-shadow"
-];
-const cssPositionProps = [
+  "box-shadow",
   "backround-position",
   "left",
   "right",
   "top",
   "bottom",
-  "object-position"
-];
-const cssSizeProps = [
+  "object-position",
   "max-height",
   "min-height",
   "max-width",
@@ -81,25 +102,31 @@ const cssSizeProps = [
   "vertical-align",
   "border-spacing",
   "letter-spacing",
-  "word-spacing"
-];
-const cssEnhanceProps = ["stroke", "filter", "backdrop-filter", "fill", "mask", "mask-size", "mask-border", "clip-path", "clip"];
-const cssProps = [
-  ...cssBasicProps,
-  ...cssPositionProps,
-  ...cssSizeProps,
-  ...cssEnhanceProps
+  "word-spacing",
+  "stroke",
+  "filter",
+  "backdrop-filter",
+  "fill",
+  "mask",
+  "mask-size",
+  "mask-border",
+  "clip-path",
+  "clip"
 ];
 const numberWithUnitRE = /^(-?[0-9.]+)(px|pt|pc|rem|em|%|vh|vw|in|cm|mm|ex|ch|vmin|vmax)?$/i;
 const numberRE = /^(-?[0-9.]+)$/i;
 const unitOnlyRE = /^(px)$/i;
+function round(n) {
+  return n.toFixed(10).replace(/\.0+$/, "").replace(/(\.\d+?)0+$/, "$1");
+}
 function numberWithUnit(str) {
   const match = str.match(numberWithUnitRE);
   if (!match)
     return;
-  const [, , unit] = match;
-  if (unit)
-    return str;
+  const [, n, unit] = match;
+  const num = parseFloat(n);
+  if (unit && !Number.isNaN(num))
+    return `${round(num)}${unit}`;
 }
 function auto(str) {
   if (str === "auto" || str === "a")
@@ -112,11 +139,9 @@ function rem(str) {
   if (!match)
     return;
   const [, n, unit] = match;
-  if (unit)
-    return str;
   const num = parseFloat(n);
   if (!Number.isNaN(num))
-    return `${num / 4}rem`;
+    return unit ? `${round(num)}${unit}` : `${round(num / 4)}rem`;
 }
 function px(str) {
   if (str.match(unitOnlyRE))
@@ -125,25 +150,23 @@ function px(str) {
   if (!match)
     return;
   const [, n, unit] = match;
-  if (unit)
-    return str;
   const num = parseFloat(n);
   if (!Number.isNaN(num))
-    return `${num}px`;
+    return unit ? `${round(num)}${unit}` : `${round(num)}px`;
 }
 function number(str) {
   if (!numberRE.test(str))
     return;
   const num = parseFloat(str);
   if (!Number.isNaN(num))
-    return num;
+    return round(num);
 }
 function percent(str) {
   if (str.endsWith("%"))
     str = str.slice(0, -1);
   const num = parseFloat(str);
   if (!Number.isNaN(num))
-    return `${num / 100}`;
+    return `${round(num / 100)}`;
 }
 function fraction(str) {
   if (str === "full")
@@ -151,7 +174,7 @@ function fraction(str) {
   const [left, right] = str.split("/");
   const num = parseFloat(left) / parseFloat(right);
   if (!Number.isNaN(num))
-    return `${num * 100}%`;
+    return `${round(num * 100)}%`;
 }
 function bracket(str) {
   if (str && str[0] === "[" && str[str.length - 1] === "]") {
@@ -165,20 +188,28 @@ function cssvar(str) {
     return `var(--${str.slice(1)})`;
 }
 function time(str) {
-  const duration = Number(str.replace(/(s|ms)$/, ""));
-  if (isNaN(duration))
+  const match = str.match(/^(-?[0-9.]+)(s|ms)?$/i);
+  if (!match)
     return;
-  if (/(s|ms)$/.test(str))
-    return str;
-  return `${str}ms`;
+  const [, n, unit] = match;
+  const num = parseFloat(n);
+  if (!Number.isNaN(num))
+    return unit ? `${round(num)}${unit}` : `${round(num)}ms`;
+}
+function degree(str) {
+  const match = str.match(/^(-?[0-9.]+)(deg)?$/i);
+  if (!match)
+    return;
+  const [, n, unit] = match;
+  const num = parseFloat(n);
+  if (!Number.isNaN(num))
+    return unit ? `${round(num)}${unit}` : `${round(num)}deg`;
 }
 function global(str) {
   if (["inherit", "initial", "revert", "unset"].includes(str))
     return str;
 }
 function properties(str) {
-  if (str === void 0)
-    return;
   for (const prop of str.split(",")) {
     if (!cssProps.includes(prop))
       return;
@@ -198,6 +229,7 @@ const valueHandlers = {
   bracket: bracket,
   cssvar: cssvar,
   time: time,
+  degree: degree,
   global: global,
   properties: properties
 };
@@ -225,8 +257,10 @@ const parseColor = (body, theme) => {
   const bracketOrMain = bracket || main;
   if (bracketOrMain.startsWith("#"))
     color = bracketOrMain.slice(1);
-  if (bracketOrMain.startsWith("hex-"))
+  else if (bracketOrMain.startsWith("hex-"))
     color = bracketOrMain.slice(4);
+  else if (main.startsWith("$"))
+    color = handler.cssvar(main);
   color = color || bracket;
   let no = "DEFAULT";
   if (!color) {
@@ -247,37 +281,46 @@ const parseColor = (body, theme) => {
     else if (no && colorData)
       color = colorData[no];
   }
+  const rgba = core.hex2rgba(color);
+  const alpha = opacity ? opacity[0] === "[" ? handler.bracket.percent(opacity) : parseFloat(opacity) / 100 : rgba?.[3];
+  const hasAlpha = alpha != null && !Number.isNaN(alpha);
+  if (rgba) {
+    if (hasAlpha) {
+      rgba[3] = typeof alpha === "string" && !alpha.includes("%") ? parseFloat(alpha) : alpha;
+    } else {
+      rgba.splice(3);
+    }
+  }
   return {
     opacity,
     name,
     no,
     color,
-    rgba: core.hex2rgba(color)
+    rgba,
+    alpha: hasAlpha ? alpha : void 0
   };
 };
 const colorResolver = (property, varName) => ([, body], { theme }) => {
   const data = parseColor(body, theme);
   if (!data)
     return;
-  const { opacity, color, rgba } = data;
+  const { alpha, 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;
+    if (alpha != null) {
       return {
         [property]: `rgba(${rgba.join(",")})`
       };
     } else {
       return {
-        [`--un-${varName}-opacity`]: 1,
-        [property]: `rgba(${rgba.slice(0, 3).join(",")},var(--un-${varName}-opacity))`
+        [`--un-${varName}-opacity`]: (opacity && handler.cssvar(opacity)) ?? 1,
+        [property]: `rgba(${rgba.join(",")},var(--un-${varName}-opacity))`
       };
     }
   } else {
     return {
-      [property]: color.replace("%alpha", `${a || 1}`)
+      [property]: color.replace("%alpha", `${alpha || 1}`)
     };
   }
 };
@@ -290,5 +333,6 @@ exports.directionSize = directionSize;
 exports.h = h;
 exports.handler = handler;
 exports.parseColor = parseColor;
+exports.positionMap = positionMap;
 exports.valueHandlers = valueHandlers;
 exports.xyzMap = xyzMap;

package/dist/chunks/utilities.mjs

@@ -33,8 +33,33 @@ const xyzMap = {
   "z": ["-z"],
   "": ["-x", "-y"]
 };
+const basePositionMap = [
+  "top",
+  "top center",
+  "top left",
+  "top right",
+  "bottom",
+  "bottom center",
+  "bottom left",
+  "bottom right",
+  "left",
+  "left center",
+  "left top",
+  "left bottom",
+  "right",
+  "right center",
+  "right top",
+  "right bottom",
+  "center",
+  "center top",
+  "center bottom",
+  "center left",
+  "center right",
+  "center center"
+];
+const positionMap = Object.assign({}, ...basePositionMap.map((p) => ({ [p.replace(/ /, "-")]: p })), ...basePositionMap.map((p) => ({ [p.replace(/\b(\w)\w+/g, "$1").replace(/ /, "")]: p })));
 
-const cssBasicProps = [
+const cssProps = [
   "color",
   "border-color",
   "background-color",
@@ -51,17 +76,13 @@ const cssBasicProps = [
   "zoom",
   "text-shadow",
   "transform",
-  "box-shadow"
-];
-const cssPositionProps = [
+  "box-shadow",
   "backround-position",
   "left",
   "right",
   "top",
   "bottom",
-  "object-position"
-];
-const cssSizeProps = [
+  "object-position",
   "max-height",
   "min-height",
   "max-width",
@@ -79,25 +100,31 @@ const cssSizeProps = [
   "vertical-align",
   "border-spacing",
   "letter-spacing",
-  "word-spacing"
-];
-const cssEnhanceProps = ["stroke", "filter", "backdrop-filter", "fill", "mask", "mask-size", "mask-border", "clip-path", "clip"];
-const cssProps = [
-  ...cssBasicProps,
-  ...cssPositionProps,
-  ...cssSizeProps,
-  ...cssEnhanceProps
+  "word-spacing",
+  "stroke",
+  "filter",
+  "backdrop-filter",
+  "fill",
+  "mask",
+  "mask-size",
+  "mask-border",
+  "clip-path",
+  "clip"
 ];
 const numberWithUnitRE = /^(-?[0-9.]+)(px|pt|pc|rem|em|%|vh|vw|in|cm|mm|ex|ch|vmin|vmax)?$/i;
 const numberRE = /^(-?[0-9.]+)$/i;
 const unitOnlyRE = /^(px)$/i;
+function round(n) {
+  return n.toFixed(10).replace(/\.0+$/, "").replace(/(\.\d+?)0+$/, "$1");
+}
 function numberWithUnit(str) {
   const match = str.match(numberWithUnitRE);
   if (!match)
     return;
-  const [, , unit] = match;
-  if (unit)
-    return str;
+  const [, n, unit] = match;
+  const num = parseFloat(n);
+  if (unit && !Number.isNaN(num))
+    return `${round(num)}${unit}`;
 }
 function auto(str) {
   if (str === "auto" || str === "a")
@@ -110,11 +137,9 @@ function rem(str) {
   if (!match)
     return;
   const [, n, unit] = match;
-  if (unit)
-    return str;
   const num = parseFloat(n);
   if (!Number.isNaN(num))
-    return `${num / 4}rem`;
+    return unit ? `${round(num)}${unit}` : `${round(num / 4)}rem`;
 }
 function px(str) {
   if (str.match(unitOnlyRE))
@@ -123,25 +148,23 @@ function px(str) {
   if (!match)
     return;
   const [, n, unit] = match;
-  if (unit)
-    return str;
   const num = parseFloat(n);
   if (!Number.isNaN(num))
-    return `${num}px`;
+    return unit ? `${round(num)}${unit}` : `${round(num)}px`;
 }
 function number(str) {
   if (!numberRE.test(str))
     return;
   const num = parseFloat(str);
   if (!Number.isNaN(num))
-    return num;
+    return round(num);
 }
 function percent(str) {
   if (str.endsWith("%"))
     str = str.slice(0, -1);
   const num = parseFloat(str);
   if (!Number.isNaN(num))
-    return `${num / 100}`;
+    return `${round(num / 100)}`;
 }
 function fraction(str) {
   if (str === "full")
@@ -149,7 +172,7 @@ function fraction(str) {
   const [left, right] = str.split("/");
   const num = parseFloat(left) / parseFloat(right);
   if (!Number.isNaN(num))
-    return `${num * 100}%`;
+    return `${round(num * 100)}%`;
 }
 function bracket(str) {
   if (str && str[0] === "[" && str[str.length - 1] === "]") {
@@ -163,20 +186,28 @@ function cssvar(str) {
     return `var(--${str.slice(1)})`;
 }
 function time(str) {
-  const duration = Number(str.replace(/(s|ms)$/, ""));
-  if (isNaN(duration))
+  const match = str.match(/^(-?[0-9.]+)(s|ms)?$/i);
+  if (!match)
     return;
-  if (/(s|ms)$/.test(str))
-    return str;
-  return `${str}ms`;
+  const [, n, unit] = match;
+  const num = parseFloat(n);
+  if (!Number.isNaN(num))
+    return unit ? `${round(num)}${unit}` : `${round(num)}ms`;
+}
+function degree(str) {
+  const match = str.match(/^(-?[0-9.]+)(deg)?$/i);
+  if (!match)
+    return;
+  const [, n, unit] = match;
+  const num = parseFloat(n);
+  if (!Number.isNaN(num))
+    return unit ? `${round(num)}${unit}` : `${round(num)}deg`;
 }
 function global(str) {
   if (["inherit", "initial", "revert", "unset"].includes(str))
     return str;
 }
 function properties(str) {
-  if (str === void 0)
-    return;
   for (const prop of str.split(",")) {
     if (!cssProps.includes(prop))
       return;
@@ -196,6 +227,7 @@ const valueHandlers = {
   bracket: bracket,
   cssvar: cssvar,
   time: time,
+  degree: degree,
   global: global,
   properties: properties
 };
@@ -223,8 +255,10 @@ const parseColor = (body, theme) => {
   const bracketOrMain = bracket || main;
   if (bracketOrMain.startsWith("#"))
     color = bracketOrMain.slice(1);
-  if (bracketOrMain.startsWith("hex-"))
+  else if (bracketOrMain.startsWith("hex-"))
     color = bracketOrMain.slice(4);
+  else if (main.startsWith("$"))
+    color = handler.cssvar(main);
   color = color || bracket;
   let no = "DEFAULT";
   if (!color) {
@@ -245,39 +279,48 @@ const parseColor = (body, theme) => {
     else if (no && colorData)
       color = colorData[no];
   }
+  const rgba = hex2rgba(color);
+  const alpha = opacity ? opacity[0] === "[" ? handler.bracket.percent(opacity) : parseFloat(opacity) / 100 : rgba?.[3];
+  const hasAlpha = alpha != null && !Number.isNaN(alpha);
+  if (rgba) {
+    if (hasAlpha) {
+      rgba[3] = typeof alpha === "string" && !alpha.includes("%") ? parseFloat(alpha) : alpha;
+    } else {
+      rgba.splice(3);
+    }
+  }
   return {
     opacity,
     name,
     no,
     color,
-    rgba: hex2rgba(color)
+    rgba,
+    alpha: hasAlpha ? alpha : void 0
   };
 };
 const colorResolver = (property, varName) => ([, body], { theme }) => {
   const data = parseColor(body, theme);
   if (!data)
     return;
-  const { opacity, color, rgba } = data;
+  const { alpha, 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;
+    if (alpha != null) {
       return {
         [property]: `rgba(${rgba.join(",")})`
       };
     } else {
       return {
-        [`--un-${varName}-opacity`]: 1,
-        [property]: `rgba(${rgba.slice(0, 3).join(",")},var(--un-${varName}-opacity))`
+        [`--un-${varName}-opacity`]: (opacity && handler.cssvar(opacity)) ?? 1,
+        [property]: `rgba(${rgba.join(",")},var(--un-${varName}-opacity))`
       };
     }
   } else {
     return {
-      [property]: color.replace("%alpha", `${a || 1}`)
+      [property]: color.replace("%alpha", `${alpha || 1}`)
     };
   }
 };
 
-export { cornerMap as a, capitalize as b, colorResolver as c, directionMap as d, directionSize as e, h as f, handler as h, parseColor as p, valueHandlers as v, xyzMap as x };
+export { cornerMap as a, capitalize as b, colorResolver as c, directionMap as d, directionSize as e, positionMap as f, h as g, handler as h, parseColor as p, valueHandlers as v, xyzMap as x };

package/dist/chunks/variants.cjs

@@ -1,16 +1,31 @@
 'use strict';
 
+const core = require('@unocss/core');
+
 const variantMatcher = (name, selector) => {
-  const re = new RegExp(`^(${name})[:-]`);
+  const re = new RegExp(`^${core.escapeRegExp(name)}[:-]`);
   return (input) => {
     const match = input.match(re);
     if (match) {
       return {
-        matcher: input.slice(match[1].length + 1),
+        matcher: input.slice(match[0].length),
         selector
       };
     }
   };
 };
+const variantParentMatcher = (name, parent) => {
+  const re = new RegExp(`^${core.escapeRegExp(name)}[:-]`);
+  return (input) => {
+    const match = input.match(re);
+    if (match) {
+      return {
+        matcher: input.slice(match[0].length),
+        parent
+      };
+    }
+  };
+};
 
 exports.variantMatcher = variantMatcher;
+exports.variantParentMatcher = variantParentMatcher;

package/dist/chunks/variants.mjs

@@ -1,14 +1,28 @@
+import { escapeRegExp } from '@unocss/core';
+
 const variantMatcher = (name, selector) => {
-  const re = new RegExp(`^(${name})[:-]`);
+  const re = new RegExp(`^${escapeRegExp(name)}[:-]`);
   return (input) => {
     const match = input.match(re);
     if (match) {
       return {
-        matcher: input.slice(match[1].length + 1),
+        matcher: input.slice(match[0].length),
         selector
       };
     }
   };
 };
+const variantParentMatcher = (name, parent) => {
+  const re = new RegExp(`^${escapeRegExp(name)}[:-]`);
+  return (input) => {
+    const match = input.match(re);
+    if (match) {
+      return {
+        matcher: input.slice(match[0].length),
+        parent
+      };
+    }
+  };
+};
 
-export { variantMatcher as v };
+export { variantParentMatcher as a, variantMatcher as v };

package/dist/index.cjs

@@ -18,7 +18,7 @@ const presetMini = (options = {}) => {
     name: "@unocss/preset-mini",
     theme: _default.theme,
     rules: _default$1.rules,
-    variants: _default$2.variants,
+    variants: _default$2.variants(options),
     options,
     postprocess: options.variablePrefix && options.variablePrefix !== "un-" ? VarPrefixPostprocessor(options.variablePrefix) : void 0
   };

package/dist/index.mjs

@@ -15,7 +15,7 @@ const presetMini = (options = {}) => {
     name: "@unocss/preset-mini",
     theme,
     rules,
-    variants,
+    variants: variants(options),
     options,
     postprocess: options.variablePrefix && options.variablePrefix !== "un-" ? VarPrefixPostprocessor(options.variablePrefix) : void 0
   };

package/dist/theme.d.ts

@@ -77,8 +77,6 @@ declare const baseSize: {
     '5xl': string;
     '6xl': string;
     '7xl': string;
-    min: string;
-    max: string;
     prose: string;
 };
 declare const width: {
@@ -94,8 +92,6 @@ declare const width: {
     '5xl': string;
     '6xl': string;
     '7xl': string;
-    min: string;
-    max: string;
     prose: string;
     auto: string;
 };
@@ -112,8 +108,6 @@ declare const maxWidth: {
     '5xl': string;
     '6xl': string;
     '7xl': string;
-    min: string;
-    max: string;
     prose: string;
     none: string;
 };
@@ -130,8 +124,6 @@ declare const height: {
     '5xl': string;
     '6xl': string;
     '7xl': string;
-    min: string;
-    max: string;
     prose: string;
     auto: string;
 };
@@ -148,8 +140,6 @@ declare const maxHeight: {
     '5xl': string;
     '6xl': string;
     '7xl': string;
-    min: string;
-    max: string;
     prose: string;
     none: string;
 };

package/dist/utils.cjs

@@ -16,6 +16,8 @@ exports.directionSize = utilities.directionSize;
 exports.h = utilities.h;
 exports.handler = utilities.handler;
 exports.parseColor = utilities.parseColor;
+exports.positionMap = utilities.positionMap;
 exports.valueHandlers = utilities.valueHandlers;
 exports.xyzMap = utilities.xyzMap;
 exports.variantMatcher = variants.variantMatcher;
+exports.variantParentMatcher = variants.variantParentMatcher;