@unocss/preset-mini 0.35.2 → 0.36.0

package/dist/chunks/transform.cjs

@@ -0,0 +1,129 @@
+'use strict';
+
+const index = require('./index.cjs');
+
+const transformCpu = [
+  "translateX(var(--un-translate-x))",
+  "translateY(var(--un-translate-y))",
+  "translateZ(var(--un-translate-z))",
+  "rotate(var(--un-rotate))",
+  "rotateX(var(--un-rotate-x))",
+  "rotateY(var(--un-rotate-y))",
+  "rotateZ(var(--un-rotate-z))",
+  "skewX(var(--un-skew-x))",
+  "skewY(var(--un-skew-y))",
+  "scaleX(var(--un-scale-x))",
+  "scaleY(var(--un-scale-y))",
+  "scaleZ(var(--un-scale-z))"
+].join(" ");
+const transformGpu = [
+  "translate3d(var(--un-translate-x), var(--un-translate-y), var(--un-translate-z))",
+  "rotate(var(--un-rotate))",
+  "rotateX(var(--un-rotate-x))",
+  "rotateY(var(--un-rotate-y))",
+  "rotateZ(var(--un-rotate-z))",
+  "skewX(var(--un-skew-x))",
+  "skewY(var(--un-skew-y))",
+  "scaleX(var(--un-scale-x))",
+  "scaleY(var(--un-scale-y))",
+  "scaleZ(var(--un-scale-z))"
+].join(" ");
+const transformBase = {
+  "--un-rotate": 0,
+  "--un-rotate-x": 0,
+  "--un-rotate-y": 0,
+  "--un-rotate-z": 0,
+  "--un-scale-x": 1,
+  "--un-scale-y": 1,
+  "--un-scale-z": 1,
+  "--un-skew-x": 0,
+  "--un-skew-y": 0,
+  "--un-translate-x": 0,
+  "--un-translate-y": 0,
+  "--un-translate-z": 0,
+  "--un-transform": transformCpu
+};
+const transforms = [
+  [/^(?:transform-)?origin-(.+)$/, ([, s]) => ({ "transform-origin": index.positionMap[s] ?? index.handler.bracket.cssvar(s) }), { autocomplete: [`transform-origin-(${Object.keys(index.positionMap).join("|")})`, `origin-(${Object.keys(index.positionMap).join("|")})`] }],
+  [/^(?:transform-)?perspect(?:ive)?-(.+)$/, ([, s]) => {
+    const v = index.handler.bracket.cssvar.px.numberWithUnit(s);
+    if (v != null) {
+      return {
+        "-webkit-perspective": v,
+        "perspective": v
+      };
+    }
+  }],
+  [/^(?:transform-)?perspect(?:ive)?-origin-(.+)$/, ([, s]) => {
+    const v = index.handler.bracket.cssvar(s) ?? (s.length >= 3 ? index.positionMap[s] : void 0);
+    if (v != null) {
+      return {
+        "-webkit-perspective-origin": v,
+        "perspective-origin": v
+      };
+    }
+  }],
+  [/^(?:transform-)?translate-()(.+)$/, handleTranslate],
+  [/^(?:transform-)?translate-([xyz])-(.+)$/, handleTranslate],
+  [/^(?:transform-)?rotate-()(.+)$/, handleRotate],
+  [/^(?:transform-)?rotate-([xyz])-(.+)$/, handleRotate],
+  [/^(?:transform-)?skew-([xy])-(.+)$/, handleSkew],
+  [/^(?:transform-)?scale-()(.+)$/, handleScale],
+  [/^(?:transform-)?scale-([xyz])-(.+)$/, handleScale],
+  [/^(?:transform-)?preserve-3d$/, () => ({ "transform-style": "preserve-3d" })],
+  [/^(?:transform-)?preserve-flat$/, () => ({ "transform-style": "flat" })],
+  ["transform", { transform: "var(--un-transform)" }],
+  ["transform-cpu", { transform: "var(--un-transform)" }],
+  ["transform-gpu", { transform: transformGpu }],
+  ["transform-none", { transform: "none" }]
+];
+function handleTranslate([, d, b], { theme }) {
+  const v = theme.spacing?.[b] ?? index.handler.bracket.cssvar.fraction.rem(b);
+  if (v != null) {
+    return [
+      ...index.xyzMap[d].map((i) => [`--un-translate${i}`, v]),
+      ["transform", "var(--un-transform)"]
+    ];
+  }
+}
+function handleScale([, d, b]) {
+  const v = index.handler.bracket.cssvar.fraction.percent(b);
+  if (v != null) {
+    return [
+      ...index.xyzMap[d].map((i) => [`--un-scale${i}`, v]),
+      ["transform", "var(--un-transform)"]
+    ];
+  }
+}
+function handleRotate([, d = "", b]) {
+  const v = index.handler.bracket.cssvar.degree(b);
+  if (v != null) {
+    if (d) {
+      return {
+        "--un-rotate": 0,
+        [`--un-rotate-${d}`]: v,
+        "transform": "var(--un-transform)"
+      };
+    } else {
+      return {
+        "--un-rotate-x": 0,
+        "--un-rotate-y": 0,
+        "--un-rotate-z": 0,
+        "--un-rotate": v,
+        "transform": "var(--un-transform)"
+      };
+    }
+  }
+}
+function handleSkew([, d, b]) {
+  const v = index.handler.bracket.cssvar.degree(b);
+  if (v != null) {
+    return {
+      [`--un-skew-${d}`]: v,
+      transform: "var(--un-transform)"
+    };
+  }
+}
+
+exports.transformBase = transformBase;
+exports.transforms = transforms;

