Custom at rules nesting issues (#137)

* Fix childless custom at-rules nested in bubbling at-rules

* Fix non-bubbling custom at-rules with children, nested in bubbling at-rules

Author: bsak-shell

index.js

@@ -66,26 +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') {
-      atruleChilds(rule, child, bubbling)
-    }
-  })
-  if (bubbling) {
-    if (children.length) {
-      let clone = rule.clone({ nodes: [] })
-      for (let child of children) {
-        clone.append(child)
+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)
+        }
+        atrule.prepend(clone)
       }
-      atrule.prepend(clone)
     }
   }
 }
@@ -120,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',

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 { @phone { color: black } }',
-    '.one { @mixin test; } @phone { .two { 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']