Ensure all selectors in a rule receive important scope

Author: adamwathan

__tests__/processPlugins.test.js

@@ -877,7 +877,7 @@ test('plugins respect prefix and important options by default when adding utilit
     `)
 })
 
-test('plugins respect prefix and important (selector) options by default when adding utilities', () => {
+test('when important is a selector it is used to scope utilities instead of adding !important', () => {
   const { utilities } = processPlugins(
     [
       function({ addUtilities }) {
@@ -889,14 +889,38 @@ test('plugins respect prefix and important (selector) options by default when ad
       },
     ],
     makeConfig({
-      prefix: 'tw-',
       important: '#app',
     })
   )
 
   expect(css(utilities)).toMatchCss(`
     @variants {
-      #app .tw-rotate-90 {
+      #app .rotate-90 {
+        transform: rotate(90deg)
+      }
+    }
+    `)
+})
+
+test('when important is a selector it scopes all selectors in a rule, even though defining utilities like this is stupid', () => {
+  const { utilities } = processPlugins(
+    [
+      function({ addUtilities }) {
+        addUtilities({
+          '.rotate-90, .rotate-1\\/4': {
+            transform: 'rotate(90deg)',
+          },
+        })
+      },
+    ],
+    makeConfig({
+      important: '#app',
+    })
+  )
+
+  expect(css(utilities)).toMatchCss(`
+    @variants {
+      #app .rotate-90, #app .rotate-1\\/4 {
         transform: rotate(90deg)
       }
     }

src/util/processPlugins.js

@@ -59,7 +59,9 @@ export default function(plugins, config) {
             if (config.important === true) {
               rule.walkDecls(decl => (decl.important = true))
             } else if (typeof config.important === 'string') {
-              rule.selector = increaseSpecificity(config.important, rule.selector)
+              rule.selectors = rule.selectors.map(selector => {
+                return increaseSpecificity(config.important, selector)
+              })
             }
           }
         })