Support for sass source maps

[daprahamian]

I am currently generating the plugin like this

const sass = require('rollup-plugin-sass');
...
const output = 'my-output${env.prodution ? '.min' : ''}.css';
const sourceMap = `${output}.map`
const outputStyle = env.production ? 'compressed' : nested';
const plugin = sass({output, options: {sourceMap, outputStyle}});

Only the css file is generated. No css.map file is generated.

Is there something wrong with my config, or does the plugin not support source maps?

[differui]

I thought nobody need this feature so source map was omitted. Fix later... feel free to rise a PR.

[dschulten]

workaround: pass sourceMapEmbed: true in addition to sourceMap: true and outfile: your-outfile.css

[ghost]

I thought nobody need this feature so source map was omitted.

heh. Pretty please?

workaround: pass sourceMapEmbed: true in addition to sourceMap: true and outfile: your-outfile.css

That causes an OOM somehow.

Running "rollup:sass" (rollup) task

<--- Last few GCs --->

[21442:0x104001600]    14134 ms: Mark-sweep 1391.2 (1419.3) -> 1391.2 (1419.3) MB, 41.2 / 0.0 ms  allocation failure GC in old space requested
[21442:0x104001600]    14179 ms: Mark-sweep 1391.2 (1419.3) -> 1391.2 (1417.8) MB, 45.2 / 0.0 ms  last resort GC in old space requested
[21442:0x104001600]    14226 ms: Mark-sweep 1391.2 (1417.8) -> 1391.2 (1417.8) MB, 47.5 / 0.0 ms  last resort GC in old space requested


<--- JS stacktrace --->

==== JS stack trace =========================================

Security context: 0x1921ebaa5501 <JSObject>
    2: relative [path.js:~1258] [pc=0x358400eeed58](this=0x1921b3002471 <Object map = 0x19217dc2f439>,from=0x19213df834b1 <String[1]: .>,to=0x192124f02201 <Very long string[469979]>)
    3: relative [/Users/benjamin/projects/unisensor/miko-client/node_modules/postcss/lib/map-generator.js:225] [bytecode=0x19210224ac29 offset=200](this=0x1921cec82271 <MapGenerator map = 0x1921b515f321>,file=0x1921...

FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory
 1: node::Abort() [/usr/local/bin/node]
 2: node::OnFatalError(char const*, char const*) [/usr/local/bin/node]
 3: v8::Utils::ReportOOMFailure(char const*, bool) [/usr/local/bin/node]
 4: v8::internal::V8::FatalProcessOutOfMemory(char const*, bool) [/usr/local/bin/node]
 5: v8::internal::Factory::NewRawTwoByteString(int, v8::internal::PretenureFlag) [/usr/local/bin/node]
 6: v8::internal::String::SlowFlatten(v8::internal::Handle<v8::internal::ConsString>, v8::internal::PretenureFlag) [/usr/local/bin/node]
 7: v8::internal::Runtime_StringCharCodeAtRT(int, v8::internal::Object**, v8::internal::Isolate*) [/usr/local/bin/node]
 8: 0x358400d042fd
 9: 0x358400dbcb6f
10: 0x358400eeed58
11: 0x358400dbd196

[ghost]

~~what I did instead is rely on rollup to generate the sourceMap (passing the option directly to rollup instead of the plugin.~~

That doesn't work

[CreaturesInUnitards]

I thought nobody need this feature so source map was omitted. Fix later... feel free to rise a PR.

Hi there, is there any movement on this? I just started a new project that could really use sass sourcemaps...

[dndrsn]

That PR works for me. Any chance it could get reviewed and merged?

[elycruz]

Feature was merged in via a separate pull request (closing this one).

elycruz commented on Aug 29, 2021 The required change for source maps behavior (from this pull request) have been added to the plugin, in version 1.2.5 - The underlying code had changed a bit since this change was submitted so only the required changes where copied over from this pull request.

Tests for the feature #84 (merged).

Copied changes can be seen here: https://github.com/differui/rollup-plugin-sass/blob/926186691968bdb6993f646e9ff8a4c42d27e34b/src/index.ts#L179

[norixx]

Hi. I am new to this plugin and my setting does not generate .map file. The main scss file imports multiple partial files. entry.js

import './style.scss'

rollup.config.js

plugins: [
  sass({
    output: true,
    processor: css => postcss([autoprefixer])
      .process(css)
      .then(result => {
        return result.css
      }),
    options: {
      outputStyle: !devMode ? 'compressed' : 'expanded',
      sourceMap: true, 👈
      charset: true,
    }
  }),
],

This should work, right? Am I missing something?

• [email protected]
• [email protected]
• [email protected]
• [email protected]

[elycruz]

@norixx Hey, turns out, since you're using rollup, you have to pass sourcemap field in your rollup config:

https://github.com/elycruz/rollup-plugin-sass/blob/9e0aca06095aa4f8924ba33e389dbc48befad83b/test/index.test.ts#L451C14-L480

test('When `sourcemap` is set, to `true`, adjacent source map file should be output, and ' +
  'rollup output chunk should contain `map` entry', async t => {
  const outputFilePath = path.join(tmpDir, 'with-adjacent-source-map.js'),


    bundle = await rollup({
      input: 'test/fixtures/basic/index.js',
      plugins: [
        sass({
          options: sassOptions
        }),
      ],
    }),


    sourceMapFilePath = `${outputFilePath}.map`;


  await bundle.write({file: outputFilePath, sourcemap: true, format: 'esm'})
    .then((rslt: RollupOutput): Promise<any> => {
      // Check for output chunk
      t.true(rslt && rslt.output && !!rslt.output.length, 'output should contain an output chunk');


      // Check for 'map' entry in chunk
      t.true(!!rslt.output[0].map, 'rollup output output chunk\'s `map` property should be set');


      // Check for source map file
      return fs.readFile(sourceMapFilePath)
        .then(contents => {
          t.true(!!contents.toString(), `${sourceMapFilePath} should have been written.`);
        });
    });
});