cssgulpminifygulp-minify-cssgulp-clean-css

Minification error with minifycss


I've got this gulp css minification line:

.pipe(minifycss({advanced:false, keepSpecialComments : 0}).on('error', gutil.log))

When i minify this css part:

.mCS-rounded-dots.mCSB_scrollTools .mCSB_draggerRail, 
.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_draggerRail{
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAANElEQVQYV2NkIAAYiVbw//9/Y6DiM1ANJoyMjGdBbLgJQAX/kU0DKgDLkaQAvxW4HEvQFwCRcxIJK1XznAAAAABJRU5ErkJggg==");
    background-repeat: repeat-y;
    opacity: 0.3;
    filter: "alpha(opacity=30)"; 
    -ms-filter: "alpha(opacity=30)";
}

i get this:

mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_draggerRail,.mCS-rounded-dots.mCSB_scrollTools .mCSB_draggerRail{background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAANElEQVQYV2NkIAAYiVbw//9/Y6DiM1ANJoyMjGdBbLgJQAX/kU0DKgDLkaQAvxW4HEvQFwCRcxIJK1XznAAAAABJRU5ErkJggg==);background-repeat:repeat-y;opacity:.3;filter:"alpha(opacity=30)";-ms-filter:"alpha(opacity=30')"}

which breaks the whole css because of that bracket thing.

Are there any options i missed to avoid this? (can't switch to nanocss atm)


Solution

  • Note up front: if you landed here, you might be experiencing issue #676, which means you need to upgrade your package.


    You probably need to update your packages, or start some "bifurcation" debugging to find the actual root cause, because with the following setup your input will come out just fine. (In other words: status no repro for me.)

    What I did to get your input to minify correctly, starting in a fresh repo:

    npm install gulp -g
    npm install gulp --save-dev
    npm install gulp-minify-css --save-dev
    npm install gulp-util --save-dev
    

    This gave me this package.json:

    {
      "devDependencies": {
        "gulp": "^3.9.0",
        "gulp-minify-css": "^1.2.3",
        "gulp-util": "^3.0.7"
      }
    }
    

    I've fed this styles.css file (your code, as is):

    .mCS-rounded-dots.mCSB_scrollTools .mCSB_draggerRail, 
    .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_draggerRail{
        background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAANElEQVQYV2NkIAAYiVbw//9/Y6DiM1ANJoyMjGdBbLgJQAX/kU0DKgDLkaQAvxW4HEvQFwCRcxIJK1XznAAAAABJRU5ErkJggg==");
        background-repeat: repeat-y;
        opacity: 0.3;
        filter: "alpha(opacity=30)"; 
        -ms-filter: "alpha(opacity=30)";
    }
    

    Into this gulfile.js:

    'use strict';
    
    var gulp = require('gulp');
    var gutil = require('gulp-util');
    var minifycss = require('gulp-minify-css');
    
    gulp.task('default', [], function() {
        gulp.src('styles.css')
            .pipe(minifycss({advanced:false, keepSpecialComments : 0}).on('error', gutil.log))
            .pipe(gulp.dest('output'));
    });
    

    And then ran:

    gulp
    

    And got this output:

    .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_draggerRail,.mCS-rounded-dots.mCSB_scrollTools .mCSB_draggerRail{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAANElEQVQYV2NkIAAYiVbw//9/Y6DiM1ANJoyMjGdBbLgJQAX/kU0DKgDLkaQAvxW4HEvQFwCRcxIJK1XznAAAAABJRU5ErkJggg==);background-repeat:repeat-y;opacity:.3;filter:"alpha(opacity=30)";-ms-filter:"alpha(opacity=30)"}
    

    As far as I can tell, this output is correct.

    Which, when taken through the Stack Snippets "Tidy" feature, is equal to:

    .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_draggerRail,
    .mCS-rounded-dots.mCSB_scrollTools .mCSB_draggerRail {
      background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAANElEQVQYV2NkIAAYiVbw//9/Y6DiM1ANJoyMjGdBbLgJQAX/kU0DKgDLkaQAvxW4HEvQFwCRcxIJK1XznAAAAABJRU5ErkJggg==);
      background-repeat: repeat-y;
      opacity: .3;
      filter: "alpha(opacity=30)";
      -ms-filter: "alpha(opacity=30)"
    }

    Have you tried linting your input css? There may be a problem hidden in there somewhere...


    PS. My output differs from yours as you have url:('...., that is a single quote there. I'd check your source for any stray quotes / nonmatching quotes.