[Bug]: leading zero not removed for timing functions assigned to custom property

[meduzen]

Describe the bug

Leading zero is not stripped from cubic-bezier functions assigned to custom properties.

Maybe there’s some proximity with #1456.

Expected behaviour

The following

.a { animation-timing-function: cubic-bezier(0.485,0.045,0.545,0.97); }
.b { --cp: cubic-bezier(0.485,0.045,0.545,0.97); }
.c { --gr: rgb(0, 0, 0); }

minifies to

.a{animation-timing-function:cubic-bezier(.485,.045,.545,.97)}.b{--cp:cubic-bezier(0.485,0.045,0.545,0.97)}.c{--gr:#000}

We see that animation-timing-function allows cubic-bezier coordinates to be minified, while the same value assigned to a custom property isn’t.

animation-timing-function:cubic-bezier(.485,.045,.545,.97); /* leading zero removed ✅ */
--cp:cubic-bezier(0.485,0.045,0.545,0.97); /* leading zero not removed ❌ */

My expectation for assigning such a timing-function to a custom property would be that it should be minified.

Steps to reproduce

CSS Nano playground link

Version

6.0.0

Preset

(no preset)

Environment

System:
    OS: macOS 13.2.1
    CPU: no, it’s connected to hamsters
    Memory: -
    Shell: -

Package details

├─┬ cssnano@6.0.0
│ └── postcss@8.4.21
└─┬ vite@4.2.1
  └── postcss@8.4.21

Additional context

No response

[ludofischer]

At the moment, postcss-convert-values skips all transformations when it encounters a CSS property:

cssnano/packages/postcss-convert-values/src/index.js

Line 141 in 7b68ad7

lowerCasedProp.indexOf('--') === 0 ||

, if I remember correctly it is because in general it is not possible to determine from the CSS property declaration whether the transformation will be correct where the CSS property is actually used. Maybe in this specific case the transformations would be safe, but from issues we've had in the past I think it's better to think twice before transforming a CSS property.