@unocss/preset-mini 0.16.4 → 0.17.2

package/dist/chunks/default3.cjs

@@ -120,7 +120,8 @@ const variants = [
   variantBreakpoints,
   ...variantCombinators,
   pseudo.variantPseudoClasses,
-  pseudo.variantPseudoElements
+  pseudo.variantPseudoElements,
+  pseudo.partClasses
 ];
 
 exports.variantBreakpoints = variantBreakpoints;

package/dist/chunks/default3.mjs

@@ -1,5 +1,5 @@
 import { v as variantMatcher } from './variants.mjs';
-import { v as variantPseudoClasses, a as variantPseudoElements } from './pseudo.mjs';
+import { v as variantPseudoClasses, a as variantPseudoElements, p as partClasses } from './pseudo.mjs';
 
 const regexCache = {};
 const variantBreakpoints = (matcher, _, theme) => {
@@ -118,7 +118,8 @@ const variants = [
   variantBreakpoints,
   ...variantCombinators,
   variantPseudoClasses,
-  variantPseudoElements
+  variantPseudoElements,
+  partClasses
 ];
 
 export { variantColorsMedia as a, variantColorsClass as b, variantBreakpoints as c, variantCombinators as d, variantImportant as e, variantNegative as f, variantSpace as g, variants as v };

package/dist/chunks/pseudo.cjs

@@ -46,6 +46,7 @@ const PseudoElements = [
   "first-line",
   "selection"
 ];
+const PartClassesRE = /(part-\[(.+)]:)(.+)/;
 const PseudoElementsRE = new RegExp(`^(${PseudoElements.join("|")})[:-]`);
 const PseudoClassesStr = Object.keys(PseudoClasses).join("|");
 const PseudoClassesRE = new RegExp(`^(${PseudoClassesStr})[:-]`);
@@ -105,8 +106,24 @@ const variantPseudoClasses = {
   },
   multiPass: true
 };
+const partClasses = {
+  match: (input) => {
+    const match = input.match(PartClassesRE);
+    if (match) {
+      const part = `part(${match[2]})`;
+      return {
+        matcher: input.slice(match[1].length),
+        selector: (s, body) => {
+          return shouldAdd(body) && `${s}::${part}`;
+        }
+      };
+    }
+  },
+  multiPass: true
+};
 
 exports.CONTROL_BYPASS_PSEUDO_CLASS = CONTROL_BYPASS_PSEUDO_CLASS;
 exports.PseudoClasses = PseudoClasses;
+exports.partClasses = partClasses;
 exports.variantPseudoClasses = variantPseudoClasses;
 exports.variantPseudoElements = variantPseudoElements;

package/dist/chunks/pseudo.mjs

@@ -44,6 +44,7 @@ const PseudoElements = [
   "first-line",
   "selection"
 ];
+const PartClassesRE = /(part-\[(.+)]:)(.+)/;
 const PseudoElementsRE = new RegExp(`^(${PseudoElements.join("|")})[:-]`);
 const PseudoClassesStr = Object.keys(PseudoClasses).join("|");
 const PseudoClassesRE = new RegExp(`^(${PseudoClassesStr})[:-]`);
@@ -103,5 +104,20 @@ const variantPseudoClasses = {
   },
   multiPass: true
 };
+const partClasses = {
+  match: (input) => {
+    const match = input.match(PartClassesRE);
+    if (match) {
+      const part = `part(${match[2]})`;
+      return {
+        matcher: input.slice(match[1].length),
+        selector: (s, body) => {
+          return shouldAdd(body) && `${s}::${part}`;
+        }
+      };
+    }
+  },
+  multiPass: true
+};
 
-export { CONTROL_BYPASS_PSEUDO_CLASS as C, PseudoClasses as P, variantPseudoElements as a, variantPseudoClasses as v };
+export { CONTROL_BYPASS_PSEUDO_CLASS as C, PseudoClasses as P, variantPseudoElements as a, partClasses as p, variantPseudoClasses as v };

package/dist/chunks/utilities.cjs

