Preserve source maps for generated CSS (#7588)

* Preserve source maps for `@apply`

* Overwrite the source for all cloned descendants

* Preserve source maps when expanding defaults

* Verify that source maps are correctly generated

* Update changelog

src/lib/expandApplyAtRules.js

@@ -140,7 +140,7 @@ function processApply(root, context) {
     for (let apply of applies) {
       let candidates = perParentApplies.get(apply.parent) || []
 
-      perParentApplies.set(apply.parent, candidates)
+      perParentApplies.set(apply.parent, [candidates, apply.source])
 
       let [applyCandidates, important] = extractApplyCandidates(apply.params)
 
@@ -178,7 +178,7 @@ function processApply(root, context) {
       }
     }
 
-    for (const [parent, candidates] of perParentApplies) {
+    for (const [parent, [candidates, atApplySource]] of perParentApplies) {
       let siblings = []
 
       for (let [applyCandidate, important, rules] of candidates) {
@@ -220,6 +220,12 @@ function processApply(root, context) {
           }
 
           let root = postcss.root({ nodes: [node.clone()] })
+
+          // Make sure every node in the entire tree points back at the @apply rule that generated it
+          root.walk((node) => {
+            node.source = atApplySource
+          })
+
           let canRewriteSelector =
             node.type !== 'atrule' || (node.type === 'atrule' && node.name !== 'keyframes')
 

src/lib/resolveDefaultsAtRules.js

@@ -120,7 +120,9 @@ export default function resolveDefaultsAtRules({ tailwindConfig }) {
         }
 
         for (let [, selectors] of selectorGroups) {
-          let universalRule = postcss.rule()
+          let universalRule = postcss.rule({
+            source: universal.source,
+          })
 
           universalRule.selectors = [...selectors]
 
@@ -128,7 +130,9 @@ export default function resolveDefaultsAtRules({ tailwindConfig }) {
           universal.before(universalRule)
         }
       } else {
-        let universalRule = postcss.rule()
+        let universalRule = postcss.rule({
+          source: universal.source,
+        })
 
         universalRule.selectors = ['*', '::before', '::after']
 

src/util/cloneNodes.js

@@ -4,6 +4,12 @@ export default function cloneNodes(nodes, source) {
 
     if (source !== undefined) {
       cloned.source = source
+
+      if ('walk' in cloned) {
+        cloned.walk((child) => {
+          child.source = source
+        })
+      }
     }
 
     return cloned