Css-loader: keepSpecialComments=0 does nothing?

[soluml]

I can't seem to get rid of special comments using css-loader whether or not I'm minifying the output. Seems like the option is not being passed along to clean-css, unless I am missing something?

{
    test: /\.scss$/,
    loader: ExtractCSSPlugin.extract('style-loader', 'css-loader?localIdentName='+ (process.env.NODE_ENV == 'prod' ? '__[hash:base64:5]&minimize' : '[local]__[hash:base64:5]') +'&keepSpecialComments=0&roundingPrecision=-1&sourceMap!autoprefixer-loader?{browsers:["last 2 version", "ie 9"]}!sass-loader?outputStyle=expanded&sourceMap=true&sourceMapContents=true')
}

I've also tried -keepSpecialComments, which doesn't do anything.

[nightgrey]

Hi! I have the same problem. Neither -keepSpecialComments or keepSpecialComments=0 works. Solution, anyone?

[codechaotic]

Same problem here as well as keepBreaks apparently doing nothing either.

{
  test: /\.less$/,
  loader: ExtractTextPlugin.extract("style", "css-loader?minimize&keepBreaks&keepSpecialComments=0!less")
}

[codechaotic]

Alright so a bit of digging gave me this bit of information. The documentation for this project has not caught up with the current release and the section about the package passing query parameters directly to CleanCSS has not been accurate since the v15.0 release. In fact the package no longer uses CleanCSS at all and instead uses CSSnano on the backend.

You can see in version 14.5 that the query options are being passed directly into CleanCSS.

Starting in version 15.0 all that is taken into consideration is whether or not the minimized parameter is true. Furthermore the options passed into cssnano are hardcoded. This means that even though cssnano does offer a option to remove comments this cannot be triggered through the css-loader query parameters.

This sounds inconvenient but it's better. cssnano is an all-around better tool since it delegates optimizations to other tools specifically built for those purposes, keeping to the Unix philosophy of doing one thing and doing it well. The minimization feature of the css-loader really shouldn't be highly configurable anyway - that's not what the loader is for. So it looks like it was only left in after version 15.0 for backwards compatibility.

tl;dr

To resolve the issue of the parameters that don't work, do the following instead. When minimizing your css, rather than using the minimizer built into the css-loader, setup your config file to use cssnano with the postcss-loader.

module: {
  loaders: [
    {
      test: /\.less$/,
      loader: ExtractTextPlugin.extract("style", "css!postcss!less")
    }
  ]
},
postcss: function () {
  return [
    cssnano({
      comments: { removeAll:true }
    })
  ]
}

This way you can customize the behavior of cssnano to your hearts content, and even throw in your own mix of postcss plugins to really mix things up.

[soluml]

Thanks for looking into this @codechaotic! Switching to the postcss loader solved my issues as well.

[cookpete]

Furthermore the options passed into cssnano are hardcoded. This means that even though cssnano does offer a option to remove comments this cannot be triggered through the css-loader query parameters.

For those people coming from the future, this is now incorrect and passing in cssnano params via the css-loader query is possible.

[larsnystrom]

@CookPete Would you mind sharing an example of how to pass the relevant params to cssnano via the css-loader query? I can't seem to make it work. Cssnano docs says it should be

{
    discardComments: {
        removeAll: true
    }
}

but that's not really a url friendly format.

[cookpete]

that's not really a url friendly format.

You're right:

{
  test: /\.css$/,
  loader: ExtractTextPlugin.extract('style', 'css?{discardComments:{removeAll:true}}')
}

Kinda ugly but seems to work.

[soluml]

@larsnystrom I highly recommend going the PostCSS Loader route that was recommended to me earlier in the thread. We've been much happier in the long run with that approach and it gives you more flexibility in being able to use additional PostCSS tools:

css-loader?-minimize&-import!postcss-loader

postcss() {
    return [
      require('cssnano')({
        autoprefixer: false,
        discardComments: { removeAll: true },
      }),
      require('autoprefixer')({
        remove: false,
      }),
      ...additional postcss tools...
    ];
},

[cookpete]

PostCSS definitely gives you more flexibility in the long run (and a cleaner implementation), but the weird query string is good if you simply want to use css-loader to remove special comments without having to import additional packages.

[larsnystrom]

Thank you @CookPete and @soluml for your help. I couldn't get the query param to work, probably because I'm using webpack 2. The postcss example didn't work either, because of that same reason. However, after some google-fu (or rather duckduckgo-fu) the postcss route solved my problem with the following setup:

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

webpack.conf.js

{
  module: {
    loaders: [
      // ...
      {
        test: /\.less$/,
        loader: ExtractTextPlugin.extract({
          fallbackLoader: 'style-loader',
          loader: 'css-loader!postcss-loader!less-loader',
        }),
      }, 
      // ...
    ],
  },

  // ...

  plugins: [
    new ExtractTextPlugin("[name].css"),
    new webpack.LoaderOptionsPlugin({
      options: {
        context: __dirname,
        postcss: [
          require('cssnano')({
            discardComments: { removeAll: true },
          }),
        ],
      },
    }),

    // ...
  ],
}