From 23b677a779c292d818bc3c9435a2a38255716e6e Mon Sep 17 00:00:00 2001 From: bluemoehre Date: Fri, 11 Sep 2015 17:24:43 +0200 Subject: [PATCH 1/6] Fixed issue #151 - Invalid reduction for keyframes --- src/com/yahoo/platform/yui/compressor/CssCompressor.java | 8 +++++--- tests/issue151.css | 8 ++++++++ tests/issue151.css.min | 1 + 3 files changed, 14 insertions(+), 3 deletions(-) create mode 100644 tests/issue151.css create mode 100644 tests/issue151.css.min diff --git a/src/com/yahoo/platform/yui/compressor/CssCompressor.java b/src/com/yahoo/platform/yui/compressor/CssCompressor.java index 2648c3a6..a2eaf5e4 100644 --- a/src/com/yahoo/platform/yui/compressor/CssCompressor.java +++ b/src/com/yahoo/platform/yui/compressor/CssCompressor.java @@ -328,12 +328,14 @@ public void compress(Writer out, int linebreakpos) // remove unnecessary semicolons css = css.replaceAll(";+}", "}"); - // Replace 0(px,em,%) with 0. - css = css.replaceAll("(?i)(^|[^.0-9])(?:0?\\.)?0(?:px|em|%|in|cm|mm|pc|pt|ex|deg|g?rad|m?s|k?hz)", "$10"); + // Replace zero values with 0 + // e.g. 0px, 0em, 0%, 0.0px, 0.0em, 0% + // WARN: keep animation step units! + css = css.replaceAll("(?i)(^|[^.0-9{])(?:0?\\.)?0(?:px|em|%|in|cm|mm|pc|pt|ex|deg|g?rad|m?s|k?hz)", "$10"); // Replace x.0(px,em,%) with x(px,em,%). css = css.replaceAll("([0-9])\\.0(px|em|%|in|cm|mm|pc|pt|ex|deg|g?rad|m?s|k?hz| |;)", "$1$2"); - // Replace 0 0 0 0; with 0. + // Replace 0 0 0 0; with 0 css = css.replaceAll(":0 0 0 0(;|})", ":0$1"); css = css.replaceAll(":0 0 0(;|})", ":0$1"); css = css.replaceAll(":0 0(;|})", ":0$1"); diff --git a/tests/issue151.css b/tests/issue151.css new file mode 100644 index 00000000..4b3d7d20 --- /dev/null +++ b/tests/issue151.css @@ -0,0 +1,8 @@ +@keyframes fadeIn { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } +} \ No newline at end of file diff --git a/tests/issue151.css.min b/tests/issue151.css.min new file mode 100644 index 00000000..ea201bed --- /dev/null +++ b/tests/issue151.css.min @@ -0,0 +1 @@ +@keyframes fadeIn{0%{opacity:0}100%{opacity:1}} \ No newline at end of file From 27bf513a2385d5392bb441c030f2b3438436315f Mon Sep 17 00:00:00 2001 From: bluemoehre Date: Fri, 18 Sep 2015 17:48:03 +0200 Subject: [PATCH 2/6] added general test for keyframes --- tests/keyframes.css | 70 +++++++++++++++++++++++++++++++++++++++++ tests/keyframes.css.min | 1 + 2 files changed, 71 insertions(+) create mode 100644 tests/keyframes.css create mode 100644 tests/keyframes.css.min diff --git a/tests/keyframes.css b/tests/keyframes.css new file mode 100644 index 00000000..f42126b0 --- /dev/null +++ b/tests/keyframes.css @@ -0,0 +1,70 @@ +/* + * /(? '' + * /\/\*.*?\*\// -> '' + * ';}' -> '}' + * 'from' -> '0%' + * '100%' -> 'to' + */ + +/* steps defined by strings */ +@keyframes test1 { + from { + opacity: 1; + } + to { + opacity: 0; + } +} + +/* steps defined by percentage */ +@keyframes test2 { + 0% { + opacity: 1; + } + 50% { + opacity: 0.9; + } +} + +/* steps defined by percentage and strings */ +@keyframes test3 { + from { + opacity: 1; + } + 50% { + opacity: 0.9; + } + to { + opacity: 0.5; + } +} + +/* same value for multiple steps */ +@keyframes test4 { + from, 50%, to { + opacity: 0; + } + 25%, 75% { + opacity: 1; + } +} + +/* percent only steps, mixed order */ +@keyframes test5 { + 100% { + opacity: 0; + } + 0% { + opacity: 1; + } +} + +/* vendor prefixed */ +@-webkit-keyframes test6 { + 0%, 50% { + opacity: 1; + } + 100% { + opacity: 0; + } +} \ No newline at end of file diff --git a/tests/keyframes.css.min b/tests/keyframes.css.min new file mode 100644 index 00000000..d780e3b4 --- /dev/null +++ b/tests/keyframes.css.min @@ -0,0 +1 @@ +@keyframes test1{0%{opacity:1}to{opacity:0}}@keyframes test2{0%{opacity:1}50%{opacity:0.9}}@keyframes test3{0%{opacity:1}50%{opacity:0.9}to{opacity:0.5}}@keyframes test4{0%,50%,to{opacity:0}25%,75%{opacity:1}}@keyframes test5{to{opacity:0}0%{opacity:1}}@-webkit-keyframes test6{0%,50%{opacity:1}to{opacity:0}} \ No newline at end of file From 2cca8a1787fb455d366d052cfc34b47f3e571df3 Mon Sep 17 00:00:00 2001 From: Moehre Date: Thu, 24 Sep 2015 01:10:02 +0200 Subject: [PATCH 3/6] modified keyframes test to create another trap for zeroing values via regexp --- tests/keyframes.css | 2 +- tests/keyframes.css.min | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/tests/keyframes.css b/tests/keyframes.css index f42126b0..1f972ffc 100644 --- a/tests/keyframes.css +++ b/tests/keyframes.css @@ -41,7 +41,7 @@ /* same value for multiple steps */ @keyframes test4 { - from, 50%, to { + 50%, 0%, to { opacity: 0; } 25%, 75% { diff --git a/tests/keyframes.css.min b/tests/keyframes.css.min index d780e3b4..c1ea1f2e 100644 --- a/tests/keyframes.css.min +++ b/tests/keyframes.css.min @@ -1 +1 @@ -@keyframes test1{0%{opacity:1}to{opacity:0}}@keyframes test2{0%{opacity:1}50%{opacity:0.9}}@keyframes test3{0%{opacity:1}50%{opacity:0.9}to{opacity:0.5}}@keyframes test4{0%,50%,to{opacity:0}25%,75%{opacity:1}}@keyframes test5{to{opacity:0}0%{opacity:1}}@-webkit-keyframes test6{0%,50%{opacity:1}to{opacity:0}} \ No newline at end of file +@keyframes test1{0%{opacity:1}to{opacity:0}}@keyframes test2{0%{opacity:1}50%{opacity:.9}}@keyframes test3{0%{opacity:1}50%{opacity:.9}to{opacity:.5}}@keyframes test4{50%,0%,to{opacity:0}25%,75%{opacity:1}}@keyframes test5{to{opacity:0}0%{opacity:1}}@-webkit-keyframes test6{0%,50%{opacity:1}to{opacity:0}} \ No newline at end of file From 3cdf1dd4b95846cecb6a5eb62a61b0d07be8c77b Mon Sep 17 00:00:00 2001 From: Moehre Date: Thu, 24 Sep 2015 01:10:28 +0200 Subject: [PATCH 4/6] added more basic tests --- tests/background-gradient.css | 10 ++++++++++ tests/background-gradient.css.min | 1 + 2 files changed, 11 insertions(+) create mode 100644 tests/background-gradient.css create mode 100644 tests/background-gradient.css.min diff --git a/tests/background-gradient.css b/tests/background-gradient.css new file mode 100644 index 00000000..adf28e17 --- /dev/null +++ b/tests/background-gradient.css @@ -0,0 +1,10 @@ +.gradient { + background: #ffffff; + background: -moz-linear-gradient(top, #ffffff 0%, #f1f1f1 50%, #e1e1e1 51%, #f6f6f6 100%); + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(50%,#f1f1f1), color-stop(51%,#e1e1e1), color-stop(100%,#f6f6f6)); + background: -webkit-linear-gradient(top, #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%); + background: -o-linear-gradient(top, #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%); + background: -ms-linear-gradient(top, #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%); + background: linear-gradient(to bottom, #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%); + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f6f6f6',GradientType=0 ); +} \ No newline at end of file diff --git a/tests/background-gradient.css.min b/tests/background-gradient.css.min new file mode 100644 index 00000000..2dcb3380 --- /dev/null +++ b/tests/background-gradient.css.min @@ -0,0 +1 @@ +.gradient{background:#fff;background:-moz-linear-gradient(top,#fff 0,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#fff),color-stop(50%,#f1f1f1),color-stop(51%,#e1e1e1),color-stop(100%,#f6f6f6));background:-webkit-linear-gradient(top,#fff 0,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%);background:-o-linear-gradient(top,#fff 0,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%);background:-ms-linear-gradient(top,#fff 0,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%);background:linear-gradient(to bottom,#fff 0,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',endColorstr='#f6f6f6',GradientType=0)} \ No newline at end of file From 2302bf1284b02c1e1390740b70ec247122307d5b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?M=C3=B6hre?= Date: Wed, 27 Jul 2016 12:45:24 +0200 Subject: [PATCH 5/6] Fixed: Replacing zero units inside gradient definitions is broken if using HEX colors #253 --- src/com/yahoo/platform/yui/compressor/CssCompressor.java | 2 +- tests/keyframes.css.min | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/com/yahoo/platform/yui/compressor/CssCompressor.java b/src/com/yahoo/platform/yui/compressor/CssCompressor.java index 8a5cfe93..59c101aa 100644 --- a/src/com/yahoo/platform/yui/compressor/CssCompressor.java +++ b/src/com/yahoo/platform/yui/compressor/CssCompressor.java @@ -338,7 +338,7 @@ public void compress(Writer out, int linebreakpos) } while (!(css.equals(oldCss))); // Replace 0(px,em,%) with 0 inside groups (e.g. -MOZ-RADIAL-GRADIENT(CENTER 45DEG, CIRCLE CLOSEST-SIDE, ORANGE 0%, RED 100%)) - p = Pattern.compile("(?i)\\( ?((?:[0-9a-z-.]+[ ,])*)?(?:0?\\.)?0(?:px|em|%|in|cm|mm|pc|pt|ex|deg|g?rad|m?s|k?hz)"); + p = Pattern.compile("(?i)\\( ?((?:[#0-9a-z-.]+[ ,])*)?(?:0?\\.)?0(?:px|em|%|in|cm|mm|pc|pt|ex|deg|g?rad|m?s|k?hz)"); do { oldCss = css; m = p.matcher(css); diff --git a/tests/keyframes.css.min b/tests/keyframes.css.min index c1ea1f2e..8005123b 100644 --- a/tests/keyframes.css.min +++ b/tests/keyframes.css.min @@ -1 +1 @@ -@keyframes test1{0%{opacity:1}to{opacity:0}}@keyframes test2{0%{opacity:1}50%{opacity:.9}}@keyframes test3{0%{opacity:1}50%{opacity:.9}to{opacity:.5}}@keyframes test4{50%,0%,to{opacity:0}25%,75%{opacity:1}}@keyframes test5{to{opacity:0}0%{opacity:1}}@-webkit-keyframes test6{0%,50%{opacity:1}to{opacity:0}} \ No newline at end of file +@keyframes test1{from{opacity:1}to{opacity:0}}@keyframes test2{0%{opacity:1}50%{opacity:.9}}@keyframes test3{from{opacity:1}50%{opacity:.9}to{opacity:.5}}@keyframes test4{50%,0%,to{opacity:0}25%,75%{opacity:1}}@keyframes test5{100%{opacity:0}0%{opacity:1}}@-webkit-keyframes test6{0%,50%{opacity:1}100%{opacity:0}} \ No newline at end of file From 53f44325c0e0fce535fde4436bcef625e960e4f4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?M=C3=B6hre?= Date: Wed, 27 Jul 2016 14:10:07 +0200 Subject: [PATCH 6/6] keyframe shortening --- .../yui/compressor/CssCompressor.java | 6 ++++++ tests/issue151.css.min | 2 +- tests/keyframes.css | 20 +++++++++++++++++-- tests/keyframes.css.min | 2 +- 4 files changed, 26 insertions(+), 4 deletions(-) diff --git a/src/com/yahoo/platform/yui/compressor/CssCompressor.java b/src/com/yahoo/platform/yui/compressor/CssCompressor.java index 59c101aa..2e08ec61 100644 --- a/src/com/yahoo/platform/yui/compressor/CssCompressor.java +++ b/src/com/yahoo/platform/yui/compressor/CssCompressor.java @@ -353,6 +353,12 @@ public void compress(Writer out, int linebreakpos) css = css.replaceAll(":0 0 0(;|})", ":0$1"); css = css.replaceAll(":0 0(;|})", ":0$1"); + // Replace "from" with "0%" in keyframes + css = css.replaceAll("([{},])from([{,])", "$10%$2"); + + // Replace "100%" with "to" in keyframes + css = css.replaceAll("([{},])100%([{,])", "$1to$2"); + // Replace background-position:0; with background-position:0 0; // same for transform-origin diff --git a/tests/issue151.css.min b/tests/issue151.css.min index 00f934fb..de0e10c8 100644 --- a/tests/issue151.css.min +++ b/tests/issue151.css.min @@ -1 +1 @@ -@keyframes fadeIn{0%{opacity:0}100%{opacity:1}} +@keyframes fadeIn{0%{opacity:0}to{opacity:1}} diff --git a/tests/keyframes.css b/tests/keyframes.css index 1f972ffc..a2dfc218 100644 --- a/tests/keyframes.css +++ b/tests/keyframes.css @@ -7,7 +7,7 @@ */ /* steps defined by strings */ -@keyframes test1 { +@keyframes test1-1 { from { opacity: 1; } @@ -15,6 +15,14 @@ opacity: 0; } } +@keyframes test1-2 { + to { + opacity: 0; + } + from { + opacity: 1; + } +} /* steps defined by percentage */ @keyframes test2 { @@ -40,7 +48,7 @@ } /* same value for multiple steps */ -@keyframes test4 { +@keyframes test4-1 { 50%, 0%, to { opacity: 0; } @@ -48,6 +56,14 @@ opacity: 1; } } +@keyframes test4-2 { + 50%, from, to { + opacity: 0; + } + 25%, 75% { + opacity: 1; + } +} /* percent only steps, mixed order */ @keyframes test5 { diff --git a/tests/keyframes.css.min b/tests/keyframes.css.min index 8005123b..b17a3209 100644 --- a/tests/keyframes.css.min +++ b/tests/keyframes.css.min @@ -1 +1 @@ -@keyframes test1{from{opacity:1}to{opacity:0}}@keyframes test2{0%{opacity:1}50%{opacity:.9}}@keyframes test3{from{opacity:1}50%{opacity:.9}to{opacity:.5}}@keyframes test4{50%,0%,to{opacity:0}25%,75%{opacity:1}}@keyframes test5{100%{opacity:0}0%{opacity:1}}@-webkit-keyframes test6{0%,50%{opacity:1}100%{opacity:0}} \ No newline at end of file +@keyframes test1-1{0%{opacity:1}to{opacity:0}}@keyframes test1-2{to{opacity:0}0%{opacity:1}}@keyframes test2{0%{opacity:1}50%{opacity:.9}}@keyframes test3{0%{opacity:1}50%{opacity:.9}to{opacity:.5}}@keyframes test4-1{50%,0%,to{opacity:0}25%,75%{opacity:1}}@keyframes test4-2{50%,0%,to{opacity:0}25%,75%{opacity:1}}@keyframes test5{to{opacity:0}0%{opacity:1}}@-webkit-keyframes test6{0%,50%{opacity:1}to{opacity:0}} \ No newline at end of file