nmfr / optimize-css-assets-webpack-plugin Goto Github PK

When I install [email protected]，my project will build failed, below is the errors.

⠋ building for production.../Users/Yuga/Desktop/Developing/compass/node_modules/last-call-webpack-plugin/src/index.js:170
    compiler.hooks.compilation.tap(
                   ^

TypeError: Cannot read property 'compilation' of undefined
    at OptimizeCssAssetsWebpackPlugin.apply (/Users/Yuga/Desktop/Developing/compass/node_modules/last-call-webpack-plugin/src/index.js:170:20)
    at Compiler.apply (/Users/Yuga/Desktop/Developing/compass/node_modules/tapable/lib/Tapable.js:375:16)
    at webpack (/Users/Yuga/Desktop/Developing/compass/node_modules/webpack/lib/webpack.js:33:19)
    at err (/Users/Yuga/Desktop/Developing/compass/build/build.js:19:3)
    at next (/Users/Yuga/Desktop/Developing/compass/node_modules/rimraf/rimraf.js:75:7)
    at FSReqWrap.CB [as oncomplete] (/Users/Yuga/Desktop/Developing/compass/node_modules/rimraf/rimraf.js:111:9)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

this is part of my package.json:

"optimize-css-assets-webpack-plugin": "^4.0.0",
"webpack": "^3.6.0",

Ciao,

Do you think if it is a cssnano (which I think it is), or this plugin?
The problem I get is like this:

@import url(https://fonts.googleapis.com/icon?family=Material+Icons);@import url(https://fonts.googleapis.com/css?family=Roboto);

Works, but in the last month, some optimization it is like this:

.sr-only-focusable:focus{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto}@import url(https://fonts.googleapis.com/icon?family=Material+Icons);@import url(https://fonts.googleapis.com/css?family=Roboto);

I dont understand why it is not loading the imports, do you have an idea?

ignore svg/svgo#622

When doing an npm audit

It says not to use this plugin because of its deep deps on macaddress

https://nodesecurity.io/advisories/654

Critical      │ Command Injection                                            │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Package       │ macaddress                                                   │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Patched in    │ No patch available                                           │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Dependency of │ optimize-css-assets-webpack-plugin [dev]                     │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Path          │ optimize-css-assets-webpack-plugin > cssnano >               │
│               │ postcss-filter-plugins > uniqid > macaddress                 │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ More info     │ https://nodesecurity.io/advisories/654

I am experiencing an issue with webpack that turns out to be quite problematic when combined with a CDN and SRI. I am unsure if the issue is actually on optimize-css-assets-webpack-plugin or on webpack side, but here there are the reproduction steps:

You can find a minimal example in this repo https://github.com/albertfdp/optimize-css-assets-plugin-contenthash

You can see that there are 2 webpack configurations, with the only difference being the options passed to OptimizeCSSAssetsPlugin:

new OptimizeCSSAssetsPlugin({
 cssProcessorOptions: {
  discardComments: { removeAll: true }
-- reduceIdents: false,
-- safe: true,
-- zindex: false
 }
})

Also, bear in mind that I am using:

plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].[contenthash].css',
      chunkFilename: '[name].[id].[contenthash].css'
    })
  ]

This results in 2 files being generated, both with the same name, but with different content (contenthash):

• https://github.com/albertfdp/optimize-css-assets-plugin-contenthash/blob/master/dist/A/styles.1.5c30da23589641e4b64a.css
• https://github.com/albertfdp/optimize-css-assets-plugin-contenthash/blob/master/dist/B/styles.1.5c30da23589641e4b64a.css

Therefore, if this happens in 2 consecutive builds, and the first time the assets are uploaded to a CDN, when requesting the CSS file, the SRI hash won't match and 💥.

Currently this package is incompatible with Subresource Integrity, apparently due to incorrect use of the emit event.

waysact/webpack-subresource-integrity#47

[optimize-css-assets-webpack-plugin] performs the optimization in the emit phase, and as such is incompatible with webpack-subresource-integrity. By that point the integrity hashes have already been computed, and so any changes to the asset contents will cause breakage.

