diff --git a/packages/preset-mini/src/_utils/utilities.ts b/packages/preset-mini/src/_utils/utilities.ts
index aded0a7711..fe260059c1 100644
--- a/packages/preset-mini/src/_utils/utilities.ts
+++ b/packages/preset-mini/src/_utils/utilities.ts
@@ -1,5 +1,5 @@
 import type { CSSEntries, CSSObject, DynamicMatcher, ParsedColorValue, Rule, RuleContext, VariantContext } from '@unocss/core'
-import { toArray } from '@unocss/core'
+import { isString, toArray } from '@unocss/core'
 import type { Theme } from '../theme'
 import { colorOpacityToString, colorToString, parseCssColor } from './colors'
 import { handler as h } from './handlers'
@@ -227,10 +227,16 @@ export function makeGlobalStaticRules(prefix: string, property?: string) {
   return globalKeywords.map(keyword => [`${prefix}-${keyword}`, { [property ?? prefix]: keyword }] as Rule)
 }
 
-export function getComponent(str: string, open: string, close: string, separator: string) {
+export function getComponent(str: string, open: string, close: string, separators: string | string[]) {
   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++) {
@@ -244,14 +250,17 @@ export function getComponent(str: string, open: string, close: string, separator
           return
         break
 
-      case separator:
-        if (parenthesis === 0) {
-          if (i === 0 || i === l - 1)
-            return
-          return [
-            str.slice(0, i),
-            str.slice(i + 1),
-          ]
+      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),
+            ]
+          }
         }
     }
   }
@@ -262,16 +271,14 @@ export function getComponent(str: string, open: string, close: string, separator
   ]
 }
 
