feat(rollup-plugin): enable sourcemap output for css modules (#4852)

* feat(rollup-plugin): enable sourcemap output for css modules * chore: add changeset * chore: update changeset packages changed --------- Co-authored-by: Josh Black <[email protected]>
primer · Aug 16, 2024 · 1cb1470 · 1cb1470
1 parent a562465
commit 1cb1470
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 14 deletions.
diff --git a/.changeset/thirty-tips-bow.md b/.changeset/thirty-tips-bow.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': minor
+---
+
+Add support for sourcemaps for emitted CSS files
diff --git a/packages/rollup-plugin-import-css/src/index.ts b/packages/rollup-plugin-import-css/src/index.ts
@@ -48,6 +48,18 @@ export function importCSS(options: ImportCSSOptions): Plugin {
         return
       }
 
+      const hash = getSourceHash(code)
+      const relativePath = path.relative(rootDirectory, id)
+      const name = path.basename(relativePath, '.module.css')
+
+      const fileName = path.join(
+        path.dirname(relativePath),
+        path.format({
+          name: `${name}-${hash}`,
+          ext: '.css',
+        }),
+      )
+
       // When transforming CSS modules, we want to emit the generated CSS as an
       // asset and include the generated file in our generated CSS Modules file
       // which contains the classes. This makes sure that if the file containing
@@ -66,25 +78,24 @@ export function importCSS(options: ImportCSSOptions): Plugin {
             cssModuleClasses = json
           },
         }),
-      ]).process(code, {from: id})
-      const source = result.css
-      const hash = getSourceHash(source)
-      const relativePath = path.relative(rootDirectory, id)
-      const name = path.basename(relativePath, '.module.css')
-
-      const fileName = path.join(
-        path.dirname(relativePath),
-        path.format({
-          name: `${name}-${hash}`,
-          ext: '.css',
-        }),
-      )
+      ]).process(code, {
+        from: id,
+        to: fileName,
+        map: {
+          inline: false,
+        },
+      })
 
       this.emitFile({
         type: 'asset',
-        source,
+        source: result.css,
         fileName,
       })
+      this.emitFile({
+        type: 'asset',
+        source: result.map.toString(),
+        fileName: `${fileName}.map`,
+      })
 
       const moduleInfo = this.getModuleInfo(id)
       const cssSource = `./${path.basename(fileName)}`