Ensure @apply works consistently with or without @layer

CHANGELOG.md

@@ -12,6 +12,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Allow use of falsy values in theme config ([#6917](https://github.com/tailwindlabs/tailwindcss/pull/6917))
 - Ensure we can apply classes that are grouped with non-class selectors ([#6922](https://github.com/tailwindlabs/tailwindcss/pull/6922))
 - Improve standalone CLI compatibility on Linux by switching to the `linuxstatic` build target ([#6914](https://github.com/tailwindlabs/tailwindcss/pull/6914))
+- Ensure `@apply` works consistently with or without `@layer` ([#6938](https://github.com/tailwindlabs/tailwindcss/pull/6938))
 
 ## [3.0.11] - 2022-01-05
 

src/lib/expandApplyAtRules.js

@@ -72,47 +72,6 @@ function extractApplyCandidates(params) {
   return [candidates, false]
 }
 
-function partitionApplyParents(root) {
-  let applyParents = new Set()
-
-  root.walkAtRules('apply', (rule) => {
-    applyParents.add(rule.parent)
-  })
-
-  for (let rule of applyParents) {
-    let nodeGroups = []
-    let lastGroup = []
-
-    for (let node of rule.nodes) {
-      if (node.type === 'atrule' && node.name === 'apply') {
-        if (lastGroup.length > 0) {
-          nodeGroups.push(lastGroup)
-          lastGroup = []
-        }
-        nodeGroups.push([node])
-      } else {
-        lastGroup.push(node)
-      }
-    }
-
-    if (lastGroup.length > 0) {
-      nodeGroups.push(lastGroup)
-    }
-
-    if (nodeGroups.length === 1) {
-      continue
-    }
-
-    for (let group of [...nodeGroups].reverse()) {
-      let newParent = rule.clone({ nodes: [] })
-      newParent.append(group)
-      rule.after(newParent)
-    }
-
-    rule.remove()
-  }
-}
-
 function processApply(root, context) {
   let applyCandidates = new Set()
 
@@ -343,7 +302,6 @@ function processApply(root, context) {
 
 export default function expandApplyAtRules(context) {
   return (root) => {
-    partitionApplyParents(root)
     processApply(root, context)
   }
 }

src/lib/setupContextUtils.js

@@ -20,6 +20,58 @@ import log from '../util/log'
 import negateValue from '../util/negateValue'
 import isValidArbitraryValue from '../util/isValidArbitraryValue'
 
+function partitionRules(root) {
+  if (!root.walkAtRules) return [root]
+
+  let applyParents = new Set()
+  let rules = []
+
+  root.walkAtRules('apply', (rule) => {
+    applyParents.add(rule.parent)
+  })
+
+  if (applyParents.size === 0) {
+    rules.push(root)
+  }
+
+  for (let rule of applyParents) {
+    let nodeGroups = []
+    let lastGroup = []
+
+    for (let node of rule.nodes) {
+      if (node.type === 'atrule' && node.name === 'apply') {
+        if (lastGroup.length > 0) {
+          nodeGroups.push(lastGroup)
+          lastGroup = []
+        }
+        nodeGroups.push([node])
+      } else {
+        lastGroup.push(node)
+      }
+    }
+
+    if (lastGroup.length > 0) {
+      nodeGroups.push(lastGroup)
+    }
+
+    if (nodeGroups.length === 1) {
+      rules.push(rule)
+      continue
+    }
+
+    for (let group of [...nodeGroups].reverse()) {
+      let clone = rule.clone({ nodes: [] })
+      clone.append(group)
+      rules.unshift(clone)
+      rule.after(clone)
+    }
+
+    rule.remove()
+  }
+
+  return rules
+}
+
 function parseVariantFormatString(input) {
   if (input.includes('{')) {
     if (!isBalanced(input)) throw new Error(`Your { and } are unbalanced.`)
@@ -232,7 +284,9 @@ function buildPluginApi(tailwindConfig, context, { variantList, variantMap, offs
           context.candidateRuleMap.set(identifier, [])
         }
 
-        context.candidateRuleMap.get(identifier).push([{ sort: offset, layer: 'user' }, rule])
+        context.candidateRuleMap
+          .get(identifier)
+          .push(...partitionRules(rule).map((rule) => [{ sort: offset, layer: 'user' }, rule]))
       }
     },
     addBase(base) {
@@ -246,7 +300,7 @@ function buildPluginApi(tailwindConfig, context, { variantList, variantMap, offs
 
         context.candidateRuleMap
           .get(prefixedIdentifier)
-          .push([{ sort: offset, layer: 'base' }, rule])
+          .push(...partitionRules(rule).map((rule) => [{ sort: offset, layer: 'base' }, rule]))
       }
     },
     /**
@@ -260,15 +314,19 @@ function buildPluginApi(tailwindConfig, context, { variantList, variantMap, offs
 
       for (let [identifier, rule] of withIdentifiers(groups)) {
         let prefixedIdentifier = prefixIdentifier(identifier, {})
-        let offset = offsets.base++
 
         if (!context.candidateRuleMap.has(prefixedIdentifier)) {
           context.candidateRuleMap.set(prefixedIdentifier, [])
         }
 
         context.candidateRuleMap
           .get(prefixedIdentifier)
-          .push([{ sort: offset, layer: 'defaults' }, rule])
+          .push(
+            ...partitionRules(rule).map((rule) => [
+              { sort: offsets.base++, layer: 'defaults' },
+              rule,
+            ])
+          )
       }
     },
     addComponents(components, options) {
@@ -281,7 +339,6 @@ function buildPluginApi(tailwindConfig, context, { variantList, variantMap, offs
 
       for (let [identifier, rule] of withIdentifiers(components)) {
         let prefixedIdentifier = prefixIdentifier(identifier, options)
-        let offset = offsets.components++
 
         classList.add(prefixedIdentifier)
 
@@ -291,7 +348,12 @@ function buildPluginApi(tailwindConfig, context, { variantList, variantMap, offs
 
         context.candidateRuleMap
           .get(prefixedIdentifier)
-          .push([{ sort: offset, layer: 'components', options }, rule])
+          .push(
+            ...partitionRules(rule).map((rule) => [
+              { sort: offsets.components++, layer: 'components', options },
+              rule,
+            ])
+          )
       }
     },
     addUtilities(utilities, options) {
@@ -304,7 +366,6 @@ function buildPluginApi(tailwindConfig, context, { variantList, variantMap, offs
 
       for (let [identifier, rule] of withIdentifiers(utilities)) {
         let prefixedIdentifier = prefixIdentifier(identifier, options)
-        let offset = offsets.utilities++
 
         classList.add(prefixedIdentifier)
 
@@ -314,7 +375,12 @@ function buildPluginApi(tailwindConfig, context, { variantList, variantMap, offs
 
         context.candidateRuleMap
           .get(prefixedIdentifier)
-          .push([{ sort: offset, layer: 'utilities', options }, rule])
+          .push(
+            ...partitionRules(rule).map((rule) => [
+              { sort: offsets.utilities++, layer: 'utilities', options },
+              rule,
+            ])
+          )
       }
     },
     matchUtilities: function (utilities, options) {

src/processTailwindFeatures.js

@@ -14,6 +14,8 @@ export default function processTailwindFeatures(setupContext) {
   return function (root, result) {
     let { tailwindDirectives, applyDirectives } = normalizeTailwindDirectives(root)
 
+    detectNesting()(root, result)
+
     let context = setupContext({
       tailwindDirectives,
       applyDirectives,
@@ -37,7 +39,6 @@ export default function processTailwindFeatures(setupContext) {
 
     issueFlagNotices(context.tailwindConfig)
 
-    detectNesting(context)(root, result)
     expandTailwindAtRules(context)(root, result)
     expandApplyAtRules(context)(root, result)
     evaluateTailwindFunctions(context)(root, result)

tests/apply.test.css

@@ -122,7 +122,6 @@
     text-align: left;
   }
 }
-/* TODO: This works but the generated CSS is unnecessarily verbose. */
 .complex-utilities {
   --tw-ordinal: ordinal;
   --tw-numeric-spacing: tabular-nums;
@@ -144,14 +143,6 @@
   --tw-numeric-fraction: diagonal-fractions;
   font-variant-numeric: var(--tw-font-variant-numeric);
 }
-.basic-nesting-parent {
-  .basic-nesting-child {
-    font-weight: 700;
-  }
-  .basic-nesting-child:hover {
-    font-weight: 400;
-  }
-}
 .use-base-only-a {
   font-weight: 700;
 }