Rollup.js postcss plugin generates different sourcemap depending on its setting

Question

I am using the rollup-plugin-postcss to compile multiple .scss files(partials) .

The problem is that depending on whether the sourceMap setting is 'inline' or true, the result of the output file will be different.

My folder structure is simple like this:

• 📁src
  • 📁 partials
    • _part1.scss
    • _part2.scss
    • _index.scss (File to forwards part1 and part2)
  • style.scss

If the setting is 'inline', the inlined sourcemap points to the right partial file. No problem at all. But if I set it to true, the sourcemap file just points to style.scss, which for some reason appears to be already compiled.

I'm using sass plugin (not node-sass) along with this plugin.

style.scss(just forwards partial files nothing else)

@forward "./scss/";

entry.js

import './src/style.scss';

rollup.config.js

plugins: [
  postcss({
    extract: true,
    sourceMap: true,
    minimize: {
      preset: [
        'default',
        { discardComments: false }
      ]
    },
    plugins: [
      autoprefixer(),
    ]
  })
]

Output(of sourceMap: true setting)

{"version":3,"sources":["style.scss"],"names":[],"mappings":"....","file":"bundle.css","sourcesContent":[".local {\n  background-color: rgb(255, 230, 32);\n}\n\n::selection {\n  color: white;\n  background: blue;\n}\n\nh1 {\n  color: #333;\n}\n\n.test {\n  background-color: rgb(255, 230, 32);\n  font-size: calc(14px + 2vw);\n  color: green;\n  border-bottom: 2px solid greenyellow;\n}"]}

I also do not need sourcesContent which makes my compiled css almost twice as big.

I don't know if this relates to this plugin or PostCSS itself.

Answer 1

I found a kind of work around that since rollup-plugin-postcss is not good at handling sourcemap I switched using rollup-plugin-styles plugin which has a better control over sourcemap.

styles({
  mode: ['extract', 'bundle.css'],
  sourceMap: [true, {
    content: true,
  }],
})