From db8e06c2823adbf50e83613f975c1dca8de156ac Mon Sep 17 00:00:00 2001
From: Adam Wathan <adam.wathan@gmail.com>
Date: Wed, 7 Mar 2018 08:13:02 -0500
Subject: [PATCH] Add test for nested rules

---
 __tests__/processPlugins.test.js | 55 ++++++++++++++++++++++++++++++++
 1 file changed, 55 insertions(+)

diff --git a/__tests__/processPlugins.test.js b/__tests__/processPlugins.test.js
index 2ebd9419cc26..90e4a168ad72 100644
--- a/__tests__/processPlugins.test.js
+++ b/__tests__/processPlugins.test.js
@@ -451,6 +451,61 @@ test('media queries can be defined multiple times using objects-in-array syntax'
   `)
 })
 
+test('plugins can create nested rules', () => {
+  const [components, utilities] = processPluginsWithValidConfig({
+    plugins: [
+      function({ addComponents }) {
+        addComponents({
+          '.btn-blue': {
+            backgroundColor: 'blue',
+            color: 'white',
+            padding: '.5rem 1rem',
+            borderRadius: '.25rem',
+            '&:hover': {
+              backgroundColor: 'darkblue',
+            },
+            '@media (min-width: 500px)': {
+              '&:hover': {
+                backgroundColor: 'orange',
+              },
+            },
+            '> a': {
+              color: 'red',
+            },
+            'h1 &': {
+              color: 'purple',
+            }
+          },
+        })
+      },
+    ],
+  })
+
+  expect(utilities.length).toBe(0)
+  expect(css(components)).toMatchCss(`
+    .btn-blue {
+      background-color: blue;
+      color: white;
+      padding: .5rem 1rem;
+      border-radius: .25rem;
+    }
+    .btn-blue:hover {
+      background-color: darkblue;
+    }
+    @media (min-width: 500px) {
+      .btn-blue:hover {
+        background-color: orange;
+      }
+    }
+    .btn-blue > a {
+      color: red;
+    }
+    h1 .btn-blue {
+      color: purple;
+    }
+  `)
+})
+
 test('plugins can create rules with escaped selectors', () => {
   const config = {
     plugins: [