feat(core): support for multiple @ parents (@media, @supports, etc) (#…

…1161)
unocss · Jun 25, 2022 · eb8cb71 · eb8cb71
1 parent 9673316
commit eb8cb71
Show file tree

Hide file tree

Showing 7 changed files with 51 additions and 20 deletions.
diff --git a/packages/core/src/generator/index.ts b/packages/core/src/generator/index.ts
@@ -263,9 +263,11 @@ export class UnoGenerator {
             .reverse()
             .join(nl)
 
-          return parent
-            ? `${parent}{${nl}${rules}${nl}}`
-            : rules
+          if (!parent)
+            return rules
+
+          const parents = parent.split(' $$ ')
+          return `${parents.join('{')}{${nl}${rules}${nl}}${parents.map(_ => '').join('}')}`
         })
         .filter(Boolean)
         .join(nl)

diff --git a/packages/preset-mini/src/variants/breakpoints.ts b/packages/preset-mini/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,15 +56,24 @@ 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,
+        }),
       }
     }
   },
+  multiPass: true,
   autocomplete: '(at-|lt-|)$breakpoints:',
 }
diff --git a/packages/preset-mini/src/variants/media.ts b/packages/preset-mini/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/packages/preset-mini/src/variants/misc.ts b/packages/preset-mini/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,21 @@ 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/packages/preset-wind/src/rules/container.ts b/packages/preset-wind/src/rules/container.ts
@@ -1,5 +1,4 @@
-import type { Rule, Shortcut } from '@unocss/core'
-import { toArray } from '@unocss/core'
+import type { Rule, Shortcut, VariantHandlerContext } from '@unocss/core'
 import type { Theme } from '@unocss/preset-mini'
 import { resolveBreakpoints } from '@unocss/preset-mini/utils'
 
@@ -11,7 +10,7 @@ export const container: Rule<Theme>[] = [
     (m, { variantHandlers }) => {
       let width = '100%'
       for (const v of variantHandlers) {
-        const query = toArray(v.parent || [])[0]
+        const query = v.handle?.({} as VariantHandlerContext, x => x)?.parent
         if (typeof query === 'string') {
           const match = query.match(queryMatcher)?.[1]
           if (match)

diff --git a/test/__snapshots__/preset-mini.test.ts.snap b/test/__snapshots__/preset-mini.test.ts.snap
@@ -805,6 +805,9 @@ div:hover .group-\\\\[div\\\\:hover\\\\]-\\\\[combinator\\\\:test-4\\\\]{combina
 @media (max-width: 1023.9px){
 .lt-lg\\\\:m2{margin:0.5rem;}
 }
+@media (min-width: 640px){@media (max-width: 1023.9px){
+.sm\\\\:lt-lg\\\\:p-10{padding:2.5rem;}
+}}
 @media (max-width: 639.9px){
 .lt-sm\\\\:m1{margin:0.25rem;}
 }

diff --git a/test/assets/preset-mini-targets.ts b/test/assets/preset-mini-targets.ts
@@ -886,6 +886,9 @@ export const presetMiniTargets: string[] = [
   // variants - tagged & pseudo
   'checked:next:text-slate-100',
   'next:checked:text-slate-200',
+
+  // variants - multiple parents
+  'sm:lt-lg:p-10',
 ]
 
 export const presetMiniNonTargets = [