@unocss/preset-mini 0.22.5 → 0.24.0

package/dist/chunks/default2.mjs

@@ -1,5 +1,5 @@
-import { h as handler, c as colorResolver, d as directionMap, p as parseColor, a as cornerMap, i as insetMap, b as directionSize, e as positionMap, x as xyzMap } from './utilities.mjs';
-import { CONTROL_SHORTCUT_NO_MERGE, toArray } from '@unocss/core';
+import { h as handler, c as colorResolver, d as directionMap, p as parseColor, a as colorToString, b as cornerMap, e as colorableShadows, i as insetMap, f as directionSize, g as positionMap, x as xyzMap } from './utilities.mjs';
+import { toArray, CONTROL_SHORTCUT_NO_MERGE } from '@unocss/core';
 
 const verticalAlignAlias = {
   mid: "middle",
@@ -17,9 +17,9 @@ const textAligns = [
 ];
 
 const outline = [
-  [/^outline-(?:width-|size-)?(.+)$/, ([, d]) => ({ "outline-width": handler.bracket.cssvar.fraction.rem(d) })],
+  [/^outline-(?:width-|size-)?(.+)$/, ([, d]) => ({ "outline-width": handler.bracket.cssvar.px(d) })],
   [/^outline-(?:color-)?(.+)$/, colorResolver("outline-color", "outline-color")],
-  [/^outline-offset-(.+)$/, ([, d]) => ({ "outline-offset": handler.bracket.cssvar.fraction.rem(d) })],
+  [/^outline-offset-(.+)$/, ([, d]) => ({ "outline-offset": 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" }]
@@ -80,31 +80,28 @@ const borderColorResolver = (direction) => ([, body], { theme }) => {
   const data = 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`]: colorToString(cssColor, alpha)
+      };
+    }
+    if (direction === "") {
+      return {
+        "--un-border-opacity": cssColor.alpha ?? 1,
+        [`border${direction}-color`]: colorToString(cssColor, `var(--un-border${direction}-opacity)`)
       };
     } else {
-      if (direction === "") {
-        return {
-          "--un-border-opacity": (opacity && handler.cssvar(opacity)) ?? 1,
-          [`border${direction}-color`]: `rgba(${rgba.join(",")},var(--un-border${direction}-opacity))`
-        };
-      } else {
-        return {
-          "--un-border-opacity": (opacity && 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`]: 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}`)
     };
   }
 };
@@ -153,6 +150,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"
@@ -166,22 +164,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": handler.bracket.cssvar.time(d) })],
   [/^(?:transition-)?delay-(.+)$/, ([, d]) => ({ "transition-delay": handler.bracket.cssvar.time(d) })],
-  [/^ease-(.+)$/, ([, d]) => ({ "transition-timing-function": 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"] ?? handler.bracket.cssvar(d) })],
   [/^(?:transition-)?property-(.+)$/, ([, v]) => ({ "transition-property": handler.global(v) || transitionProperty(v) })],
-  ["transition-property-none", { "transition-property": "none" }],
-  ["property-none", { "transition-property": "none" }],
   ["transition-none", { transition: "none" }]
 ];
 
@@ -208,117 +199,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: 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 = {
-  [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 = 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-(.+)$/, colorResolver("--un-shadow-color", "shadow")],
-  [/^shadow-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-shadow-opacity": handler.bracket.percent(opacity) })],
-  ["shadow-inset", { "--un-shadow-inset": "inset" }]
-];
-
 const weightMap = {
   thin: "100",
   extralight: "200",
@@ -543,14 +423,114 @@ const floats = [
   ["clear-none", { clear: "none" }]
 ];
 const zIndexes = [
-  [/^z-(.+)$/, ([, v]) => ({ "z-index": handler.bracket.cssvar.number(v) })],
-  ["z-auto", { "z-index": "auto" }]
+  [/^z-(.+)$/, ([, v]) => ({ "z-index": 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: 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: 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 = {
+  [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": 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-(.+)$/, colorResolver("--un-shadow-color", "shadow")],
+  [/^shadow-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-shadow-opacity": handler.bracket.percent(opacity) })],
+  ["shadow-inset", { "--un-shadow-inset": "inset" }]
+];
+
 const ringBase = {
   ...shadowBase,
   "--un-ring-inset": varEmpty,
@@ -804,10 +784,10 @@ const variablesAbbrMap = {
   ws: "white-space"
 };
 const cssVariables = [
-  [/^(.+?)-\$(.+)$/, ([, name, varname]) => {
+  [/^(.+?)-(\$.+)$/, ([, name, varname]) => {
     const prop = variablesAbbrMap[name];
     if (prop)
-      return { [prop]: `var(--${varname})` };
+      return { [prop]: handler.cssvar(varname) };
   }]
 ];
 const cssProperty = [
@@ -826,11 +806,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": handler.bracket.cssvar.px(s) })],
   [/^(?:underline|decoration)-(auto|from-font)$/, ([, s]) => ({ "text-decoration-thickness": s })],
   [/^(?:underline|decoration)-(.+)$/, (match, ctx) => {
@@ -926,4 +902,4 @@ const rules = [
   questionMark
 ].flat(1);
 
-export { textShadows as $, colorableShadows as A, boxShadows as B, sizes as C, aspectRatio as D, paddings as E, margins as F, varEmpty as G, displays as H, appearances as I, cursors as J, pointerEvents as K, resizes as L, userSelects as M, whitespaces as N, contents as O, breaks as P, textOverflows as Q, textTransforms as R, fontStyles as S, fontSmoothings as T, svgUtilities as U, transforms as V, transitions as W, fonts as X, tabSizes as Y, textIndents as Z, textStrokes as _, appearance as a, cssVariables as a0, cssProperty as a1, textDecorations as a2, 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, shadowBase as y, zIndexes as z };
+export { cssVariables as $, boxShadows as A, sizes as B, aspectRatio as C, paddings as D, margins as E, varEmpty as F, displays as G, appearances as H, cursors as I, pointerEvents as J, resizes as K, userSelects as L, whitespaces as M, contents as N, breaks as O, textOverflows as P, textTransforms as Q, fontStyles as R, fontSmoothings as S, svgUtilities as T, transforms as U, transitions as V, fonts as W, tabSizes as X, textIndents as Y, textStrokes as Z, textShadows as _, appearance as a, cssProperty as a0, textDecorations as a1, 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, shadowBase as y, zIndexes as z };

package/dist/chunks/default3.cjs

@@ -37,12 +37,28 @@ const variantBreakpoints = (matcher, { theme }) => {
   }
 };
 
+const scopeMatcher = (strict, name, template) => {
+  const re = strict ? new RegExp(`^${name}(?:-\\[(.+?)\\])[:-]`) : new RegExp(`^${name}(?:-\\[(.+?)\\])?[:-]`);
+  return (matcher) => {
+    const match = matcher.match(re);
+    if (match) {
+      return {
+        matcher: matcher.slice(match[0].length),
+        selector: (s) => template.replace("&&-s", s).replace("&&-c", match[1] ?? "*")
+      };
+    }
+  };
+};
 const variantCombinators = [
-  variants$1.variantMatcher("all", (input) => `${input} *`),
-  variants$1.variantMatcher("children", (input) => `${input}>*`),
-  variants$1.variantMatcher("next", (input) => `${input}+*`),
-  variants$1.variantMatcher("sibling", (input) => `${input}+*`),
-  variants$1.variantMatcher("siblings", (input) => `${input}~*`),
+  scopeMatcher(false, "all", "&&-s &&-c"),
+  scopeMatcher(false, "children", "&&-s>&&-c"),
+  scopeMatcher(false, "next", "&&-s+&&-c"),
+  scopeMatcher(false, "sibling", "&&-s+&&-c"),
+  scopeMatcher(false, "siblings", "&&-s~&&-c"),
+  scopeMatcher(true, "group", "&&-c &&-s"),
+  scopeMatcher(true, "parent", "&&-c>&&-s"),
+  scopeMatcher(true, "previous", "&&-c+&&-s"),
+  scopeMatcher(true, "peer", "&&-c~&&-s"),
   variants$1.variantMatcher("svg", (input) => `${input} svg`)
 ];
 
@@ -74,6 +90,17 @@ const variantLanguageDirections = [
   variants$1.variantMatcher("ltr", (input) => `[dir="ltr"] $$ ${input}`)
 ];
 
+const variantLayer = {
+  match(matcher) {
+    const match = matcher.match(/layer-([\d\w]+)[:-]/);
+    if (match) {
+      return {
+        matcher: matcher.slice(match[0].length),
+        layer: match[1]
+      };
+    }
+  }
+};
 const variantImportant = {
   match(matcher) {
     if (matcher.startsWith("!")) {
@@ -180,7 +207,7 @@ const taggedPseudoClassMatcher = (tag, parent, combinator) => {
       if (match[2])
         pseudo = `:${match[2]}(${pseudo})`;
       return {
-        matcher: input.slice(match[1].length + tag.length + 2),
+        matcher: input.slice(match[0].length),
         selector: (s) => rawRe.test(s) ? s.replace(rawRe, `${parent}${pseudo}:`) : `${parent}${pseudo}${combinator}${s}`
       };
     }
@@ -191,7 +218,7 @@ const variantPseudoElements = (input) => {
   if (match) {
     const pseudo = PseudoElements[match[1]] || `::${match[1]}`;
     return {
-      matcher: input.slice(match[1].length + 1),
+      matcher: input.slice(match[0].length),
       selector: (s) => `${s}${pseudo}`
     };
   }
@@ -202,7 +229,7 @@ const variantPseudoClasses = {
     if (match) {
       const pseudo = PseudoClasses[match[1]] || `:${match[1]}`;
       return {
-        matcher: input.slice(match[1].length + 1),
+        matcher: input.slice(match[0].length),
         selector: (s) => `${s}${pseudo}`
       };
     }
@@ -216,7 +243,7 @@ const variantPseudoClassFunctions = {
       const fn = match[1];
       const pseudo = PseudoClasses[match[2]] || `:${match[2]}`;
       return {
-        matcher: input.slice(match[1].length + match[2].length + 2),
+        matcher: input.slice(match[0].length),
         selector: (s) => `${s}:${fn}(${pseudo})`
       };
     }
@@ -233,6 +260,14 @@ const variantTaggedPseudoClasses = (options = {}) => {
     {
       match: taggedPseudoClassMatcher("peer", attributify ? '[peer=""]' : ".peer", "~"),
       multiPass: true
+    },
+    {
+      match: taggedPseudoClassMatcher("parent", attributify ? '[parent=""]' : ".parent", ">"),
+      multiPass: true
+    },
+    {
+      match: taggedPseudoClassMatcher("previous", attributify ? '[previous=""]' : ".previous", "+"),
+      multiPass: true
     }
   ];
 };
@@ -251,6 +286,7 @@ const partClasses = {
 };
 
 const variants = (options) => [
+  variantLayer,
   variantNegative,
   variantImportant,
   variantPrint,
@@ -273,6 +309,7 @@ exports.variantColorsMediaOrClass = variantColorsMediaOrClass;
 exports.variantCombinators = variantCombinators;
 exports.variantImportant = variantImportant;
 exports.variantLanguageDirections = variantLanguageDirections;
+exports.variantLayer = variantLayer;
 exports.variantMotions = variantMotions;
 exports.variantNegative = variantNegative;
 exports.variantOrientations = variantOrientations;

package/dist/chunks/default3.mjs

@@ -35,12 +35,28 @@ const variantBreakpoints = (matcher, { theme }) => {
   }
 };
 
+const scopeMatcher = (strict, name, template) => {
+  const re = strict ? new RegExp(`^${name}(?:-\\[(.+?)\\])[:-]`) : new RegExp(`^${name}(?:-\\[(.+?)\\])?[:-]`);
+  return (matcher) => {
+    const match = matcher.match(re);
+    if (match) {
+      return {
+        matcher: matcher.slice(match[0].length),
+        selector: (s) => template.replace("&&-s", s).replace("&&-c", match[1] ?? "*")
+      };
+    }
+  };
+};
 const variantCombinators = [
-  variantMatcher("all", (input) => `${input} *`),
-  variantMatcher("children", (input) => `${input}>*`),
-  variantMatcher("next", (input) => `${input}+*`),
-  variantMatcher("sibling", (input) => `${input}+*`),
-  variantMatcher("siblings", (input) => `${input}~*`),
+  scopeMatcher(false, "all", "&&-s &&-c"),
+  scopeMatcher(false, "children", "&&-s>&&-c"),
+  scopeMatcher(false, "next", "&&-s+&&-c"),
+  scopeMatcher(false, "sibling", "&&-s+&&-c"),
+  scopeMatcher(false, "siblings", "&&-s~&&-c"),
+  scopeMatcher(true, "group", "&&-c &&-s"),
+  scopeMatcher(true, "parent", "&&-c>&&-s"),
+  scopeMatcher(true, "previous", "&&-c+&&-s"),
+  scopeMatcher(true, "peer", "&&-c~&&-s"),
   variantMatcher("svg", (input) => `${input} svg`)
 ];
 
@@ -72,6 +88,17 @@ const variantLanguageDirections = [
   variantMatcher("ltr", (input) => `[dir="ltr"] $$ ${input}`)
 ];
 
+const variantLayer = {
+  match(matcher) {
+    const match = matcher.match(/layer-([\d\w]+)[:-]/);
+    if (match) {
+      return {
+        matcher: matcher.slice(match[0].length),
+        layer: match[1]
+      };
+    }
+  }
+};
 const variantImportant = {
   match(matcher) {
     if (matcher.startsWith("!")) {
@@ -178,7 +205,7 @@ const taggedPseudoClassMatcher = (tag, parent, combinator) => {
       if (match[2])
         pseudo = `:${match[2]}(${pseudo})`;
       return {
-        matcher: input.slice(match[1].length + tag.length + 2),
+        matcher: input.slice(match[0].length),
         selector: (s) => rawRe.test(s) ? s.replace(rawRe, `${parent}${pseudo}:`) : `${parent}${pseudo}${combinator}${s}`
       };
     }
@@ -189,7 +216,7 @@ const variantPseudoElements = (input) => {
   if (match) {
     const pseudo = PseudoElements[match[1]] || `::${match[1]}`;
     return {
-      matcher: input.slice(match[1].length + 1),
+      matcher: input.slice(match[0].length),
       selector: (s) => `${s}${pseudo}`
     };
   }
@@ -200,7 +227,7 @@ const variantPseudoClasses = {
     if (match) {
       const pseudo = PseudoClasses[match[1]] || `:${match[1]}`;
       return {
-        matcher: input.slice(match[1].length + 1),
+        matcher: input.slice(match[0].length),
         selector: (s) => `${s}${pseudo}`
       };
     }
@@ -214,7 +241,7 @@ const variantPseudoClassFunctions = {
       const fn = match[1];
       const pseudo = PseudoClasses[match[2]] || `:${match[2]}`;
       return {
-        matcher: input.slice(match[1].length + match[2].length + 2),
+        matcher: input.slice(match[0].length),
         selector: (s) => `${s}:${fn}(${pseudo})`
       };
     }
@@ -231,6 +258,14 @@ const variantTaggedPseudoClasses = (options = {}) => {
     {
       match: taggedPseudoClassMatcher("peer", attributify ? '[peer=""]' : ".peer", "~"),
       multiPass: true
+    },
+    {
+      match: taggedPseudoClassMatcher("parent", attributify ? '[parent=""]' : ".parent", ">"),
+      multiPass: true
+    },
+    {
+      match: taggedPseudoClassMatcher("previous", attributify ? '[previous=""]' : ".previous", "+"),
+      multiPass: true
     }
   ];
 };
@@ -249,6 +284,7 @@ const partClasses = {
 };
 
 const variants = (options) => [
+  variantLayer,
   variantNegative,
   variantImportant,
   variantPrint,
@@ -265,4 +301,4 @@ const variants = (options) => [
   ...variantLanguageDirections
 ];
 
-export { variantBreakpoints as a, variantCombinators as b, variantMotions as c, variantOrientations as d, variantPrint as e, variantColorsMediaOrClass as f, variantLanguageDirections as g, variantImportant as h, variantNegative as i, variantPseudoElements as j, variantPseudoClasses as k, variantPseudoClassFunctions as l, variantTaggedPseudoClasses as m, partClasses as p, variants as v };
+export { variantBreakpoints as a, variantCombinators as b, variantMotions as c, variantOrientations as d, variantPrint as e, variantColorsMediaOrClass as f, variantLanguageDirections as g, variantLayer as h, variantImportant as i, variantNegative as j, variantPseudoElements as k, variantPseudoClasses as l, variantPseudoClassFunctions as m, variantTaggedPseudoClasses as n, partClasses as p, variants as v };