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