Fix @apply order regression (in addComponents, addUtilities, ...)

CHANGELOG.md

@@ -7,7 +7,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
-- Nothing yet!
+### Fixed
+
+- Fix `@apply` order regression (in `addComponents`, `addUtilities`, ...) ([#7232](https://github.com/tailwindlabs/tailwindcss/pull/7232))
 
 ## [3.0.17] - 2022-01-26
 

src/processTailwindFeatures.js

@@ -16,6 +16,9 @@ export default function processTailwindFeatures(setupContext) {
     let { tailwindDirectives, applyDirectives } = normalizeTailwindDirectives(root)
 
     detectNesting()(root, result)
+
+    // Partition apply rules that are found in the css
+    // itself.
     partitionApplyAtRules()(root, result)
 
     let context = setupContext({
@@ -42,6 +45,9 @@ export default function processTailwindFeatures(setupContext) {
     issueFlagNotices(context.tailwindConfig)
 
     expandTailwindAtRules(context)(root, result)
+    // Partition apply rules that are generated by
+    // addComponents, addUtilities and so on.
+    partitionApplyAtRules()(root, result)
     expandApplyAtRules(context)(root, result)
     evaluateTailwindFunctions(context)(root, result)
     substituteScreenAtRules(context)(root, result)

tests/apply.test.js

@@ -1253,3 +1253,36 @@ it('apply partitioning works with media queries', async () => {
     ${defaults}
   `)
 })
+
+it('should be possible to use apply in plugins', async () => {
+  let config = {
+    content: [{ raw: html`<div class="a b"></div>` }],
+    corePlugins: { preflight: false },
+    plugins: [
+      function ({ addComponents }) {
+        addComponents({
+          '.a': {
+            color: 'red',
+          },
+          '.b': {
+            '@apply a': {},
+            color: 'blue',
+          },
+        })
+      },
+    ],
+  }
+
+  return run('@tailwind components', config).then((result) => {
+    expect(result.css).toMatchFormattedCss(css`
+      .a {
+        color: red;
+      }
+
+      .b {
+        color: red;
+        color: blue;
+      }
+    `)
+  })
+})