I think the correct fix here is to ask the authors of optimize-css-assets-webpack-plugin to perform the optimization in the optimize phase instead, perhaps using the optimize-chunk-assets hook.

Let me know in case the other plugin has a good reason for hooking into the emit phase instead of the optimize phase and I'm happy to take another look at this.

this is my config

   new OptimizeCSSPlugin({
      assetNameRegExp: /.css$/g,
      cssProcessor: require('cssnano'),
      cssProcessorOptions: {
        safe: true,
        map: { inline: false },
      },
      canPrint: true,
    }),

Hi,
We've recently seeing an issue when optimizing the css assets along with the css split plugin.

The optimize-css-assets-webpack-plugin requires the last-call-webpack-plugin and it will optimize the css at the final step after the css got split.

This causing an issue if we have specified z-index in each of the split css files, z-index will get reduction by optimization at the final step (after the css got split) and affects the render. What are we expected is that optimize the code first and split later. (Somehow last call webpack plugin always comes to the last)

Can we add a customized option way to specify the start/end of the execution of the css optimization based on these two lines here: https://github.com/NMFR/last-call-webpack-plugin/blob/master/index.js#L38-L39
OR
Please let me know if there is a better way to control the order of the plugins.

Thank you very much in advance!

I use optimize-css-assets-webpack-plugin remove -webkit-box-orient: vertical； I test not autoprefixer problem

I write style in SCSS, and I want to use webpack to build both minified and not minified css files.
My webpack.config.js:

const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const CssNano = require('cssnano');

const extractSASS = new ExtractTextPlugin({ filename: 'assets/styles/[name].css' });

module.exports = {
    entry: './Scripts/main.js',
    output: { path: path.resolve(__dirname, 'wwwroot/'), filename: 'scripts/bundle.js' },
    module: {
        rules: [
            {
                test: /\.scss$/,
                use: extractSASS.extract({
                    use: [
                        {
                            loader: 'css-loader',
                        },
                        {
                            loader: 'sass-loader',
                        },
                    ],
                    fallback: 'style-loader',
                }),
            },
            {
                test: /\.js$/,
                use: [{ loader: 'babel-loader', options: { presets: ['es2015'] } }],
            },
        ],
    },
    plugins: [
        new webpack.optimize.UglifyJsPlugin(),
        new OptimizeCssAssetsPlugin({
            assetNameRegExp: /\.optimize\.css$/g,
            cssProcessor: CssNano,
            cssProcessorOptions: {},
            canPrint: true,
        }),
        extractSASS,
    ],
};

Because it only build 1 css file, I would like to know how should I change to ouput 2 css files?
Thanks.

Edit: See final update below.

a.css

#root {
  background-color: #f00;
}
body {
  text-align: center;
}

b.css

#root {
  width: 640px;
  height: 360px;
}

expected.css

#root{width:640px;height:360px;background-color:red}body{text-align:center}

actual.css

#root{background-color:red}body{text-align:center}#root{width:640px;height:360px}

If the body style is omitted, it merges the #root styles as expected.

Not sure of the exact issue causing this error yet. Either way it looks like an error that should be caught by this plugin so that it may cancel the build with an error:

Full stack trace below:

