Description
Environment
-
clean-css version -
npm ls clean-css:
├─┬ clean-css-cli@5.6.3
│ └── clean-css@5.3.3 deduped
└── clean-css@5.3.3 -
node.js version -
node -v:
v23.6.0 -
operating system:
OS: macOS 15.2 24C101 x86_64 (Sequoia 15.2)
Configuration options
var CleanCSS = require('clean-css');
new CleanCSS({
level: 2
})Input CSS
.btn {
background-image: linear-gradient(white, rgb(242.25, 242.25, 242.25));
color: rgb(59.5, 59.5, 59.5);
text-shadow: 1px 1px 0 rgb(242.25, 242.25, 242.25);
border: 1px solid rgb(244.8, 244.8, 244.8);
outline: thick double rgb(244.8, 244.8, 244.8);
}Actual output CSS
.btn{background-color:#fff;background-image:linear-gradient(white,rgb(242.25,242.25,242.25));color:rgb(59.5,59.5,59.5);text-shadow:1px 1px 0 rgb(242.25,242.25,242.25);border:1px solid;outline:double thick}Expected output CSS
.btn{background-color:#fff;background-image:linear-gradient(white,rgb(242.25,242.25,242.25));color:rgb(59.5,59.5,59.5);text-shadow:1px 1px 0 rgb(242.25,242.25,242.25);border:1px solid rgb(244.8,244.8,244.8);outline:double thick rgb(244.8,244.8,244.8);}Level 1 optimization works fine
/** { level: 1 } **/
.btn{background-color:#fff;background-image:linear-gradient(white,rgb(242.25,242.25,242.25));color:rgb(59.5,59.5,59.5);text-shadow:1px 1px 0 rgb(242.25,242.25,242.25);border:1px solid rgb(244.8,244.8,244.8);outline:thick double rgb(244.8,244.8,244.8)}This is down to level 2 applying validation to the rgb color values for border/outline properties and the regexp doesn't accept decimal places as valid input.
The widthStyleColor function, applies this validation when breaking up the incoming properties as border/outline are mapped to that function.
It's become an issue, in our case at least, with changes to dart sass no longer rounding rgb to whole integer values and converting to hex for things like scale, lighten, darken. RGB values expressed using css functional notation with decimal places are allowed by the css standard which specifies values as a number as opposed to an integer.