diff --git a/CHANGELOG.md b/CHANGELOG.md index 8661a1c6818d..6abce51ad608 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -9,6 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Add negative spacing values to inset plugin in the `extendedSpacingScale` experiment ([#2358](https://github.com/tailwindlabs/tailwindcss/pull/2358)) - Add `future` section to config stubs ([#2372](https://github.com/tailwindlabs/tailwindcss/pull/2372), [3090b98](https://github.com/tailwindlabs/tailwindcss/commit/3090b98ece766b1046abe5bbaa94204e811f7fac)) +- Fix issue where `!important` was stripped from declarations within rules that used `@apply` with `applyComplexClasses` ([#2376](https://github.com/tailwindlabs/tailwindcss/pull/2376)) ## [1.8.8] - 2020-09-11 diff --git a/__tests__/applyComplexClasses.test.js b/__tests__/applyComplexClasses.test.js index 2301fb400471..fb6c114da1a8 100644 --- a/__tests__/applyComplexClasses.test.js +++ b/__tests__/applyComplexClasses.test.js @@ -1094,3 +1094,53 @@ test('you can deeply apply classes in a custom nested @atrule', () => { expect(result.warnings().length).toBe(0) }) }) + +test('declarations within a rule that uses @apply can be !important', () => { + const input = ` + .foo { + @apply text-center; + float: left; + display: block !important; + } + ` + + const expected = ` + .foo { + text-align: center; + float: left; + display: block !important; + } + ` + + expect.assertions(2) + + return run(input).then(result => { + expect(result.css).toMatchCss(expected) + expect(result.warnings().length).toBe(0) + }) +}) + +test('declarations within a rule that uses @apply with !important remain not !important', () => { + const input = ` + .foo { + @apply text-center !important; + float: left; + display: block !important; + } + ` + + const expected = ` + .foo { + text-align: center !important; + float: left; + display: block !important; + } + ` + + expect.assertions(2) + + return run(input).then(result => { + expect(result.css).toMatchCss(expected) + expect(result.warnings().length).toBe(0) + }) +}) diff --git a/src/flagged/applyComplexClasses.js b/src/flagged/applyComplexClasses.js index 23612af53de4..5e4dfe3e1374 100644 --- a/src/flagged/applyComplexClasses.js +++ b/src/flagged/applyComplexClasses.js @@ -238,15 +238,13 @@ function processApplyAtRules(css, lookupTree, config) { : util => util.rule.nodes.forEach(n => afterRule.append(n.clone())) ) - rulesToInsert.push(afterRule) - const { nodes } = _.tap(postcss.root({ nodes: rulesToInsert }), root => root.walkDecls(d => { d.important = important }) ) - const mergedRules = mergeAdjacentRules(nearestParentRule, nodes) + const mergedRules = mergeAdjacentRules(nearestParentRule, [...nodes, afterRule]) applyRule.remove() parent.after(mergedRules)