@unocss/preset-mini 0.45.30 → 0.46.1

package/dist/{colors-67ae184f.d.ts → colors-4d254848.d.ts}

@@ -1,4 +1,4 @@
-import { T as Theme } from './types-c22910b5.js';
+import { T as Theme } from './types-3dbe7f66.js';
 
 declare const colors: Theme['colors'];
 

package/dist/colors.d.ts

@@ -1,2 +1,3 @@
-export { c as colors } from './colors-67ae184f.js';
-import './types-c22910b5.js';
+export { c as colors } from './colors-4d254848.js';
+import './types-3dbe7f66.js';
+import '@unocss/core';

package/dist/{default-016bd463.d.ts → default-9096842f.d.ts}

@@ -1,4 +1,4 @@
-import { T as Theme } from './types-c22910b5.js';
+import { T as Theme } from './types-3dbe7f66.js';
 
 declare const theme: Theme;
 

package/dist/index.cjs

@@ -3,13 +3,13 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const core = require('@unocss/core');
-require('./shared/preset-mini.740f2131.cjs');
-const colors$1 = require('./shared/preset-mini.2d0396b3.cjs');
-const _default$1 = require('./shared/preset-mini.5e4ef283.cjs');
+require('./shared/preset-mini.7f221566.cjs');
+const colors$1 = require('./shared/preset-mini.0109bbf2.cjs');
+const _default$1 = require('./shared/preset-mini.f5f22d9a.cjs');
 const colors = require('./shared/preset-mini.30606736.cjs');