/Users/rhys/Projects/usability-hub/usability_hub/node_modules/.bin/webpack --config /Users/rhys/Projects/usability-hub/usability_hub/config/webpack.config.js --bail
clean-webpack-plugin: /Users/rhys/Projects/usability-hub/usability_hub/public/webpack_assets has been removed.
Error processing file: print-83f4ad77948c21b55de0.css
CssSyntaxError: <css input>:1:10: Unknown word
    at Input.error (/Users/rhys/Projects/usability-hub/usability_hub/node_modules/postcss/lib/input.js:113:22)
    at Parser.unknownWord (/Users/rhys/Projects/usability-hub/usability_hub/node_modules/postcss/lib/parser.js:468:26)
    at Parser.other (/Users/rhys/Projects/usability-hub/usability_hub/node_modules/postcss/lib/parser.js:174:14)
    at Parser.loop (/Users/rhys/Projects/usability-hub/usability_hub/node_modules/postcss/lib/parser.js:81:26)
    at parse (/Users/rhys/Projects/usability-hub/usability_hub/node_modules/postcss/lib/parse.js:26:16)
    at new LazyResult (/Users/rhys/Projects/usability-hub/usability_hub/node_modules/postcss/lib/lazy-result.js:70:24)
    at Processor.process (/Users/rhys/Projects/usability-hub/usability_hub/node_modules/postcss/lib/processor.js:117:12)
    at Function.cssnano.process (/Users/rhys/Projects/usability-hub/usability_hub/node_modules/cssnano/dist/index.js:306:55)
    at OptimizeCssAssetsPlugin.processCss (/Users/rhys/Projects/usability-hub/usability_hub/node_modules/optimize-css-assets-webpack-plugin/index.js:39:19)
    at Object.processor (/Users/rhys/Projects/usability-hub/usability_hub/node_modules/optimize-css-assets-webpack-plugin/index.js:28:23)
    at /Users/rhys/Projects/usability-hub/usability_hub/node_modules/last-call-webpack-plugin/index.js:117:8
    at arrayEach (/Users/rhys/Projects/usability-hub/usability_hub/node_modules/last-call-webpack-plugin/node_modules/lodash/_arrayEach.js:15:9)
    at forEach (/Users/rhys/Projects/usability-hub/usability_hub/node_modules/last-call-webpack-plugin/node_modules/lodash/forEach.js:38:10)
    at LastCallWebpackPlugin.process (/Users/rhys/Projects/usability-hub/usability_hub/node_modules/last-call-webpack-plugin/index.js:114:3)
    at Compilation.<anonymous> (/Users/rhys/Projects/usability-hub/usability_hub/node_modules/last-call-webpack-plugin/index.js:150:12)
    at Compilation.applyPluginsAsyncSeries (/Users/rhys/Projects/usability-hub/usability_hub/node_modules/tapable/lib/Tapable.js:206:13)
    at self.applyPluginsAsync.err (/Users/rhys/Projects/usability-hub/usability_hub/node_modules/webpack/lib/Compilation.js:645:11)
    at next (/Users/rhys/Projects/usability-hub/usability_hub/node_modules/tapable/lib/Tapable.js:202:11)
    at LastCallWebpackPlugin.process (/Users/rhys/Projects/usability-hub/usability_hub/node_modules/last-call-webpack-plugin/index.js:106:12)
    at Compilation.<anonymous> (/Users/rhys/Projects/usability-hub/usability_hub/node_modules/last-call-webpack-plugin/index.js:147:12)
    at Compilation.applyPluginsAsyncSeries (/Users/rhys/Projects/usability-hub/usability_hub/node_modules/tapable/lib/Tapable.js:206:13)
    at self.applyPluginsAsync.err (/Users/rhys/Projects/usability-hub/usability_hub/node_modules/webpack/lib/Compilation.js:640:10)
    at next (/Users/rhys/Projects/usability-hub/usability_hub/node_modules/tapable/lib/Tapable.js:202:11)
    at Compilation.<anonymous> (/Users/rhys/Projects/usability-hub/usability_hub/node_modules/extract-text-webpack-plugin/dist/index.js:272:11)
    at Compilation.applyPluginsAsyncSeries (/Users/rhys/Projects/usability-hub/usability_hub/node_modules/tapable/lib/Tapable.js:206:13)
    at sealPart2 (/Users/rhys/Projects/usability-hub/usability_hub/node_modules/webpack/lib/Compilation.js:636:9)
    at next (/Users/rhys/Projects/usability-hub/usability_hub/node_modules/tapable/lib/Tapable.js:202:11)
    at /Users/rhys/Projects/usability-hub/usability_hub/node_modules/extract-text-webpack-plugin/dist/index.js:241:13
    at /Users/rhys/Projects/usability-hub/usability_hub/node_modules/extract-text-webpack-plugin/node_modules/async/dist/async.js:421:16
    at iteratorCallback (/Users/rhys/Projects/usability-hub/usability_hub/node_modules/extract-text-webpack-plugin/node_modules/async/dist/async.js:998:13)

