minCSS Option Throws Error in 2.17.2 and Up

[smschrader]

Error -

events.js:74
        throw TypeError('Uncaught, unspecified "error" event.');
...
  at ...\node_modules\gulp-bundle-assets\n
ode_modules\gulp-minify-css\node_modules\clean-css\lib\clean.js:71:41
  at process._tickCallback (node.js:419:13)

is thrown when option is enabled for Less files. Issues goes away with earlier releases. Seems to be an issue with the clean-css module.

Might be related to Issue https://github.com/jonathanepollack/gulp-minify-css/issues/61

Sample Config:

var lazypipe = require(__base + 'lazypipe'),
    gif = require(__base + 'gulp-if'),
    less = require(__base + 'gulp-less');

function stringEndsWith(str, suffix) {
  return str.indexOf(suffix, str.length - suffix.length) !== -1;
}

function isLessFile(file) {
  return stringEndsWith(file.relative, 'less');
}

var styleTransforms = lazypipe()  
  .pipe(function() {
    return gif(isLessFile, less({
        rootpath: "../"     
    }));
  });

module.exports = {
    bundle: {        
        main: {      
            styles: [
                __webapp + 'stylesheet/src/main.less'
            ],
            options: {
                useMin: false, // pre-minified files                 
                minCSS: true, 
                rev: true,
                transforms: {
                    styles: styleTransforms
                }
            }
        }
    }
};

Sample Gulp Task:

//Bundle, compress, and write less to dist
gulp.task('lessMain', ['cleanCSS'], function() {  
    return gulp.src(projectPaths.cssMainConfig)        
        .pipe(bundle().on("error", gutil.log))        
        .pipe(bundle.results({
            fileName: 'main.result',
            dest: projectPaths.cssResults,
            pathPrefix: '<%=request.getContextPath()%>/dist/styles/'
        }))        
        .pipe(gulp.dest(projectPaths.cssDist));
});

[chmontgomery]

Thanks for writing up an issue.

I think the best way to fix this is to allow passing of plugin options to gulp-minify-css, as well as to all other plugins, e.g.:

module.exports = {
    bundle: {        
        main: {      
            styles: [
                'stylesheet/src/main.less'
            ],
            options: {
                useMin: false, // pre-minified files                 
                minCSS: true, 
                rev: true,
                transforms: {
                    styles: styleTransforms
                },
                pluginOptions: {
                    'gulp-minify-css': {processImport: false},
                    'gulp-uglify': {mangle: false}
                }
            }
        }
    }
};

Thoughts? Do you have a better idea on how to structure this?

[smschrader]

No, I like this approach. Having control over the process being preformed would be ideal. It would be nice as well to add additional process into the flow, but I know that's out of scope of this issue.

I'm looking into how to incorporate gulp-remember into the current bundle flow.

[chmontgomery]

@smschrader if you have specific things you want to add to the flow that are not possible today, please create a new issue for that so I can track the work. Thanks!

[chmontgomery]

@smschrader we updated gulp-minify-css as well as adding options for plugins. Can you test v2.20.0 and let me know if it works for you?

[smschrader]

Sorry for the delay, just got a chance to update and test, everything is working as expected.

[smschrader]

So I actually got to spend time today investigating this issue. It appears your code is OK, and it's actually another bug within the clean-css plugin. There is an issue with how it "interprets" short hand css properties and converts their values. Issue in Clean CSS

For example in my case the shorthand

    font: 11px/normal sans-serif;

got converted to

    font: 11px/400 sans-serif;

when minify css was set to true which made it appear like the same issue.

[chmontgomery]

Thanks for looking into this. Do you know off the top of your head: will this problem be helped by upgrading to the latest gulp-minify-css version (1.2.0)?

[smschrader]

Let me go force the version and check.

[smschrader]

No, I updated to the most recent version of clean-css in your package and get the same error. I left a comment on their font thread as well.

Based on this fixed that was put in, it's still going to be an issue as it's only looking for "normal" and not checking boundaries before of after the string.

I'm sure it's almost a non issue and the value "normal" for line-height is rarely used. I inherited the code that was causing the issue and had to double check to see if it was even a legal value for line-height.

[chmontgomery]

ok thanks for investigating. I'm closing this issue for now.