feat: support for multiple @ parents (@media, @supports, etc) unocss/…

…unocss#1161
MellowCo · Jul 9, 2022 · bffeb98 · bffeb98
1 parent 0385275
commit bffeb98
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 13 deletions.
diff --git a/src/variants/breakpoints.ts b/src/variants/breakpoints.ts
@@ -42,7 +42,11 @@ export const variantBreakpoints: Variant<Theme> = {
         order -= (idx + 1)
         return {
           matcher: m,
-          parent: [`@media (max-width: ${calcMaxWidthBySize(size)})`, order],
+          handle: (input, next) => next({
+            ...input,
+            parent: `${input.parent ? `${input.parent} $$ ` : ''}@media (max-width: ${calcMaxWidthBySize(size)})`,
+            parentOrder: order,
+          }),
         }
       }
 
@@ -52,13 +56,21 @@ export const variantBreakpoints: Variant<Theme> = {
       if (isAtPrefix && idx < variantEntries.length - 1) {
         return {
           matcher: m,
-          parent: [`@media (min-width: ${size}) and (max-width: ${calcMaxWidthBySize(variantEntries[idx + 1][1])})`, order],
+          handle: (input, next) => next({
+            ...input,
+            parent: `${input.parent ? `${input.parent} $$ ` : ''}@media (min-width: ${size}) and (max-width: ${calcMaxWidthBySize(variantEntries[idx + 1][1])})`,
+            parentOrder: order,
+          }),
         }
       }
 
       return {
         matcher: m,
-        parent: [`@media (min-width: ${size})`, order],
+        handle: (input, next) => next({
+          ...input,
+          parent: `${input.parent ? `${input.parent} $$ ` : ''}@media (min-width: ${size})`,
+          parentOrder: order,
+        }),
       }
     }
   },

diff --git a/src/variants/media.ts b/src/variants/media.ts
@@ -12,8 +12,12 @@ export const variantCustomMedia: VariantObject = {
       const media = theme.media?.[match[1]] ?? `(--${match[1]})`
       return {
         matcher: matcher.slice(match[0].length),
-        parent: `@media ${media}`,
+        handle: (input, next) => next({
+          ...input,
+          parent: `${input.parent ? `${input.parent} $$ ` : ''}@media ${media}`,
+        }),
       }
     }
   },
+  multiPass: true,
 }
diff --git a/src/variants/misc.ts b/src/variants/misc.ts
@@ -21,7 +21,10 @@ export const variantCssLayer: Variant = {
     if (match) {
       return {
         matcher: matcher.slice(match[0].length),
-        parent: `@layer ${match[1]}`,
+        handle: (input, next) => next({
+          ...input,
+          parent: `${input.parent ? `${input.parent} $$ ` : ''}@layer ${match[1]}`,
+        }),
       }
     }
   },
@@ -59,17 +62,22 @@ export const variantVariables: Variant = {
     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,
+        handle(input, next) {
+          const updates = variant.startsWith('@')
+            ? {
+                parent: `${input.parent ? `${input.parent} $$ ` : ''}${variant}`,
+              }
+            : {
+                selector: variant.replace(/&/g, input.selector),
+              }
+          return next({
+            ...input,
+            ...updates,
+          })
+        },
       }
     }
   },

diff --git a/test/assets/preset-mini-targets.ts b/test/assets/preset-mini-targets.ts
@@ -887,6 +887,13 @@ export const presetMiniTargets: string[] = [
   '[&[readonly][disabled]]:m-15',
   '[@supports(display:grid)]:bg-red/33',
   '[@supports(display:grid)]:[*+&]:bg-red/34',
+
+  // variants - tagged & pseudo
+  'checked:next:text-slate-100',
+  'next:checked:text-slate-200',
+
+  // variants - multiple parents
+  'sm:lt-lg:p-10',
 ]
 
 export const presetMiniNonTargets = [