My webpack config:

...

{
  test: /\.scss$/,
    use: ExtractTextPlugin.extract({
      use: [{
        loader: 'css-loader',
          options: {
            modules: true,  // this turns on css modules via the css-loader
            importLoaders: 2,
            localIdentName: '[sha1:hash:hex:4]',
          },
       }, { /** sass-loader config **/ }]
    }]
}

...


plugins: [
  new ExtractTextPlugin('bundle.css'),
  new OptimizeCssAssetsPlugin(),
]

I noticed when I build w/o the OptimizeCssAssetsPlugin, there is some sass variable that gets wrapped in a :local() function (documentation found here).

With OptimizeCssAssetsPlugin returns me this error:

Error processing file: bundle.css
CssSyntaxError: /bundle.css:315:18: Missed semicolon
    at Input.error (/node_modules/postcss/lib/input.js:113:22)
    at Parser.checkMissedSemicolon /node_modules/postcss/lib/parser.js:506:26)

I went to bundle.css:315:18:

.e127.f18c::after,
._77c2.f18c::after {
      animation: 225ms :local(my-scss-variable) forwards, 75ms :local(my-scss-variable) forwards; }

I think its the cssnano lib getting hung up on the :local wrapper. Any ideas of a work around?

@NMFR thanks so much for your work on this project!

My organization recently starting using the plugin on one of our projects, but I saw the tests are still a work in progress. Are you open to a contributors to get the plugin tested? If so I'd be happy to help, and would welcome any thoughts you have on what those tests should look like.

I am used cssnano and postcss-mqpacker and be good allowed to use this plugin together.

As per the topic, it doesn't read the config options from cssnano.config.js automatically it seems. Anyone facing the same issue?

Hi,

this module have really nice idea, because css-loader could not minify CSS files.
If this module allows to choose custom minifier (cssnano or other like cleancss) then i think cssnano could not be defined as dependency. It could be removed (someone want to use version 4 etc) or moved to peerDependency.

In both ways are not cssnano installed by default so there is no dependency hell.

my css code including keyframes someAnimation{....} is not showing up in compressed css file after applying optimize-css-assets plugin. It is working fine in development mode with just ExtractTextPlugin plugin

Wondering if any changes will be needed for v4?
https://medium.com/webpack/webpack-4-migration-guide-for-plugins-loaders-20a79b927202

Likely this.option?

I know that ExtractTextWebpackPlugin is still awaiting v4 support

Is there any plan for an upgrade? Any pointers for someone to contribute it? Thanks for the great work on this plugin! 🙏 ✌️