package/dist/chunks/transform.mjs

@@ -0,0 +1,126 @@
+import { p as positionMap, h as handler, x as xyzMap } from './index.mjs';
+
+const transformCpu = [
+  "translateX(var(--un-translate-x))",
+  "translateY(var(--un-translate-y))",
+  "translateZ(var(--un-translate-z))",
+  "rotate(var(--un-rotate))",
+  "rotateX(var(--un-rotate-x))",
+  "rotateY(var(--un-rotate-y))",
+  "rotateZ(var(--un-rotate-z))",
+  "skewX(var(--un-skew-x))",
+  "skewY(var(--un-skew-y))",
+  "scaleX(var(--un-scale-x))",
+  "scaleY(var(--un-scale-y))",
+  "scaleZ(var(--un-scale-z))"
+].join(" ");
+const transformGpu = [
+  "translate3d(var(--un-translate-x), var(--un-translate-y), var(--un-translate-z))",
+  "rotate(var(--un-rotate))",
+  "rotateX(var(--un-rotate-x))",
+  "rotateY(var(--un-rotate-y))",
+  "rotateZ(var(--un-rotate-z))",
+  "skewX(var(--un-skew-x))",
+  "skewY(var(--un-skew-y))",
+  "scaleX(var(--un-scale-x))",
+  "scaleY(var(--un-scale-y))",
+  "scaleZ(var(--un-scale-z))"
+].join(" ");
+const transformBase = {
+  "--un-rotate": 0,
+  "--un-rotate-x": 0,
+  "--un-rotate-y": 0,
+  "--un-rotate-z": 0,
+  "--un-scale-x": 1,
+  "--un-scale-y": 1,
+  "--un-scale-z": 1,
+  "--un-skew-x": 0,
+  "--un-skew-y": 0,
+  "--un-translate-x": 0,
+  "--un-translate-y": 0,
+  "--un-translate-z": 0,
+  "--un-transform": transformCpu
+};
+const transforms = [
+  [/^(?:transform-)?origin-(.+)$/, ([, s]) => ({ "transform-origin": positionMap[s] ?? handler.bracket.cssvar(s) }), { autocomplete: [`transform-origin-(${Object.keys(positionMap).join("|")})`, `origin-(${Object.keys(positionMap).join("|")})`] }],
+  [/^(?:transform-)?perspect(?:ive)?-(.+)$/, ([, s]) => {
+    const v = handler.bracket.cssvar.px.numberWithUnit(s);
+    if (v != null) {
+      return {
+        "-webkit-perspective": v,
+        "perspective": v
+      };
+    }
+  }],
+  [/^(?:transform-)?perspect(?:ive)?-origin-(.+)$/, ([, s]) => {
+    const v = handler.bracket.cssvar(s) ?? (s.length >= 3 ? positionMap[s] : void 0);
+    if (v != null) {
+      return {
+        "-webkit-perspective-origin": v,
+        "perspective-origin": v
+      };
+    }
+  }],
+  [/^(?:transform-)?translate-()(.+)$/, handleTranslate],
+  [/^(?:transform-)?translate-([xyz])-(.+)$/, handleTranslate],
+  [/^(?:transform-)?rotate-()(.+)$/, handleRotate],
+  [/^(?:transform-)?rotate-([xyz])-(.+)$/, handleRotate],
+  [/^(?:transform-)?skew-([xy])-(.+)$/, handleSkew],
+  [/^(?:transform-)?scale-()(.+)$/, handleScale],
+  [/^(?:transform-)?scale-([xyz])-(.+)$/, handleScale],
+  [/^(?:transform-)?preserve-3d$/, () => ({ "transform-style": "preserve-3d" })],
+  [/^(?:transform-)?preserve-flat$/, () => ({ "transform-style": "flat" })],
+  ["transform", { transform: "var(--un-transform)" }],
+  ["transform-cpu", { transform: "var(--un-transform)" }],
+  ["transform-gpu", { transform: transformGpu }],
+  ["transform-none", { transform: "none" }]
+];
+function handleTranslate([, d, b], { theme }) {
+  const v = theme.spacing?.[b] ?? handler.bracket.cssvar.fraction.rem(b);
+  if (v != null) {
+    return [
+      ...xyzMap[d].map((i) => [`--un-translate${i}`, v]),
+      ["transform", "var(--un-transform)"]
+    ];
+  }
+}
+function handleScale([, d, b]) {
+  const v = handler.bracket.cssvar.fraction.percent(b);
+  if (v != null) {
+    return [
+      ...xyzMap[d].map((i) => [`--un-scale${i}`, v]),
+      ["transform", "var(--un-transform)"]
+    ];
+  }
+}
+function handleRotate([, d = "", b]) {
+  const v = handler.bracket.cssvar.degree(b);
+  if (v != null) {
+    if (d) {
+      return {
+        "--un-rotate": 0,
+        [`--un-rotate-${d}`]: v,
+        "transform": "var(--un-transform)"
+      };
+    } else {
+      return {
+        "--un-rotate-x": 0,
+        "--un-rotate-y": 0,
+        "--un-rotate-z": 0,
+        "--un-rotate": v,
+        "transform": "var(--un-transform)"
+      };
+    }
+  }
+}
+function handleSkew([, d, b]) {
+  const v = handler.bracket.cssvar.degree(b);
+  if (v != null) {
+    return {
+      [`--un-skew-${d}`]: v,
+      transform: "var(--un-transform)"
+    };
+  }
+}
+
+export { transforms as a, transformBase as t };

