diff --git a/__tests__/applyAtRule.test.js b/__tests__/applyAtRule.test.js index c4803b5ea..2de552e82 100644 --- a/__tests__/applyAtRule.test.js +++ b/__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) + }) +}) diff --git a/src/lib/substituteClassApplyAtRules.js b/src/lib/substituteClassApplyAtRules.js index 65f3c68d7..59439e87b 100644 --- a/src/lib/substituteClassApplyAtRules.js +++ b/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.`)