node_modules/last-call-webpack-plugin/src/index.js:170
compiler.hooks.compilation.tap(
^
TypeError: Cannot read property 'compilation' of undefined

On version 3.2.0 everything works fine.

How to configure like '{"autoprefixer": {browsers: ['iOS >=8', 'Android >= 4.1']}}'

https://github.com/ben-eb/cssnano/releases/tag/v4.0.0-rc.0

css-loader provide a minimize option to minimizes the css, it also use cssnano-based minifier.
Is there difference with this plugin? Or they are the same?

I've got 2 sources of css: .css and .scss
For both of them i have such loaders with extraction:

{
  test: /\.css$/,
  use: ExtractTextPlugin.extract({
    fallback: 'style-loader',
    use: [
      {
        loader: 'css-loader',
        options: {importLoaders: 1, minimize: false, sourceMap: true},
      },
      {
        loader: 'postcss-loader',
        options: {sourceMap: true},
      },
    ],
  }),
},
{
  test: /\.scss$/,
  use: ExtractTextPlugin.extract({
    fallback: 'style-loader',
    use: [
      {
        loader: 'css-loader',
        options: {minimize: false, sourceMap: true},
      },
      {
        loader: 'postcss-loader',
        options: {sourceMap: true},
      },
      {
        loader: 'sass-loader',
        options: {
          outputStyle: 'expanded',
          sourceMap: true,
        },
      },
    ],
  }),
},

Then i have such optimize plugin exec:

new OptimizeCssAssetsPlugin({
  cssProcessor: require('cssnano'),
  cssProcessorOptions: {
    preset: 'default',
    map: {inline: false},
  },
}),

After all if i try to choose some node in Chrome DevTool, styles always point to one file https://www.evernote.com/l/AS84t-O36W5PGIklf_An0IpJiU61MUuuo14
But in most cases it is wrong.

Hi,

I am currently upgrading a project based on the pwa vue template to webpack4, and it uses this plugin in the building process.
But the plugin is generating the error : CssSyntaxError: XXX.css:X:X: Missed semicolon
NB: I'm assuming the plugin is generating it as there is no error through my compilation when I disable it.

The PWA configuration of the plugin is the following:

new OptimizeCSSPlugin({
  cssProcessorOptions: {
    safe: true
  }
})

Sources: PWA vue template

In my optimized CSS run through this package, where I have an image being loaded in via CSS url(), it creates a link to [object Object], e.g.

background: url('../pages/images/myLogo.png') top left no-repeat;

gets transformed in such a way that the browser looks for localhost:3000/[object Object].

For context, we're using Gatsby, modifying our Webpack config in the following way:

import OptimizeCssAssetsPlugin from 'optimize-css-assets-webpack-plugin'

export function modifyWebpackConfig (config, env) {
  if (env === 'build-css') {
    config.plugin('optimize-css', OptimizeCssAssetsPlugin)
  }
// etc.

What is the current behavior?
Invalid stat.json, file start wth:

Starting to optimize CSS...
Processing bundle.css...
Processed bundle.css, before: 327621, after: 265824, ratio: 81.14%
{
  "errors": [],
  "warnings": [
...

If the current behavior is a bug, please provide the steps to reproduce.

• run set NODE_ENV=production&& webpack --profile --json > stats.json

What is the expected behavior?
Expected correct stat.json

Using:

• webpack 2.2.0
• extract-text-webpack-plugin 2.0.0-beta.5
• optimize-css-assets-webpack-plugin 1.3.0

I'm having trouble getting the outputted filenames to be bundle.css and vendor.bundle.css

Currently I'm getting bundle.css and 0.bundle.css ONLY when minified despite having:

"webpack": "^4.5.0",
"webpack-cli": "^2.0.14",

optimization: {
    splitChunks: {
        cacheGroups: {
            commons: {
                test: /[\\/]node_modules[\\/]/,
                name: 'vendor',
                chunks: 'all'
            }
        }
    },
    minimizer: [new OptimizeCSSAssetsPlugin({}), new UglifyWebpackPlugin({ sourceMap: true })]
},

Might want to update to handle promise rejections.

"DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code."

I have the following CSS animation:

animation: fa-spin 1s infinite steps(8);

It seems that after the minimization, it became:

animation: a 1s infinite steps(8);

and now the animation doesn't work.

css content:

div {
  /* autoprefixer: off */
  -webkit-box-orient: vertical;
  /* autoprefixer: on */
}

options:

    new OptimizeCssAssetsPlugin({
      assetNameRegExp: /\.css$/g,
      cssProcessor: require('cssnano'),
      cssProcessorOptions: {
        discardComments: { removeAll: false }, // or removeAll: true
      },
      canPrint: true,
    }),

After complite the -webkit-box-orient will be deleted. Can I keep it in css?

If the font resource is referenced in the css file, there is a problem with the url of font resource in the dist package file, the url is without 'www', like this '//abc.com'. It will lead to the failure of reference of font resource. So I think you should expose a configuration item in the optimize-css-assets-webpack-plugin to set the option 'stripWWW' in plugin 'postcss-normalize-url'.

From

[...]
    return this.options.cssProcessor.process(css, Object.assign({ to: assetName }, this.options.cssProcessorOptions)); 
[...]

What is the purpose of the to property? cssnano doesn't seem to document or use this option.

while loading fonts, it url is https://www.foo.com/aaa.woff
then plugins removes the www from url.

Input: https://www.foo.com/aaa.woff
output: https://foo.com/aaa.woff

expected: https://www.foo.com/aaa.woff

hello,
Great plugin ! I have an issue : it does not work with WebpackCompressionPlugin. The compression plugin works fine but the file being compressed is not the file before calling optimize-css-assets-webpack-plugin. This is probably because optimize-css-assets-webpack-plugin uses last-call-webpack-plugin to process the css file at the very last moment, just before emitting to the file - and so compression does not see it.
I am not knowledgeable in architecture of webpack plugin but it seems to be a flaw in optimize-css-assets-webpack-plugin. what else do you think, let me know if you have any plan to fix it ?

I believe there may be an issue with how radial gradients are optimized. I'm using the configuration produced by vue-cli. If I comment out the OptimizeCSSPlugin block, I don't get the issue.

new OptimizeCSSPlugin({
  cssProcessorOptions: config.build.productionSourceMap
    ? { safe: true, map: { inline: false } }
    : { safe: true }
}),

My expected result, which I get if I turn off the optimizer, is a composited background that has a semi-transparent orange radial gradient on top of a blue to black linear gradient:

.original {
    background:
        radial-gradient(ellipse 200% 100% at top left 40%, rgba(255, 169, 0, 0.5), transparent 30%),
        linear-gradient(45deg, black 20%, #002f76);
}

If I enable the optimizer, only the blue to black gradient is visible:

.output {
    background:
        radial-gradient(ellipse 200% 100% at top left 40%, rgba(255, 169, 0, .2), transparent 0),
        linear-gradient(45deg, #000 20%, #002f76);
}

I believe it is because the color-stop of the radial gradient is being changed for the second color from transparent 30% to transparent 0. I'm not sure why.

Hi there,

Can't seem to find an answer to this (and might be a good one to show an example of in the README) - but how could I use OptimizeCssAssetsPlugin to keep the original (unminified) CSS generated by ExtractTextPlugin as a file (i.e. example.css) and then generate a minified file copy (i.e. example.min.css too?

Thanks for any help!

Instead it is as followed ( which increase the bundle size):

Example:
/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm1haW4uOTU3NDljODRjYzU0NzNiNTdiZjY3ZWQ2OTU4Y2Y1YjQuY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUNBLE1BQ0ksaUJBQW1CLENBQ3RCIiwiZmlsZSI6Im1haW4uOTU3NDljODRjYzU0NzNiNTdiZjY3ZWQ2OTU4Y2Y1YjQuY3NzIiwic291cmNlc0NvbnRlbnQiOlsiLypzZGZzZGYqL1xuI3Rlc3Qge1xuICAgIHRleHQtYWxpZ246IGNlbnRlcjtcbn1cbiJdfQ== */

after I add this plugin, I can't use sourcemap to locate the source file in chrome.

Hey,

this would really help. I tried to go to cssnano docs and figure out what options can I use but it seems like I couldn't figure it out. Is there any place I can learn what options can I use? Thanks

Trailing zeros are striped from whole numbers.

input: z-index: 6000;
expected: z-index: 6000;
actual: z-index: 6;

I found a problem like https://github.com/ben-eb/cssnano/issues/357 and it's fixed in cssnano v4.0.0,so how about update it?

We use extract-css-chunks-webpack-plugin to get the css chunks for every js chunk and when we use optimize plugin optimization works for main file and for chunks separately and there is no duplications if we look to the files directly one by one but we see the one rule happens in main css file and the same rule we face one time in chunk css file.

Expected behaviour is to remove the generic rule from chunk because it's already in the main file.

The clean-css minifier now also supports the cssnano process(css, opts) API (merged soon).
It would be nice if clean-css could be added to the list of supported minifiers of this webpack plugin.

I get strange numbers while compression.

Starting to optimize CSS...
Processing bundle.css...
Processed bundle.css, before: 1774615, after: 1774383, ratio: 99.99%

my source css contains a lot of comments, white spaces and so on. So, i expected it will reduce css size at least on ~30% but it reduced only on 0.01%.
Here is my webpack prop config (i use sass) :

'use strict';

const webpack = require('webpack');
const merge = require('webpack-merge');
const webpackCommon = require('./webpack-common.config');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');

webpackCommon.bail = true;
webpackCommon.debug = false;
webpackCommon.profile = false;

module.exports = merge(webpackCommon, {
   devtool: 'none',
   module: {
      loaders: [
         {
            test: /\.js$/,
            exclude: /node_modules/,
            loader: 'babel'
         },
         {
            test: /\.css$/,
            loader: 'style-loader!css-loader'
         },
         {
            test: /\.scss$/,
            exclude:  /node_modules/,
            loader:  ExtractTextPlugin.extract('style', 'css?modules&localIdentName=[name]__[local]___[hash:base64:5]!sass')
         },
         {
            test: /\.woff2?$|\.ttf$|\.eot$|\.svg$|\.png|\.jpe?g|\.gif$/,
            exclude: /node_modules/,
            loader: 'url-loader'
         }
      ]
   },
   plugins: [

      new webpack.optimize.OccurrenceOrderPlugin(),
      new webpack.optimize.AggressiveMergingPlugin(),
      new webpack.optimize.DedupePlugin(),
      new webpack.optimize.UglifyJsPlugin({
         minimize: true,
         beautify: false,
         comments: false,
         compress: {
            unused: true,
            dead_code: true,
            warnings: false,
            screw_ie8: true
         }
      }),
      new webpack.NoErrorsPlugin(),
      new webpack.DefinePlugin({
         'process.env.NODE_ENV': JSON.stringify('production'),
         '__DEV__': false
      }),
      new webpack.optimize.CommonsChunkPlugin({
         minChunks: 2,
         maxChunks: 15,
         minChunkSize: 10000,
         name: 'vendor'
      }),
      new ExtractTextPlugin("bundle.css", {allChunks: true}),
      new OptimizeCssAssetsPlugin({
         assetNameRegExp: /bundle.css$/,
         cssProcessor: require('cssnano'),
         cssProcessorOptions: {
            discardDuplicates: { removeAll: true },
            discardComments: {removeAll: true }
         },
         canPrint: true
      }),
   ]
});

and common config file

'use strict';

const path = require('path')
const webpack = require('webpack')

module.exports = {
   entry: {
      main: './src/main.js',
   },
   output: {
      filename: '[name].js',
      path: path.resolve(__dirname, '../../PashaGraph/WebClient/public')
   },
   watch: true,
   watchOptions: {
      aggregateTimeout: 100
   },
   resolve: {
      extensions: ['', '.js', '.jsx']
   }
};

thanks

I want to output source map url in separated css file, and use settings like:

new OptimizeCssAssetsPlugin({
        cssProcessorOptions: {
          discardComments: {
            remove: comment => comment[0] !== '#',
          },
        },
      }),

However, after build, there is no sourcemap url in the final separated css.
Could you please check whether this works?

My version of optimize-css-assets-webpack-plugin: 4.0.1

The issue I'm facing is the same as described here:
webpack-contrib/mini-css-extract-plugin#141

In summary, I'm defining source-maps on my configuration. I'm also using MiniCssExtractPlugin to extract the css modules to a specific bundle, but when using optimize-css-assets-webpack-plugin on webpacks 4 optimization.minimizer, the source-maps are not generated. Here is a snippet:

  optimization: {
    minimizer: [
      new UglifyJsPlugin({
        cache: true,
        parallel: true,
        sourceMap: true // set to true if you want JS source maps
      }),
      new OptimizeCSSAssetsPlugin({}) // <---- THIS. Commenting/Uncommenting results in: No Optimization with source-maps/ Optimization without source-maps
    ]
  },

  plugins: [

    new webpack.DefinePlugin({
      'process.env.NODE_ENV': 'production'
    }),
    new MiniCssExtractPlugin({
      filename: 'foo.min.css'
    }),
  ],
  devtools: 'source-maps'

Maybe optimize-css-assets-webpack-plugin is truncating source-maps some how?!