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

Fixes #2362.
tailwindlabs · Sep 13, 2020 · 364a7b6 · 364a7b6
1 parent 4e322b2
commit 364a7b6
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 3 deletions.
diff --git 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
@@ -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)