Merge pull request tailwindlabs#1053 from tailwindcss/dont-generate-variants-for-nested-rules

Don't mutate nested rules when generating variants

Author: adamwathan

__tests__/variantsAtRule.test.js

@@ -393,6 +393,43 @@ test('the default variant can be generated in a specified position', () => {
   })
 })
 
+test('nested rules are not modified', () => {
+  const input = `
+    @variants focus, active, hover {
+      .banana {
+        color: yellow;
+        .chocolate { color: brown; }
+      }
+    }
+  `
+
+  const output = `
+    .banana {
+      color: yellow;
+      .chocolate { color: brown; }
+    }
+    .focus\\:banana:focus {
+      color: yellow;
+      .chocolate { color: brown; }
+    }
+    .active\\:banana:active {
+      color: yellow;
+      .chocolate { color: brown; }
+    }
+    .hover\\:banana:hover {
+      color: yellow;
+      .chocolate { color: brown; }
+    }
+  `
+
+  return run(input, {
+    ...config,
+  }).then(result => {
+    expect(result.css).toMatchCss(output)
+    expect(result.warnings().length).toBe(0)
+  })
+})
+
 test('plugin variants can modify rules using the raw PostCSS API', () => {
   const input = `
     @variants important {

src/util/generateVariantFunction.js

@@ -12,7 +12,11 @@ export default function generateVariantFunction(generator) {
           container: cloned,
           separator: config.separator,
           modifySelectors: modifierFunction => {
-            cloned.walkRules(rule => {
+            cloned.each(rule => {
+              if (rule.type !== 'rule') {
+                return
+              }
+
               rule.selectors = rule.selectors.map(selector => {
                 const className = selectorParser(selectors => {
                   return selectors.first.filter(({ type }) => type === 'class').pop().value