Repository: tailwindlabs/tailwindcss (ts)

Issue:
!important gets deleted from build when applyComplexClasses is enabled
One thing I just noticed when trying out `applyComplexClasses` in v.1.8.6 is that all of my `!important` statements are stripped out from the compiled code.
I use PostCSS with the next build config:
```
postcss: {
    // Allows the use of single line comments
    // in .pscss and .vue files
    parser: 'postcss-comment',
    plugins: {
      'postcss-import': {},
      tailwindcss: {},
      'postcss-nested': {},
      'postcss-hexrgba': {},
      'postcss-custom-properties': {
        importFrom: [{customProperties}]
      },
      autoprefixer: {}
    },
    preset: {
      // Change the postcss-preset-env settings
      autoprefixer: {
        grid: true
      }
    }
  },
```
than in my vue component I have
```
.swiper{
   &-pagination {
      bottom: -40px !important;
   }
}
```
resulting code just doesn't contain that !important:
```
.swiper-pagination {
    bottom: -40px;
}
```
without `applyComplexClasses` !important is there

I tried to use 
```
'postcss-nested': { bubble: ['screen']},
```
above tailwindcss in the config but that that just makes build fail

also wanted to mention that it's not connected with purgeCSS since it was off  


Pull request:
Don't propogate apply !important option to non-apply rules
Fixes #2362.


Patch:
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8661a1c6..6abce51a 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/src/flagged/applyComplexClasses.js b/src/flagged/applyComplexClasses.js
index 23612af5..5e4dfe3e 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)


Test patch:
diff --git a/__tests__/applyComplexClasses.test.js b/__tests__/applyComplexClasses.test.js
index 2301fb40..fb6c114d 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)
+  })
+})