Support applying non-prefixed class when using important scope

Author: adamwathan

__tests__/applyAtRule.test.js

@@ -243,7 +243,7 @@ test('you can apply utility classes without using the given prefix when using a
   })
 })
 
-test('you can apply utility classes without specificity prefix even if important (selector) is used.', () => {
+test('you can apply utility classes without specificity prefix even if important (selector) is used', () => {
   const input = `
     .foo { @apply .mt-8 .mb-8; }
   `
@@ -264,3 +264,26 @@ test('you can apply utility classes without specificity prefix even if important
     expect(result.warnings().length).toBe(0)
   })
 })
+
+test('you can apply utility classes without using the given prefix even if important (selector) is used', () => {
+  const input = `
+    .foo { @apply .tw-mt-4 .mb-4; }
+  `
+
+  const expected = `
+    .foo { margin-top: 1rem; margin-bottom: 1rem; }
+  `
+
+  const config = resolveConfig([
+    {
+      ...defaultConfig,
+      prefix: 'tw-',
+      important: '#app',
+    },
+  ])
+
+  return run(input, config, processPlugins(corePlugins(config), config).utilities).then(result => {
+    expect(result.css).toEqual(expected)
+    expect(result.warnings().length).toBe(0)
+  })
+})

src/lib/substituteClassApplyAtRules.js

@@ -83,11 +83,41 @@ export default function(config, generatedUtilities) {
 
             return _.reduce(
               [
-                () => findClass(classToApply, classLookup, onError),
-                () => findClass(classToApply, shadowLookup, onError),
-                () => findClass(prefixSelector(config.prefix, classToApply), shadowLookup, onError),
-                // prettier-ignore
-                () => findClass(increaseSpecificity(config.important, classToApply), shadowLookup, onError),
+                // Find exact class match in user's CSS
+                () => {
+                  return findClass(classToApply, classLookup, onError)
+                },
+                // Find exact class match in shadow lookup
+                () => {
+                  return findClass(classToApply, shadowLookup, onError)
+                },
+                // Find prefixed version of class in shadow lookup
+                () => {
+                  return findClass(
+                    prefixSelector(config.prefix, classToApply),
+                    shadowLookup,
+                    onError
+                  )
+                },
+                // Find important-scoped version of class in shadow lookup
+                () => {
+                  return findClass(
+                    increaseSpecificity(config.important, classToApply),
+                    shadowLookup,
+                    onError
+                  )
+                },
+                // Find important-scoped and prefixed version of class in shadow lookup
+                () => {
+                  return findClass(
+                    increaseSpecificity(
+                      config.important,
+                      prefixSelector(config.prefix, classToApply)
+                    ),
+                    shadowLookup,
+                    onError
+                  )
+                },
                 () => {
                   // prettier-ignore
                   throw onError(`\`@apply\` cannot be used with \`${classToApply}\` because \`${classToApply}\` either cannot be found, or its actual definition includes a pseudo-selector like :hover, :active, etc. If you're sure that \`${classToApply}\` exists, make sure that any \`@import\` statements are being properly processed *before* Tailwind CSS sees your CSS, as \`@apply\` can only be used for classes in the same CSS tree.`)