diff --git a/.changeset/thirty-tips-bow.md b/.changeset/thirty-tips-bow.md new file mode 100644 index 00000000000..0fc7ecdfeff --- /dev/null +++ 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 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)}`