From c3c0b6b6eee9c84804f69e406670d229a1e427ce Mon Sep 17 00:00:00 2001
From: bsak-shell <bartosz.sak@shell.com>
Date: Fri, 23 Jul 2021 13:34:39 +0200
Subject: [PATCH 1/2] Fix childless custom at-rules nested in bubbling at-rules

---
 index.js      | 6 +++++-
 index.test.js | 4 ++--
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/index.js b/index.js
index 96780fa..bd76bc4 100644
--- a/index.js
+++ b/index.js
@@ -76,7 +76,11 @@ function atruleChilds (rule, atrule, bubbling) {
     } else if (child.type === 'rule' && bubbling) {
       child.selectors = selectors(rule, child)
     } else if (child.type === 'atrule') {
-      atruleChilds(rule, child, bubbling)
+      if (child.nodes) {
+        atruleChilds(rule, child, bubbling)
+      } else {
+        children.push(child)
+      }
     }
   })
   if (bubbling) {
diff --git a/index.test.js b/index.test.js
index 6c4eccb..f872170 100644
--- a/index.test.js
+++ b/index.test.js
@@ -96,8 +96,8 @@ it('unwraps at-rules with interleaved properties', () => {
 
 it('do not move custom at-rules', () => {
   run(
-    '.one { @mixin test; } .two { @phone { color: black } }',
-    '.one { @mixin test; } @phone { .two { color: black } }',
+    '.one { @mixin test; } .two { @media screen { @mixin test; } } .three { @phone { color: black } }',
+    '.one { @mixin test; } @media screen { .two { @mixin test } } @phone { .three { color: black } }',
     { bubble: ['phone'] }
   )
 })

From 91fc42ac9f08fa8d2f5cd3dd828edbfa9f76ca63 Mon Sep 17 00:00:00 2001
From: bsak-shell <bartosz.sak@shell.com>
Date: Fri, 23 Jul 2021 16:37:50 +0200
Subject: [PATCH 2/2] Fix non-bubbling custom at-rules with children, nested in
 bubbling at-rules

---
 index.js      | 45 ++++++++++++++++++++++++---------------------
 index.test.js | 13 ++++++++++---
 2 files changed, 34 insertions(+), 24 deletions(-)

diff --git a/index.js b/index.js
index bd76bc4..e6ebd92 100644
--- a/index.js
+++ b/index.js
@@ -66,30 +66,32 @@ function pickComment (comment, after) {
   }
 }
 
-function atruleChilds (rule, atrule, bubbling) {
-  let children = []
-  atrule.each(child => {
-    if (child.type === 'comment') {
-      children.push(child)
-    } else if (child.type === 'decl') {
-      children.push(child)
-    } else if (child.type === 'rule' && bubbling) {
-      child.selectors = selectors(rule, child)
-    } else if (child.type === 'atrule') {
-      if (child.nodes) {
-        atruleChilds(rule, child, bubbling)
-      } else {
+function createFnAtruleChilds (bubble) {
+  return function atruleChilds (rule, atrule, bubbling) {
+    let children = []
+    atrule.each(child => {
+      if (child.type === 'comment') {
+        children.push(child)
+      } else if (child.type === 'decl') {
         children.push(child)
+      } else if (child.type === 'rule' && bubbling) {
+        child.selectors = selectors(rule, child)
+      } else if (child.type === 'atrule') {
+        if (child.nodes && bubble[child.name]) {
+          atruleChilds(rule, child, true)
+        } else {
+          children.push(child)
+        }
       }
-    }
-  })
-  if (bubbling) {
-    if (children.length) {
-      let clone = rule.clone({ nodes: [] })
-      for (let child of children) {
-        clone.append(child)
+    })
+    if (bubbling) {
+      if (children.length) {
+        let clone = rule.clone({ nodes: [] })
+        for (let child of children) {
+          clone.append(child)
+        }
+        atrule.prepend(clone)
       }
-      atrule.prepend(clone)
     }
   }
 }
@@ -124,6 +126,7 @@ function atruleNames (defaults, custom) {
 
 module.exports = (opts = {}) => {
   let bubble = atruleNames(['media', 'supports'], opts.bubble)
+  let atruleChilds = createFnAtruleChilds(bubble)
   let unwrap = atruleNames(
     [
       'document',
diff --git a/index.test.js b/index.test.js
index f872170..96cb051 100644
--- a/index.test.js
+++ b/index.test.js
@@ -94,14 +94,21 @@ it('unwraps at-rules with interleaved properties', () => {
   )
 })
 
-it('do not move custom at-rules', () => {
+it('does not move custom at-rules', () => {
   run(
-    '.one { @mixin test; } .two { @media screen { @mixin test; } } .three { @phone { color: black } }',
-    '.one { @mixin test; } @media screen { .two { @mixin test } } @phone { .three { color: black } }',
+    '.one { @mixin test; } .two { @media screen { @mixin test; } } .three { @media screen { @mixin test { color: black } } } .four { @phone { color: black } }',
+    '.one { @mixin test; } @media screen { .two { @mixin test } } @media screen { .three { @mixin test { color: black } } } @phone { .four { color: black } }',
     { bubble: ['phone'] }
   )
 })
 
+it('does not move custom at-rules placed under nested bubbling ones', () => {
+  run(
+    '.one { @supports (color: black) { @media screen { @mixin test; } } } .two { @supports (color: black) { @media screen { @mixin test { color: black } } } }',
+    '@supports (color: black) { @media screen {.one { @mixin test } } } @supports (color: black) { @media screen { .two { @mixin test { color: black } } } }'
+  )
+})
+
 it('supports bubble option with at-name', () => {
   run('a { @phone { color: black } }', '@phone {a { color: black } }', {
     bubble: ['@phone']