-const _default = require('./shared/preset-mini.2ee569b4.cjs');
-const _default$2 = require('./shared/preset-mini.5c501ea4.cjs');
-require('./shared/preset-mini.6d3bd985.cjs');
+const _default = require('./shared/preset-mini.7c4b1c47.cjs');
+const _default$2 = require('./shared/preset-mini.fc97229a.cjs');
+require('./shared/preset-mini.968d02ba.cjs');
 
 const preflights = [
   {
@@ -17,7 +17,8 @@ const preflights = [
     getCSS(ctx) {
       if (ctx.theme.preflightBase) {
         const css = core.entriesToCss(Object.entries(ctx.theme.preflightBase));
-        return `*,::before,::after{${css}}::backdrop{${css}}`;
+        const roots = core.toArray(ctx.theme.preflightRoot ?? ["*,::before,::after", "::backdrop"]);
+        return roots.map((root) => `${root}{${css}}`).join("");
       }
     }
   }

package/dist/index.d.ts

@@ -1,9 +1,9 @@
 import { Preflight, PresetOptions, Preset } from '@unocss/core';
-export { c as colors } from './colors-67ae184f.js';
-export { t as theme } from './default-016bd463.js';
-import { T as Theme } from './types-c22910b5.js';
-export { T as Theme, a as ThemeAnimation } from './types-c22910b5.js';
-export { p as parseColor } from './utilities-d1833377.js';
+export { c as colors } from './colors-4d254848.js';
+export { t as theme } from './default-9096842f.js';
+import { T as Theme } from './types-3dbe7f66.js';
+export { T as Theme, a as ThemeAnimation } from './types-3dbe7f66.js';
+export { p as parseColor } from './utilities-8393c8ff.js';
 
 declare const preflights: Preflight[];
 

package/dist/index.mjs

@@ -1,12 +1,12 @@
-import { entriesToCss } from '@unocss/core';
-import './shared/preset-mini.7c9c225a.mjs';
-export { p as parseColor } from './shared/preset-mini.7d4b2219.mjs';
-import { r as rules } from './shared/preset-mini.389e54ff.mjs';
+import { entriesToCss, toArray } from '@unocss/core';
+import './shared/preset-mini.739fdcc7.mjs';
+export { p as parseColor } from './shared/preset-mini.9c5f881e.mjs';
+import { r as rules } from './shared/preset-mini.13105b6e.mjs';
 export { c as colors } from './shared/preset-mini.65ac75be.mjs';
-import { t as theme } from './shared/preset-mini.b0834387.mjs';
-export { t as theme } from './shared/preset-mini.b0834387.mjs';
-import { v as variants } from './shared/preset-mini.3a35507d.mjs';
-import './shared/preset-mini.f73f9ed7.mjs';
+import { t as theme } from './shared/preset-mini.ae98d318.mjs';
+export { t as theme } from './shared/preset-mini.ae98d318.mjs';
+import { v as variants } from './shared/preset-mini.9e26490c.mjs';
+import './shared/preset-mini.154e3363.mjs';
 
 const preflights = [
   {
@@ -14,7 +14,8 @@ const preflights = [
     getCSS(ctx) {
       if (ctx.theme.preflightBase) {
         const css = entriesToCss(Object.entries(ctx.theme.preflightBase));
-        return `*,::before,::after{${css}}::backdrop{${css}}`;
+        const roots = toArray(ctx.theme.preflightRoot ?? ["*,::before,::after", "::backdrop"]);
+        return roots.map((root) => `${root}{${css}}`).join("");
       }
     }
   }

package/dist/rules.cjs

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const decoration = require('./shared/preset-mini.740f2131.cjs');
-const _default = require('./shared/preset-mini.5e4ef283.cjs');
-require('./shared/preset-mini.2d0396b3.cjs');
+const decoration = require('./shared/preset-mini.7f221566.cjs');
+const _default = require('./shared/preset-mini.f5f22d9a.cjs');
+require('./shared/preset-mini.0109bbf2.cjs');
 require('@unocss/core');
 
 

package/dist/rules.d.ts

@@ -1,5 +1,5 @@
 import { Rule, CSSEntries } from '@unocss/core';
-import { T as Theme } from './types-c22910b5.js';
+import { T as Theme } from './types-3dbe7f66.js';
 
 declare const verticalAligns: Rule[];
 declare const textAligns: Rule[];

package/dist/rules.mjs

@@ -1,4 +1,4 @@
-export { F as alignments, C as appearance, s as appearances, R as borderStyles, b as borders, o as boxShadows, P as boxShadowsBase, K as boxSizing, z as breaks, c as contentVisibility, a as contents, q as cursors, d as displays, I as floats, n as fontSmoothings, m as fontStyles, f as fonts, S as handlerBorderStyle, H as insets, E as justifies, D as orders, B as outline, A as overflows, G as placements, u as pointerEvents, p as positions, v as resizes, Q as ringBase, r as rings, t as tabSizes, l as textAligns, h as textDecorations, e as textIndents, g as textOverflows, j as textShadows, i as textStrokes, k as textTransforms, O as transformBase, M as transforms, L as transitions, x as userSelects, T as varEmpty, w as verticalAligns, y as whitespaces, N as willChange, J as zIndexes } from './shared/preset-mini.7c9c225a.mjs';
-export { c as aspectRatio, b as bgColors, h as cssProperty, e as cssVariables, f as flex, g as gaps, a as grids, m as margins, o as opacity, p as paddings, q as questionMark, r as rules, s as sizes, d as svgUtilities, t as textColors } from './shared/preset-mini.389e54ff.mjs';
-import './shared/preset-mini.7d4b2219.mjs';
+export { F as alignments, C as appearance, s as appearances, R as borderStyles, b as borders, o as boxShadows, P as boxShadowsBase, K as boxSizing, z as breaks, c as contentVisibility, a as contents, q as cursors, d as displays, I as floats, n as fontSmoothings, m as fontStyles, f as fonts, S as handlerBorderStyle, H as insets, E as justifies, D as orders, B as outline, A as overflows, G as placements, u as pointerEvents, p as positions, v as resizes, Q as ringBase, r as rings, t as tabSizes, l as textAligns, h as textDecorations, e as textIndents, g as textOverflows, j as textShadows, i as textStrokes, k as textTransforms, O as transformBase, M as transforms, L as transitions, x as userSelects, T as varEmpty, w as verticalAligns, y as whitespaces, N as willChange, J as zIndexes } from './shared/preset-mini.739fdcc7.mjs';
+export { c as aspectRatio, b as bgColors, h as cssProperty, e as cssVariables, f as flex, g as gaps, a as grids, m as margins, o as opacity, p as paddings, q as questionMark, r as rules, s as sizes, d as svgUtilities, t as textColors } from './shared/preset-mini.13105b6e.mjs';
+import './shared/preset-mini.9c5f881e.mjs';
 import '@unocss/core';

package/dist/shared/{preset-mini.2d0396b3.cjs → preset-mini.0109bbf2.cjs}

@@ -217,7 +217,7 @@ function fraction(str) {
   if (!Number.isNaN(num))
     return `${round(num * 100)}%`;
 }
-const bracketTypeRe = /^\[(color|length|position|raw|string):/i;
+const bracketTypeRe = /^\[(color|length|position|quoted|string):/i;
 function bracketWithType(str, requiredType) {
   if (str && str.startsWith("[") && str.endsWith("]")) {
     let base;
@@ -245,10 +245,10 @@ function bracketWithType(str, requiredType) {
     if (curly)
       return;
     switch (hintedType) {
-      case "raw":
-        return base;
       case "string":
-        return base.replace(/(^|[^\\])_/g, "$1 ").replace(/\\_/g, "_").replace(/(['\\])/g, "\\$1").replace(/^(.+)$/, "'$1'");
+        return base.replace(/(^|[^\\])_/g, "$1 ").replace(/\\_/g, "_");
+      case "quoted":
+        return base.replace(/(^|[^\\])_/g, "$1 ").replace(/\\_/g, "_").replace(/(["\\])/g, "\\$1").replace(/^(.+)$/, '"$1"');
     }
     return base.replace(/(url\(.*?\))/g, (v) => v.replace(/_/g, "\\_")).replace(/(^|[^\\])_/g, "$1 ").replace(/\\_/g, "_").replace(/(?:calc|clamp|max|min)\((.*)/g, (v) => {
       return v.replace(/(-?\d*\.?\d(?!\b-.+[,)](?![^+\-/*])\D)(?:%|[a-z]+)?|\))([+\-/*])/g, "$1 $2 ");
@@ -464,29 +464,67 @@ function resolveVerticalBreakpoints({ theme, generator }) {
 function makeGlobalStaticRules(prefix, property) {
   return globalKeywords.map((keyword) => [`${prefix}-${keyword}`, { [property ?? prefix]: keyword }]);
 }
-function getComponent(str, open, close, separator) {
+function getBracket(str, open, close) {
   if (str === "")
     return;
   const l = str.length;
   let parenthesis = 0;
+  let opened = false;
+  let openAt = 0;
   for (let i = 0; i < l; i++) {
     switch (str[i]) {
       case open:
+        if (!opened) {
+          opened = true;
+          openAt = i;
+        }
         parenthesis++;
         break;
       case close:
-        if (--parenthesis < 0)
+        --parenthesis;
+        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)
+            str.slice(openAt, i + 1),
+            str.slice(i + 1),
+            str.slice(0, openAt)
           ];
         }
+        break;
+    }
+  }
+}
+function getComponent(str, open, close, separators) {
+  if (str === "")
+    return;
+  if (core.isString(separators))
+    separators = [separators];
+  if (separators.length === 0)
+    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;
+      default:
+        for (const separator of separators) {
+          const separatorLength = separator.length;
+          if (separatorLength && separator === str.slice(i, i + separatorLength) && parenthesis === 0) {
+            if (i === 0 || i === l - separatorLength)
+              return;
+            return [
+              str.slice(0, i),
+              str.slice(i + separatorLength)
+            ];
+          }
+        }
     }
   }
   return [
@@ -494,16 +532,14 @@ function getComponent(str, open, close, separator) {
     ""
   ];
 }
-function getComponents(str, separator, limit) {
-  if (separator.length !== 1)
-    return;
+function getComponents(str, separators, limit) {
   limit = limit ?? 10;
   const components = [];
   let i = 0;
   while (str !== "") {
     if (++i > limit)
       return;
-    const componentPair = getComponent(str, "(", ")", separator);
+    const componentPair = getComponent(str, "(", ")", separators);
     if (!componentPair)
       return;
     const [component, rest] = componentPair;
@@ -701,6 +737,7 @@ exports.colorableShadows = colorableShadows;
 exports.cornerMap = cornerMap;
 exports.directionMap = directionMap;
 exports.directionSize = directionSize;
+exports.getBracket = getBracket;
 exports.getComponent = getComponent;
 exports.getComponents = getComponents;
 exports.globalKeywords = globalKeywords;

package/dist/shared/{preset-mini.389e54ff.mjs → preset-mini.13105b6e.mjs}

@@ -1,5 +1,5 @@
-import { d as displays, b as borders, c as contentVisibility, a as contents, f as fonts, t as tabSizes, e as textIndents, g as textOverflows, h as textDecorations, i as textStrokes, j as textShadows, k as textTransforms, l as textAligns, m as fontStyles, n as fontSmoothings, o as boxShadows, r as rings, p as positions, q as cursors, s as appearances, u as pointerEvents, v as resizes, w as verticalAligns, x as userSelects, y as whitespaces, z as breaks, A as overflows, B as outline, C as appearance, D as orders, E as justifies, F as alignments, G as placements, H as insets, I as floats, J as zIndexes, K as boxSizing, L as transitions, M as transforms, N as willChange } from './preset-mini.7c9c225a.mjs';
-import { h as handler, c as colorResolver, n as numberWithUnitRE, r as resolveVerticalBreakpoints, l as resolveBreakpoints, o as directionSize } from './preset-mini.7d4b2219.mjs';
+import { d as displays, b as borders, c as contentVisibility, a as contents, f as fonts, t as tabSizes, e as textIndents, g as textOverflows, h as textDecorations, i as textStrokes, j as textShadows, k as textTransforms, l as textAligns, m as fontStyles, n as fontSmoothings, o as boxShadows, r as rings, p as positions, q as cursors, s as appearances, u as pointerEvents, v as resizes, w as verticalAligns, x as userSelects, y as whitespaces, z as breaks, A as overflows, B as outline, C as appearance, D as orders, E as justifies, F as alignments, G as placements, H as insets, I as floats, J as zIndexes, K as boxSizing, L as transitions, M as transforms, N as willChange } from './preset-mini.739fdcc7.mjs';
+import { h as handler, c as colorResolver, n as numberWithUnitRE, r as resolveVerticalBreakpoints, l as resolveBreakpoints, o as directionSize } from './preset-mini.9c5f881e.mjs';
 import '@unocss/core';
 
 const opacity = [

package/dist/shared/preset-mini.154e3363.mjs

@@ -0,0 +1,67 @@
+import { escapeRegExp } from '@unocss/core';
+import { q as getBracket } from './preset-mini.9c5f881e.mjs';
+
+const variantMatcher = (name, handler) => {
+  const re = new RegExp(`^${escapeRegExp(name)}[:-]`);
+  return {
+    name,
+    match(input) {
+      const match = input.match(re);
+      if (match) {
+        return {
+          matcher: input.slice(match[0].length),
+          handle: (input2, next) => next({
+            ...input2,
+            ...handler(input2)
+          })
+        };
+      }
+    },
+    autocomplete: `${name}:`
+  };
+};
+const variantParentMatcher = (name, parent) => {
+  const re = new RegExp(`^${escapeRegExp(name)}[:-]`);
+  return {
+    name,
+    match(input) {
+      const match = input.match(re);
+      if (match) {
+        return {
+          matcher: input.slice(match[0].length),
+          handle: (input2, next) => next({
+            ...input2,
+            parent: `${input2.parent ? `${input2.parent} $$ ` : ""}${parent}`
+          })
+        };
+      }
+    },
+    autocomplete: `${name}:`
+  };
+};
+const variantGetBracket = (name, matcher, separators) => {
+  if (matcher.startsWith(`${name}-[`)) {
+    const [match, rest] = getBracket(matcher.slice(name.length + 1), "[", "]") ?? [];
+    if (match && rest) {
+      for (const separator of separators) {
+        if (rest.startsWith(separator))
+          return [match, rest.slice(separator.length), separator];
+      }
+      return [match, rest, ""];
+    }
+  }
+};
+const variantGetParameter = (name, matcher, separators) => {
+  if (matcher.startsWith(`${name}-`)) {
+    const body = variantGetBracket(name, matcher, separators);
+    if (body)
+      return body;
+    for (const separator of separators) {
+      const pos = matcher.indexOf(separator, name.length + 1);
+      if (pos !== -1)
+        return [matcher.slice(name.length + 1, pos), matcher.slice(pos + separator.length)];
+    }
+  }
+};
+
+export { variantParentMatcher as a, variantGetParameter as b, variantMatcher as c, variantGetBracket as v };

package/dist/shared/{preset-mini.7c9c225a.mjs → preset-mini.739fdcc7.mjs}

@@ -1,4 +1,4 @@
-import { g as globalKeywords, h as handler, c as colorResolver, d as directionMap, a as hasParseableColor, b as cornerMap, p as parseColor, e as colorToString, f as colorOpacityToString, m as makeGlobalStaticRules, i as colorableShadows, j as insetMap, k as positionMap, x as xyzMap } from './preset-mini.7d4b2219.mjs';
+import { g as globalKeywords, h as handler, c as colorResolver, d as directionMap, a as hasParseableColor, b as cornerMap, p as parseColor, e as colorToString, f as colorOpacityToString, m as makeGlobalStaticRules, i as colorableShadows, j as insetMap, k as positionMap, x as xyzMap } from './preset-mini.9c5f881e.mjs';
 import { toArray } from '@unocss/core';
 
 const verticalAlignAlias = {
@@ -485,8 +485,7 @@ const contentVisibility = [
   ...makeGlobalStaticRules("content-visibility")
 ];
 const contents = [
-  [/^content-\[(.+)\]$/, ([, v]) => ({ content: `"${v}"` })],
-  [/^content-(\$.+)]$/, ([, v]) => ({ content: handler.cssvar(v) })],
+  [/^content-(.+)$/, ([, v]) => ({ content: handler.bracket.cssvar(v) })],
   ["content-empty", { content: '""' }],
   ["content-none", { content: '""' }]
 ];

package/dist/shared/{preset-mini.2ee569b4.cjs → preset-mini.7c4b1c47.cjs}

@@ -1,8 +1,8 @@
 'use strict';
 
 const colors = require('./preset-mini.30606736.cjs');
-const decoration = require('./preset-mini.740f2131.cjs');
-require('./preset-mini.2d0396b3.cjs');
+const decoration = require('./preset-mini.7f221566.cjs');
+require('./preset-mini.0109bbf2.cjs');
 require('@unocss/core');
 
 const fontFamily = {

package/dist/shared/{preset-mini.740f2131.cjs → preset-mini.7f221566.cjs}

@@ -1,6 +1,6 @@
 'use strict';
 
-const colors = require('./preset-mini.2d0396b3.cjs');
+const colors = require('./preset-mini.0109bbf2.cjs');
 const core = require('@unocss/core');
 
 const verticalAlignAlias = {
@@ -487,8 +487,7 @@ const contentVisibility = [
   ...colors.makeGlobalStaticRules("content-visibility")
 ];
 const contents = [
-  [/^content-\[(.+)\]$/, ([, v]) => ({ content: `"${v}"` })],
-  [/^content-(\$.+)]$/, ([, v]) => ({ content: colors.handler.cssvar(v) })],
+  [/^content-(.+)$/, ([, v]) => ({ content: colors.handler.bracket.cssvar(v) })],
   ["content-empty", { content: '""' }],
   ["content-none", { content: '""' }]
 ];

package/dist/shared/preset-mini.968d02ba.cjs

@@ -0,0 +1,72 @@
+'use strict';
+
+const core = require('@unocss/core');
+const colors = require('./preset-mini.0109bbf2.cjs');
+
+const variantMatcher = (name, handler) => {
+  const re = new RegExp(`^${core.escapeRegExp(name)}[:-]`);
+  return {
+    name,
+    match(input) {
+      const match = input.match(re);
+      if (match) {
+        return {
+          matcher: input.slice(match[0].length),
+          handle: (input2, next) => next({
+            ...input2,
+            ...handler(input2)
+          })
+        };
+      }
+    },
+    autocomplete: `${name}:`
+  };
+};
+const variantParentMatcher = (name, parent) => {
+  const re = new RegExp(`^${core.escapeRegExp(name)}[:-]`);
+  return {
+    name,
+    match(input) {
+      const match = input.match(re);
+      if (match) {
+        return {
+          matcher: input.slice(match[0].length),
+          handle: (input2, next) => next({
+            ...input2,
+            parent: `${input2.parent ? `${input2.parent} $$ ` : ""}${parent}`
+          })
+        };
+      }
+    },
+    autocomplete: `${name}:`
+  };
+};
+const variantGetBracket = (name, matcher, separators) => {
+  if (matcher.startsWith(`${name}-[`)) {
+    const [match, rest] = colors.getBracket(matcher.slice(name.length + 1), "[", "]") ?? [];
+    if (match && rest) {
+      for (const separator of separators) {
+        if (rest.startsWith(separator))
+          return [match, rest.slice(separator.length), separator];
+      }
+      return [match, rest, ""];
+    }
+  }
+};
+const variantGetParameter = (name, matcher, separators) => {
+  if (matcher.startsWith(`${name}-`)) {
+    const body = variantGetBracket(name, matcher, separators);
+    if (body)
+      return body;
+    for (const separator of separators) {
+      const pos = matcher.indexOf(separator, name.length + 1);
+      if (pos !== -1)
+        return [matcher.slice(name.length + 1, pos), matcher.slice(pos + separator.length)];
+    }
+  }
+};
+
+exports.variantGetBracket = variantGetBracket;
+exports.variantGetParameter = variantGetParameter;
+exports.variantMatcher = variantMatcher;
+exports.variantParentMatcher = variantParentMatcher;

package/dist/shared/{preset-mini.7d4b2219.mjs → preset-mini.9c5f881e.mjs}

@@ -1,4 +1,4 @@
-import { escapeSelector, createValueHandler, toArray, escapeRegExp } from '@unocss/core';
+import { escapeSelector, createValueHandler, toArray, isString, escapeRegExp } from '@unocss/core';
 
 const directionMap = {
   "l": ["-left"],
@@ -215,7 +215,7 @@ function fraction(str) {
   if (!Number.isNaN(num))
     return `${round(num * 100)}%`;
 }
-const bracketTypeRe = /^\[(color|length|position|raw|string):/i;
+const bracketTypeRe = /^\[(color|length|position|quoted|string):/i;
 function bracketWithType(str, requiredType) {
   if (str && str.startsWith("[") && str.endsWith("]")) {
     let base;
@@ -243,10 +243,10 @@ function bracketWithType(str, requiredType) {
     if (curly)
       return;
     switch (hintedType) {
-      case "raw":
-        return base;
       case "string":
-        return base.replace(/(^|[^\\])_/g, "$1 ").replace(/\\_/g, "_").replace(/(['\\])/g, "\\$1").replace(/^(.+)$/, "'$1'");
+        return base.replace(/(^|[^\\])_/g, "$1 ").replace(/\\_/g, "_");
+      case "quoted":
+        return base.replace(/(^|[^\\])_/g, "$1 ").replace(/\\_/g, "_").replace(/(["\\])/g, "\\$1").replace(/^(.+)$/, '"$1"');
     }
     return base.replace(/(url\(.*?\))/g, (v) => v.replace(/_/g, "\\_")).replace(/(^|[^\\])_/g, "$1 ").replace(/\\_/g, "_").replace(/(?:calc|clamp|max|min)\((.*)/g, (v) => {
       return v.replace(/(-?\d*\.?\d(?!\b-.+[,)](?![^+\-/*])\D)(?:%|[a-z]+)?|\))([+\-/*])/g, "$1 $2 ");
@@ -462,29 +462,67 @@ function resolveVerticalBreakpoints({ theme, generator }) {
 function makeGlobalStaticRules(prefix, property) {
   return globalKeywords.map((keyword) => [`${prefix}-${keyword}`, { [property ?? prefix]: keyword }]);
 }
-function getComponent(str, open, close, separator) {
+function getBracket(str, open, close) {
   if (str === "")
     return;
   const l = str.length;
   let parenthesis = 0;
+  let opened = false;
+  let openAt = 0;
   for (let i = 0; i < l; i++) {
     switch (str[i]) {
       case open:
+        if (!opened) {
+          opened = true;
+          openAt = i;
+        }
         parenthesis++;
         break;
       case close:
-        if (--parenthesis < 0)
+        --parenthesis;
+        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)
+            str.slice(openAt, i + 1),
+            str.slice(i + 1),
+            str.slice(0, openAt)
           ];
         }
+        break;
+    }
+  }
+}
+function getComponent(str, open, close, separators) {
+  if (str === "")
+    return;
+  if (isString(separators))
+    separators = [separators];
+  if (separators.length === 0)
+    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;
+      default:
+        for (const separator of separators) {
+          const separatorLength = separator.length;
+          if (separatorLength && separator === str.slice(i, i + separatorLength) && parenthesis === 0) {
+            if (i === 0 || i === l - separatorLength)
+              return;
+            return [
+              str.slice(0, i),
+              str.slice(i + separatorLength)
+            ];
+          }
+        }
     }
   }
   return [
@@ -492,16 +530,14 @@ function getComponent(str, open, close, separator) {
     ""
   ];
 }
-function getComponents(str, separator, limit) {
-  if (separator.length !== 1)
-    return;
+function getComponents(str, separators, limit) {
   limit = limit ?? 10;
   const components = [];
   let i = 0;
   while (str !== "") {
     if (++i > limit)
       return;
-    const componentPair = getComponent(str, "(", ")", separator);
+    const componentPair = getComponent(str, "(", ")", separators);
     if (!componentPair)
       return;
     const [component, rest] = componentPair;
@@ -691,4 +727,4 @@ function parseCssSpaceColorValues(componentString) {
   };
 }
 
-export { CONTROL_MINI_NO_NEGATIVE as C, hasParseableColor as a, cornerMap as b, colorResolver as c, directionMap as d, colorToString as e, colorOpacityToString as f, globalKeywords as g, handler as h, colorableShadows as i, insetMap as j, positionMap as k, resolveBreakpoints as l, makeGlobalStaticRules as m, numberWithUnitRE as n, directionSize as o, parseColor$1 as p, getComponent as q, resolveVerticalBreakpoints as r, hex2rgba as s, parseCssColor as t, h as u, valueHandlers as v, getComponents as w, xyzMap as x };
+export { CONTROL_MINI_NO_NEGATIVE as C, hasParseableColor as a, cornerMap as b, colorResolver as c, directionMap as d, colorToString as e, colorOpacityToString as f, globalKeywords as g, handler as h, colorableShadows as i, insetMap as j, positionMap as k, resolveBreakpoints as l, makeGlobalStaticRules as m, numberWithUnitRE as n, directionSize as o, parseColor$1 as p, getBracket as q, resolveVerticalBreakpoints as r, getComponent as s, hex2rgba as t, parseCssColor as u, h as v, valueHandlers as w, xyzMap as x, getComponents as y };