CSS Compressor: Incorrect optimization for transition property

[miroskow]

Used resources-optimizer-maven-plugin v2.3.8

Before optimization:

.transition-test {
	transition: all 0s ease 0s;
	transition-delay: 0s;
	transition-duration: 0s;
	transition-delay: 0ms;
	transition-duration: 0ms;
}

After optimization:

.transition-test{transition:all 0 ease 0;transition-delay:0;transition-duration:0;transition-delay:0;transition-duration:0}

Removing the units of measure s, ms for a value of 0 is invalid for the transition property.

https://developer.mozilla.org/en-US/docs/Web/CSS/time
"0 Although unitless zero is allowed for [length's], it's invalid for [time's]."

[melloware]

OK here looks like the original issue from the YUI Compressor: yui/yuicompressor#256

Can you try my suggestion in that ticket just for now...

.transition-test {
	transition: all 0.00s ease 0.00s;
	transition-delay: 0.00s;
	transition-duration: 0.00s;
	transition-delay: 0.00ms;
	transition-duration: 0.00ms;
}

Here is another suggestion: yui/yuicompressor#342 using unset

transition-delay: unset

[miroskow]

The workaround works, but it does not resolve the issue.
Thanks.

After optimization:

.transition-test{transition:all .00s ease .00s;transition-delay:.00s;transition-duration:.00s;transition-delay:.00ms;transition-duration:.00ms}

With one decimal place, units are also removed.
As you said, we need to add two decimal places.

[jepsar]

The YUI compressor project looks pretty dead to me...

[melloware]

its totally dead that is why I copied the code into this project and patched it myself instead of using their lib like it used to. So I have CssCompressor.java and I had patched like 5 PR's from YUI that have been open for years.

[melloware]

Did you try unset as well?

[miroskow]

I chose the first workaround.

[melloware]

Oh I thought you said "but it does not resolve the issue." like that didn't fix it.

[miroskow]

Before that, I used closure-compiler-maven-plugin v2.22.0
But your resources-optimizer-maven-plugin works faster :)
By the way, I wanted to use css optimization.
And this problem has arisen.

Maybe someone will improve it in the future.

[melloware]

OK I am modifying that guy's PR which had some issues but hopefully it will fix this issue for 2.3.9!

[melloware]

If I push 2.3.9 to Maven Central would you try it @miroskow ??

[miroskow]

I'm looking forward to version 2.3.9 :)

[melloware]

ok let me do a build I will let you know when its in Maven Central.

[melloware]

OK 2.3.9 is now in Maven Central. Give it a shot.

[miroskow]

Test resources-optimizer-maven-plugin v2.3.9

Before optimization:

.transition-test {
	transition: all 0s ease 0s;
	transition-delay: 0s;
	transition-duration: 0s;
	transition-delay: 0ms;
	transition-duration: 0ms;
}

.transition-test-one-decimal-place {
	transition: all 0.0s ease 0.0s;
	transition-delay: 0.0s;
	transition-duration: 0.0s;
	transition-delay: 0.0ms;
	transition-duration: 0.0ms;
}

.transition-test-two-decimal-places {
	transition: all 0.00s ease 0.00s;
	transition-delay: 0.00s;
	transition-duration: 0.00s;
	transition-delay: 0.00ms;
	transition-duration: 0.00ms;
}

.rotating-test {
	-webkit-animation: loadpspin 0s infinite linear;
	-moz-animation: loadpspin 0.0s infinite linear;
	-ms-animation: loadpspin 0.00s infinite linear;
	animation: loadpspin 1.0s infinite linear;
	transform-origin: 50% 50%;
}

After optimization:

.transition-test{transition:all 0s ease 0s;transition-delay:0s;transition-duration:0s;transition-delay:0ms;transition-duration:0ms}
.transition-test-one-decimal-place{transition:all 0s ease 0s;transition-delay:0s;transition-duration:0s;transition-delay:0ms;transition-duration:0ms}
.transition-test-two-decimal-places{transition:all .00s ease .00s;transition-delay:.00s;transition-duration:.00s;transition-delay:.00ms;transition-duration:.00ms}
.rotating-test{-webkit-animation:loadpspin 0s infinite linear;-moz-animation:loadpspin 0s infinite linear;-ms-animation:loadpspin .00s infinite linear;animation:loadpspin 1s infinite linear;transform-origin:50% 50%}

Looks good
Many thanks @melloware

[melloware]

Awesome thanks for testing!!!!

[melloware]

I added a battery of unit tests for CSS compression and included your new test case as well!

https://github.com/primefaces-extensions/resources-optimizer-maven-plugin/blob/master/src/test/resources/transition.css