Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[scss] Sources path in extracted "*.map.css" file is not correct - hierarchy of folders is missed. #441

Open
siarheiyelin opened this issue Jan 12, 2023 · 1 comment

Comments

@siarheiyelin
Copy link

siarheiyelin commented Jan 12, 2023

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"],...
@siarheiyelin
Copy link
Author

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant