@unocss/preset-mini 0.35.2 → 0.36.0

package/dist/chunks/default2.mjs

@@ -1,5 +1,7 @@
-import { h as handler, c as colorResolver, d as directionMap, a as hasParseableColor, p as parseColor, b as colorToString, e as cornerMap, f as colorableShadows, i as insetMap, r as resolveVerticalBreakpoints, g as resolveBreakpoints, j as directionSize, C as CONTROL_MINI_NO_NEGATIVE, k as positionMap, x as xyzMap } from './utilities.mjs';
+import { g as globalKeywords, h as handler, d as directionMap, c as cornerMap, i as insetMap } from './index.mjs';
+import { c as colorResolver, h as hasParseableColor, p as parseColor, a as colorToString, b as colorableShadows, r as resolveVerticalBreakpoints, d as resolveBreakpoints, e as directionSize } from './utilities.mjs';
 import { toArray, CONTROL_SHORTCUT_NO_MERGE } from '@unocss/core';
+import { a as transforms } from './transform.mjs';
 
 const verticalAlignAlias = {
   "mid": "middle",
@@ -17,14 +19,14 @@ const verticalAlignAlias = {
 const verticalAligns = [
   [/^(?:vertical|align|v)-(.+)$/, ([, v]) => ({ "vertical-align": verticalAlignAlias[v] }), { autocomplete: `(vertical|align|v)-(${Object.keys(verticalAlignAlias).join("|")})` }]
 ];
-const textAligns = ["center", "left", "right", "justify", "start", "end", "inherit", "initial", "unset", "revert"].map((v) => [`text-${v}`, { "text-align": v }]);
+const textAligns = ["center", "left", "right", "justify", "start", "end", ...globalKeywords].map((v) => [`text-${v}`, { "text-align": v }]);
 
 const outline = [
   [/^outline-(?:width-|size-)?(.+)$/, ([, d], { theme }) => ({ "outline-width": theme.lineWidth?.[d] ?? handler.bracket.cssvar.px(d) }), { autocomplete: "outline-(width|size)-<num>" }],
   [/^outline-(?:color-)?(.+)$/, colorResolver("outline-color", "outline-color"), { autocomplete: "outline-$colors" }],
   [/^outline-offset-(.+)$/, ([, d], { theme }) => ({ "outline-offset": theme.lineWidth?.[d] ?? handler.bracket.cssvar.px(d) }), { autocomplete: "outline-(offset)-<num>" }],
   ["outline", { "outline-style": "solid" }],
-  ...["auto", "dashed", "dotted", "double", "hidden", "solid", "groove", "ridge", "inset", "outset", "inherit", "initial", "revert", "unset"].map((v) => [`outline-${v}`, { "outline-style": v }]),
+  ...["auto", "dashed", "dotted", "double", "hidden", "solid", "groove", "ridge", "inset", "outset", ...globalKeywords].map((v) => [`outline-${v}`, { "outline-style": v }]),
   ["outline-none", { "outline": "2px solid transparent", "outline-offset": "2px" }]
 ];
 const appearance = [
@@ -43,7 +45,7 @@ const willChange = [
   [/^will-change-(.+)/, ([, p]) => ({ "will-change": willChangeProperty(p) })]
 ];
 
-const borderStyles = ["solid", "dashed", "dotted", "double", "hidden", "none", "groove", "ridge", "inset", "outset", "initial", "inherit", "revert", "unset"];
+const borderStyles = ["solid", "dashed", "dotted", "double", "hidden", "none", "groove", "ridge", "inset", "outset", ...globalKeywords];
 const borders = [
   [/^(?:border|b)()(?:-(.+))?$/, handlerBorder, { autocomplete: "(border|b)-<directions>" }],
   [/^(?:border|b)-([xy])(?:-(.+))?$/, handlerBorder],
@@ -193,7 +195,7 @@ const transitions = [
   [
     /^(?:transition-)?property-(.+)$/,
     ([, v]) => ({ "transition-property": handler.global(v) || transitionProperty(v) }),
-    { autocomplete: [`transition-property-(${["inherit", "initial", "revert", "unset", ...Object.keys(transitionPropertyGroup)].join("|")})`] }
+    { autocomplete: [`transition-property-(${[...globalKeywords, ...Object.keys(transitionPropertyGroup)].join("|")})`] }
   ],
   ["transition-none", { transition: "none" }]
 ];
@@ -372,7 +374,7 @@ const grids = [
   [/^(?:grid-)?(row|col)-end-(.+)$/, ([, c, v]) => ({ [`grid-${rowCol(c)}-end`]: handler.bracket.cssvar(v) ?? v })],
   [/^(?:grid-)?auto-(rows|cols)-(.+)$/, ([, c, v], { theme }) => ({ [`grid-auto-${rowCol(c)}`]: autoDirection(c, theme, v) })],
   [/^(?:grid-auto-flow|auto-flow|grid-flow)-(.+)$/, ([, v]) => ({ "grid-auto-flow": handler.bracket.cssvar(v) })],
-  [/^(?:grid-auto-flow|auto-flow|grid-flow)-((?:row|col)(?:-dense)?)$/, ([, v]) => ({ "grid-auto-flow": rowCol(v).replace("-", " ") })],
+  [/^(?:grid-auto-flow|auto-flow|grid-flow)-(row|col|dense|row-dense|col-dense)$/, ([, v]) => ({ "grid-auto-flow": rowCol(v).replace("-", " ") })],
   [/^grid-(rows|cols)-(.+)$/, ([, c, v], { theme }) => ({
     [`grid-template-${rowCol(c)}`]: theme[`gridTemplate${rowColTheme(c)}`]?.[v] ?? handler.bracket.cssvar(v)
   })],
@@ -721,153 +723,6 @@ const margins = [
   [/^m-?([bi][se])(?:-?(-?.+))?$/, directionSize("margin")]
 ];
 
-const transformGpu = {
-  "--un-transform": [
-    "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 transformCpu = {
-  "--un-transform": [
-    "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 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,
-  ...transformCpu,
-  [CONTROL_SHORTCUT_NO_MERGE]: "",
-  [CONTROL_MINI_NO_NEGATIVE]: ""
-};
-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$/, () => [
-    transformBase,
-    { transform: "var(--un-transform)" }
-  ]],
-  ["transform-gpu", transformGpu],
-  ["transform-cpu", transformCpu],
-  ["transform-none", { transform: "none" }]
-];
-function handleTranslate([, d, b], { theme }) {
-  const v = theme.spacing?.[b] ?? handler.bracket.cssvar.fraction.rem(b);
-  if (v != null) {
-    return [
-      transformBase,
-      [
-        ...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 [
-      transformBase,
-      [
-        ...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 [
-        transformBase,
-        {
-          "--un-rotate": 0,
-          [`--un-rotate-${d}`]: v,
-          "transform": "var(--un-transform)"
-        }
-      ];
-    } else {
-      return [
-        transformBase,
-        {
-          "--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 [
-      transformBase,
-      {
-        [`--un-skew-${d}`]: v,
-        transform: "var(--un-transform)"
-      }
-    ];
-  }
-}
-
 const variablesAbbrMap = {
   backface: "backface-visibility",
   break: "word-break",
@@ -905,6 +760,7 @@ ${constructCSS({ animation: "__un_qm 0.5s ease-in-out alternate infinite" })}`;
   ]
 ];
 
+const decorationStyles = ["solid", "double", "dotted", "dashed", "wavy", ...globalKeywords];
 const textDecorations = [
   [/^(?:decoration-)?(underline|overline|line-through)$/, ([, s]) => ({ "text-decoration-line": s }), { autocomplete: "decoration-(underline|overline|line-through)" }],
   [/^(?:underline|decoration)-(?:size-)?(.+)$/, ([, s], { theme }) => ({ "text-decoration-thickness": theme.lineWidth?.[s] ?? handler.bracket.cssvar.px(s) }), { autocomplete: "(underline|decoration)-<num>" }],
@@ -920,7 +776,8 @@ const textDecorations = [
   }, { autocomplete: "(underline|decoration)-$colors" }],
   [/^(?:underline|decoration)-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-line-opacity": handler.bracket.percent(opacity) }), { autocomplete: "(underline|decoration)-(op|opacity)-<percent>" }],
   [/^(?:underline|decoration)-offset-(.+)$/, ([, s], { theme }) => ({ "text-underline-offset": theme.lineWidth?.[s] ?? handler.auto.bracket.cssvar.px(s) }), { autocomplete: "(underline|decoration)-(offset)-<num>" }],
-  [/^(?:underline|decoration)-(solid|double|dotted|dashed|wavy|inherit|initial|revert|unset)$/, ([, d]) => ({ "text-decoration-style": d }), { autocomplete: "(underline|decoration)-(solid|double|dotted|dashed|wavy|inherit|initial|revert|unset)" }],
+  ...decorationStyles.map((v) => [`underline-${v}`, { "text-decoration-style": v }]),
+  ...decorationStyles.map((v) => [`decoration-${v}`, { "text-decoration-style": v }]),
   ["no-underline", { "text-decoration": "none" }],
   ["decoration-none", { "text-decoration": "none" }]
 ];
@@ -1001,4 +858,4 @@ const rules = [
   questionMark
 ].flat(1);
 
-export { cssProperty as $, sizes as A, aspectRatio as B, paddings as C, margins as D, varEmpty as E, displays as F, appearances as G, cursors as H, pointerEvents as I, resizes as J, userSelects as K, whitespaces as L, contents as M, breaks as N, textOverflows as O, textTransforms as P, fontStyles as Q, fontSmoothings as R, svgUtilities as S, transforms as T, transitions as U, fonts as V, tabSizes as W, textIndents as X, textStrokes as Y, textShadows as Z, cssVariables as _, appearance as a, textDecorations as a0, borders as b, opacity as c, textColors as d, bgColors as e, flex as f, gaps as g, grids as h, overflows as i, justifies as j, orders as k, alignments as l, placements as m, insets as n, outline as o, positions as p, floats as q, rules as r, boxSizing as s, textAligns as t, questionMark as u, verticalAligns as v, willChange as w, rings as x, boxShadows as y, zIndexes as z };
+export { textDecorations as $, sizes as A, aspectRatio as B, paddings as C, margins as D, varEmpty as E, displays as F, appearances as G, cursors as H, pointerEvents as I, resizes as J, userSelects as K, whitespaces as L, contents as M, breaks as N, textOverflows as O, textTransforms as P, fontStyles as Q, fontSmoothings as R, svgUtilities as S, transitions as T, fonts as U, tabSizes as V, textIndents as W, textStrokes as X, textShadows as Y, cssVariables as Z, cssProperty as _, appearance as a, borders as b, opacity as c, textColors as d, bgColors as e, flex as f, gaps as g, grids as h, overflows as i, justifies as j, orders as k, alignments as l, placements as m, insets as n, outline as o, positions as p, floats as q, rules as r, boxSizing as s, textAligns as t, questionMark as u, verticalAligns as v, willChange as w, rings as x, boxShadows as y, zIndexes as z };

package/dist/chunks/default3.cjs

@@ -123,10 +123,22 @@ const variantSelector = {
     }
   }
 };
-const variantLayer = {
+const variantCssLayer = {
   name: "layer",
   match(matcher) {
     const match = matcher.match(/^layer-([_\d\w]+)[:-]/);
+    if (match) {
+      return {
+        matcher: matcher.slice(match[0].length),
+        parent: `@layer ${match[1]}`
+      };
+    }
+  }
+};
+const variantInternalLayer = {
+  name: "uno-layer",
+  match(matcher) {
+    const match = matcher.match(/^uno-layer-([_\d\w]+)[:-]/);
     if (match) {
       return {
         matcher: matcher.slice(match[0].length),
@@ -240,7 +252,10 @@ const PseudoClasses = Object.fromEntries([
   ["selection", "::selection"],
   ["marker", "::marker"],
   ["file", "::file-selector-button"]
-].map((key) => typeof key === "string" ? [key, `:${key}`] : key));
+].map((key) => Array.isArray(key) ? key : [key, `:${key}`]));
+const PseudoClassesColon = Object.fromEntries([
+  ["backdrop", "::backdrop"]
+].map((key) => Array.isArray(key) ? key : [key, `:${key}`]));
 const PseudoClassFunctions = [
   "not",
   "is",
@@ -248,20 +263,22 @@ const PseudoClassFunctions = [
   "has"
 ];
 const PseudoClassesStr = Object.entries(PseudoClasses).filter(([, pseudo]) => !pseudo.startsWith("::")).map(([key]) => key).join("|");
+const PseudoClassesColonStr = Object.entries(PseudoClassesColon).filter(([, pseudo]) => !pseudo.startsWith("::")).map(([key]) => key).join("|");
 const PseudoClassFunctionsStr = PseudoClassFunctions.join("|");
 const sortValue = (pseudo) => {
   if (pseudo === "active")
     return 1;
 };
 const taggedPseudoClassMatcher = (tag, parent, combinator) => {
-  const re = new RegExp(`^${tag}-((?:(${PseudoClassFunctionsStr})-)?(${PseudoClassesStr}))[:-]`);
   const rawRe = new RegExp(`^${core.escapeRegExp(parent)}:`);
+  const pseudoRE = new RegExp(`^${tag}-((?:(${PseudoClassFunctionsStr})-)?(${PseudoClassesStr}))[:-]`);
+  const pseudoColonRE = new RegExp(`^${tag}-((?:(${PseudoClassFunctionsStr})-)?(${PseudoClassesColonStr}))[:]`);
   return {
     name: `pseudo:${tag}`,
     match(input) {
-      const match = input.match(re);
+      const match = input.match(pseudoRE) || input.match(pseudoColonRE);
       if (match) {
-        let pseudo = PseudoClasses[match[3]] || `:${match[3]}`;
+        let pseudo = PseudoClasses[match[3]] || PseudoClassesColon[match[3]] || `:${match[3]}`;
         if (match[2])
           pseudo = `:${match[2]}(${pseudo})`;
         return {
@@ -274,13 +291,15 @@ const taggedPseudoClassMatcher = (tag, parent, combinator) => {
   };
 };
 const PseudoClassesAndElementsStr = Object.entries(PseudoClasses).map(([key]) => key).join("|");
+const PseudoClassesAndElementsColonStr = Object.entries(PseudoClassesColon).map(([key]) => key).join("|");
 const PseudoClassesAndElementsRE = new RegExp(`^(${PseudoClassesAndElementsStr})[:-]`);
+const PseudoClassesAndElementsColonRE = new RegExp(`^(${PseudoClassesAndElementsColonStr})[:]`);
 const variantPseudoClassesAndElements = {
   name: "pseudo",
   match: (input) => {
-    const match = input.match(PseudoClassesAndElementsRE);
+    const match = input.match(PseudoClassesAndElementsRE) || input.match(PseudoClassesAndElementsColonRE);
     if (match) {
-      const pseudo = PseudoClasses[match[1]] || `:${match[1]}`;
+      const pseudo = PseudoClasses[match[1]] || PseudoClassesColon[match[1]] || `:${match[1]}`;
       return {
         matcher: input.slice(match[0].length),
         selector: (s) => `${s}${pseudo}`,
@@ -292,12 +311,13 @@ const variantPseudoClassesAndElements = {
   autocomplete: `(${PseudoClassesAndElementsStr}):`
 };
 const PseudoClassFunctionsRE = new RegExp(`^(${PseudoClassFunctionsStr})-(${PseudoClassesStr})[:-]`);
+const PseudoClassColonFunctionsRE = new RegExp(`^(${PseudoClassFunctionsStr})-(${PseudoClassesColonStr})[:]`);
 const variantPseudoClassFunctions = {
   match: (input) => {
-    const match = input.match(PseudoClassFunctionsRE);
+    const match = input.match(PseudoClassFunctionsRE) || input.match(PseudoClassColonFunctionsRE);
     if (match) {
       const fn = match[1];
-      const pseudo = PseudoClasses[match[2]] || `:${match[2]}`;
+      const pseudo = PseudoClasses[match[2]] || PseudoClassesColon[match[2]] || `:${match[2]}`;
       return {
         matcher: input.slice(match[0].length),
         selector: (s) => `${s}:${fn}(${pseudo})`
@@ -305,7 +325,7 @@ const variantPseudoClassFunctions = {
     }
   },
   multiPass: true,
-  autocomplete: `(${PseudoClassFunctionsStr})-(${PseudoClassesStr}):`
+  autocomplete: `(${PseudoClassFunctionsStr})-(${PseudoClassesStr}|${PseudoClassesColonStr}):`
 };
 const variantTaggedPseudoClasses = (options = {}) => {
   const attributify = !!options?.attributifyPseudo;
@@ -344,8 +364,9 @@ const partClasses = {
 };
 
 const variants = (options) => [
+  variantCssLayer,
   variantSelector,
-  variantLayer,
+  variantInternalLayer,
   variantNegative,
   variantImportant,
   variantPrint,
@@ -365,10 +386,11 @@ exports.partClasses = partClasses;
 exports.variantBreakpoints = variantBreakpoints;
 exports.variantColorsMediaOrClass = variantColorsMediaOrClass;
 exports.variantCombinators = variantCombinators;
+exports.variantCssLayer = variantCssLayer;
 exports.variantCustomMedia = variantCustomMedia;
 exports.variantImportant = variantImportant;
+exports.variantInternalLayer = variantInternalLayer;
 exports.variantLanguageDirections = variantLanguageDirections;
-exports.variantLayer = variantLayer;
 exports.variantNegative = variantNegative;
 exports.variantPrint = variantPrint;
 exports.variantPseudoClassFunctions = variantPseudoClassFunctions;

package/dist/chunks/default3.mjs

@@ -1,4 +1,4 @@
-import { g as resolveBreakpoints, C as CONTROL_MINI_NO_NEGATIVE } from './utilities.mjs';
+import { d as resolveBreakpoints, C as CONTROL_MINI_NO_NEGATIVE } from './utilities.mjs';
 import { v as variantParentMatcher, a as variantMatcher } from './variants.mjs';
 import { escapeRegExp } from '@unocss/core';
 
@@ -121,10 +121,22 @@ const variantSelector = {
     }
   }
 };
-const variantLayer = {
+const variantCssLayer = {
   name: "layer",
   match(matcher) {
     const match = matcher.match(/^layer-([_\d\w]+)[:-]/);
+    if (match) {
+      return {
+        matcher: matcher.slice(match[0].length),
+        parent: `@layer ${match[1]}`
+      };
+    }
+  }
+};
+const variantInternalLayer = {
+  name: "uno-layer",
+  match(matcher) {
+    const match = matcher.match(/^uno-layer-([_\d\w]+)[:-]/);
     if (match) {
       return {
         matcher: matcher.slice(match[0].length),
@@ -238,7 +250,10 @@ const PseudoClasses = Object.fromEntries([
   ["selection", "::selection"],
   ["marker", "::marker"],
   ["file", "::file-selector-button"]
-].map((key) => typeof key === "string" ? [key, `:${key}`] : key));
+].map((key) => Array.isArray(key) ? key : [key, `:${key}`]));
+const PseudoClassesColon = Object.fromEntries([
+  ["backdrop", "::backdrop"]
+].map((key) => Array.isArray(key) ? key : [key, `:${key}`]));
 const PseudoClassFunctions = [
   "not",
   "is",
@@ -246,20 +261,22 @@ const PseudoClassFunctions = [
   "has"
 ];
 const PseudoClassesStr = Object.entries(PseudoClasses).filter(([, pseudo]) => !pseudo.startsWith("::")).map(([key]) => key).join("|");
+const PseudoClassesColonStr = Object.entries(PseudoClassesColon).filter(([, pseudo]) => !pseudo.startsWith("::")).map(([key]) => key).join("|");
 const PseudoClassFunctionsStr = PseudoClassFunctions.join("|");
 const sortValue = (pseudo) => {
   if (pseudo === "active")
     return 1;
 };
 const taggedPseudoClassMatcher = (tag, parent, combinator) => {
-  const re = new RegExp(`^${tag}-((?:(${PseudoClassFunctionsStr})-)?(${PseudoClassesStr}))[:-]`);
   const rawRe = new RegExp(`^${escapeRegExp(parent)}:`);
+  const pseudoRE = new RegExp(`^${tag}-((?:(${PseudoClassFunctionsStr})-)?(${PseudoClassesStr}))[:-]`);
+  const pseudoColonRE = new RegExp(`^${tag}-((?:(${PseudoClassFunctionsStr})-)?(${PseudoClassesColonStr}))[:]`);
   return {
     name: `pseudo:${tag}`,
     match(input) {
-      const match = input.match(re);
+      const match = input.match(pseudoRE) || input.match(pseudoColonRE);
       if (match) {
-        let pseudo = PseudoClasses[match[3]] || `:${match[3]}`;
+        let pseudo = PseudoClasses[match[3]] || PseudoClassesColon[match[3]] || `:${match[3]}`;
         if (match[2])
           pseudo = `:${match[2]}(${pseudo})`;
         return {
@@ -272,13 +289,15 @@ const taggedPseudoClassMatcher = (tag, parent, combinator) => {
   };
 };
 const PseudoClassesAndElementsStr = Object.entries(PseudoClasses).map(([key]) => key).join("|");
+const PseudoClassesAndElementsColonStr = Object.entries(PseudoClassesColon).map(([key]) => key).join("|");
 const PseudoClassesAndElementsRE = new RegExp(`^(${PseudoClassesAndElementsStr})[:-]`);
+const PseudoClassesAndElementsColonRE = new RegExp(`^(${PseudoClassesAndElementsColonStr})[:]`);
 const variantPseudoClassesAndElements = {
   name: "pseudo",
   match: (input) => {
-    const match = input.match(PseudoClassesAndElementsRE);
+    const match = input.match(PseudoClassesAndElementsRE) || input.match(PseudoClassesAndElementsColonRE);
     if (match) {
-      const pseudo = PseudoClasses[match[1]] || `:${match[1]}`;
+      const pseudo = PseudoClasses[match[1]] || PseudoClassesColon[match[1]] || `:${match[1]}`;
       return {
         matcher: input.slice(match[0].length),
         selector: (s) => `${s}${pseudo}`,
@@ -290,12 +309,13 @@ const variantPseudoClassesAndElements = {
   autocomplete: `(${PseudoClassesAndElementsStr}):`
 };
 const PseudoClassFunctionsRE = new RegExp(`^(${PseudoClassFunctionsStr})-(${PseudoClassesStr})[:-]`);
+const PseudoClassColonFunctionsRE = new RegExp(`^(${PseudoClassFunctionsStr})-(${PseudoClassesColonStr})[:]`);
 const variantPseudoClassFunctions = {
   match: (input) => {
-    const match = input.match(PseudoClassFunctionsRE);
+    const match = input.match(PseudoClassFunctionsRE) || input.match(PseudoClassColonFunctionsRE);
     if (match) {
       const fn = match[1];
-      const pseudo = PseudoClasses[match[2]] || `:${match[2]}`;
+      const pseudo = PseudoClasses[match[2]] || PseudoClassesColon[match[2]] || `:${match[2]}`;
       return {
         matcher: input.slice(match[0].length),
         selector: (s) => `${s}:${fn}(${pseudo})`
@@ -303,7 +323,7 @@ const variantPseudoClassFunctions = {
     }
   },
   multiPass: true,
-  autocomplete: `(${PseudoClassFunctionsStr})-(${PseudoClassesStr}):`
+  autocomplete: `(${PseudoClassFunctionsStr})-(${PseudoClassesStr}|${PseudoClassesColonStr}):`
 };
 const variantTaggedPseudoClasses = (options = {}) => {
   const attributify = !!options?.attributifyPseudo;
@@ -342,8 +362,9 @@ const partClasses = {
 };
 
 const variants = (options) => [
+  variantCssLayer,
   variantSelector,
-  variantLayer,
+  variantInternalLayer,
   variantNegative,
   variantImportant,
   variantPrint,
@@ -359,4 +380,4 @@ const variants = (options) => [
   variantScope
 ];
 
-export { variantBreakpoints as a, variantCombinators as b, variantPrint as c, variantCustomMedia as d, variantColorsMediaOrClass as e, variantLanguageDirections as f, variantSelector as g, variantLayer as h, variantScope as i, variantImportant as j, variantNegative as k, variantPseudoClassesAndElements as l, variantPseudoClassFunctions as m, variantTaggedPseudoClasses as n, partClasses as p, variants as v };
+export { variantBreakpoints as a, variantCombinators as b, variantPrint as c, variantCustomMedia as d, variantColorsMediaOrClass as e, variantLanguageDirections as f, variantSelector as g, variantCssLayer as h, variantInternalLayer as i, variantScope as j, variantImportant as k, variantNegative as l, variantPseudoClassesAndElements as m, variantPseudoClassFunctions as n, variantTaggedPseudoClasses as o, partClasses as p, variants as v };