Raza Chohan Raza Chohan - 1 year ago 106
Node.js Question

why using grunt-contrib-cssmin is changing my css while it should only minify that

I am using grunt-contrib-cssmin to minify my css files. I think this tool (grunt-contrib-cssmin) is only a wrapper for clean-css. Everything is fine except the fact that this grunt plugin is making changes in my css. I have tried to use every option that I could find from clean-css repository but nothing worked. Kindly help me this thing is killing me!!

Grunt File:

module.exports = function (grunt) {
'use strict';
// Project configuration
// Metadata
pkg: grunt.file.readJSON('package.json'),
cssmin: {
options: {
processImport: false,
roundingPrecision: -1,
shorthandCompacting: false,
aggressiveMerging: false,
advanced: false,
minified_css_admin: {
src: ['public/admin/css/style.default.css','public/admin/prettify/prettify.css','public/admin/css/bootstrap-fileupload.min.css','public/admin/css/developer.css'],
dest: 'public/admin/css/minified-css-admin.min.css',
// These plugins provide necessary tasks

// Default task
grunt.registerTask('default', ['admin-default']);
grunt.registerTask('admin-default', ['cssmin:minified_css_admin']);

Before Minification:

.loginwrapper input#remember_me {
margin: 0 !important;
min-height: 10px;
width: auto;
box-shadow: 0px 0px;

After Minification:

.loginwrapper input#remember_me{margin:0!important;min-height:10px;width:auto;box-shadow:0 0;background:0 0;padding-left:0!important;padding-right:5px!important}

Now one can see that the 'background:none' thing is changed to 'background:0 0' How I can ensure that it does not makes any changes to my css except minifying it.

Answer Source

Aah, after looking at the clean-css issues in Github I found this one where it identifies that background:none; is "optimized" to background:0 0;. Note that it's 1 character shorter. I think this is pretty common in the "uglification" libraries, but it should be separate from pure "minification" which, IMO, should only remove none-significant information like whitespace.

Looking at the options for clean-css (which you can use in your cssmin config) I don't think there is a way to disable this, I've tried the shorthandCompacting and advanced options with no luck. Unfortunately, it looks like you're stuck with this one. However, background:0 0; should operate the same as background:none;.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download