Skip to content

Commit 1cb1470

Browse files
authored
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 <joshblack@users.noreply.github.com>
1 parent a562465 commit 1cb1470

File tree

2 files changed

+30
-14
lines changed

2 files changed

+30
-14
lines changed

.changeset/thirty-tips-bow.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@primer/react': minor
3+
---
4+
5+
Add support for sourcemaps for emitted CSS files

packages/rollup-plugin-import-css/src/index.ts

Lines changed: 25 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,18 @@ export function importCSS(options: ImportCSSOptions): Plugin {
4848
return
4949
}
5050

51+
const hash = getSourceHash(code)
52+
const relativePath = path.relative(rootDirectory, id)
53+
const name = path.basename(relativePath, '.module.css')
54+
55+
const fileName = path.join(
56+
path.dirname(relativePath),
57+
path.format({
58+
name: `${name}-${hash}`,
59+
ext: '.css',
60+
}),
61+
)
62+
5163
// When transforming CSS modules, we want to emit the generated CSS as an
5264
// asset and include the generated file in our generated CSS Modules file
5365
// which contains the classes. This makes sure that if the file containing
@@ -66,25 +78,24 @@ export function importCSS(options: ImportCSSOptions): Plugin {
6678
cssModuleClasses = json
6779
},
6880
}),
69-
]).process(code, {from: id})
70-
const source = result.css
71-
const hash = getSourceHash(source)
72-
const relativePath = path.relative(rootDirectory, id)
73-
const name = path.basename(relativePath, '.module.css')
74-
75-
const fileName = path.join(
76-
path.dirname(relativePath),
77-
path.format({
78-
name: `${name}-${hash}`,
79-
ext: '.css',
80-
}),
81-
)
81+
]).process(code, {
82+
from: id,
83+
to: fileName,
84+
map: {
85+
inline: false,
86+
},
87+
})
8288

8389
this.emitFile({
8490
type: 'asset',
85-
source,
91+
source: result.css,
8692
fileName,
8793
})
94+
this.emitFile({
95+
type: 'asset',
96+
source: result.map.toString(),
97+
fileName: `${fileName}.map`,
98+
})
8899

89100
const moduleInfo = this.getModuleInfo(id)
90101
const cssSource = `./${path.basename(fileName)}`

0 commit comments

Comments
 (0)