Cssnano: How to keep Sass source map comment after minified CSS files

[tiendq]

I use Sass to compile scss files then use cssnano (with PostCSS) to minify them. Map files are generated with Sass (to map rules to their scss files). But cssnano remove all of them, and there is no option to keep them.

For example, this is a source map comment and it's removed after minifying :(

/*# sourceMappingURL=test.css.map */

[ben-eb]

Hi,

You need to set the source map options so that PostCSS can update the source map correctly; otherwise PostCSS will strip the source map comment. See this issue for details: https://github.com/ben-eb/cssnano/issues/278

[vdh]

@ben-eb There's no documentation for how to do that via cssnano's options, just sourcemap: true

[ben-eb]

@vdh Please see #278; it's documented but not in our documentation. I'd accept a patch for linking the PostCSS source map docs from our source map section. :smile:

[vdh]

@ben-eb It's not always so foolproof though. I'm using optimize-css-assets-webpack-plugin, and passing these options:

new OptimizeCssAssetsPlugin({
  cssProcessorOptions: {
    map: {
      inline: false
    }
  }
})

Which just appends an unhelpful /*# sourceMappingURL=to.css.map */ to all the CSS files, and doesn't generate any new/replacement map files. All the examples depend on that external result magic variable to force hardcoded input/output for the maps, which I can't do because I don't have access to the Webpack-generated filenames in that way. The existing external source maps for the unminified CSS work fine in Chrome, so either cssnano or postcss are silently failing to do their automatic map-reading magic.

[ben-eb]

As far as I'm aware PostCSS (which handles all of our source map generation) doesn't itself generate (read: to disk) an updated source map file, it delegates this behaviour to the consumer. So when you enable source maps in a PostCSS plugin you will get a map key on the PostCSS Result, which you can write to disk.

https://github.com/postcss/postcss/blob/master/docs/source-maps.md#postcss-and-source-maps

I think it's done this way because there's a lot of different use cases and wrappers which will handle this functionality slightly differently, for instance in Gulp the source maps are handled by gulp-sourcemaps and written to a stream rather than directly to disk.

I'm not too familiar with the module that you're using, but judging from its code, it doesn't handle source maps right now, so you might want to open an issue there.

Note that css-loader already has cssnano built in when you run it in production mode.

[tiendq]

FYI, just added map: true as @ben-eb replied solved my question, I meant Sass source map passed through PostCSS (and updated). Of course, make sure you configured Sass' source map properly.

/* Sass configuration /*
options: {
    sourceMap: true,
    sourceComments: true,
    outputStyle: "expanded"
  }

/* PostCSS */
options: {
      map: true,
      processors: [
        require("autoprefixer")({
          browsers: [
            "Explorer >= 10",
            "last 2 versions"
          ]
        }),
        require("cssnano")({
          discardUnused: {
            fontFace: false
          }
        })
      ]
    }

[vdh]

@ben-eb Unfortunately, using cssnano via css-loader is sub-optimal when using CSS modules, since cssnano would only be run on each single module file instead of the full concatenated file created by ExtractTextPlugin.

Thanks for the clarification about how PostCSS handles source maps, I'll have to look into making a PR to that plugin.