feat(preset-mini)!: add variable variant (#1128)

packages/core/src/extractors/split.ts

@@ -1,7 +1,7 @@
 import type { Extractor } from '../types'
 import { isValidSelector } from '../utils'
 
-export const splitCode = (code: string) => code.split(/[\s'"`;>=]+/g).filter(isValidSelector)
+export const splitCode = (code: string) => code.split(/[\s'"`;=]+/g).filter(isValidSelector)
 
 export const extractorSplit: Extractor = {
   name: 'split',

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

@@ -5,13 +5,14 @@ import { variantBreakpoints } from './breakpoints'
 import { variantCombinators } from './combinators'
 import { variantColorsMediaOrClass } from './dark'
 import { variantLanguageDirections } from './directions'
-import { variantCssLayer, variantInternalLayer, variantScope, variantSelector } from './misc'
+import { variantCssLayer, variantInternalLayer, variantScope, variantSelector, variantVariables } from './misc'
 import { variantNegative } from './negative'
 import { variantImportant } from './important'
 import { variantCustomMedia, variantPrint } from './media'
 import { partClasses, variantPseudoClassFunctions, variantPseudoClassesAndElements, variantTaggedPseudoClasses } from './pseudo'
 
 export const variants = (options: PresetMiniOptions): Variant<Theme>[] => [
+  variantVariables,
   variantCssLayer,
 
   variantSelector,

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

@@ -1,4 +1,5 @@
 import type { Variant } from '@unocss/core'
+import { handler as h } from '../utils'
 
 export const variantSelector: Variant = {
   name: 'selector',
@@ -52,3 +53,25 @@ export const variantScope: Variant = {
   },
 }
 
+export const variantVariables: Variant = {
+  name: 'variables',
+  match(matcher) {
+    const match = matcher.match(/^(\[[^\]]+\]):/)
+    if (match) {
+      const variant = h.bracket(match[1]) ?? ''
+      const updates = variant.startsWith('@')
+        ? {
+            parent: variant,
+          }
+        : {
+            selector: (s: string) => variant.replace(/&/g, s),
+          }
+
+      return {
+        matcher: matcher.slice(match[0].length),
+        ...updates,
+      }
+    }
+  },
+  multiPass: true,
+}

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

@@ -69,13 +69,17 @@ div:hover .group-\\\\[div\\\\:hover\\\\]-\\\\[combinator\\\\:test-4\\\\]{combina
 .pis-10px{padding-inline-start:10px;}
 .-m-lg{margin:-1.125rem;}
 .\\\\!m-\\\\$c-m{margin:var(--c-m) !important;}
+.\\\\[\\\\&_\\\\&\\\\]\\\\:m-13 .\\\\[\\\\&_\\\\&\\\\]\\\\:m-13{margin:3.25rem;}
+.\\\\[\\\\&\\\\:nth-child\\\\(2\\\\)\\\\]\\\\:m-10:nth-child(2){margin:2.5rem;}
+.\\\\[\\\\&\\\\>\\\\*\\\\]\\\\:m-11>*{margin:2.75rem;}
 .all\\\\:m-auto *,
 .children\\\\:m-auto>*,
 .m-auto{margin:auto;}
 .m-\\\\[3em\\\\]{margin:3em;}
 .m-0,
 .m-none{margin:0rem;}
 .m-1\\\\/2{margin:50%;}
+*>.\\\\[\\\\*\\\\>\\\\&\\\\]\\\\:m-12{margin:3rem;}
 .m-xy,
 .mxy{margin:1rem;}
 .my-auto{margin-top:auto;margin-bottom:auto;}
@@ -790,6 +794,10 @@ div:hover .group-\\\\[div\\\\:hover\\\\]-\\\\[combinator\\\\:test-4\\\\]{combina
 .print\\\\:block{display:block;}
 .print\\\\:link\\\\:\\\\!underline:link{text-decoration-line:underline !important;}
 }
+@supports(display:grid){
+.\\\\[\\\\@supports\\\\(display\\\\:grid\\\\)\\\\]\\\\:bg-red\\\\/33{background-color:rgba(248,113,113,0.33);}
+*+.\\\\[\\\\@supports\\\\(display\\\\:grid\\\\)\\\\]\\\\:\\\\[\\\\*\\\\+\\\\&\\\\]\\\\:bg-red\\\\/34{background-color:rgba(248,113,113,0.34);}
+}
 @media (max-width: 1023.9px){
 .lt-lg\\\\:m2{margin:0.5rem;}
 }

test/assets/preset-mini-targets.ts

@@ -872,6 +872,14 @@ export const presetMiniTargets: string[] = [
   'peer-checked:bg-blue-500',
   'parent-hover:text-center',
   'previous-checked:bg-red-500',
+
+  // variants - variables
+  '[&:nth-child(2)]:m-10',
+  '[&>*]:m-11',
+  '[*>&]:m-12',
+  '[&_&]:m-13',
+  '[@supports(display:grid)]:bg-red/33',
+  '[@supports(display:grid)]:[*+&]:bg-red/34',
 ]
 
 export const presetMiniNonTargets = [