egoist / rollup-plugin-postcss

Seamless integration between Rollup and PostCSS.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

[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.