@unocss/preset-mini 0.42.1 → 0.43.2

package/README.md

@@ -82,6 +82,54 @@ will generate:
 }
 ```
 
+### Theme
+You can fully customize your theme property in your config, and UnoCSS will eventually deeply merge it to the default theme.
+
+<!--eslint-skip-->
+
+```ts
+presetMini({
+  theme: {
+    // ...
+    colors: {
+      'veryCool': '#0000ff', // class="text-very-cool"
+      'brand': {
+        'primary': 'hsla(var(--hue, 217), 78%, 51%)', //class="bg-brand-primary"
+      }
+    },
+  }
+})
+```
+
+To consume the theme in rules:
+
+```ts
+rules: [
+  [/^text-(.*)$/, ([, c], { theme }) => {
+    if (theme.colors[c])
+      return { color: theme.colors[c] }
+  }],
+]
+```
+
+One exception is that UnoCSS gives full control of `breakpoints` to users. When a custom `breakpoints` is provided, the default will be overridden instead of merging. For example:
+
+```ts
+presetMini({
+  theme: {
+    // ...
+    breakpoints: {
+      sm: '320px',
+      md: '640px',
+    },
+  },
+})
+```
+
+Right now, you can only use the `sm:` and `md:` breakpoint variants.
+
+`verticalBreakpoints` is same as `breakpoints` but for vertical layout.
+
 ## License
 
 MIT License &copy; 2021-PRESENT [Anthony Fu](https://github.com/antfu)

package/dist/chunks/{utilities.cjs → colors2.cjs}

@@ -96,233 +96,6 @@ const globalKeywords = [
   "unset"
 ];
 
-const cssColorFunctions = ["hsl", "hsla", "hwb", "lab", "lch", "oklab", "oklch", "rgb", "rgba"];
-const alphaPlaceholders = ["%alpha", "<alpha-value>"];
-const alphaPlaceholdersRE = new RegExp(alphaPlaceholders.map((v) => core.escapeRegExp(v)).join("|"));
-function hex2rgba(hex = "") {
-  const color = parseHexColor(hex);
-  if (color != null) {
-    const { components, alpha } = color;
-    if (alpha == null)
-      return components;
-    return [...components, alpha];
-  }
-}
-function parseCssColor(str = "") {
-  const color = parseColor$1(str);
-  if (color == null || color === false)
-    return;
-  const { type: casedType, components, alpha } = color;
-  const type = casedType.toLowerCase();
-  if (components.length === 0)
-    return;
-  if (["rgba", "hsla"].includes(type) && alpha == null)
-    return;
-  if (cssColorFunctions.includes(type) && ![1, 3].includes(components.length))
-    return;
-  return { type, components, alpha };
-}
-function colorOpacityToString(color) {
-  const alpha = color.alpha ?? 1;
-  return typeof alpha === "string" && alphaPlaceholders.includes(alpha) ? 1 : alpha;
-}
-function colorToString(color, alphaOverride) {
-  if (typeof color === "string")
-    return color.replace(alphaPlaceholdersRE, `${alphaOverride ?? 1}`);
-  const { components } = color;
-  let { alpha, type } = color;
-  alpha = alphaOverride ?? alpha;
-  type = type.toLowerCase();
-  if (["hsla", "hsl", "rgba", "rgb"].includes(type))
-    return `${type.replace("a", "")}a(${components.join(",")}${alpha == null ? "" : `,${alpha}`})`;
-  alpha = alpha == null ? "" : ` / ${alpha}`;
-  if (cssColorFunctions.includes(type))
-    return `${type}(${components.join(" ")}${alpha})`;
-  return `color(${type} ${components.join(" ")}${alpha})`;
-}
-function parseColor$1(str) {
-  if (!str)
-    return;
-  let color = parseHexColor(str);
-  if (color != null)
-    return color;
-  color = cssColorKeyword(str);
-  if (color != null)
-    return color;
-  color = parseCssCommaColorFunction(str);
-  if (color != null)
-    return color;
-  color = parseCssSpaceColorFunction(str);
-  if (color != null)
-    return color;
-  color = parseCssColorFunction(str);
-  if (color != null)
-    return color;
-}
-function parseHexColor(str) {
-  const [, body] = str.match(/^#([\da-f]+)$/i) || [];
-  if (!body)
-    return;
-  switch (body.length) {
-    case 3:
-    case 4:
-      const digits = Array.from(body, (s) => Number.parseInt(s, 16)).map((n) => n << 4 | n);
-      return {
-        type: "rgb",
-        components: digits.slice(0, 3),
-        alpha: body.length === 3 ? void 0 : Math.round(digits[3] / 255 * 100) / 100
-      };
-    case 6:
-    case 8:
-      const value = Number.parseInt(body, 16);
-      return {
-        type: "rgb",
-        components: body.length === 6 ? [value >> 16 & 255, value >> 8 & 255, value & 255] : [value >> 24 & 255, value >> 16 & 255, value >> 8 & 255],
-        alpha: body.length === 6 ? void 0 : Math.round((value & 255) / 255 * 100) / 100
-      };
-  }
-}
-function cssColorKeyword(str) {
-  const color = {
-    rebeccapurple: [102, 51, 153, 1]
-  }[str];
-  if (color != null) {
-    return {
-      type: "rgb",
-      components: color.slice(0, 3),
-      alpha: color[3]
-    };
-  }
-}
-function parseCssCommaColorFunction(color) {
-  const match = color.match(/^(rgb|rgba|hsl|hsla)\((.+)\)$/i);
-  if (!match)
-    return;
-  const [, type, componentString] = match;
-  const components = getComponents(componentString, ",", 5);
-  if (components) {
-    if ([3, 4].includes(components.length)) {
-      return {
-        type,
-        components: components.slice(0, 3),
-        alpha: components[3]
-      };
-    } else if (components.length !== 1) {
-      return false;
-    }
-  }
-}
-const cssColorFunctionsRe = new RegExp(`^(${cssColorFunctions.join("|")})\\((.+)\\)$`, "i");
-function parseCssSpaceColorFunction(color) {
-  const match = color.match(cssColorFunctionsRe);
-  if (!match)
-    return;
-  const [, fn, componentString] = match;
-  const parsed = parseCssSpaceColorValues(`${fn} ${componentString}`);
-  if (parsed) {
-    const { alpha, components: [type, ...components] } = parsed;
-    return {
-      type,
-      components,
-      alpha
-    };
-  }
-}
-function parseCssColorFunction(color) {
-  const match = color.match(/^color\((.+)\)$/);
-  if (!match)
-    return;
-  const parsed = parseCssSpaceColorValues(match[1]);
-  if (parsed) {
-    const { alpha, components: [type, ...components] } = parsed;
-    return {
-      type,
-      components,
-      alpha
-    };
-  }
-}
-function parseCssSpaceColorValues(componentString) {
-  const components = getComponents(componentString);
-  if (!components)
-    return;
-  let totalComponents = components.length;
-  if (components[totalComponents - 2] === "/") {
-    return {
-      components: components.slice(0, totalComponents - 2),
-      alpha: components[totalComponents - 1]
-    };
-  }
-  if (components[totalComponents - 2] != null && (components[totalComponents - 2].endsWith("/") || components[totalComponents - 1].startsWith("/"))) {
-    const removed = components.splice(totalComponents - 2);
-    components.push(removed.join(" "));
-    --totalComponents;
-  }
-  const withAlpha = getComponents(components[totalComponents - 1], "/", 3);
-  if (!withAlpha)
-    return;
-  if (withAlpha.length === 1 || withAlpha[withAlpha.length - 1] === "")
-    return { components };
-  const alpha = withAlpha.pop();
-  components[totalComponents - 1] = withAlpha.join("/");
-  return {
-    components,
-    alpha
-  };
-}
-function getComponent(str, separator) {
-  str = str.trim();
-  if (str === "")
-    return;
-  const l = str.length;
-  let parenthesis = 0;
-  for (let i = 0; i < l; i++) {
-    switch (str[i]) {
-      case "(":
-        parenthesis++;
-        break;
-      case ")":
-        if (--parenthesis < 0)
-          return;
-        break;
-      case separator:
-        if (parenthesis === 0) {
-          const component = str.slice(0, i).trim();
-          if (component === "")
-            return;
-          return [
-            component,
-            str.slice(i + 1).trim()
-          ];
-        }
-    }
-  }
-  return [
-    str,
-    ""
-  ];
-}
-function getComponents(str, separator, limit) {
-  separator = separator ?? " ";
-  if (separator.length !== 1)
-    return;
-  limit = limit ?? 10;
-  const components = [];
-  let i = 0;
-  while (str !== "") {
-    if (++i > limit)
-      return;
-    const componentPair = getComponent(str, separator);
-    if (!componentPair)
-      return;
-    const [component, rest] = componentPair;
-    components.push(component);
-    str = rest;
-  }
-  if (components.length > 0)
-    return components;
-}
-
 const cssProps = [
   "color",
   "border-color",
@@ -533,7 +306,7 @@ const directionSize = (propertyPrefix) => ([_, direction, size], { theme }) => {
     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 parseColor$1 = (body, theme) => {
   const split = body.split(/(?:\/|:)/);
   let main, opacity;
   if (split[0] === "[color") {
@@ -585,7 +358,7 @@ const parseColor = (body, theme) => {
   };
 };
 const colorResolver = (property, varName) => ([, body], { theme }) => {
-  const data = parseColor(body, theme);
+  const data = parseColor$1(body, theme);
   if (!data)
     return;
   const { alpha, color, cssColor } = data;
@@ -621,7 +394,7 @@ const colorableShadows = (shadows, colorVar) => {
   return colored;
 };
 const hasParseableColor = (color, theme) => {
-  return color != null && !!parseColor(color, theme)?.color;
+  return color != null && !!parseColor$1(color, theme)?.color;
 };
 const resolveBreakpoints = ({ theme, generator }) => {
   let breakpoints;
@@ -642,6 +415,234 @@ const resolveVerticalBreakpoints = ({ theme, generator }) => {
 const makeGlobalStaticRules = (prefix, property) => {
   return globalKeywords.map((keyword) => [`${prefix}-${keyword}`, { [property ?? prefix]: keyword }]);
 };
+function getComponent(str, open, close, separator) {
+  if (str === "")
+    return;
+  const l = str.length;
+  let parenthesis = 0;
+  for (let i = 0; i < l; i++) {
+    switch (str[i]) {
+      case open:
+        parenthesis++;
+        break;
+      case close:
+        if (--parenthesis < 0)
+          return;
+        break;
+      case separator:
+        if (parenthesis === 0) {
+          if (i === 0 || i === l - 1)
+            return;
+          return [
+            str.slice(0, i),
+            str.slice(i + 1)
+          ];
+        }
+    }
+  }
+  return [
+    str,
+    ""
+  ];
+}
+function getComponents(str, separator, limit) {
+  if (separator.length !== 1)
+    return;
+  limit = limit ?? 10;
+  const components = [];
+  let i = 0;
+  while (str !== "") {
+    if (++i > limit)
+      return;
+    const componentPair = getComponent(str, "(", ")", separator);
+    if (!componentPair)
+      return;
+    const [component, rest] = componentPair;
+    components.push(component);
+    str = rest;
+  }
+  if (components.length > 0)
+    return components;
+}
+
+const cssColorFunctions = ["hsl", "hsla", "hwb", "lab", "lch", "oklab", "oklch", "rgb", "rgba"];
+const alphaPlaceholders = ["%alpha", "<alpha-value>"];
+const alphaPlaceholdersRE = new RegExp(alphaPlaceholders.map((v) => core.escapeRegExp(v)).join("|"));
+function hex2rgba(hex = "") {
+  const color = parseHexColor(hex);
+  if (color != null) {
+    const { components, alpha } = color;
+    if (alpha == null)
+      return components;
+    return [...components, alpha];
+  }
+}
+function parseCssColor(str = "") {
+  const color = parseColor(str);
+  if (color == null || color === false)
+    return;
+  const { type: casedType, components, alpha } = color;
+  const type = casedType.toLowerCase();
+  if (components.length === 0)
+    return;
+  if (["rgba", "hsla"].includes(type) && alpha == null)
+    return;
+  if (cssColorFunctions.includes(type) && ![1, 3].includes(components.length))
+    return;
+  return {
+    type,
+    components: components.map((c) => typeof c === "string" ? c.trim() : c),
+    alpha: typeof alpha === "string" ? alpha.trim() : alpha
+  };
+}
+function colorOpacityToString(color) {
+  const alpha = color.alpha ?? 1;
+  return typeof alpha === "string" && alphaPlaceholders.includes(alpha) ? 1 : alpha;
+}
+function colorToString(color, alphaOverride) {
+  if (typeof color === "string")
+    return color.replace(alphaPlaceholdersRE, `${alphaOverride ?? 1}`);
+  const { components } = color;
+  let { alpha, type } = color;
+  alpha = alphaOverride ?? alpha;
+  type = type.toLowerCase();
+  if (["hsla", "hsl", "rgba", "rgb"].includes(type))
+    return `${type.replace("a", "")}a(${components.join(",")}${alpha == null ? "" : `,${alpha}`})`;
+  alpha = alpha == null ? "" : ` / ${alpha}`;
+  if (cssColorFunctions.includes(type))
+    return `${type}(${components.join(" ")}${alpha})`;
+  return `color(${type} ${components.join(" ")}${alpha})`;
+}
+function parseColor(str) {
+  if (!str)
+    return;
+  let color = parseHexColor(str);
+  if (color != null)
+    return color;
+  color = cssColorKeyword(str);
+  if (color != null)
+    return color;
+  color = parseCssCommaColorFunction(str);
+  if (color != null)
+    return color;
+  color = parseCssSpaceColorFunction(str);
+  if (color != null)
+    return color;
+  color = parseCssColorFunction(str);
+  if (color != null)
+    return color;
+}
+function parseHexColor(str) {
+  const [, body] = str.match(/^#([\da-f]+)$/i) || [];
+  if (!body)
+    return;
+  switch (body.length) {
+    case 3:
+    case 4:
+      const digits = Array.from(body, (s) => Number.parseInt(s, 16)).map((n) => n << 4 | n);
+      return {
+        type: "rgb",
+        components: digits.slice(0, 3),
+        alpha: body.length === 3 ? void 0 : Math.round(digits[3] / 255 * 100) / 100
+      };
+    case 6:
+    case 8:
+      const value = Number.parseInt(body, 16);
+      return {
+        type: "rgb",
+        components: body.length === 6 ? [value >> 16 & 255, value >> 8 & 255, value & 255] : [value >> 24 & 255, value >> 16 & 255, value >> 8 & 255],
+        alpha: body.length === 6 ? void 0 : Math.round((value & 255) / 255 * 100) / 100
+      };
+  }
+}
+function cssColorKeyword(str) {
+  const color = {
+    rebeccapurple: [102, 51, 153, 1]
+  }[str];
+  if (color != null) {
+    return {
+      type: "rgb",
+      components: color.slice(0, 3),
+      alpha: color[3]
+    };
+  }
+}
+function parseCssCommaColorFunction(color) {
+  const match = color.match(/^(rgb|rgba|hsl|hsla)\((.+)\)$/i);
+  if (!match)
+    return;
+  const [, type, componentString] = match;
+  const components = getComponents(componentString, ",", 5);
+  if (components) {
+    if ([3, 4].includes(components.length)) {
+      return {
+        type,
+        components: components.slice(0, 3),
+        alpha: components[3]
+      };
+    } else if (components.length !== 1) {
+      return false;
+    }
+  }
+}
+const cssColorFunctionsRe = new RegExp(`^(${cssColorFunctions.join("|")})\\((.+)\\)$`, "i");
+function parseCssSpaceColorFunction(color) {
+  const match = color.match(cssColorFunctionsRe);
+  if (!match)
+    return;
+  const [, fn, componentString] = match;
+  const parsed = parseCssSpaceColorValues(`${fn} ${componentString}`);
+  if (parsed) {
+    const { alpha, components: [type, ...components] } = parsed;
+    return {
+      type,
+      components,
+      alpha
+    };
+  }
+}
+function parseCssColorFunction(color) {
+  const match = color.match(/^color\((.+)\)$/);
+  if (!match)
+    return;
+  const parsed = parseCssSpaceColorValues(match[1]);
+  if (parsed) {
+    const { alpha, components: [type, ...components] } = parsed;
+    return {
+      type,
+      components,
+      alpha
+    };
+  }
+}
+function parseCssSpaceColorValues(componentString) {
+  const components = getComponents(componentString, " ");
+  if (!components)
+    return;
+  let totalComponents = components.length;
+  if (components[totalComponents - 2] === "/") {
+    return {
+      components: components.slice(0, totalComponents - 2),
+      alpha: components[totalComponents - 1]
+    };
+  }
+  if (components[totalComponents - 2] != null && (components[totalComponents - 2].endsWith("/") || components[totalComponents - 1].startsWith("/"))) {
+    const removed = components.splice(totalComponents - 2);
+    components.push(removed.join(" "));
+    --totalComponents;
+  }
+  const withAlpha = getComponents(components[totalComponents - 1], "/", 2);
+  if (!withAlpha)
+    return;
+  if (withAlpha.length === 1 || withAlpha[withAlpha.length - 1] === "")
+    return { components };
+  const alpha = withAlpha.pop();
+  components[totalComponents - 1] = withAlpha.join("/");
+  return {
+    components,
+    alpha
+  };
+}
 
 exports.CONTROL_MINI_NO_NEGATIVE = CONTROL_MINI_NO_NEGATIVE;
 exports.colorOpacityToString = colorOpacityToString;
@@ -651,6 +652,7 @@ exports.colorableShadows = colorableShadows;
 exports.cornerMap = cornerMap;
 exports.directionMap = directionMap;
 exports.directionSize = directionSize;
+exports.getComponent = getComponent;
 exports.getComponents = getComponents;
 exports.globalKeywords = globalKeywords;
 exports.h = h;
@@ -659,7 +661,7 @@ exports.hasParseableColor = hasParseableColor;
 exports.hex2rgba = hex2rgba;
 exports.insetMap = insetMap;
 exports.makeGlobalStaticRules = makeGlobalStaticRules;
-exports.parseColor = parseColor;
+exports.parseColor = parseColor$1;
 exports.parseCssColor = parseCssColor;
 exports.positionMap = positionMap;
 exports.resolveBreakpoints = resolveBreakpoints;