Repository: tailwindlabs/tailwindcss
Pull request #2824 (2020-11-19 19:42:40)

Add failing test for #2823
Here's a failing test for #2823.

Fixes: #2823

codecov-io: # [Codecov](https://codecov.io/gh/tailwindlabs/tailwindcss/pull/2824?src=pr&el=h1) Report
> Merging [#2824](https://codecov.io/gh/tailwindlabs/tailwindcss/pull/2824?src=pr&el=desc) (1e9ddc6) into [master](https://codecov.io/gh/tailwindlabs/tailwindcss/commit/3ea5e18c243cf00bc4d317c7d2282b528b7cdb70?el=desc) (3ea5e18) will **increase** coverage by `0.01%`.
> The diff coverage is `100.00%`.

[![Impacted file tree graph](https://codecov.io/gh/tailwindlabs/tailwindcss/pull/2824/graphs/tree.svg?width=650&height=150&src=pr&token=bY4d7WZ54r)](https://codecov.io/gh/tailwindlabs/tailwindcss/pull/2824?src=pr&el=tree)

```diff
@@            Coverage Diff             @@
##           master    #2824      +/-   ##
==========================================
+ Coverage   93.20%   93.22%   +0.01%     
==========================================
  Files         177      177              
  Lines        1795     1800       +5     
  Branches      317      318       +1     
==========================================
+ Hits         1673     1678       +5     
  Misses        105      105              
  Partials       17       17              
```


| [Impacted Files](https://codecov.io/gh/tailwindlabs/tailwindcss/pull/2824?src=pr&el=tree) | Coverage Δ | |
|---|---|---|
| [src/lib/substituteClassApplyAtRules.js](https://codecov.io/gh/tailwindlabs/tailwindcss/pull/2824/diff?src=pr&el=tree#diff-c3JjL2xpYi9zdWJzdGl0dXRlQ2xhc3NBcHBseUF0UnVsZXMuanM=) | `94.66% <100.00%> (+0.18%)` | :arrow_up: |

------

[Continue to review full report at Codecov](https://codecov.io/gh/tailwindlabs/tailwindcss/pull/2824?src=pr&el=continue).
> **Legend** - [Click here to learn more](https://docs.codecov.io/docs/codecov-delta)
> `Δ = absolute <relative> (impact)`, `ø = not affected`, `? = missing data`
> Powered by [Codecov](https://codecov.io/gh/tailwindlabs/tailwindcss/pull/2824?src=pr&el=footer). Last update [3ea5e18...1e9ddc6](https://codecov.io/gh/tailwindlabs/tailwindcss/pull/2824?src=pr&el=lastupdated). Read the [comment docs](https://docs.codecov.io/docs/pull-request-comments).

RobinMalfait: Hey! Thank you for your PR! I love that you pushed a failing test!
Much appreciated! 🙏

I pushed the fixes directly to your branch. 

Thanks!

Patch:
diff --git a/jest/customMatchers.js b/jest/customMatchers.js
index 32fbd588..e5e5b434 100644
--- a/jest/customMatchers.js
+++ b/jest/customMatchers.js
@@ -2,7 +2,6 @@ import prettier from 'prettier'
 import diff from 'jest-diff'
 
 function format(input) {
-  return input
   return prettier.format(input, {
     parser: 'css',
     printWidth: 100,
diff --git a/src/lib/substituteClassApplyAtRules.js b/src/lib/substituteClassApplyAtRules.js
index 9763118c..95e4bce3 100644
--- a/src/lib/substituteClassApplyAtRules.js
+++ b/src/lib/substituteClassApplyAtRules.js
@@ -242,11 +242,21 @@ function processApplyAtRules(css, lookupTree, config) {
           : (util) => util.rule.nodes.forEach((n) => afterRule.append(n.clone()))
       )
 
-      const { nodes } = _.tap(postcss.root({ nodes: rulesToInsert }), (root) =>
+      rulesToInsert.forEach((rule) => {
+        if (rule.type === 'atrule') {
+          rule.walkRules((rule) => {
+            rule.__tailwind = { ...rule.__tailwind, important }
+          })
+        } else {
+          rule.__tailwind = { ...rule.__tailwind, important }
+        }
+      })
+
+      const { nodes } = _.tap(postcss.root({ nodes: rulesToInsert }), (root) => {
         root.walkDecls((d) => {
           d.important = important
         })
-      )
+      })
 
       const mergedRules = mergeAdjacentRules(nearestParentRule, [...nodes, afterRule])
 


Test patch:
diff --git a/__tests__/applyAtRule.test.js b/__tests__/applyAtRule.test.js
index 4cab89e1..36a86293 100644
--- a/__tests__/applyAtRule.test.js
+++ b/__tests__/applyAtRule.test.js
@@ -1002,14 +1002,10 @@ describe('using apply with the prefix option', () => {
 
   test('a "Did You Mean" suggestion is omitted if a similar class cannot be identified.', () => {
     const input = `
-        .foo { @apply anteater; }
-      `
+      .foo { @apply anteater; }
+    `
 
-    const config = resolveConfig([
-      {
-        ...defaultConfig,
-      },
-    ])
+    const config = resolveConfig([{ ...defaultConfig }])
 
     expect.assertions(1)
 
@@ -1109,7 +1105,7 @@ test('you can apply classes to a rule with multiple selectors', () => {
         @apply float-left opacity-50 hover:opacity-100 md:float-right;
       }
     }
-    `
+  `
 
   const expected = `
     @supports (display: grid) {
@@ -1134,6 +1130,48 @@ test('you can apply classes to a rule with multiple selectors', () => {
   })
 })
 
+test('you can apply classes to a rule with multiple selectors with important and a prefix enabled', () => {
+  const input = `
+    @supports (display: grid) {
+      .foo, h1 > .bar * {
+        @apply tw-float-left tw-opacity-50 hover:tw-opacity-100 md:tw-float-right;
+      }
+    }
+  `
+
+  const expected = `
+    @supports (display: grid) {
+      .foo, h1 > .bar * {
+        float: left;
+        opacity: 0.5;
+      }
+
+      .foo:hover, h1 > .bar *:hover {
+        opacity: 1;
+      }
+
+      @media (min-width: 768px) {
+        .foo, h1 > .bar * {
+          float: right;
+        }
+      }
+    }
+  `
+
+  const config = resolveConfig([
+    {
+      ...defaultConfig,
+      prefix: 'tw-',
+      important: true,
+    },
+  ])
+
+  return run(input, config).then((result) => {
+    expect(result.css).toMatchCss(expected)
+    expect(result.warnings().length).toBe(0)
+  })
+})
+
 test('you can apply classes in a nested rule', () => {
   const input = `
     .selector {
@@ -1241,11 +1279,11 @@ test('declarations within a rule that uses @apply can be !important', () => {
   `
 
   const expected = `
-  .foo {
-    text-align: center;
-    float: left;
-    display: block !important;
-  }
+    .foo {
+      text-align: center;
+      float: left;
+      display: block !important;
+    }
   `
 
   expect.assertions(2)
@@ -1266,11 +1304,11 @@ test('declarations within a rule that uses @apply with !important remain not !im
   `
 
   const expected = `
-  .foo {
-    text-align: center !important;
-    float: left;
-    display: block !important;
-  }
+    .foo {
+      text-align: center !important;
+      float: left;
+      display: block !important;
+    }
   `
 
   expect.assertions(2)