-export function getComponents(str: string, separator: string, limit?: number) {
-  if (separator.length !== 1)
-    return
+export function getComponents(str: string, separators: string | string[], limit?: number) {
   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
diff --git a/packages/preset-mini/src/_utils/variants.ts b/packages/preset-mini/src/_utils/variants.ts
index 11ff9a79d5..b5e9d06b4b 100644
--- a/packages/preset-mini/src/_utils/variants.ts
+++ b/packages/preset-mini/src/_utils/variants.ts
@@ -1,5 +1,6 @@
 import type { VariantHandler, VariantHandlerContext, VariantObject } from '@unocss/core'
 import { escapeRegExp } from '@unocss/core'
+import { getComponent } from '../utils'
 
 export const variantMatcher = (name: string, handler: (input: VariantHandlerContext) => Record<string, any>): VariantObject => {
   const re = new RegExp(`^${escapeRegExp(name)}[:-]`)
@@ -40,3 +41,14 @@ export const variantParentMatcher = (name: string, parent: string): VariantObjec
     autocomplete: `${name}:`,
   }
 }
+
+export const variantGetComponent = (name: string, matcher: string): string[] | undefined => {
+  if (matcher.startsWith(`${name}-`)) {
+    const body = matcher.substring(name.length + 1)
+
+    const [match, rest] = getComponent(body, '[', ']', [':', '-']) ?? []
+    if (match && rest && rest !== '')
+      return [match, rest]
+  }
+}
+
diff --git a/packages/preset-mini/src/_variants/combinators.ts b/packages/preset-mini/src/_variants/combinators.ts
index 100ff1d2ac..cead5e2945 100644
--- a/packages/preset-mini/src/_variants/combinators.ts
+++ b/packages/preset-mini/src/_variants/combinators.ts
@@ -1,32 +1,43 @@
-import type { Variant, VariantObject } from '@unocss/core'
+import type { Variant, VariantHandler, VariantObject } from '@unocss/core'
+import { getComponent, handler as h } from '../utils'
 
-const scopeMatcher = (strict: boolean, name: string, template: string): VariantObject => {
-  const re = strict
-    ? new RegExp(`^${name}(?:-\\[(.+?)\\])[:-]`)
-    : new RegExp(`^${name}(?:-\\[(.+?)\\])?[:-]`)
-  return {
-    name: `combinator:${name}`,
-    match: (matcher: string) => {
-      const match = matcher.match(re)
-      if (match) {
-        return {
-          matcher: matcher.slice(match[0].length),
-          selector: s => template.replace('&&-s', s).replace('&&-c', match[1] ?? '*'),
-        }
-      }
-    },
-    multiPass: true,
-  }
-}
+const scopeMatcher = (name: string, combinator: string): VariantObject => ({
+  name: `combinator:${name}`,
+  match: (matcher: string): VariantHandler | undefined => {
+    if (!matcher.startsWith(name))
+      return
+
+    let newMatcher = matcher.substring(name.length + 1)
+    const body = getComponent(newMatcher, '[', ']', [':', '-'])
+
+    if (!body)
+      return
+
+    const [match, rest] = body
+    let bracketValue = h.bracket(match) ?? ''
+
+    if (bracketValue === '') {
+      bracketValue = '*'
+    }
+    else {
+      if (matcher[name.length] !== '-')
+        return
+      if (rest !== '')
+        newMatcher = rest
+    }
+
+    return {
+      matcher: newMatcher,
+      selector: s => `${s}${combinator}${bracketValue}`,
+    }
+  },
+  multiPass: true,
+})
 
 export const variantCombinators: Variant[] = [
-  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'),
+  scopeMatcher('all', ' '),
+  scopeMatcher('children', '>'),
+  scopeMatcher('next', '+'),
+  scopeMatcher('sibling', '+'),
+  scopeMatcher('siblings', '~'),
 ]
diff --git a/packages/preset-mini/src/_variants/media.ts b/packages/preset-mini/src/_variants/media.ts
index cab2bcd162..f22b81fb39 100644
--- a/packages/preset-mini/src/_variants/media.ts
+++ b/packages/preset-mini/src/_variants/media.ts
@@ -1,21 +1,31 @@
 import type { Variant, VariantContext, VariantObject } from '@unocss/core'
 import type { Theme } from '../theme'
-import { variantParentMatcher } from '../utils'
+import { handler as h, variantGetComponent, variantParentMatcher } from '../utils'
 
 export const variantPrint: Variant = variantParentMatcher('print', '@media print')
 
 export const variantCustomMedia: VariantObject = {
   name: 'media',
   match(matcher, { theme }: VariantContext<Theme>) {
-    const match = matcher.match(/^media-([_\d\w]+)[:-]/)
-    if (match) {
-      const media = theme.media?.[match[1]] ?? `(--${match[1]})`
-      return {
-        matcher: matcher.slice(match[0].length),
-        handle: (input, next) => next({
-          ...input,
-          parent: `${input.parent ? `${input.parent} $$ ` : ''}@media ${media}`,
-        }),
+    const variant = variantGetComponent('media', matcher)
+    if (variant) {
+      const [match, rest] = variant
+
+      let media = h.bracket(match) ?? ''
+      if (media === '') {
+        const themeValue = theme.media?.[match]
+        if (themeValue)
+          media = themeValue
+      }
+
+      if (media) {
+        return {
+          matcher: rest,
+          handle: (input, next) => next({
+            ...input,
+            parent: `${input.parent ? `${input.parent} $$ ` : ''}@media ${media}`,
+          }),
+        }
       }
     }
   },
diff --git a/packages/preset-mini/src/_variants/misc.ts b/packages/preset-mini/src/_variants/misc.ts
index 4b92332594..484e8c96ae 100644
--- a/packages/preset-mini/src/_variants/misc.ts
+++ b/packages/preset-mini/src/_variants/misc.ts
@@ -1,14 +1,18 @@
 import type { Variant } from '@unocss/core'
-import { getComponent, handler as h } from '../utils'
+import { getComponent, handler as h, variantGetComponent } from '../utils'
 
 export const variantSelector: Variant = {
   name: 'selector',
   match(matcher) {
-    const match = matcher.match(/^selector-\[(.+?)\][:-]/)
-    if (match) {
-      return {
-        matcher: matcher.slice(match[0].length),
-        selector: () => match[1],
+    const variant = variantGetComponent('selector', matcher)
+    if (variant) {
+      const [match, rest] = variant
+      const selector = h.bracket(match)
+      if (selector) {
+        return {
+          matcher: rest,
+          selector: () => selector,
+        }
       }
     }
   },
@@ -17,14 +21,18 @@ export const variantSelector: Variant = {
 export const variantCssLayer: Variant = {
   name: 'layer',
   match(matcher) {
-    const match = matcher.match(/^layer-([_\d\w]+)[:-]/)
-    if (match) {
-      return {
-        matcher: matcher.slice(match[0].length),
-        handle: (input, next) => next({
-          ...input,
-          parent: `${input.parent ? `${input.parent} $$ ` : ''}@layer ${match[1]}`,
-        }),
+    const variant = variantGetComponent('layer', matcher)
+    if (variant) {
+      const [match, rest] = variant
+      const layer = h.bracket(match) ?? match
+      if (layer) {
+        return {
+          matcher: rest,
+          handle: (input, next) => next({
+            ...input,
+            parent: `${input.parent ? `${input.parent} $$ ` : ''}@layer ${layer}`,
+          }),
+        }
       }
     }
   },
@@ -33,11 +41,15 @@ export const variantCssLayer: Variant = {
 export const variantInternalLayer: Variant = {
   name: 'uno-layer',
   match(matcher) {
-    const match = matcher.match(/^uno-layer-([_\d\w]+)[:-]/)
-    if (match) {
-      return {
-        matcher: matcher.slice(match[0].length),
-        layer: match[1],
+    const variant = variantGetComponent('uno-layer', matcher)
+    if (variant) {
+      const [match, rest] = variant
+      const layer = h.bracket(match) ?? match
+      if (layer) {
+        return {
+          matcher: rest,
+          layer,
+        }
       }
     }
   },
@@ -46,11 +58,15 @@ export const variantInternalLayer: Variant = {
 export const variantScope: Variant = {
   name: 'scope',
   match(matcher) {
-    const match = matcher.match(/^scope-([_\d\w]+)[:-]/)
-    if (match) {
-      return {
-        matcher: matcher.slice(match[0].length),
-        selector: s => `.${match[1]} $$ ${s}`,
+    const variant = variantGetComponent('scope', matcher)
+    if (variant) {
+      const [match, rest] = variant
+      const scope = h.bracket(match)
+      if (scope) {
+        return {
+          matcher: rest,
+          selector: s => `.${scope} $$ ${s}`,
+        }
       }
     }
   },
diff --git a/packages/preset-mini/src/_variants/pseudo.ts b/packages/preset-mini/src/_variants/pseudo.ts
index f9aa7545ad..2e1060e09f 100644
--- a/packages/preset-mini/src/_variants/pseudo.ts
+++ b/packages/preset-mini/src/_variants/pseudo.ts
@@ -1,6 +1,7 @@
 import type { VariantObject } from '@unocss/core'
-import { escapeRegExp } from '@unocss/core'
+import { escapeRegExp, escapeSelector } from '@unocss/core'
 import type { PresetMiniOptions } from '..'
+import { getComponent, handler as h } from '../_utils'
 
 const PseudoClasses: Record<string, string> = Object.fromEntries([
   // pseudo elements part 1
@@ -82,23 +83,54 @@ const sortValue = (pseudo: string) => {
 }
 
 const taggedPseudoClassMatcher = (tag: string, parent: string, combinator: string): VariantObject => {
-  const rawRe = new RegExp(`^(${escapeRegExp(parent)}:)(\\S+)${escapeRegExp(combinator)}\\1`)
-  const pseudoRE = new RegExp(`^${tag}-((?:(${PseudoClassFunctionsStr})-)?(${PseudoClassesStr}))[:-]`)
-  const pseudoColonRE = new RegExp(`^${tag}-((?:(${PseudoClassFunctionsStr})-)?(${PseudoClassesColonStr}))[:]`)
+  const rawRe = new RegExp(`^(${escapeRegExp(parent)}(?:<[^>]+>)?:)(\\S+)${escapeRegExp(combinator)}\\1`)
+  const maybeWithBracketRE = new RegExp(`^${tag}(?:<[^>]+>)?-\\[`)
+  const pseudoRE = new RegExp(`^${tag}(<[^>]+>)?-(?:(?:(${PseudoClassFunctionsStr})-)?(${PseudoClassesStr}))[:-]`)
+  const pseudoColonRE = new RegExp(`^${tag}(<[^>]+>)?-(?:(?:(${PseudoClassFunctionsStr})-)?(${PseudoClassesColonStr}))[:]`)
   return {
     name: `pseudo:${tag}`,
     match(input: string) {
+      if (!input.startsWith(tag))
+        return
+
+      if (input.match(maybeWithBracketRE)) {
+        const labelMatcher = input.substring(tag.length)
+        const [label, afterLabel] = getComponent(labelMatcher, '<', '>', '-') ?? ['', labelMatcher.slice(1)]
+        const body = getComponent(afterLabel, '[', ']', [':', '-'])
+
+        if (!body)
+          return
+
+        const [match, rest] = body
+        const bracketValue = h.bracket(match)
+
+        if (bracketValue == null)
+          return
+
+        let prefix = `${parent}${escapeSelector(label)}`
+        prefix = bracketValue.includes('&') ? bracketValue.replace(/&/g, prefix) : `${prefix}${bracketValue}`
+
+        return {
+          matcher: input.slice(input.length - rest.length),
+          handle: (input, next) => next({
+            ...input,
+            prefix: `${prefix}${combinator}${input.prefix}`.replace(rawRe, '$1$2:'),
+          }),
+        }
+      }
+
       const match = input.match(pseudoRE) || input.match(pseudoColonRE)
       if (match) {
-        let pseudo = PseudoClasses[match[3]] || PseudoClassesColon[match[3]] || `:${match[3]}`
-        if (match[2])
-          pseudo = `:${match[2]}(${pseudo})`
+        const [original, label = '', fn, pseudoKey] = match
+        let pseudo = PseudoClasses[pseudoKey] || PseudoClassesColon[pseudoKey] || `:${pseudoKey}`
+        if (fn)
+          pseudo = `:${fn}(${pseudo})`
         return {
-          matcher: input.slice(match[0].length),
+          matcher: input.slice(original.length),
           handle: (input, next) => next({
             ...input,
-            prefix: `${parent}${pseudo}${combinator}${input.prefix}`.replace(rawRe, '$1$2:'),
-            sort: sortValue(match[3]),
+            prefix: `${parent}${escapeSelector(label)}${pseudo}${combinator}${input.prefix}`.replace(rawRe, '$1$2:'),
+            sort: sortValue(pseudoKey),
           }),
         }
       }
diff --git a/packages/preset-mini/src/_variants/supports.ts b/packages/preset-mini/src/_variants/supports.ts
index e6eabc1e97..000e28fbf9 100644
--- a/packages/preset-mini/src/_variants/supports.ts
+++ b/packages/preset-mini/src/_variants/supports.ts
@@ -1,16 +1,13 @@
 import type { VariantContext, VariantObject } from '@unocss/core'
 import type { Theme } from '../theme'
-import { getComponent, handler as h } from '../utils'
+import { handler as h, variantGetComponent } from '../utils'
 
 export const variantSupports: VariantObject = {
   name: 'supports',
   match(matcher, { theme }: VariantContext<Theme>) {
-    if (matcher.startsWith('supports-')) {
-      const matcherValue = matcher.substring(9)
-
-      const [match, rest] = getComponent(matcherValue, '[', ']', ':') ?? []
-      if (!(match && rest && rest !== ''))
-        return
+    const variant = variantGetComponent('supports', matcher)
+    if (variant) {
+      const [match, rest] = variant
 
       let supports = h.bracket(match) ?? ''
       if (supports === '') {
diff --git a/test/__snapshots__/preset-mini.test.ts.snap b/test/__snapshots__/preset-mini.test.ts.snap
index cc9ddfd057..81e5e4f30e 100644
--- a/test/__snapshots__/preset-mini.test.ts.snap
+++ b/test/__snapshots__/preset-mini.test.ts.snap
@@ -50,11 +50,8 @@ exports[`preset-mini > targets 1`] = `
 .all-\\\\[\\\\.target\\\\]-\\\\[combinator\\\\:test-2\\\\] .target,
 .children-\\\\[\\\\.target\\\\]-\\\\[combinator\\\\:test-2\\\\]>.target,
 .next-\\\\[\\\\.target\\\\]-\\\\[combinator\\\\:test-2\\\\]+.target{combinator:test-2;}
-.scope .group-\\\\[\\\\.scope\\\\]-\\\\[combinator\\\\:test-3\\\\],
-.scope+.previous-\\\\[\\\\.scope\\\\]-\\\\[combinator\\\\:test-3\\\\],
-.scope>.parent-\\\\[\\\\.scope\\\\]-\\\\[combinator\\\\:test-3\\\\]{combinator:test-3;}
-.sibling-\\\\[div\\\\:hover\\\\]-\\\\[combinator\\\\:test-4\\\\]+div:hover,
-div:hover .group-\\\\[div\\\\:hover\\\\]-\\\\[combinator\\\\:test-4\\\\]{combinator:test-4;}
+.all-\\\\[\\\\[data-hvr\\\\]\\\\:hover\\\\]\\\\:\\\\[color\\\\:red\\\\] [data-hvr]:hover{color:red;}
+.sibling-\\\\[div\\\\:hover\\\\]-\\\\[combinator\\\\:test-4\\\\]+div:hover{combinator:test-4;}
 .-p-px{padding:-1px;}
 .\\\\!p-5px{padding:5px !important;}
 .first\\\\:p-2:first-child,
@@ -105,6 +102,7 @@ div:hover .group-\\\\[div\\\\:hover\\\\]-\\\\[combinator\\\\:test-4\\\\]{combina
 .all\\\\:m-auto *,
 .children\\\\:m-auto>*,
 .m-auto{margin:auto;}
+.all\\\\:m1\\\\/1 *{margin:100%;}
 .m-\\\\[3em\\\\]{margin:3em;}
 .m-0,
 .m-none{margin:0rem;}
@@ -128,7 +126,7 @@ div:hover .group-\\\\[div\\\\:hover\\\\]-\\\\[combinator\\\\:test-4\\\\]{combina
 .mbs-\\\\[-10\\\\.2\\\\%\\\\]{margin-block-start:-10.2%;}
 .mbs-\\\\$height{margin-block-start:var(--height);}
 .mbs-unset{margin-block-start:unset;}
-.unocss .scope-unocss\\\\:block{display:block;}
+.unocss .scope-\\\\[unocss\\\\]\\\\:block{display:block;}
 .contents{display:contents;}
 .display-\\\\$var{display:var(--var);}
 .display-inherit{display:inherit;}
@@ -161,7 +159,7 @@ div:hover .group-\\\\[div\\\\:hover\\\\]-\\\\[combinator\\\\:test-4\\\\]{combina
 .hover\\\\:not-first\\\\:checked\\\\:bg-red\\\\/10:checked:not(:first-child):hover{background-color:rgba(248,113,113,0.1);}
 .marker\\\\:bg-violet-200::marker{--un-bg-opacity:1;background-color:rgba(221,214,254,var(--un-bg-opacity));}
 .peer:checked~.peer-checked\\\\:bg-blue-500{--un-bg-opacity:1;background-color:rgba(59,130,246,var(--un-bg-opacity));}
-.previous:checked+.previous-checked\\\\:bg-red-500{--un-bg-opacity:1;background-color:rgba(239,68,68,var(--un-bg-opacity));}
+.previous\\\\<label\\\\>:checked+.previous\\\\<label\\\\>-checked\\\\:bg-red-500{--un-bg-opacity:1;background-color:rgba(239,68,68,var(--un-bg-opacity));}
 .bg-opacity-45{--un-bg-opacity:0.45;}
 .all-\\\\[svg\\\\]\\\\:fill-red svg{--un-fill-opacity:1;fill:rgba(248,113,113,var(--un-fill-opacity));}
 .fill-\\\\[\\\\#123\\\\]{--un-fill-opacity:1;fill:rgba(17,34,51,var(--un-fill-opacity));}
@@ -322,6 +320,8 @@ div:hover .group-\\\\[div\\\\:hover\\\\]-\\\\[combinator\\\\:test-4\\\\]{combina
 .text-lg{font-size:1.125rem;line-height:1.75rem;}
 .text-size-\\\\$variable{font-size:var(--variable);}
 .text-size-unset{font-size:unset;}
+.as-parent .group .group-\\\\[\\\\.as-parent_\\\\&\\\\]\\\\:font-13{font-weight:13;}
+.as-parent .group\\\\<label\\\\> .group\\\\<label\\\\>-\\\\[\\\\.as-parent_\\\\&\\\\]\\\\:font-18{font-weight:18;}
 .font-050,
 .font-50,
 .fw-050,
@@ -330,6 +330,12 @@ div:hover .group-\\\\[div\\\\:hover\\\\]-\\\\[combinator\\\\:test-4\\\\]{combina
 .fw-900{font-weight:900;}
 .font-inherit{font-weight:inherit;}
 .font-thin{font-weight:100;}
+.group:hover .group-\\\\[\\\\:hover\\\\]\\\\:font-11{font-weight:11;}
+.group.not-parent .group-\\\\[\\\\.not-parent\\\\]\\\\:font-14{font-weight:14;}
+.group[data-attr] .group-\\\\[\\\\[data-attr\\\\]\\\\]\\\\:font-12{font-weight:12;}
+.group\\\\<label\\\\>:hover .group\\\\<label\\\\>-\\\\[\\\\:hover\\\\]\\\\:font-16{font-weight:16;}
+.group\\\\<label\\\\>.not-parent .group\\\\<label\\\\>-\\\\[\\\\.not-parent\\\\]\\\\:font-19{font-weight:19;}
+.group\\\\<label\\\\>[data-attr] .group\\\\<label\\\\>-\\\\[\\\\[data-attr\\\\]\\\\]\\\\:font-17{font-weight:17;}
 .font-leading-2,
 .leading-2{line-height:0.5rem;}
 .leading-\\\\$variable,
@@ -843,7 +849,7 @@ div:hover .group-\\\\[div\\\\:hover\\\\]-\\\\[combinator\\\\:test-4\\\\]{combina
 .perspect-origin-center{-webkit-perspective-origin:center;perspective-origin:center;}
 .perspect-origin-top-right{-webkit-perspective-origin:top right;perspective-origin:top right;}
 .-translate-full{--un-translate-x:-100%;--un-translate-y:-100%;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));}
-.scope_class .scope-scope_class\\\\:translate-0,
+.scope_class .scope-\\\\[scope\\\\\\\\_class\\\\]\\\\:translate-0,
 .translate-none{--un-translate-x:0rem;--un-translate-y:0rem;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));}
 .translate-full{--un-translate-x:100%;--un-translate-y:100%;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));}
 .-translate-x-full{--un-translate-x:-100%;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));}
@@ -902,10 +908,10 @@ div:hover .group-\\\\[div\\\\:hover\\\\]-\\\\[combinator\\\\:test-4\\\\]{combina
 .layer-base\\\\:translate-0{--un-translate-x:0rem;--un-translate-y:0rem;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));}
 }
 @layer utility{
-.layer-utility\\\\:block{display:block;}
+.layer-\\\\[utility\\\\]\\\\:block{display:block;}
 }
 @media (--cssvar){
-.media-cssvar\\\\:block{display:block;}
+.media-\\\\[\\\\(--cssvar\\\\)\\\\]\\\\:block{display:block;}
 }
 @media (prefers-color-scheme: dark){
 .dark\\\\:text-xl{font-size:1.25rem;line-height:1.75rem;}
@@ -952,6 +958,8 @@ div:hover .group-\\\\[div\\\\:hover\\\\]-\\\\[combinator\\\\:test-4\\\\]{combina
 @media (min-width: 1536px){
 .at-2xl\\\\:m2{margin:0.5rem;}
 }
+/* layer: uno css */
+.uno-layer-\\\\[uno_css\\\\]\\\\:block{display:block;}
 /* layer: uno_css */
 .uno-layer-uno_css\\\\:block{display:block;}"
 `;
diff --git a/test/__snapshots__/scope.test.ts.snap b/test/__snapshots__/scope.test.ts.snap
index b901dbe1c1..b24273905f 100644
--- a/test/__snapshots__/scope.test.ts.snap
+++ b/test/__snapshots__/scope.test.ts.snap
@@ -10,7 +10,7 @@ exports[`scope 1`] = `
 .foo-scope .pl-10px{padding-left:10px;}
 .dark .foo-scope .dark\\\\:hover\\\\:text-xl:hover,
 .dark .foo-scope .dark\\\\:text-xl{font-size:1.25rem;line-height:1.75rem;}
-.variant .foo-scope .scope-variant\\\\:c-red{--un-text-opacity:1;color:rgba(248,113,113,var(--un-text-opacity));}
+.variant .foo-scope .scope-\\\\[variant\\\\]\\\\:c-red{--un-text-opacity:1;color:rgba(248,113,113,var(--un-text-opacity));}
 @media (min-width: 640px){
 .foo-scope .sm\\\\:text-red-100{--un-text-opacity:1;color:rgba(254,226,226,var(--un-text-opacity));}
 .foo-scope .sm\\\\:text-red-200\\\\/10{color:rgba(254,202,202,0.1);}
diff --git a/test/assets/preset-mini-targets.ts b/test/assets/preset-mini-targets.ts
index 5aae9f8c50..fb69631b2e 100644
--- a/test/assets/preset-mini-targets.ts
+++ b/test/assets/preset-mini-targets.ts
@@ -875,15 +875,13 @@ export const presetMiniTargets: string[] = [
   'all-[.target]-[combinator:test-2]',
   'children-[.target]-[combinator:test-2]',
   'next-[.target]-[combinator:test-2]',
-  'group-[.scope]-[combinator:test-3]',
-  'parent-[.scope]-[combinator:test-3]',
-  'previous-[.scope]-[combinator:test-3]',
   'sibling-[div:hover]-[combinator:test-4]',
-  'group-[div:hover]-[combinator:test-4]',
   'all-[svg]:fill-red',
+  'all-[[data-hvr]:hover]:[color:red]',
 
   // variants combinators
   'all:m-auto',
+  'all:m1/1',
   'children:m-auto',
   'next:mt-0',
 
@@ -896,7 +894,8 @@ export const presetMiniTargets: string[] = [
   'uno-layer-1:translate-0',
   'uno-layer-uno_css:block',
   'layer-base:translate-0',
-  'layer-utility:block',
+  'layer-[utility]:block',
+  'uno-layer-[uno_css]:block',
 
   // variants misc
   '-rotate-2',
@@ -915,7 +914,7 @@ export const presetMiniTargets: string[] = [
   'supports-[(display:_grid)]:block',
 
   // variants media
-  'media-cssvar:block',
+  'media-[(--cssvar)]:block',
 
   // variants prints
   'print:block',
@@ -957,14 +956,22 @@ export const presetMiniTargets: string[] = [
   'focus-within:has-first:checked:bg-gray/20',
 
   // variants scope
-  'scope-scope_class:translate-0',
-  'scope-unocss:block',
+  'scope-[scope\\_class]:translate-0',
+  'scope-[unocss]:block',
 
   // variants - tagged
   'group-focus:p-4',
   'peer-checked:bg-blue-500',
   'parent-hover:text-center',
-  'previous-checked:bg-red-500',
+  'previous<label>-checked:bg-red-500',
+  'group-[:hover]:font-11',
+  'group-[[data-attr]]:font-12',
+  'group-[.as-parent_&]:font-13',
+  'group-[.not-parent]:font-14',
+  'group<label>-[:hover]:font-16',
+  'group<label>-[[data-attr]]:font-17',
+  'group<label>-[.as-parent_&]:font-18',
+  'group<label>-[.not-parent]:font-19',
 
   // variants - variables
   '[&:nth-child(2)]:m-10',
@@ -999,4 +1006,7 @@ export const presetMiniNonTargets = [
   '-border-solid',
   '-decoration-none',
   '-color-blue-400',
+
+  // variants - combinator
+  'all:[svg]:fill-red',
 ]
diff --git a/test/preset-uno.test.ts b/test/preset-uno.test.ts
index 1fada48a6d..de9002df52 100644
--- a/test/preset-uno.test.ts
+++ b/test/preset-uno.test.ts
@@ -48,7 +48,7 @@ const targets2 = [
   'selector-[section]:c-gray-400',
   'selector-[.cls.multi]:c-gray-400',
   'md:selector-[aside]:shadow-xl',
-  'dark:selector-[.body_main]:bg-white',
+  'dark:selector-[.body\\_main]:bg-white',
 ]
 
 const nonTargets = [
diff --git a/test/scope.test.ts b/test/scope.test.ts
index e6531d5b30..d12d15c831 100644
--- a/test/scope.test.ts
+++ b/test/scope.test.ts
@@ -14,7 +14,7 @@ export const fixture = new Set([
   'sm:text-red-100',
   'sm:text-red-200/10',
   'md:!hidden',
-  'scope-variant:c-red',
+  'scope-[variant]:c-red',
 ])
 
 const uno = createGenerator({