[scss] Sources path in extracted "*.map.css" file is not correct - hierarchy of folders is missed.
siarheiyelin opened this issue · comments
Given that, the source files hierarchy looks like this:
src/nestedFolder1/nestedFolder2/test.js
src/nestedFolder1/nestedFolder2/test.scss
content of test.js file:
import css from './test.scss'
export function a() {
console.log(css.test);
}
And the Rollup config looks like this:
import postCss from "rollup-plugin-postcss";
async function getConfig() {
return {
input: './src/nestedFolder1/nestedFolder2/test.js',
output: [{ file: `./build/test.js`, format: "esm", interop: "auto", sourcemap: true }],
plugins: [
postCss({ sourceMap: true, modules: true, extract: "styles.css" })
]
}
}
export default getConfig();
And devDependencies look like this:
"devDependencies": {
"rollup": "3.10.0",
"sass": "1.57.1",
"postcss": "8.4.21",
"rollup-plugin-postcss": "4.0.2"
},
When I run rollup build rollup -c rollup.config.mjs
the source map of css looks like this:
"build/styles.css.map"
{"version":3,"sources":["test.scss"],...
Please pay attention that folders hierarchy is missed here. Expected behavior:
{"version":3,"sources":["../src/nestedFolder1/nestedFolder2/test.scss"]...
Also, please pay attention to the source map of js file which is also generated in this example, contains correct path for sources:
"build/test.js.map"
{"version":3,"file":"test.js","sources":["../src/nestedFolder1/nestedFolder2/test.js"],...
Okay, it seems I've just found a workaround for this - it's necessary to pass "to" attribute via options, e.g.:
//
rollupPluginPostCss({ sourceMap: true, modules: true, extract: "styles.css", to: path.resolve("./build/styles.css") })
//
As a result the source location looks like this:
{"version":3,"sources":["../src/nestedFolder1/nestedFolder2/test.scss"],
Probably it makes sense to set it automatically. At least, the "postcss" docs mention, that it's usually set automatically by runners. https://github.com/postcss/postcss.