cssgruntjsminifygrunt-contrib-cssminclean-css

How to define clean-css properties in Grunt to prevent 0% from being converted to 0


I am minifying my css file using the cssmin plugin in Grunt. I have noticed the the background property getting optimised. Gruntfile.js

cssmin: {
    options: {
      // ...
    },
    target: {
        files: [{
            expand: true,
            cwd: './htdocs/css/src',
            src: '**/*.css',
            dest: './htdocs/css/dist',
            ext: '.min.css'
        }]
    }
}
.carousel {
    background: linear-gradient(70deg, #c12365 0%, #c72570 1%, #c12365 calc(0% + 1px), #c12365 40%, #404040 calc(20% + 1px), #404040 75%, #404040 calc(75% + 1px), #404040 100%);
    overflow: visible;
}

The code I have written for achieve the background But after running the grunt task runner the min file which gets generated has got optimised to

.carousel{background:linear-gradient(70deg, #c12365 0, #c72570 1%, #c12365 calc(0 + 1px), #c12365 40%, #404040 calc(20% + 1px), #404040 75%, #404040 calc(75% + 1px), #404040 100%);overflow:visible}

Note: cssmin converted the 0% value to 0 which makes the background different.

I have even read the document and tried to set the all level 1 and level 2 properties to false by as a option parameter

options: {
    level: {
        1: {
            all: false // set all values to `false`
        },
        2: {
            all: false // set all values to `false`
        }
    }
}

Still not getting the desired result.

Can some1 help me out here


Solution

  • Set the zeroUnits option to false in your cssmin task.

    For instance:

    cssmin: {
      options: {
        compatibility: {
          properties: {
            zeroUnits: false   // <------
          }
        }
      },
      target: {
        files: [{
          expand: true,
          cwd: './htdocs/css/src',
          src: '**/*.css',
          dest: './htdocs/css/dist',
          ext: '.min.css'
        }]
      }
    }
    

    Result:

    .carousel{background:linear-gradient(70deg,#c12365 0%,#c72570 1%,#c12365 calc(0% + 1px),#c12365 40%,#404040 calc(20% + 1px),#404040 75%,#404040 calc(75% + 1px),#404040 100%);overflow:visible}
    

    Note: the 0% values have been preserved.