Don't propogate apply !important option to non-apply rules

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
 

__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)
+  })
+})

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)