Throw if contains a class

Author: adamwathan

__tests__/processPlugins.test.js

@@ -960,6 +960,25 @@ test('when important is a selector it is used to scope utilities instead of addi
     `)
 })
 
+test('when important contains a class an error is thrown', () => {
+  expect(() => {
+    processPlugins(
+      [
+        function({ addUtilities }) {
+          addUtilities({
+            '.rotate-90': {
+              transform: 'rotate(90deg)',
+            },
+          })
+        },
+      ],
+      makeConfig({
+        important: '#app .project',
+      })
+    )
+  }).toThrow()
+})
+
 test('when important is a selector it scopes all selectors in a rule, even though defining utilities like this is stupid', () => {
   const { utilities } = processPlugins(
     [

src/util/processPlugins.js

@@ -9,6 +9,7 @@ import parseObjectStyles from '../util/parseObjectStyles'
 import prefixSelector from '../util/prefixSelector'
 import wrapWithVariants from '../util/wrapWithVariants'
 import increaseSpecificity from '../util/increaseSpecificity'
+import selectorParser from 'postcss-selector-parser'
 
 function parseStyles(styles) {
   if (!Array.isArray(styles)) {
@@ -18,6 +19,14 @@ function parseStyles(styles) {
   return _.flatMap(styles, style => (style instanceof Node ? style : parseObjectStyles(style)))
 }
 
+function containsClass(value) {
+  return selectorParser(selectors => {
+    let classFound = false
+    selectors.walkClasses(() => (classFound = true))
+    return classFound
+  }).transformSync(value)
+}
+
 export default function(plugins, config) {
   const pluginBaseStyles = []
   const pluginComponents = []
@@ -86,6 +95,12 @@ export default function(plugins, config) {
             if (config.important === true) {
               rule.walkDecls(decl => (decl.important = true))
             } else if (typeof config.important === 'string') {
+              if (containsClass(config.important)) {
+                throw rule.error(
+                  `Classes are not allowed when using the \`important\` option with a string argument. Please use an ID instead.`
+                )
+              }
+
               rule.selectors = rule.selectors.map(selector => {
                 return increaseSpecificity(config.important, selector)
               })