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

Question

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

Answer 1

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.