@unocss/preset-mini 0.22.5 → 0.24.0

package/README.md

@@ -1,6 +1,6 @@
 # @unocss/preset-mini
 
-The minimal preset for [UnoCSS](https://github.com/antfu/unocss).
+The minimal preset for [UnoCSS](https://github.com/unocss/unocss).
 
 ## Installation
 

package/dist/chunks/default.cjs

@@ -124,6 +124,13 @@ const boxShadow = {
   "inner": "inset 0 2px 4px 0 rgba(0,0,0,0.05)",
   "none": "0 0 #0000"
 };
+const easing = {
+  "DEFAULT": "cubic-bezier(0.4, 0, 0.2, 1)",
+  "linear": "linear",
+  "in": "cubic-bezier(0.4, 0, 1, 1)",
+  "out": "cubic-bezier(0, 0, 0.2, 1)",
+  "in-out": "cubic-bezier(0.4, 0, 0.2, 1)"
+};
 
 const blur = {
   "DEFAULT": "8px",
@@ -206,7 +213,8 @@ const theme = {
   textShadow,
   textStrokeWidth,
   blur,
-  dropShadow
+  dropShadow,
+  easing
 };
 
 exports.baseSize = baseSize;
@@ -215,6 +223,7 @@ exports.borderRadius = borderRadius;
 exports.boxShadow = boxShadow;
 exports.breakpoints = breakpoints;
 exports.dropShadow = dropShadow;
+exports.easing = easing;
 exports.fontFamily = fontFamily;
 exports.fontSize = fontSize;
 exports.height = height;

package/dist/chunks/default.mjs

@@ -122,6 +122,13 @@ const boxShadow = {
   "inner": "inset 0 2px 4px 0 rgba(0,0,0,0.05)",
   "none": "0 0 #0000"
 };
+const easing = {
+  "DEFAULT": "cubic-bezier(0.4, 0, 0.2, 1)",
+  "linear": "linear",
+  "in": "cubic-bezier(0.4, 0, 1, 1)",
+  "out": "cubic-bezier(0, 0, 0.2, 1)",
+  "in-out": "cubic-bezier(0.4, 0, 0.2, 1)"
+};
 
 const blur = {
   "DEFAULT": "8px",
@@ -204,7 +211,8 @@ const theme = {
   textShadow,
   textStrokeWidth,
   blur,
-  dropShadow
+  dropShadow,
+  easing
 };
 
-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, baseSize as m, width as n, maxWidth as o, height as p, maxHeight as q, theme as t, wordSpacing as w };
+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, wordSpacing as w };

package/dist/chunks/default2.cjs

@@ -19,9 +19,9 @@ const textAligns = [
 ];
 
 const outline = [
-  [/^outline-(?:width-|size-)?(.+)$/, ([, d]) => ({ "outline-width": utilities.handler.bracket.cssvar.fraction.rem(d) })],
+  [/^outline-(?:width-|size-)?(.+)$/, ([, d]) => ({ "outline-width": utilities.handler.bracket.cssvar.px(d) })],
   [/^outline-(?:color-)?(.+)$/, utilities.colorResolver("outline-color", "outline-color")],
-  [/^outline-offset-(.+)$/, ([, d]) => ({ "outline-offset": utilities.handler.bracket.cssvar.fraction.rem(d) })],
+  [/^outline-offset-(.+)$/, ([, d]) => ({ "outline-offset": utilities.handler.bracket.cssvar.px(d) })],
   ["outline", { "outline-style": "solid" }],
   [/^outline-(auto|dashed|dotted|double|hidden|solid|groove|ridge|inset|outset|inherit|initial|revert|unset)$/, ([, c]) => ({ "outline-style": c })],
   ["outline-none", { "outline": "2px solid transparent", "outline-offset": "2px" }]
@@ -82,31 +82,28 @@ const borderColorResolver = (direction) => ([, body], { theme }) => {
   const data = utilities.parseColor(body, theme);
   if (!data)
     return;
-  const { alpha, opacity, color, rgba } = data;
-  if (!color)
-    return;
-  if (rgba) {
+  const { alpha, color, cssColor } = data;
+  if (cssColor) {
     if (alpha != null) {
       return {
-        [`border${direction}-color`]: `rgba(${rgba.join(",")})`
+        [`border${direction}-color`]: utilities.colorToString(cssColor, alpha)
+      };
+    }
+    if (direction === "") {
+      return {
+        "--un-border-opacity": cssColor.alpha ?? 1,
+        [`border${direction}-color`]: utilities.colorToString(cssColor, `var(--un-border${direction}-opacity)`)
       };
     } else {
-      if (direction === "") {
-        return {
-          "--un-border-opacity": (opacity && utilities.handler.cssvar(opacity)) ?? 1,
-          [`border${direction}-color`]: `rgba(${rgba.join(",")},var(--un-border${direction}-opacity))`
-        };
-      } else {
-        return {
-          "--un-border-opacity": (opacity && utilities.handler.cssvar(opacity)) ?? 1,
-          [`--un-border${direction}-opacity`]: "var(--un-border-opacity)",
-          [`border${direction}-color`]: `rgba(${rgba.join(",")},var(--un-border${direction}-opacity))`
-        };
-      }
+      return {
+        "--un-border-opacity": cssColor.alpha ?? 1,
+        [`--un-border${direction}-opacity`]: "var(--un-border-opacity)",
+        [`border${direction}-color`]: utilities.colorToString(cssColor, `var(--un-border${direction}-opacity)`)
+      };
     }
-  } else {
+  } else if (color) {
     return {
-      [`border${direction}-color`]: color.replace("%alpha", `${alpha || 1}`)
+      [`border${direction}-color`]: color.replace("%alpha", `${alpha ?? 1}`)
     };
   }
 };
@@ -155,6 +152,7 @@ const bgColors = [
 const transitionPropertyGroup = {
   all: "all",
   colors: ["color", "background-color", "border-color", "text-decoration-color", "fill", "stroke"].join(","),
+  none: "none",
   opacity: "opacity",
   shadow: "box-shadow",
   transform: "transform"
@@ -168,22 +166,15 @@ const transitions = [
     if (p) {
       return {
         "transition-property": p,
-        "transition-timing-function": "cubic-bezier(0.4,0,0.2,1)",
+        "transition-timing-function": "cubic-bezier(0.4, 0, 0.2, 1)",
         "transition-duration": `${duration}ms`
       };
     }
   }],
   [/^(?:transition-)?duration-(.+)$/, ([, d]) => ({ "transition-duration": utilities.handler.bracket.cssvar.time(d) })],
   [/^(?:transition-)?delay-(.+)$/, ([, d]) => ({ "transition-delay": utilities.handler.bracket.cssvar.time(d) })],
-  [/^ease-(.+)$/, ([, d]) => ({ "transition-timing-function": utilities.handler.bracket.cssvar(d) })],
-  ["ease", { "transition-timing-function": "cubic-bezier(0.4, 0, 0.2, 1)" }],
-  ["ease-linear", { "transition-timing-function": "linear" }],
-  ["ease-in", { "transition-timing-function": "cubic-bezier(0.4, 0, 1, 1)" }],
-  ["ease-out", { "transition-timing-function": "cubic-bezier(0, 0, 0.2, 1)" }],
-  ["ease-in-out", { "transition-timing-function": "cubic-bezier(0.4, 0, 0.2, 1)" }],
+  [/^(?:transition-)?ease(?:-(.+))?$/, ([, d], { theme }) => ({ "transition-timing-function": theme.easing?.[d || "DEFAULT"] ?? utilities.handler.bracket.cssvar(d) })],
   [/^(?:transition-)?property-(.+)$/, ([, v]) => ({ "transition-property": utilities.handler.global(v) || transitionProperty(v) })],
-  ["transition-property-none", { "transition-property": "none" }],
-  ["property-none", { "transition-property": "none" }],
   ["transition-none", { transition: "none" }]
 ];
 
@@ -210,117 +201,6 @@ const flex = [
   ["flex-nowrap", { "flex-wrap": "nowrap" }]
 ];
 
-const varEmpty = "var(--un-empty,/*!*/ /*!*/)";
-const displays = [
-  ["inline", { display: "inline" }],
-  ["block", { display: "block" }],
-  ["inline-block", { display: "inline-block" }],
-  ["contents", { display: "contents" }],
-  ["flow-root", { display: "flow-root" }],
-  ["list-item", { display: "list-item" }],
-  ["hidden", { display: "none" }]
-];
-const appearances = [
-  ["visible", { visibility: "visible" }],
-  ["invisible", { visibility: "hidden" }],
-  ["backface-visible", { "backface-visibility": "visible" }],
-  ["backface-hidden", { "backface-visibility": "hidden" }]
-];
-const cursors = [
-  [/^cursor-(.+)$/, ([, c]) => ({ cursor: utilities.handler.bracket.cssvar(c) || c })]
-];
-const pointerEvents = [
-  ["pointer-events-auto", { "pointer-events": "auto" }],
-  ["pointer-events-none", { "pointer-events": "none" }]
-];
-const resizes = [
-  ["resize-x", { resize: "horizontal" }],
-  ["resize-y", { resize: "vertical" }],
-  ["resize", { resize: "both" }],
-  ["resize-none", { resize: "none" }]
-];
-const userSelects = [
-  ["select-auto", { "user-select": "auto" }],
-  ["select-all", { "user-select": "all" }],
-  ["select-text", { "user-select": "text" }],
-  ["select-none", { "user-select": "none" }]
-];
-const whitespaces = [
-  [/^(?:whitespace|ws)-(normal|nowrap|pre|pre-line|pre-wrap)$/, ([, v]) => ({ "white-space": v })]
-];
-const contents = [
-  ["content-empty", { content: '""' }],
-  ["content-none", { content: '""' }]
-];
-const breaks = [
-  ["break-normal", { "overflow-wrap": "normal", "word-break": "normal" }],
-  ["break-words", { "overflow-wrap": "break-word" }],
-  ["break-all", { "word-break": "break-all" }]
-];
-const textOverflows = [
-  ["truncate", { "overflow": "hidden", "text-overflow": "ellipsis", "white-space": "nowrap" }],
-  ["text-ellipsis", { "text-overflow": "ellipsis" }],
-  ["text-clip", { "text-overflow": "clip" }]
-];
-const textTransforms = [
-  ["case-upper", { "text-transform": "uppercase" }],
-  ["case-lower", { "text-transform": "lowercase" }],
-  ["case-capital", { "text-transform": "capitalize" }],
-  ["case-normal", { "text-transform": "none" }]
-];
-const fontStyles = [
-  ["italic", { "font-style": "italic" }],
-  ["not-italic", { "font-style": "normal" }]
-];
-const fontSmoothings = [
-  ["antialiased", {
-    "-webkit-font-smoothing": "antialiased",
-    "-moz-osx-font-smoothing": "grayscale",
-    "font-smoothing": "grayscale"
-  }],
-  ["subpixel-antialiased", {
-    "-webkit-font-smoothing": "auto",
-    "-moz-osx-font-smoothing": "auto",
-    "font-smoothing": "auto"
-  }]
-];
-
-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 colorableShadows = (shadows, colorVar) => {
-  const colored = [];
-  shadows = core.toArray(shadows);
-  for (let i = 0; i < shadows.length; i++) {
-    const [size, color] = shadows[i].split(/\s(\S+)$/);
-    if (color.split("(").length !== color.split(")").length)
-      return shadows;
-    colored.push(`${size} var(${colorVar}, ${color})`);
-  }
-  return colored;
-};
-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-(.+)$/, 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 weightMap = {
   thin: "100",
   extralight: "200",
@@ -376,7 +256,7 @@ const textShadows = [
     const v = theme.textShadow?.[s || "DEFAULT"];
     if (v != null) {
       return {
-        "--un-text-shadow": colorableShadows(v, "--un-text-shadow-color").join(","),
+        "--un-text-shadow": utilities.colorableShadows(v, "--un-text-shadow-color").join(","),
         "text-shadow": "var(--un-text-shadow)"
       };
     }
@@ -545,14 +425,114 @@ const floats = [
   ["clear-none", { clear: "none" }]
 ];
 const zIndexes = [
-  [/^z-(.+)$/, ([, v]) => ({ "z-index": utilities.handler.bracket.cssvar.number(v) })],
-  ["z-auto", { "z-index": "auto" }]
+  [/^z-(.+)$/, ([, v]) => ({ "z-index": utilities.handler.bracket.cssvar.auto.number(v) })]
 ];
 const boxSizing = [
   ["box-border", { "box-sizing": "border-box" }],
   ["box-content", { "box-sizing": "content-box" }]
 ];
 
+const varEmpty = "var(--un-empty,/*!*/ /*!*/)";
+const displays = [
+  ["inline", { display: "inline" }],
+  ["block", { display: "block" }],
+  ["inline-block", { display: "inline-block" }],
+  ["contents", { display: "contents" }],
+  ["flow-root", { display: "flow-root" }],
+  ["list-item", { display: "list-item" }],
+  ["hidden", { display: "none" }],
+  [/^display-(.+)$/, ([, c]) => ({ display: utilities.handler.bracket.cssvar(c) || c })]
+];
+const appearances = [
+  ["visible", { visibility: "visible" }],
+  ["invisible", { visibility: "hidden" }],
+  ["backface-visible", { "backface-visibility": "visible" }],
+  ["backface-hidden", { "backface-visibility": "hidden" }]
+];
+const cursors = [
+  [/^cursor-(.+)$/, ([, c]) => ({ cursor: utilities.handler.bracket.cssvar(c) || c })]
+];
+const pointerEvents = [
+  ["pointer-events-auto", { "pointer-events": "auto" }],
+  ["pointer-events-none", { "pointer-events": "none" }]
+];
+const resizes = [
+  ["resize-x", { resize: "horizontal" }],
+  ["resize-y", { resize: "vertical" }],
+  ["resize", { resize: "both" }],
+  ["resize-none", { resize: "none" }]
+];
+const userSelects = [
+  ["select-auto", { "user-select": "auto" }],
+  ["select-all", { "user-select": "all" }],
+  ["select-text", { "user-select": "text" }],
+  ["select-none", { "user-select": "none" }]
+];
+const whitespaces = [
+  [/^(?:whitespace|ws)-(normal|nowrap|pre|pre-line|pre-wrap)$/, ([, v]) => ({ "white-space": v })]
+];
+const contents = [
+  ["content-empty", { content: '""' }],
+  ["content-none", { content: '""' }]
+];
+const breaks = [
+  ["break-normal", { "overflow-wrap": "normal", "word-break": "normal" }],
+  ["break-words", { "overflow-wrap": "break-word" }],
+  ["break-all", { "word-break": "break-all" }]
+];
+const textOverflows = [
+  ["truncate", { "overflow": "hidden", "text-overflow": "ellipsis", "white-space": "nowrap" }],
+  ["text-ellipsis", { "text-overflow": "ellipsis" }],
+  ["text-clip", { "text-overflow": "clip" }]
+];
+const textTransforms = [
+  ["case-upper", { "text-transform": "uppercase" }],
+  ["case-lower", { "text-transform": "lowercase" }],
+  ["case-capital", { "text-transform": "capitalize" }],
+  ["case-normal", { "text-transform": "none" }]
+];
+const fontStyles = [
+  ["italic", { "font-style": "italic" }],
+  ["not-italic", { "font-style": "normal" }]
+];
+const fontSmoothings = [
+  ["antialiased", {
+    "-webkit-font-smoothing": "antialiased",
+    "-moz-osx-font-smoothing": "grayscale",
+    "font-smoothing": "grayscale"
+  }],
+  ["subpixel-antialiased", {
+    "-webkit-font-smoothing": "auto",
+    "-moz-osx-font-smoothing": "auto",
+    "font-smoothing": "auto"
+  }]
+];
+
+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,
@@ -806,10 +786,10 @@ const variablesAbbrMap = {
   ws: "white-space"
 };
 const cssVariables = [
-  [/^(.+?)-\$(.+)$/, ([, name, varname]) => {
+  [/^(.+?)-(\$.+)$/, ([, name, varname]) => {
     const prop = variablesAbbrMap[name];
     if (prop)
-      return { [prop]: `var(--${varname})` };
+      return { [prop]: utilities.handler.cssvar(varname) };
   }]
 ];
 const cssProperty = [
@@ -828,11 +808,7 @@ ${constructCSS({ animation: "__un_qm 0.5s ease-in-out alternate infinite" })}`;
 ];
 
 const textDecorations = [
-  ["underline", { "text-decoration-line": "underline" }],
-  ["overline", { "text-decoration-line": "overline" }],
-  ["line-through", { "text-decoration-line": "line-through" }],
-  ["decoration-underline", { "text-decoration-line": "underline" }],
-  ["decoration-line-through", { "text-decoration-line": "line-through" }],
+  [/^(?:decoration-)?(underline|overline|line-through)$/, ([, s]) => ({ "text-decoration-line": s })],
   [/^(?:underline|decoration)-(?:size-)?(.+)$/, ([, s]) => ({ "text-decoration-thickness": utilities.handler.bracket.cssvar.px(s) })],
   [/^(?:underline|decoration)-(auto|from-font)$/, ([, s]) => ({ "text-decoration-thickness": s })],
   [/^(?:underline|decoration)-(.+)$/, (match, ctx) => {
@@ -937,7 +913,6 @@ exports.borders = borders;
 exports.boxShadows = boxShadows;
 exports.boxSizing = boxSizing;
 exports.breaks = breaks;
-exports.colorableShadows = colorableShadows;
 exports.contents = contents;
 exports.cssProperty = cssProperty;
 exports.cssVariables = cssVariables;