fix sourcemap support (#35)

* fix sourcemap support * fmt
GoogleChromeLabs · Feb 26, 2023 · 8d096c2 · 8d096c2
1 parent c21e255
commit 8d096c2
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 13 deletions.
diff --git a/index.js b/index.js
@@ -122,12 +122,12 @@ module.exports = (UserProps) => {
           STATE.mapped = new Set()
           STATE.mapped_dark = new Set()
 
-          STATE.target_rule = new Rule({ selector: target_selector })
-          STATE.target_rule_dark = new Rule({ selector: target_selector })
-          STATE.target_media_dark = new AtRule({ name: 'media', params: '(prefers-color-scheme: dark)' })
+          STATE.target_rule = new Rule({ selector: target_selector, source: node.first.source })
+          STATE.target_rule_dark = new Rule({ selector: target_selector, source: node.first.source })
+          STATE.target_media_dark = new AtRule({ name: 'media', params: '(prefers-color-scheme: dark)', source: node.first.source })
 
           if (UserPropsCopy?.layer) {
-            STATE.target_layer = new AtRule({ name: 'layer', params: UserPropsCopy.layer })
+            STATE.target_layer = new AtRule({ name: 'layer', params: UserPropsCopy.layer, source: node.first.source })
             node.root().prepend(STATE.target_layer)
             STATE.target_ss = STATE.target_layer
           }
@@ -136,7 +136,7 @@ module.exports = (UserProps) => {
         },
 
         AtRule: {
-          media: atrule => {
+          media: (atrule, { parse }) => {
             // bail early if possible
             if (processed.has(atrule)) return
 
@@ -159,15 +159,17 @@ module.exports = (UserProps) => {
             }
 
             // prepend the custom media
-            STATE.target_ss.prepend(value)
+            const customMedia = parse(value).first
+            customMedia.source = atrule.source
+            STATE.target_ss.prepend(customMedia)
 
             // track work to prevent duplication
             processed.add(atrule)
             STATE.mapped.add(prop)
           }
         },
 
-        Declaration(node, { Declaration }) {
+        Declaration(node, { Declaration, parse }) {
           // bail early
           if (processed.has(node) || !node.value) return
           // console.log(node)
@@ -194,13 +196,18 @@ module.exports = (UserProps) => {
             }
 
             // create and append prop to :root
-            let decl = new Declaration({ prop, value })
+            let decl = new Declaration({ prop, value, source: node.source })
             STATE.target_rule.append(decl)
             STATE.mapped.add(prop)
 
             // lookup keyframes for the prop and append if found
             let keyframes = UserPropsCopy[`${prop}-@`]
-            keyframes && STATE.target_ss.append(keyframes)
+            if (keyframes) {
+              const keyframesNode = parse(keyframes).first
+              keyframesNode.source = node.source
+              keyframesNode.walk((x) => x.source = node.source)
+              STATE.target_ss.append(keyframesNode)
+            }
 
             // lookup dark adaptive prop and append if found
             let adaptive = UserPropsCopy[adaptivePropSelector(prop)]
@@ -212,11 +219,14 @@ module.exports = (UserProps) => {
               }
 
               if (adaptive.includes('@keyframes')) {
-                STATE.target_media_dark.append(adaptive)
+                const adaptiveNode = parse(adaptive).first
+                adaptiveNode.source = node.source
+                adaptiveNode.walk((x) => x.source = node.source)
+                STATE.target_media_dark.append(adaptiveNode)
               }
               else {
                 // append adaptive prop definition to dark media query
-                let darkdecl = new Declaration({ prop, value: adaptive })
+                let darkdecl = new Declaration({ prop, value: adaptive, source: node.source })
                 STATE.target_rule_dark.append(darkdecl)
                 STATE.mapped_dark.add(prop)
               }

diff --git a/index.test.js b/index.test.js
@@ -38,13 +38,16 @@ const MockPropsWithCustomAdaptiveProp = {
 }
 
 async function run (input, output, options = { }) {
-  let result = await postcss([plugin(options)]).process(input, { from: undefined })
-  expect(result.css).toEqual(output)
+  let result = await postcss([plugin(options)]).process(input, { from: 'input.css', to: 'output.css', map: { inline: false } })
+  expect(result.css.replace('\n/*# sourceMappingURL=output.css.map */', '')).toEqual(output)
   expect(result.warnings()).toHaveLength(0)
 
   if (options.files?.length) {
     expect(result.messages.filter(x => x.type === 'dependency')).toHaveLength(options.files?.length)
   }
+
+  const map = result.map.toJSON()
+  expect(map.sources).toEqual(['input.css'])
 }
 
 it('Can jit a single prop', async () => {