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
    grunt.initConfig({
        // Metadata
        pkg: grunt.file.readJSON('package.json'),
        cssmin: {
            options: {
                keepSpecialComments:'1',
                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
    grunt.loadNpmTasks('grunt-contrib-cssmin');

    // 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;
    background:none;
    padding-left:0px!important;
    padding-right:5px!important;
}

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.

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
    grunt.initConfig({
        // Metadata
        pkg: grunt.file.readJSON('package.json'),
        cssmin: {
            options: {
                keepSpecialComments:'1',
                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
    grunt.loadNpmTasks('grunt-contrib-cssmin');

    // 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;
    background:none;
    padding-left:0px!important;
    padding-right:5px!important;
}

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.

• javascript
• css
• node.js
• gruntjs
• grunt-contrib-cssmin

Share Improve this question Follow asked Jan 7, 2015 at 13:46 Muhammad RazaMuhammad Raza 42455 silver badges2424 bronze badges 1

• Looks like a bug in the clean-css library that cssmin uses. – Jordan Kasper Commented Jan 7, 2015 at 14:31

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

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 mon 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;.

You can try restructuring: false option