Laravel-mix: [0.11.4] CSS Comments are not removed

[rjsworking]

Node: 6.10.3
NPM: 4.5.0
OS: Ubuntu 16.04
cleancss: 4.0.12

Fresh laravel 5.4 app followed by npm install.
Added cleanCss options to webpack.mix.js

const { mix } = require('laravel-mix');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */
mix.options({
    cleanCss: {
        level: {
            1: { specialComments: 'none'}   
        }
    },
    purifyCss: true,
});

mix.js('resources/assets/js/app.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css');

npm run prod results in a minified app.css file but comments are not removed:

charset "UTF-8";@import url(https://fonts.googleapis.com/css?family=Raleway:300,400,600);/*!
 * Bootstrap v3.3.7 (http://getbootstrap.com)
 * Copyright 2011-2016 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 *//*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;font-size:10px;-webkit-tap-highlight-color:transparent}[hidden],template{display:none} ....

Running cleancss cli results in a file without comments: cleancss -O1 specialComments:none app.css > clean.css

@charset "UTF-8";@import url(https://fonts.googleapis.com/css?family=Raleway:300,400,600);html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;font-size:10px;-webkit-tap-highlight-color:transparent}[hidden],template{display:none} ...

Cheers

[ankurk91]

Comments that starts with

/*!

will not be removed, Laravel mix has nothing to do with it.

PS. Laravel-mix is using clean-css which allows to remove these special comments.
clean-css v4.0 has renamed keepSpecialComments to specialComments. I found two different version installed in node_modules (npm ls | grep clean-css)

| +-- [email protected]
| | +-- [email protected]

So try to use old property.

[rjsworking]

Hi. I know it's not a laravel-mix issue but before v0.11.4 it was not possible to set clean-css options.
In my case it's just like the options are being ignored. Found two different versions too but the result is the same with the old "keepSpecialComments" property.

│ ├─┬ [email protected]
│ │ ├─┬ [email protected]
│ │ │ ├── [email protected] deduped
│ │ ├─┬ [email protected]

Cheers

[garbinmarcelo]

Also I am not able to remove the comments, however using the "postcss-discard-comments" plugin, I can remove the comments from my SASS file, the same configuration does not work for mix.stylus.

Did you find any alternatives?

my configs.:
mix.sass()

mix.sass('resources/assets/sass/style.scss', 'public/css')
    .options({
        postCss: [
            require('postcss-discard-comments')({
                removeAll: true
            })
        ]
    }
);

and mix.styles()

mix.styles([
    'bower_components/bootstrap/dist/css/bootstrap.css',
    'bower_components/font-awesome/css/font-awesome.css',
    'bower_components/select2/dist/css/select2.css',
    'bower_components/animate.css/animate.css',
    'bower_components/hover/css/hover.css',
    'bower_components/lity/dist/lity.css',
    'bower_components/SpinKit/css/spinkit.css',
    'bower_components/sweetalert2/dist/sweetalert2.css',
    'public/css/style.*.css'
], 'public/css/app.css', {
    use: [
        require('postcss-discard-comments')({
            removeAll: true
        })
    ]
});

[rjsworking]

@marcelogarbin Thank you

[garbinmarcelo]

@rsdev000 I could not remove the comments when I use mix.styles ();

did you get it working?

[rjsworking]

@marcelogarbin I do not have mix.styles() in my webpack.mix.js but will do a small test tomorrow.

[rjsworking]

@marcelogarbin

Try to use .options in mix.styles()

mix.styles([
    'bower_components/bootstrap/dist/css/bootstrap.css',
    'bower_components/font-awesome/css/font-awesome.css',
    'bower_components/select2/dist/css/select2.css',
    'bower_components/animate.css/animate.css',
    'bower_components/hover/css/hover.css',
    'bower_components/lity/dist/lity.css',
    'bower_components/SpinKit/css/spinkit.css',
    'bower_components/sweetalert2/dist/sweetalert2.css',
    'public/css/style.*.css'
], 'public/css/app.css')
    .options({
        postCss: [
            require('postcss-discard-comments')({
                removeAll: true
            })
        ]
    }
);

Did a small test and comments were removed.

Cheers

[garbinmarcelo]

@rsdev000 This did not work with mix.styles ();

I have no idea how to remove comments after grouping multiple CSS files. With Gulp I usually get the version of Laravel 5.3.
I've researched a lot of topics, but to no avail. Maybe it's something related to use license.

Can not remove special comments in this release (even using the "postcss-discard-comments" plugin)? @JeffreyWay Could help?

Example, I would like to remove this comment beginning with /*! in minified files:

@charset "UTF-8";/*!
 * Bootstrap v3.3.7 (http://getbootstrap.com)
 * Copyright 2011-2016 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 *//*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */

[rjsworking]

Hi. I forgot to delete the mix.options() in webpack.mix.js and tested with/without the cleanCss options. Without it, it doesn't remove the comments from the file in mix.styles().

My webpack.mix.j

const {mix} = require('laravel-mix');

// Disable toast notifications
mix.disableNotifications();

mix.options({
    cleanCss: {
        level: {
            1: {
                specialComments: 'none'
            }
        }
    },
    purifyCss: true
});


mix.js('resources/assets/js/app.js', 'public/js/app.js');

mix.sass('resources/assets/sass/app.scss', 'public/css/app.css')
    .options({
        postCss: [
            require('postcss-discard-comments')({
                removeAll: true
            })
        ]
    });

// Testing 
mix.styles(['resources/assets/css/style.css'], 'public/css/style.css');

style.css

@import url("//fonts.googleapis.com/css?family=Open+Sans:300,400,600,700&lang=en");
/*
 *
 *   Landing Page - Responsive Admin Theme
 *
*/
/* GLOBAL STYLES
-------------------------------------------------- */
body {
    color: #676a6c;
    font-family: 'Open Sans', helvetica, arial, sans-serif;
}

/*!
    A special CSS comment that should be removed
*/
.layout {
    background-color: red;
}

span.navy {
    color: #1ab394;
}

Only with cleanCss and postcss-discard-comments, both mix.sass() and mix.styles() result in css files without comments.

[garbinmarcelo]

@rsdev000 Here the special comments (as in the case of the bootstrap file) were not removed.

Were you able to leave the css file clean without any comments?

p.s.: I made your settings, but without success, the comments are still there.

[rjsworking]

@marcelogarbin

Yes.

Tweaked webpack.mix.js

const {mix} = require('laravel-mix');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

let LiveReloadPlugin = require('webpack-livereload-plugin');

// Disable toast notifications
mix.disableNotifications();

mix.options({
    cleanCss: {
        level: {
            1: {
                specialComments: 'none'
            }
        }
    },

    postCss: [
         require('postcss-discard-comments')({ removeAll: true })
    ],

    purifyCss: true
});

mix.js('resources/assets/js/app.js', 'public/js/app.js');

mix.sass('resources/assets/sass/app.scss', 'public/css/app.css');

mix.styles(['resources/assets/css/style.css'], 'public/css/styles.css');

style.css output

@import url(//fonts.googleapis.com/css?family=Open+Sans:300,400,600,700&lang=en);body{color:#676a6c;font-family:'Open Sans',helvetica,arial,sans-serif}.layout{background-color:red}span.navy{color:#1ab394}p.text-color{color:#676a6c}

Try to delete your node_modules folder and install packages again (npm install)

[garbinmarcelo]

@rsdev000 Magnificent brother! I removed the folder node_modules and installed again, I put as your options. It worked very well!

Thanks for the help =)

[rjsworking]

@marcelogarbin You're welcome. :)

[saaiful]

@rsdev000 in your solution i need to install postcss-discard-comments using npm install postcss-discard-comments.

Thanks :)