@@ -36,12 +36,64 @@ const xyzMap = {
   "": ["-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) {
-  if (str === "auto" || str === "a")
-    return "auto";
   const match = str.match(numberWithUnitRE);
   if (!match)
     return;
@@ -49,9 +101,11 @@ function numberWithUnit(str) {
   if (unit)
     return str;
 }
-function rem(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);
@@ -122,10 +176,20 @@ 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,
@@ -134,7 +198,8 @@ const valueHandlers = {
   bracket: bracket,
   cssvar: cssvar,
   time: time,
-  global: global
+  global: global,
+  properties: properties
 };
 
 const handler = core.createValueHandler(valueHandlers);
@@ -143,17 +208,87 @@ const h = handler;
 function capitalize(str) {
   return str.charAt(0).toUpperCase() + str.slice(1);
 }
-const directionSize = (prefix) => ([_, direction, size]) => {
-  const v = handler.bracket.rem.fraction.cssvar(size);
-  if (v)
-    return directionMap[direction].map((i) => [prefix + i, v]);
+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

@@ -1,4 +1,4 @@
-import { createValueHandler } from '@unocss/core';
+import { createValueHandler, hex2rgba } from '@unocss/core';
 
 const directionMap = {
   "l": ["-left"],
@@ -34,12 +34,64 @@ const xyzMap = {
   "": ["-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) {
-  if (str === "auto" || str === "a")
-    return "auto";
   const match = str.match(numberWithUnitRE);
   if (!match)
     return;
@@ -47,9 +99,11 @@ function numberWithUnit(str) {
   if (unit)
     return str;
 }
-function rem(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);
@@ -120,10 +174,20 @@ 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,
@@ -132,7 +196,8 @@ const valueHandlers = {
   bracket: bracket,
   cssvar: cssvar,
   time: time,
-  global: global
+  global: global,
+  properties: properties
 };
 
 const handler = createValueHandler(valueHandlers);
@@ -141,10 +206,78 @@ const h = handler;
 function capitalize(str) {
   return str.charAt(0).toUpperCase() + str.slice(1);
 }
-const directionSize = (prefix) => ([_, direction, size]) => {
-  const v = handler.bracket.rem.fraction.cssvar(size);
-  if (v)
-    return directionMap[direction].map((i) => [prefix + i, v]);
+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 { capitalize as a, directionSize as b, cornerMap as c, directionMap as d, h as e, handler as h, valueHandlers as v, xyzMap as x };
+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/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('@unocss/core');
 require('./chunks/utilities.cjs');
+require('@unocss/core');
 require('./chunks/pseudo.cjs');
 require('./chunks/variants.cjs');
 

package/dist/index.mjs

@@ -3,8 +3,8 @@ 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';
 export { c as colors } from './chunks/colors.mjs';
-import '@unocss/core';
 import './chunks/utilities.mjs';
+import '@unocss/core';
 import './chunks/pseudo.mjs';
 import './chunks/variants.mjs';
 

package/dist/rules.cjs

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const _default = require('./chunks/default2.cjs');
-require('@unocss/core');
 require('./chunks/utilities.cjs');
+require('@unocss/core');
 require('./chunks/pseudo.cjs');
 
 
@@ -19,9 +19,7 @@ exports.borders = _default.borders;
 exports.boxShadows = _default.boxShadows;
 exports.boxSizing = _default.boxSizing;
 exports.breaks = _default.breaks;
-exports.colorResolver = _default.colorResolver;
 exports.contents = _default.contents;
-exports.cssProps = _default.cssProps;
 exports.cssVariables = _default.cssVariables;
 exports.cursors = _default.cursors;
 exports.displays = _default.displays;
@@ -40,7 +38,6 @@ exports.orders = _default.orders;
 exports.outline = _default.outline;
 exports.overflows = _default.overflows;
 exports.paddings = _default.paddings;
-exports.parseColorUtil = _default.parseColorUtil;
 exports.placeholder = _default.placeholder;
 exports.placements = _default.placements;
 exports.pointerEvents = _default.pointerEvents;

package/dist/rules.d.ts

@@ -1,4 +1,4 @@
-import { Rule, RuleContext } from '@unocss/core';
+import { Rule } from '@unocss/core';
 import { T as Theme } from './types-7963d0b3';
 
 declare const verticalAligns: Rule[];
@@ -11,16 +11,6 @@ declare const willChange: Rule[];
 
 declare const borders: Rule[];
 
-declare const parseColorUtil: (body: string, theme: Theme) => {
-    opacity: string;
-    name: string;
-    no: string;
-    color: string | undefined;
-    rgba: [number, number, number, number] | [number, number, number] | undefined;
-} | undefined;
-declare const colorResolver: (attribute: string, varName: string) => ([, body]: string[], { theme }: RuleContext<Theme>) => {
-    [x: string]: string | number;
-} | undefined;
 /**
  * @example op10 op-30 opacity-100
  */
@@ -71,7 +61,6 @@ declare const aspectRatio: Rule[];
 declare const paddings: Rule[];
 declare const margins: Rule[];
 
-declare const cssProps: string[];
 declare const varEmpty = "var(--un-empty,/*!*/ /*!*/)";
 declare const displays: Rule[];
 declare const appearances: Rule[];
@@ -103,4 +92,4 @@ declare const cssVariables: Rule[];
 
 declare const textDecorations: Rule[];
 
-export { alignments, appearance, appearances, aspectRatio, bgColors, borderColors, borders, boxShadows, boxSizing, breaks, colorResolver, contents, cssProps, cssVariables, cursors, displays, flex, floats, fontSmoothings, fontStyles, fonts, gaps, grids, insets, justifies, margins, opacity, orders, outline, overflows, paddings, parseColorUtil, placeholder, placements, pointerEvents, positions, questionMark, resizes, ringColors, ringOffsetColors, rings, rules, sizes, svgUtilities, tabSizes, textAligns, textColors, textDecorations, textIndents, textOverflows, textShadows, textStrokes, textTransforms, transforms, transitions, userSelects, varEmpty, verticalAligns, whitespaces, willChange, zIndexes };
+export { alignments, appearance, appearances, aspectRatio, bgColors, borderColors, borders, boxShadows, boxSizing, breaks, contents, cssVariables, cursors, displays, flex, floats, fontSmoothings, fontStyles, fonts, gaps, grids, insets, justifies, margins, opacity, orders, outline, overflows, paddings, placeholder, placements, pointerEvents, positions, questionMark, resizes, ringColors, ringOffsetColors, rings, rules, sizes, svgUtilities, tabSizes, textAligns, textColors, textDecorations, textIndents, textOverflows, textShadows, textStrokes, textTransforms, transforms, transitions, userSelects, varEmpty, verticalAligns, whitespaces, willChange, zIndexes };

package/dist/rules.mjs

@@ -1,4 +1,4 @@
-export { x as alignments, a as appearance, N as appearances, H as aspectRatio, g as bgColors, h as borderColors, b as borders, F as boxShadows, C as boxSizing, U as breaks, d as colorResolver, T as contents, K as cssProps, a5 as cssVariables, O as cursors, M as displays, k as flex, A as floats, Y as fontSmoothings, X as fontStyles, a0 as fonts, l as gaps, m as grids, z as insets, s as justifies, J as margins, e as opacity, u as orders, o as outline, n as overflows, I as paddings, c as parseColorUtil, p as placeholder, y as placements, P as pointerEvents, q as positions, D as questionMark, Q as resizes, i as ringColors, j as ringOffsetColors, E as rings, r as rules, G as sizes, Z as svgUtilities, a1 as tabSizes, t as textAligns, f as textColors, a6 as textDecorations, a2 as textIndents, V as textOverflows, a4 as textShadows, a3 as textStrokes, W as textTransforms, _ as transforms, $ as transitions, R as userSelects, L as varEmpty, v as verticalAligns, S as whitespaces, w as willChange, B as zIndexes } from './chunks/default2.mjs';
-import '@unocss/core';
+export { s as alignments, a as appearance, K as appearances, F as aspectRatio, e as bgColors, f as borderColors, b as borders, D as boxShadows, A as boxSizing, R as breaks, Q as contents, a2 as cssVariables, L as cursors, J as displays, i as flex, y as floats, V as fontSmoothings, U as fontStyles, Z as fonts, j as gaps, k as grids, x as insets, n as justifies, H as margins, c as opacity, q as orders, o as outline, l as overflows, G as paddings, p as placeholder, u as placements, M as pointerEvents, m as positions, B as questionMark, N as resizes, g as ringColors, h as ringOffsetColors, C as rings, r as rules, E as sizes, W as svgUtilities, _ as tabSizes, t as textAligns, d as textColors, a3 as textDecorations, $ as textIndents, S as textOverflows, a1 as textShadows, a0 as textStrokes, T as textTransforms, X as transforms, Y as transitions, O as userSelects, I as varEmpty, v as verticalAligns, P as whitespaces, w as willChange, z as zIndexes } from './chunks/default2.mjs';
 import './chunks/utilities.mjs';
+import '@unocss/core';
 import './chunks/pseudo.mjs';

package/dist/utils.cjs

@@ -9,11 +9,13 @@ require('@unocss/core');
 
 
 exports.capitalize = utilities.capitalize;
+exports.colorResolver = utilities.colorResolver;
 exports.cornerMap = utilities.cornerMap;
 exports.directionMap = utilities.directionMap;
 exports.directionSize = utilities.directionSize;
 exports.h = utilities.h;
 exports.handler = utilities.handler;
+exports.parseColor = utilities.parseColor;
 exports.valueHandlers = utilities.valueHandlers;
 exports.xyzMap = utilities.xyzMap;
 exports.variantMatcher = variants.variantMatcher;