package/dist/chunks/utilities.cjs

@@ -1,6 +1,7 @@
 'use strict';
 
 const core = require('@unocss/core');
+const index = require('./index.cjs');
 
 const cssColorFunctions = ["hsl", "hsla", "hwb", "lab", "lch", "oklab", "oklch", "rgb", "rgba"];
 function hex2rgba(hex = "") {
@@ -221,295 +222,11 @@ function getComponents(str, separator, limit) {
     return components;
 }
 
-const directionMap = {
-  "l": ["-left"],
-  "r": ["-right"],
-  "t": ["-top"],
-  "b": ["-bottom"],
-  "s": ["-inline-start"],
-  "e": ["-inline-end"],
-  "x": ["-left", "-right"],
-  "y": ["-top", "-bottom"],
-  "": [""],
-  "bs": ["-block-start"],
-  "be": ["-block-end"],
-  "is": ["-inline-start"],
-  "ie": ["-inline-end"],
-  "block": ["-block-start", "-block-end"],
-  "inline": ["-inline-start", "-inline-end"]
-};
-const insetMap = {
-  ...directionMap,
-  s: ["-inset-inline-start"],
-  e: ["-inset-inline-end"],
-  bs: ["-inset-block-start"],
-  be: ["-inset-block-end"],
-  is: ["-inset-inline-start"],
-  ie: ["-inset-inline-end"],
-  block: ["-inset-block-start", "-inset-block-end"],
-  inline: ["-inset-inline-start", "-inset-inline-end"]
-};
-const cornerMap = {
-  "l": ["-top-left", "-bottom-left"],
-  "r": ["-top-right", "-bottom-right"],
-  "t": ["-top-left", "-top-right"],
-  "b": ["-bottom-left", "-bottom-right"],
-  "tl": ["-top-left"],
-  "lt": ["-top-left"],
-  "tr": ["-top-right"],
-  "rt": ["-top-right"],
-  "bl": ["-bottom-left"],
-  "lb": ["-bottom-left"],
-  "br": ["-bottom-right"],
-  "rb": ["-bottom-right"],
-  "": [""],
-  "bs": ["-start-start", "-start-end"],
-  "be": ["-end-start", "-end-end"],
-  "is": ["-end-start", "-start-start"],
-  "ie": ["-start-end", "-end-end"],
-  "bs-is": ["-start-start"],
-  "is-bs": ["-start-start"],
-  "bs-ie": ["-start-end"],
-  "ie-bs": ["-start-end"],
-  "be-is": ["-end-start"],
-  "is-be": ["-end-start"],
-  "be-ie": ["-end-end"],
-  "ie-be": ["-end-end"]
-};
-const xyzMap = {
-  "x": ["-x"],
-  "y": ["-y"],
-  "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 cssProps = [
-  "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",
-  "backround-position",
-  "left",
-  "right",
-  "top",
-  "bottom",
-  "object-position",
-  "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",
-  "stroke",
-  "filter",
-  "backdrop-filter",
-  "fill",
-  "mask",
-  "mask-size",
-  "mask-border",
-  "clip-path",
-  "clip",
-  "border-radius"
-];
-const numberWithUnitRE = /^(-?[0-9.]+)(px|pt|pc|rem|em|%|vh|vw|in|cm|mm|ex|ch|vmin|vmax|rpx)?$/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 [, n, unit] = match;
-  const num = parseFloat(n);
-  if (unit && !Number.isNaN(num))
-    return `${round(num)}${unit}`;
-}
-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;
-  const num = parseFloat(n);
-  if (!Number.isNaN(num))
-    return unit ? `${round(num)}${unit}` : `${round(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;
-  const num = parseFloat(n);
-  if (!Number.isNaN(num))
-    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 round(num);
-}
-function percent(str) {
-  if (str.endsWith("%"))
-    str = str.slice(0, -1);
-  const num = parseFloat(str);
-  if (!Number.isNaN(num))
-    return `${round(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 `${round(num * 100)}%`;
-}
-function bracketWithType(str, type) {
-  if (str && str.startsWith("[") && str.endsWith("]")) {
-    let base;
-    const match = str.match(/^\[(color|length|position):/i);
-    if (!match)
-      base = str.slice(1, -1);
-    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 v.replace(/(-?\d*\.?\d(?!\b-.+[,)](?![^+\-/*])\D)(?:%|[a-z]+)?|\))([+\-/*])/g, "$1 $2 ");
-      });
-    }
-  }
-}
-function bracket(str) {
-  return bracketWithType(str);
-}
-function bracketOfColor(str) {
-  return bracketWithType(str, "color");
-}
-function bracketOfLength(str) {
-  return bracketWithType(str, "length");
-}
-function bracketOfPosition(str) {
-  return bracketWithType(str, "position");
-}
-function cssvar(str) {
-  if (str.match(/^\$\S/))
-    return `var(--${core.escapeSelector(str.slice(1))})`;
-}
-function time(str) {
-  const match = str.match(/^(-?[0-9.]+)(s|ms)?$/i);
-  if (!match)
-    return;
-  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|rad|grad|turn)?$/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.split(",").every((prop) => cssProps.includes(prop)))
-    return str;
-}
-
-const valueHandlers = {
-  __proto__: null,
-  numberWithUnit: numberWithUnit,
-  auto: auto,
-  rem: rem,
-  px: px,
-  number: number,
-  percent: percent,
-  fraction: fraction,
-  bracket: bracket,
-  bracketOfColor: bracketOfColor,
-  bracketOfLength: bracketOfLength,
-  bracketOfPosition: bracketOfPosition,
-  cssvar: cssvar,
-  time: time,
-  degree: degree,
-  global: global,
-  properties: properties
-};
-
-const handler = core.createValueHandler(valueHandlers);
-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"] ?? index.handler.bracket.cssvar.auto.fraction.rem(size);
   if (v != null)
-    return directionMap[direction].map((i) => [`${propertyPrefix}${i}`, v]);
+    return index.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) => {
@@ -526,14 +243,14 @@ const parseColor = (body, theme) => {
   if (!name)
     return;
   let color;
-  const bracket = handler.bracketOfColor(main);
+  const bracket = index.handler.bracketOfColor(main);
   const bracketOrMain = bracket || main;
   if (bracketOrMain.startsWith("#"))
     color = bracketOrMain;
   else if (bracketOrMain.startsWith("hex-"))
     color = `#${bracketOrMain.slice(4)}`;
   else if (main.startsWith("$"))
-    color = handler.cssvar(main);
+    color = index.handler.cssvar(main);
   color = color || bracket;
   let no = "DEFAULT";
   if (!color) {
@@ -560,7 +277,7 @@ const parseColor = (body, theme) => {
     no,
     color,
     cssColor: parseCssColor(color),
-    alpha: handler.bracket.cssvar.percent(opacity ?? "")
+    alpha: index.handler.bracket.cssvar.percent(opacity ?? "")
   };
 };
 const colorResolver = (property, varName) => ([, body], { theme }) => {
@@ -623,19 +340,11 @@ exports.CONTROL_MINI_NO_NEGATIVE = CONTROL_MINI_NO_NEGATIVE;
 exports.colorResolver = colorResolver;
 exports.colorToString = colorToString;
 exports.colorableShadows = colorableShadows;
-exports.cornerMap = cornerMap;
-exports.directionMap = directionMap;
 exports.directionSize = directionSize;
 exports.getComponents = getComponents;
-exports.h = h;
-exports.handler = handler;
 exports.hasParseableColor = hasParseableColor;
 exports.hex2rgba = hex2rgba;
-exports.insetMap = insetMap;
 exports.parseColor = parseColor;
 exports.parseCssColor = parseCssColor;
-exports.positionMap = positionMap;
 exports.resolveBreakpoints = resolveBreakpoints;
 exports.resolveVerticalBreakpoints = resolveVerticalBreakpoints;
-exports.valueHandlers = valueHandlers;
-exports.xyzMap = xyzMap;