@unocss/preset-mini 0.16.3 → 0.18.0

package/dist/chunks/utilities.cjs

@@ -0,0 +1,294 @@
+'use strict';
+
+const core = require('@unocss/core');
+
+const directionMap = {
+  "l": ["-left"],
+  "r": ["-right"],
+  "t": ["-top"],
+  "b": ["-bottom"],
+  "s": ["-inline-start"],
+  "e": ["-inline-end"],
+  "x": ["-left", "-right"],
+  "y": ["-top", "-bottom"],
+  "": [""],
+  "a": [""]
+};
+const cornerMap = {
+  "t": ["-top-left", "-top-right"],
+  "r": ["-top-right", "-bottom-right"],
+  "b": ["-bottom-left", "-bottom-right"],
+  "l": ["-bottom-left", "-top-left"],
+  "tl": ["-top-left"],
+  "lt": ["-top-left"],
+  "tr": ["-top-right"],
+  "rt": ["-top-right"],
+  "bl": ["-bottom-left"],
+  "lb": ["-bottom-left"],
+  "br": ["-bottom-right"],
+  "rb": ["-bottom-right"],
+  "": [""]
+};
+const xyzMap = {
+  "x": ["-x"],
+  "y": ["-y"],
+  "z": ["-z"],
+  "": ["-x", "-y"]
+};
+
+const cssBasicProps = [
+  "color",
+  "border-color",
+  "background-color",
+  "flex-grow",
+  "flex",
+  "flex-shrink",
+  "caret-color",
+  "font",
+  "gap",
+  "opacity",
+  "visibility",
+  "z-index",
+  "font-weight",
+  "zoom",
+  "text-shadow",
+  "transform",
+  "box-shadow"
+];
+const cssPositionProps = [
+  "backround-position",
+  "left",
+  "right",
+  "top",
+  "bottom",
+  "object-position"
+];
+const cssSizeProps = [
+  "max-height",
+  "min-height",
+  "max-width",
+  "min-width",
+  "height",
+  "width",
+  "border-width",
+  "margin",
+  "padding",
+  "outline-width",
+  "outline-offset",
+  "font-size",
+  "line-height",
+  "text-indent",
+  "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
+];
+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 numberWithUnit(str) {
+  const match = str.match(numberWithUnitRE);
+  if (!match)
+    return;
+  const [, , unit] = match;
+  if (unit)
+    return str;
+}
+function auto(str) {
+  if (str === "auto" || str === "a")
+    return "auto";
+}
+function rem(str) {
+  if (str.match(unitOnlyRE))
+    return `1${str}`;
+  const match = str.match(numberWithUnitRE);
+  if (!match)
+    return;
+  const [, n, unit] = match;
+  if (unit)
+    return str;
+  const num = parseFloat(n);
+  if (!Number.isNaN(num))
+    return `${num / 4}rem`;
+}
+function px(str) {
+  if (str.match(unitOnlyRE))
+    return `1${str}`;
+  const match = str.match(numberWithUnitRE);
+  if (!match)
+    return;
+  const [, n, unit] = match;
+  if (unit)
+    return str;
+  const num = parseFloat(n);
+  if (!Number.isNaN(num))
+    return `${num}px`;
+}
+function number(str) {
+  if (!numberRE.test(str))
+    return;
+  const num = parseFloat(str);
+  if (!Number.isNaN(num))
+    return num;
+}
+function percent(str) {
+  if (str.endsWith("%"))
+    str = str.slice(0, -1);
+  const num = parseFloat(str);
+  if (!Number.isNaN(num))
+    return `${num / 100}`;
+}
+function fraction(str) {
+  if (str === "full")
+    return "100%";
+  const [left, right] = str.split("/");
+  const num = parseFloat(left) / parseFloat(right);
+  if (!Number.isNaN(num))
+    return `${num * 100}%`;
+}
+function bracket(str) {
+  if (str && str[0] === "[" && str[str.length - 1] === "]") {
+    return str.slice(1, -1).replace(/_/g, " ").replace(/calc\((.*)/g, (v) => {
+      return v.replace(/(-?\d*\.?\d(?!\b-.+[,)](?![^+\-/*])\D)(?:%|[a-z]+)?|\))([+\-/*])/g, "$1 $2 ");
+    });
+  }
+}
+function cssvar(str) {
+  if (str.startsWith("$"))
+    return `var(--${str.slice(1)})`;
+}
+function time(str) {
+  const duration = Number(str.replace(/(s|ms)$/, ""));
+  if (isNaN(duration))
+    return;
+  if (/(s|ms)$/.test(str))
+    return str;
+  return `${str}ms`;
+}
+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;
+  }
+  return str;
+}
+
+const valueHandlers = {
+  __proto__: null,
+  numberWithUnit: numberWithUnit,
+  auto: auto,
+  rem: rem,
+  px: px,
+  number: number,
+  percent: percent,
+  fraction: fraction,
+  bracket: bracket,
+  cssvar: cssvar,
+  time: time,
+  global: global,
+  properties: properties
+};
+
+const handler = core.createValueHandler(valueHandlers);
+const h = handler;
+
+function capitalize(str) {
+  return str.charAt(0).toUpperCase() + str.slice(1);
+}
+const directionSize = (propertyPrefix) => ([_, direction, size]) => {
+  const v = handler.bracket.auto.rem.fraction.cssvar(size);
+  if (v !== void 0)
+    return directionMap[direction].map((i) => [`${propertyPrefix}${i}`, v]);
+};
+const getThemeColor = (theme, colors) => theme.colors?.[colors.join("-").replace(/(-[a-z])/g, (n) => n.slice(1).toUpperCase())];
+const parseColor = (body, theme) => {
+  const [main, opacity] = body.split(/(?:\/|:)/);
+  const colors = main.replace(/([a-z])([0-9])/g, "$1-$2").split(/-/g);
+  const [name] = colors;
+  if (!name)
+    return;
+  let color;
+  const bracket = handler.bracket(main);
+  const bracketOrMain = bracket || main;
+  if (bracketOrMain.startsWith("#"))
+    color = bracketOrMain.slice(1);
+  if (bracketOrMain.startsWith("hex-"))
+    color = bracketOrMain.slice(4);
+  color = color || bracket;
+  let no = "DEFAULT";
+  if (!color) {
+    let colorData;
+    const [scale] = colors.slice(-1);
+    if (scale.match(/^\d+$/)) {
+      no = scale;
+      colorData = getThemeColor(theme, colors.slice(0, -1));
+    } else {
+      colorData = getThemeColor(theme, colors);
+      if (!colorData) {
+        [, no = no] = colors;
+        colorData = getThemeColor(theme, [name]);
+      }
+    }
+    if (typeof colorData === "string")
+      color = colorData;
+    else if (no && colorData)
+      color = colorData[no];
+  }
+  return {
+    opacity,
+    name,
+    no,
+    color,
+    rgba: core.hex2rgba(color)
+  };
+};
+const colorResolver = (property, varName) => ([, body], { theme }) => {
+  const data = parseColor(body, theme);
+  if (!data)
+    return;
+  const { opacity, color, rgba } = data;
+  if (!color)
+    return;
+  const a = opacity ? opacity[0] === "[" ? handler.bracket.percent(opacity) : parseFloat(opacity) / 100 : rgba?.[3];
+  if (rgba) {
+    if (a != null && !Number.isNaN(a)) {
+      rgba[3] = typeof a === "string" && !a.includes("%") ? parseFloat(a) : a;
+      return {
+        [property]: `rgba(${rgba.join(",")})`
+      };
+    } else {
+      return {
+        [`--un-${varName}-opacity`]: 1,
+        [property]: `rgba(${rgba.slice(0, 3).join(",")},var(--un-${varName}-opacity))`
+      };
+    }
+  } else {
+    return {
+      [property]: color.replace("%alpha", `${a || 1}`)
+    };
+  }
+};
+
+exports.capitalize = capitalize;
+exports.colorResolver = colorResolver;
+exports.cornerMap = cornerMap;
+exports.directionMap = directionMap;
+exports.directionSize = directionSize;
+exports.h = h;
+exports.handler = handler;
+exports.parseColor = parseColor;
+exports.valueHandlers = valueHandlers;
+exports.xyzMap = xyzMap;

package/dist/chunks/utilities.mjs

@@ -0,0 +1,283 @@
+import { createValueHandler, hex2rgba } from '@unocss/core';
+
+const directionMap = {
+  "l": ["-left"],
+  "r": ["-right"],
+  "t": ["-top"],
+  "b": ["-bottom"],
+  "s": ["-inline-start"],
+  "e": ["-inline-end"],
+  "x": ["-left", "-right"],
+  "y": ["-top", "-bottom"],
+  "": [""],
+  "a": [""]
+};
+const cornerMap = {
+  "t": ["-top-left", "-top-right"],
+  "r": ["-top-right", "-bottom-right"],
+  "b": ["-bottom-left", "-bottom-right"],
+  "l": ["-bottom-left", "-top-left"],
+  "tl": ["-top-left"],
+  "lt": ["-top-left"],
+  "tr": ["-top-right"],
+  "rt": ["-top-right"],
+  "bl": ["-bottom-left"],
+  "lb": ["-bottom-left"],
+  "br": ["-bottom-right"],
+  "rb": ["-bottom-right"],
+  "": [""]
+};
+const xyzMap = {
+  "x": ["-x"],
+  "y": ["-y"],
+  "z": ["-z"],
+  "": ["-x", "-y"]
+};
+
+const cssBasicProps = [
+  "color",
+  "border-color",
+  "background-color",
+  "flex-grow",
+  "flex",
+  "flex-shrink",
+  "caret-color",
+  "font",
+  "gap",
+  "opacity",
+  "visibility",
+  "z-index",
+  "font-weight",
+  "zoom",
+  "text-shadow",
+  "transform",
+  "box-shadow"
+];
+const cssPositionProps = [
+  "backround-position",
+  "left",
+  "right",
+  "top",
+  "bottom",
+  "object-position"
+];
+const cssSizeProps = [
+  "max-height",
+  "min-height",
+  "max-width",
+  "min-width",
+  "height",
+  "width",
+  "border-width",
+  "margin",
+  "padding",
+  "outline-width",
+  "outline-offset",
+  "font-size",
+  "line-height",
+  "text-indent",
+  "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
+];
+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 numberWithUnit(str) {
+  const match = str.match(numberWithUnitRE);
+  if (!match)
+    return;
+  const [, , unit] = match;
+  if (unit)
+    return str;
+}
+function auto(str) {
+  if (str === "auto" || str === "a")
+    return "auto";
+}
+function rem(str) {
+  if (str.match(unitOnlyRE))
+    return `1${str}`;
+  const match = str.match(numberWithUnitRE);
+  if (!match)
+    return;
+  const [, n, unit] = match;
+  if (unit)
+    return str;
+  const num = parseFloat(n);
+  if (!Number.isNaN(num))
+    return `${num / 4}rem`;
+}
+function px(str) {
+  if (str.match(unitOnlyRE))
+    return `1${str}`;
+  const match = str.match(numberWithUnitRE);
+  if (!match)
+    return;
+  const [, n, unit] = match;
+  if (unit)
+    return str;
+  const num = parseFloat(n);
+  if (!Number.isNaN(num))
+    return `${num}px`;
+}
+function number(str) {
+  if (!numberRE.test(str))
+    return;
+  const num = parseFloat(str);
+  if (!Number.isNaN(num))
+    return num;
+}
+function percent(str) {
+  if (str.endsWith("%"))
+    str = str.slice(0, -1);
+  const num = parseFloat(str);
+  if (!Number.isNaN(num))
+    return `${num / 100}`;
+}
+function fraction(str) {
+  if (str === "full")
+    return "100%";
+  const [left, right] = str.split("/");
+  const num = parseFloat(left) / parseFloat(right);
+  if (!Number.isNaN(num))
+    return `${num * 100}%`;
+}
+function bracket(str) {
+  if (str && str[0] === "[" && str[str.length - 1] === "]") {
+    return str.slice(1, -1).replace(/_/g, " ").replace(/calc\((.*)/g, (v) => {
+      return v.replace(/(-?\d*\.?\d(?!\b-.+[,)](?![^+\-/*])\D)(?:%|[a-z]+)?|\))([+\-/*])/g, "$1 $2 ");
+    });
+  }
+}
+function cssvar(str) {
+  if (str.startsWith("$"))
+    return `var(--${str.slice(1)})`;
+}
+function time(str) {
+  const duration = Number(str.replace(/(s|ms)$/, ""));
+  if (isNaN(duration))
+    return;
+  if (/(s|ms)$/.test(str))
+    return str;
+  return `${str}ms`;
+}
+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;
+  }
+  return str;
+}
+
+const valueHandlers = {
+  __proto__: null,
+  numberWithUnit: numberWithUnit,
+  auto: auto,
+  rem: rem,
+  px: px,
+  number: number,
+  percent: percent,
+  fraction: fraction,
+  bracket: bracket,
+  cssvar: cssvar,
+  time: time,
+  global: global,
+  properties: properties
+};
+
+const handler = createValueHandler(valueHandlers);
+const h = handler;
+
+function capitalize(str) {
+  return str.charAt(0).toUpperCase() + str.slice(1);
+}
+const directionSize = (propertyPrefix) => ([_, direction, size]) => {
+  const v = handler.bracket.auto.rem.fraction.cssvar(size);
+  if (v !== void 0)
+    return directionMap[direction].map((i) => [`${propertyPrefix}${i}`, v]);
+};
+const getThemeColor = (theme, colors) => theme.colors?.[colors.join("-").replace(/(-[a-z])/g, (n) => n.slice(1).toUpperCase())];
+const parseColor = (body, theme) => {
+  const [main, opacity] = body.split(/(?:\/|:)/);
+  const colors = main.replace(/([a-z])([0-9])/g, "$1-$2").split(/-/g);
+  const [name] = colors;
+  if (!name)
+    return;
+  let color;
+  const bracket = handler.bracket(main);
+  const bracketOrMain = bracket || main;
+  if (bracketOrMain.startsWith("#"))
+    color = bracketOrMain.slice(1);
+  if (bracketOrMain.startsWith("hex-"))
+    color = bracketOrMain.slice(4);
+  color = color || bracket;
+  let no = "DEFAULT";
+  if (!color) {
+    let colorData;
+    const [scale] = colors.slice(-1);
+    if (scale.match(/^\d+$/)) {
+      no = scale;
+      colorData = getThemeColor(theme, colors.slice(0, -1));
+    } else {
+      colorData = getThemeColor(theme, colors);
+      if (!colorData) {
+        [, no = no] = colors;
+        colorData = getThemeColor(theme, [name]);
+      }
+    }
+    if (typeof colorData === "string")
+      color = colorData;
+    else if (no && colorData)
+      color = colorData[no];
+  }
+  return {
+    opacity,
+    name,
+    no,
+    color,
+    rgba: hex2rgba(color)
+  };
+};
+const colorResolver = (property, varName) => ([, body], { theme }) => {
+  const data = parseColor(body, theme);
+  if (!data)
+    return;
+  const { opacity, color, rgba } = data;
+  if (!color)
+    return;
+  const a = opacity ? opacity[0] === "[" ? handler.bracket.percent(opacity) : parseFloat(opacity) / 100 : rgba?.[3];
+  if (rgba) {
+    if (a != null && !Number.isNaN(a)) {
+      rgba[3] = typeof a === "string" && !a.includes("%") ? parseFloat(a) : a;
+      return {
+        [property]: `rgba(${rgba.join(",")})`
+      };
+    } else {
+      return {
+        [`--un-${varName}-opacity`]: 1,
+        [property]: `rgba(${rgba.slice(0, 3).join(",")},var(--un-${varName}-opacity))`
+      };
+    }
+  } else {
+    return {
+      [property]: color.replace("%alpha", `${a || 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 };

package/dist/chunks/variants.cjs

@@ -1,13 +1,15 @@
 'use strict';
 
 const variantMatcher = (name, selector) => {
-  const length = name.length + 1;
-  const re = new RegExp(`^${name}[:-]`);
+  const re = new RegExp(`^(${name})[:-]`);
   return (input) => {
-    return input.match(re) ? {
-      matcher: input.slice(length),
-      selector
-    } : void 0;
+    const match = input.match(re);
+    if (match) {
+      return {
+        matcher: input.slice(match[1].length + 1),
+        selector
+      };
+    }
   };
 };
 

package/dist/chunks/variants.mjs

@@ -1,11 +1,13 @@
 const variantMatcher = (name, selector) => {
-  const length = name.length + 1;
-  const re = new RegExp(`^${name}[:-]`);
+  const re = new RegExp(`^(${name})[:-]`);
   return (input) => {
-    return input.match(re) ? {
-      matcher: input.slice(length),
-      selector
-    } : void 0;
+    const match = input.match(re);
+    if (match) {
+      return {
+        matcher: input.slice(match[1].length + 1),
+        selector
+      };
+    }
   };
 };
 

package/dist/index.cjs

@@ -6,8 +6,8 @@ const _default = require('./chunks/default.cjs');
 const _default$1 = require('./chunks/default2.cjs');
 const _default$2 = require('./chunks/default3.cjs');
 const colors = require('./chunks/colors.cjs');
+require('./chunks/utilities.cjs');
 require('@unocss/core');
-require('./chunks/index.cjs');
 require('./chunks/pseudo.cjs');
 require('./chunks/variants.cjs');
 
@@ -15,10 +15,7 @@ const presetMini = (options = {}) => ({
   name: "@unocss/preset-mini",
   theme: _default.theme,
   rules: _default$1.rules,
-  variants: [
-    ..._default$2.variants,
-    ...options.dark === "media" ? _default$2.variantColorsMedia : _default$2.variantColorsClass
-  ],
+  variants: _default$2.variants(options),
   options
 });
 

package/dist/index.d.ts

@@ -9,6 +9,10 @@ interface PresetMiniOptions {
      * @default 'class'
      */
     dark?: 'class' | 'media';
+    /**
+     * @default false
+     */
+    attributifyPseudo?: Boolean;
 }
 declare const presetMini: (options?: PresetMiniOptions) => Preset<Theme>;
 

package/dist/index.mjs

@@ -1,10 +1,10 @@
 import { t as theme } from './chunks/default.mjs';
 export { t as theme } from './chunks/default.mjs';
 import { r as rules } from './chunks/default2.mjs';
-import { v as variants, a as variantColorsMedia, b as variantColorsClass } from './chunks/default3.mjs';
+import { v as variants } from './chunks/default3.mjs';
 export { c as colors } from './chunks/colors.mjs';
+import './chunks/utilities.mjs';
 import '@unocss/core';
-import './chunks/index.mjs';
 import './chunks/pseudo.mjs';
 import './chunks/variants.mjs';
 
@@ -12,10 +12,7 @@ const presetMini = (options = {}) => ({
   name: "@unocss/preset-mini",
   theme,
   rules,
-  variants: [
-    ...variants,
-    ...options.dark === "media" ? variantColorsMedia : variantColorsClass
-  ],
+  variants: variants(options),
   options
 });