From 55d7ed527a17aab384c07a48740f7f408c45fb33 Mon Sep 17 00:00:00 2001 From: "alexander.akait" Date: Mon, 19 Dec 2022 03:23:56 +0300 Subject: [PATCH] feat(css/prefixer): overflow --- .../data/prefixes_and_browsers.json | 24 +++++ crates/swc_css_prefixer/src/prefixer.rs | 23 +++-- .../tests/fixture/overflow/input.css | 69 +++++++++++++- .../tests/fixture/overflow/output.css | 90 ++++++++++++++++++- .../overflow/output.defaults-not-ie-11.css | 53 ++++++++++- .../tests/fixture/text-overflow/input.css | 3 + .../tests/fixture/text-overflow/output.css | 4 + .../output.defaults-not-ie-11.css | 3 + 8 files changed, 257 insertions(+), 12 deletions(-) create mode 100644 crates/swc_css_prefixer/tests/fixture/text-overflow/input.css create mode 100644 crates/swc_css_prefixer/tests/fixture/text-overflow/output.css create mode 100644 crates/swc_css_prefixer/tests/fixture/text-overflow/output.defaults-not-ie-11.css diff --git a/crates/swc_css_prefixer/data/prefixes_and_browsers.json b/crates/swc_css_prefixer/data/prefixes_and_browsers.json index 411a6aab3bba..985462f395ad 100644 --- a/crates/swc_css_prefixer/data/prefixes_and_browsers.json +++ b/crates/swc_css_prefixer/data/prefixes_and_browsers.json @@ -3913,6 +3913,30 @@ "samsung": "11.2" } ], + "overflow": [ + { + "chrome": "4", + "edge": "12", + "safari": "3.1", + "firefox": "2", + "opera": "10", + "ie": "6", + "ios": "3.2", + "samsung": "4", + "android": "2.1" + }, + { + "chrome": "67", + "edge": "17", + "safari": "13", + "firefox": "60", + "opera": "54", + "ie": "11", + "ios": "13.3", + "samsung": "14.0", + "android": "4.4.4" + } + ], "display:multi-keyword-values": [ { "chrome": "4", diff --git a/crates/swc_css_prefixer/src/prefixer.rs b/crates/swc_css_prefixer/src/prefixer.rs index a8b006e779a9..f77af521829a 100644 --- a/crates/swc_css_prefixer/src/prefixer.rs +++ b/crates/swc_css_prefixer/src/prefixer.rs @@ -1841,7 +1841,7 @@ impl VisitMut for Prefixer { } } } else if n.value.len() == 2 - && should_prefix("display:multi-keyword-values", self.env, true) + && should_prefix("display:multi-keyword-values", self.env, false) { if let ( Some(ComponentValue::Ident(first)), @@ -1965,7 +1965,7 @@ impl VisitMut for Prefixer { } } } else if n.value.len() == 3 - && should_prefix("display:multi-keyword-values", self.env, true) + && should_prefix("display:multi-keyword-values", self.env, false) { if let ( Some(ComponentValue::Ident(first)), @@ -2292,7 +2292,7 @@ impl VisitMut for Prefixer { ); } - "opacity" if should_prefix("opacity", self.env, true) => { + "opacity" if should_prefix("opacity", self.env, false) => { let old_value = match n.value.get(0) { Some(ComponentValue::Percentage(percentage)) => Some(percentage.value.value), _ => None, @@ -3186,6 +3186,19 @@ impl VisitMut for Prefixer { "overflow-wrap" => { add_declaration!("word-wrap", None); + "overflow" if should_prefix("overflow", self.env, false) && n.value.len() == 2 => { + if let ( + Some(left @ ComponentValue::Ident(box first)), + Some(right @ ComponentValue::Ident(box second)), + ) = (n.value.get(0), n.value.get(1)) + { + if first.value.eq_ignore_ascii_case(&second.value) { + add_declaration!("overflow", Some(Box::new(|| { vec![left.clone()] }))); + } else { + add_declaration!("overflow-x", Some(Box::new(|| { vec![left.clone()] }))); + add_declaration!("overflow-y", Some(Box::new(|| { vec![right.clone()] }))); + } + } } "tab-size" => { @@ -3343,7 +3356,7 @@ impl VisitMut for Prefixer { add_declaration!(Prefix::Moz, "-moz-border-radius-bottomleft", None); } - "src" if should_prefix("font-face-format-ident", self.env, true) => { + "src" if should_prefix("font-face-format-ident", self.env, false) => { let mut new_declaration = n.clone(); font_face_format_old_syntax(&mut new_declaration); @@ -3394,7 +3407,7 @@ impl VisitMut for Prefixer { })); } - if should_prefix("calc-nested", self.env, true) { + if should_prefix("calc-nested", self.env, false) { let mut value = n.value.clone(); replace_calc(&mut value, None); diff --git a/crates/swc_css_prefixer/tests/fixture/overflow/input.css b/crates/swc_css_prefixer/tests/fixture/overflow/input.css index dfe9c319f6ba..b51fe3f392ae 100644 --- a/crates/swc_css_prefixer/tests/fixture/overflow/input.css +++ b/crates/swc_css_prefixer/tests/fixture/overflow/input.css @@ -1,3 +1,68 @@ -.class { - text-overflow: clip; +html.single-overflow { + overflow: hidden; } + +html.double-overflow { + overflow: hidden auto; +} + +html.double-overflow { + overflow: auto auto; +} + +html.double-overflow { + overflow: hidden /* a comment */ auto; +} + +html.double-overflow { + overflow: hidden auto; +} + +html.double-overflow { + overflow: hidden auto; +} + +.order-0 { + -webkit-overflow: hidden auto; +} + +.order-1 { + -moz-overflow: hidden auto; +} + +.order-2 { + -ms-overflow: hidden auto; +} + +.order-3 { + -o-overflow: hidden auto; +} + +.order-4 { + --overflow: hidden auto; +} + +.order-5 { + foo-overflow: hidden auto; +} + +/* overflow: hidden auto; */ + +.content { + content: 'overflow: hidden auto;'; +} + +.important { + overflow: hidden auto !important; +} + +@supports (overflow: hidden auto) { + .support { + overflow: hidden auto; + } +} +@keyframes KEYFRAMES { + 50% { + overflow: hidden auto; + } +} \ No newline at end of file diff --git a/crates/swc_css_prefixer/tests/fixture/overflow/output.css b/crates/swc_css_prefixer/tests/fixture/overflow/output.css index c8289155b0cc..36ca665bd386 100644 --- a/crates/swc_css_prefixer/tests/fixture/overflow/output.css +++ b/crates/swc_css_prefixer/tests/fixture/overflow/output.css @@ -1,4 +1,88 @@ -.class { - -o-text-overflow: clip; - text-overflow: clip; +html.single-overflow { + overflow: hidden; +} +html.double-overflow { + overflow-x: hidden; + overflow-y: auto; + overflow: hidden auto; +} +html.double-overflow { + overflow: auto; + overflow: auto auto; +} +html.double-overflow { + overflow-x: hidden; + overflow-y: auto; + overflow: hidden auto; +} +html.double-overflow { + overflow-x: hidden; + overflow-y: auto; + overflow: hidden auto; +} +html.double-overflow { + overflow-x: hidden; + overflow-y: auto; + overflow: hidden auto; +} +.order-0 { + -webkit-overflow: hidden auto; +} +.order-1 { + -moz-overflow: hidden auto; +} +.order-2 { + -ms-overflow: hidden auto; +} +.order-3 { + -o-overflow: hidden auto; +} +.order-4 { + --overflow: hidden auto; +} +.order-5 { + foo-overflow: hidden auto; +} +.content { + content: 'overflow: hidden auto;'; +} +.important { + overflow-x: hidden !important; + overflow-y: auto !important; + overflow: hidden auto !important; +} +@supports ((overflow: hidden auto) or (overflow-x: hidden) or (overflow-y: auto)) { + .support { + overflow-x: hidden; + overflow-y: auto; + overflow: hidden auto; + } +} +@-webkit-keyframes KEYFRAMES { + 50% { + overflow-x: hidden; + overflow-y: auto; + overflow: hidden auto; + } +} +@-moz-keyframes KEYFRAMES { + 50% { + overflow-x: hidden; + overflow-y: auto; + overflow: hidden auto; + } +} +@-o-keyframes KEYFRAMES { + 50% { + overflow-x: hidden; + overflow-y: auto; + overflow: hidden auto; + } +} +@keyframes KEYFRAMES { + 50% { + overflow-x: hidden; + overflow-y: auto; + overflow: hidden auto; + } } diff --git a/crates/swc_css_prefixer/tests/fixture/overflow/output.defaults-not-ie-11.css b/crates/swc_css_prefixer/tests/fixture/overflow/output.defaults-not-ie-11.css index fc829ddc9cb5..c8f6e2acd16d 100644 --- a/crates/swc_css_prefixer/tests/fixture/overflow/output.defaults-not-ie-11.css +++ b/crates/swc_css_prefixer/tests/fixture/overflow/output.defaults-not-ie-11.css @@ -1,3 +1,52 @@ -.class { - text-overflow: clip; +html.single-overflow { + overflow: hidden; +} +html.double-overflow { + overflow: hidden auto; +} +html.double-overflow { + overflow: auto auto; +} +html.double-overflow { + overflow: hidden auto; +} +html.double-overflow { + overflow: hidden auto; +} +html.double-overflow { + overflow: hidden auto; +} +.order-0 { + -webkit-overflow: hidden auto; +} +.order-1 { + -moz-overflow: hidden auto; +} +.order-2 { + -ms-overflow: hidden auto; +} +.order-3 { + -o-overflow: hidden auto; +} +.order-4 { + --overflow: hidden auto; +} +.order-5 { + foo-overflow: hidden auto; +} +.content { + content: 'overflow: hidden auto;'; +} +.important { + overflow: hidden auto !important; +} +@supports (overflow: hidden auto) { + .support { + overflow: hidden auto; + } +} +@keyframes KEYFRAMES { + 50% { + overflow: hidden auto; + } } diff --git a/crates/swc_css_prefixer/tests/fixture/text-overflow/input.css b/crates/swc_css_prefixer/tests/fixture/text-overflow/input.css new file mode 100644 index 000000000000..dfe9c319f6ba --- /dev/null +++ b/crates/swc_css_prefixer/tests/fixture/text-overflow/input.css @@ -0,0 +1,3 @@ +.class { + text-overflow: clip; +} diff --git a/crates/swc_css_prefixer/tests/fixture/text-overflow/output.css b/crates/swc_css_prefixer/tests/fixture/text-overflow/output.css new file mode 100644 index 000000000000..c8289155b0cc --- /dev/null +++ b/crates/swc_css_prefixer/tests/fixture/text-overflow/output.css @@ -0,0 +1,4 @@ +.class { + -o-text-overflow: clip; + text-overflow: clip; +} diff --git a/crates/swc_css_prefixer/tests/fixture/text-overflow/output.defaults-not-ie-11.css b/crates/swc_css_prefixer/tests/fixture/text-overflow/output.defaults-not-ie-11.css new file mode 100644 index 000000000000..fc829ddc9cb5 --- /dev/null +++ b/crates/swc_css_prefixer/tests/fixture/text-overflow/output.defaults-not-ie-11.css @@ -0,0 +1,3 @@ +.class { + text-overflow: clip; +}