feat(preset-mini): update/add variants-[x] that target x as raw selec…

…tor (#568)

packages/preset-mini/src/variants/combinators.ts

@@ -1,11 +1,30 @@
-import type { Variant } from '@unocss/core'
+import type { Variant, VariantHandler } from '@unocss/core'
 import { variantMatcher } from '../utils'
 
+const scopeMatcher = (strict: boolean, name: string, template: string) => {
+  const re = strict
+    ? new RegExp(`^${name}(?:-\\[(.+?)\\])[:-]`)
+    : new RegExp(`^${name}(?:-\\[(.+?)\\])?[:-]`)
+  return (matcher: string): VariantHandler | undefined => {
+    const match = matcher.match(re)
+    if (match) {
+      return {
+        matcher: matcher.slice(match[0].length),
+        selector: s => template.replace('&&-s', s).replace('&&-c', match[1] ?? '*'),
+      }
+    }
+  }
+}
+
 export const variantCombinators: Variant[] = [
-  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`),
 ]

packages/preset-mini/src/variants/misc.ts

@@ -27,7 +27,6 @@ export const variantImportant: Variant = {
       }
     }
   },
-
 }
 
 export const variantNegative: Variant = {
@@ -46,5 +45,4 @@ export const variantNegative: Variant = {
       }
     }
   },
-
 }

test/__snapshots__/preset-mini.test.ts.snap

@@ -23,6 +23,14 @@ exports[`preset-mini > targets 1`] = `
 .\\\\[content\\\\:attr\\\\(attr_content\\\\)\\\\]{content:attr(attr content);}
 .\\\\[content\\\\:attr\\\\(attr\\\\\\\\_content\\\\)\\\\]{content:attr(attr\\\\_content);}
 .\\\\[margin\\\\:logical_1rem_2rem_3rem\\\\]{margin:logical 1rem 2rem 3rem;}
+.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;}
 .-p-px{padding:-1px;}
 .\\\\!p-5px{padding:5px !important;}
 .first\\\\:p-2:first-child,

test/preset-mini-targets.ts

@@ -654,29 +654,13 @@ export const presetMiniTargets: string[] = [
   'light:text-sm',
 
   // variants
-  '-rotate-2',
-  '-translate-full',
-  '-translate-x-full',
-  '-translate-y-1/2',
   'active:scale-4',
   'hover:translate-x-3',
   'peer-checked:translate-x-[var(--reveal)]',
-
-  '-rotate-2',
-  'active:scale-4',
   '!hover:px-10',
-  '!m-$c-m',
-  '!p-5px',
-  '-gap-y-5',
-  '-m-auto',
-  '-mb-px',
-  '-p-px',
-  '-z-1',
-  'all:m-auto',
   'at-2xl:m2',
   'at-lg:m2',
   'at-sm:m1',
-  'children:m-auto',
   'disabled:op50',
   'first:p-2',
   'group-hover:group-focus:text-center',
@@ -687,19 +671,44 @@ export const presetMiniTargets: string[] = [
   'lt-sm:m1',
   'md:!hidden',
   'md:m-1',
-  'next:mt-0',
   'not-hover:p-3',
   'peer-not-placeholder-shown:text-2xl',
   'sm:m-1',
   'sm:m1',
 
+  // variants class
+  '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]',
+
   // variants combinators
+  'all:m-auto',
+  'children:m-auto',
+  'next:mt-0',
   'svg:fill-red',
 
   // variants layer
   'layer-1:translate-0',
   'layer-unocss:block',
 
+  // variants misc
+  '-rotate-2',
+  '-translate-full',
+  '-translate-x-full',
+  '-translate-y-1/2',
+  '!m-$c-m',
+  '!p-5px',
+  '-gap-y-5',
+  '-m-auto',
+  '-mb-px',
+  '-p-px',
+  '-z-1',
+
   // variants motion
   'motion-reduce:hover:translate-0',
   'motion-safe:transition',