From a7c590d9520a80c6ca267d634484229a24c0d20c Mon Sep 17 00:00:00 2001
From: Josh Black <joshblack@users.noreply.github.com>
Date: Thu, 15 Aug 2024 16:51:32 -0500
Subject: [PATCH 1/3] feat(rollup-plugin): enable sourcemap output for css
 modules

---
 .../rollup-plugin-import-css/src/index.ts     | 39 ++++++++++++-------
 1 file changed, 25 insertions(+), 14 deletions(-)

diff --git a/packages/rollup-plugin-import-css/src/index.ts b/packages/rollup-plugin-import-css/src/index.ts
index a4f51a3df3f..a1bc58106c6 100644
--- 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)}`

From aae3910efe68f4e750ef0b42f307bc8df4a9aa83 Mon Sep 17 00:00:00 2001
From: Josh Black <joshblack@users.noreply.github.com>
Date: Thu, 15 Aug 2024 16:55:54 -0500
Subject: [PATCH 2/3] chore: add changeset

---
 .changeset/thirty-tips-bow.md | 6 ++++++
 1 file changed, 6 insertions(+)
 create mode 100644 .changeset/thirty-tips-bow.md

diff --git a/.changeset/thirty-tips-bow.md b/.changeset/thirty-tips-bow.md
new file mode 100644
index 00000000000..e731fd20b96
--- /dev/null
+++ b/.changeset/thirty-tips-bow.md
@@ -0,0 +1,6 @@
+---
+'rollup-plugin-import-css': minor
+'@primer/react': minor
+---
+
+Add support for sourcemaps for emitted CSS files

From 6dd040a1a240d5fff1d603958c72d71a33f58cc4 Mon Sep 17 00:00:00 2001
From: Josh Black <joshblack@users.noreply.github.com>
Date: Thu, 15 Aug 2024 16:56:52 -0500
Subject: [PATCH 3/3] chore: update changeset packages changed

---
 .changeset/thirty-tips-bow.md | 1 -
 1 file changed, 1 deletion(-)

diff --git a/.changeset/thirty-tips-bow.md b/.changeset/thirty-tips-bow.md
index e731fd20b96..0fc7ecdfeff 100644
--- a/.changeset/thirty-tips-bow.md
+++ b/.changeset/thirty-tips-bow.md
@@ -1,5 +1,4 @@
 ---
-'rollup-plugin-import-css': minor
 '@primer/react': minor
 ---