From 674c788654714512000c64abf1a088e0f9f2820b Mon Sep 17 00:00:00 2001 From: Alexander Akait <4567934+alexander-akait@users.noreply.github.com> Date: Wed, 17 Aug 2022 15:35:39 +0300 Subject: [PATCH] feat(css/prefixer): Support more env properties and values (#5512) --- .../data/prefixes_and_browsers.json | 435 +++++++++++++- crates/swc_css_prefixer/src/prefixer.rs | 558 ++++++++++++------ .../basic/output.defaults-not-ie-11.css | 4 - .../cursor/output.defaults-not-ie-11.css | 18 +- .../display/output.defaults-not-ie-11.css | 18 - .../filter/output.defaults-not-ie-11.css | 1 - .../flex/output.defaults-not-ie-11.css | 38 +- .../output.defaults-not-ie-11.css | 10 - .../output.defaults-not-ie-11.css | 6 - .../keyframes/output.defaults-not-ie-11.css | 4 - .../prefixed/output.defaults-not-ie-11.css | 8 - .../recovery/output.defaults-not-ie-11.css | 4 - .../supports/output.defaults-not-ie-11.css | 52 +- .../transform/output.defaults-not-ie-11.css | 3 - .../tests/fixture/transition/output.css | 12 +- .../transition/output.defaults-not-ie-11.css | 44 +- .../width-size/output.defaults-not-ie-11.css | 21 +- .../width/output.defaults-not-ie-11.css | 6 - 18 files changed, 823 insertions(+), 419 deletions(-) diff --git a/crates/swc_css_prefixer/data/prefixes_and_browsers.json b/crates/swc_css_prefixer/data/prefixes_and_browsers.json index 5e82f231fc8..54dc24d695f 100644 --- a/crates/swc_css_prefixer/data/prefixes_and_browsers.json +++ b/crates/swc_css_prefixer/data/prefixes_and_browsers.json @@ -3267,7 +3267,7 @@ "safari": "6" } ], - "-moz-calc": [ + "-moz-calc()": [ { "firefox": "4" }, @@ -3440,5 +3440,438 @@ { "opera": "15" } + ], + + "-webkit-zoom-in": [ + { + "chrome": "4", + "opera": "15", + "safari": "3.1" + + }, + { + "chrome": "36", + "opera": "23", + "safari": "8" + } + ], + "-webkit-zoom-out": [ + { + "chrome": "4", + "opera": "15", + "safari": "3.1" + + }, + { + "chrome": "36", + "opera": "23", + "safari": "8" + } + ], + "-moz-zoom-in": [ + { + "firefox": "2" + }, + { + "firefox": "23" + } + ], + "-moz-zoom-out": [ + { + "firefox": "2" + }, + { + "firefox": "23" + } + ], + + "-webkit-grab": [ + { + "chrome": "4", + "opera": "15", + "safari": "3.1" + }, + { + "chrome": "67", + "opera": "54", + "safari": "10.1" + } + ], + "-webkit-grabbing": [ + { + "chrome": "4", + "opera": "15", + "safari": "3.1" + }, + { + "chrome": "67", + "opera": "54", + "safari": "10.1" + } + ], + "-moz-grab": [ + { + "firefox": "2" + }, + { + "firefox": "26" + } + ], + "-moz-grabbing": [ + { + "firefox": "2" + }, + { + "firefox": "26" + } + ], + + "-webkit-sticky": [ + { + "ios": "6.0", + "safari": "6.1" + }, + { + "ios": "12.5", + "safari": "12.1" + } + ], + + "-ms-pan-x": [ + { + "ie": "10" + }, + { + "ie": "10" + } + ], + "-ms-pan-y": [ + { + "ie": "10" + }, + { + "ie": "10" + } + ], + "-ms-double-tap-zoom": [ + { + "ie": "10" + }, + { + "ie": "10" + } + ], + "-ms-manipulation": [ + { + "ie": "10" + }, + { + "ie": "10" + } + ], + "-ms-none": [ + { + "ie": "10" + }, + { + "ie": "10" + } + ], + "-ms-pinch-zoom": [ + { + "ie": "10" + }, + { + "ie": "10" + } + ], + + "-webkit-optimize-contrast": [ + { + "ios": "5.0", + "safari": "6" + }, + { + "ios": "6.1", + "safari": "6" + } + ], + "-webkit-optimize-contrast:fallback": [ + { + "ios": "5.0", + "safari": "6" + }, + { + "ios": "9.3", + "safari": "9.1" + } + ], + "-moz-crisp-edges": [ + { + "firefox": "3.6" + }, + { + "firefox": "64" + } + ], + "-o-pixelated": [ + { + "opera": "11.6" + }, + { + "opera": "12.1" + } + ], + "nearest-neighbor": [ + { + "ie": "7" + }, + { + "ie": "11" + } + ], + + "-webkit-box": [ + { + "android": "2.1", + "chrome": "4", + "ios": "3.2", + "safari": "3.1" + }, + { + "android": "4.3", + "chrome": "20", + "ios": "6.1", + "safari": "6" + } + ], + "-webkit-inline-box": [ + { + "android": "2.1", + "chrome": "4", + "ios": "3.2", + "safari": "3.1" + }, + { + "android": "4.3", + "chrome": "20", + "ios": "6.1", + "safari": "6" + } + ], + "-webkit-flex:display": [ + { + "chrome": "21", + "ios": "7.0", + "opera": "15", + "safari": "6.1" + }, + { + "chrome": "28", + "ios": "8.4", + "opera": "16", + "safari": "8" + } + ], + "-webkit-inline-flex": [ + { + "chrome": "21", + "ios": "7.0", + "opera": "15", + "safari": "6.1" + }, + { + "chrome": "28", + "ios": "8.4", + "opera": "16", + "safari": "8" + } + ], + "-moz-box": [ + { + "firefox": "2" + }, + { + "firefox": "21" + } + ], + "-moz-inline-box": [ + { + "firefox": "2" + }, + { + "firefox": "21" + } + ], + "-ms-flexbox": [ + { + "ie": "10" + }, + { + "ie": "10" + } + ], + "-ms-inline-flexbox": [ + { + "ie": "10" + }, + { + "ie": "10" + } + ], + + "-webkit-isolate": [ + { + "chrome": "16", + "ios": "6", + "safari": "6" + }, + { + "chrome": "47", + "ios": "10.3", + "safari": "10.1" + } + ], + "-webpack-isolate-override": [ + { + "safari": "6", + "ios": "6" + }, + { + "safari": "10.1", + "ios": "10.3" + } + ], + "-webpack-plaintext": [ + { + "safari": "6", + "ios": "6" + }, + { + "safari": "10.1", + "ios": "10.3" + } + ], + "-moz-isolate": [ + { + "firefox": "17" + }, + { + "firefox": "49" + } + ], + "-moz-isolate-override": [ + { + "firefox": "17" + }, + { + "firefox": "49" + } + ], + "-moz-plaintext": [ + { + "firefox": "10" + }, + { + "firefox": "49" + } + ], + + "-webkit-fit-content": [ + { + "android": "4.4", + "chrome": "22", + "safari": "7", + "ios": "7", + "opera": "15", + "samsung": "4" + }, + { + "android": "4.4.4", + "chrome": "45", + "safari": "10.1", + "ios": "10.3", + "opera": "32", + "samsung": "4" + } + ], + "-webkit-max-content": [ + { + "android": "4.4", + "chrome": "22", + "ios": "7.1", + "opera": "15", + "safari": "6.1", + "samsung": "4" + }, + { + "android": "4.4.4", + "chrome": "45", + "ios": "13.7", + "opera": "32", + "safari": "10.1", + "samsung": "4" + } + ], + "-webkit-min-content": [ + { + "android": "4.4", + "chrome": "22", + "ios": "7.1", + "opera": "15", + "safari": "6.1", + "samsung": "4" + }, + { + "android": "4.4.4", + "chrome": "45", + "ios": "13.7", + "opera": "32", + "safari": "10.1", + "samsung": "4" + } + ], + "-webkit-fill-available": [ + { + "android": "4.4", + "chrome": "22", + "edge": "79", + "ios": "7.0", + "op_mob": "64", + "opera": "15", + "safari": "7", + "samsung": "5.0" + }, + {} + ], + "-moz-fit-content": [ + { + "firefox": "3" + }, + { + "firefox": "93" + } + ], + "-moz-max-content": [ + { + "firefox": "3" + }, + { + "firefox": "65" + } + ], + "-moz-min-content": [ + { + "firefox": "3" + }, + { + "firefox": "65" + } + ], + "-moz-available": [ + { + "firefox": "3" + }, + {} ] } diff --git a/crates/swc_css_prefixer/src/prefixer.rs b/crates/swc_css_prefixer/src/prefixer.rs index 785fdf02f71..7257c903310 100644 --- a/crates/swc_css_prefixer/src/prefixer.rs +++ b/crates/swc_css_prefixer/src/prefixer.rs @@ -1396,11 +1396,13 @@ impl VisitMut for Prefixer { raw: None, }); - if let Some(value) = $value { + let value: Option Vec>> = $value; + + if let Some(value) = value { self.added_declarations.push(Declaration { span: n.span, name, - value, + value: value(), important: n.important.clone(), }); } else { @@ -1470,7 +1472,6 @@ impl VisitMut for Prefixer { if let ComponentValue::Ident(Ident { value, .. }) = &n.value[0] { match &*value.to_lowercase() { "alternate-reverse" | "reverse" => {} - _ => { add_declaration!(Prefix::Webkit, "-webkit-animation-direction", None); add_declaration!(Prefix::Moz, "-moz-animation-direction", None); @@ -1582,17 +1583,39 @@ impl VisitMut for Prefixer { "cursor" => { if self.rule_prefix == Some(Prefix::Webkit) || self.rule_prefix.is_none() { - replace_ident(&mut webkit_value, "zoom-in", "-webkit-zoom-in"); - replace_ident(&mut webkit_value, "zoom-out", "-webkit-zoom-out"); - replace_ident(&mut webkit_value, "grab", "-webkit-grab"); - replace_ident(&mut webkit_value, "grabbing", "-webkit-grabbing"); + if should_prefix("-o-repeating-radial-gradient()", self.env, false) { + replace_ident(&mut webkit_value, "zoom-in", "-webkit-zoom-in"); + } + + if should_prefix("-o-repeating-radial-gradient()", self.env, false) { + replace_ident(&mut webkit_value, "zoom-out", "-webkit-zoom-out"); + } + + if should_prefix("-webkit-grab", self.env, false) { + replace_ident(&mut webkit_value, "grab", "-webkit-grab"); + } + + if should_prefix("-webkit-grabbing", self.env, false) { + replace_ident(&mut webkit_value, "grabbing", "-webkit-grabbing"); + } } if self.rule_prefix == Some(Prefix::Moz) || self.rule_prefix.is_none() { - replace_ident(&mut moz_value, "zoom-in", "-moz-zoom-in"); - replace_ident(&mut moz_value, "zoom-out", "-moz-zoom-out"); - replace_ident(&mut moz_value, "grab", "-moz-grab"); - replace_ident(&mut moz_value, "grabbing", "-moz-grabbing"); + if should_prefix("-moz-zoom-in", self.env, false) { + replace_ident(&mut moz_value, "zoom-in", "-moz-zoom-in"); + } + + if should_prefix("-moz-zoom-out", self.env, false) { + replace_ident(&mut moz_value, "zoom-out", "-moz-zoom-out"); + } + + if should_prefix("-moz-grab", self.env, false) { + replace_ident(&mut moz_value, "grab", "-moz-grab"); + } + + if should_prefix("-moz-grabbing", self.env, false) { + replace_ident(&mut moz_value, "grabbing", "-moz-grabbing"); + } } } @@ -1600,12 +1623,17 @@ impl VisitMut for Prefixer { if self.rule_prefix == Some(Prefix::Webkit) || self.rule_prefix.is_none() { let mut old_spec_webkit_value = webkit_value.clone(); - replace_ident(&mut old_spec_webkit_value, "flex", "-webkit-box"); - replace_ident( - &mut old_spec_webkit_value, - "inline-flex", - "-webkit-inline-box", - ); + if should_prefix("-webkit-box", self.env, false) { + replace_ident(&mut old_spec_webkit_value, "flex", "-webkit-box"); + } + + if should_prefix("-webkit-inline-box", self.env, false) { + replace_ident( + &mut old_spec_webkit_value, + "inline-flex", + "-webkit-inline-box", + ); + } if n.value != old_spec_webkit_value { self.added_declarations.push(Declaration { @@ -1615,21 +1643,34 @@ impl VisitMut for Prefixer { important: n.important.clone(), }); } - } - if self.rule_prefix == Some(Prefix::Webkit) || self.rule_prefix.is_none() { - replace_ident(&mut webkit_value, "flex", "-webkit-flex"); - replace_ident(&mut webkit_value, "inline-flex", "-webkit-inline-flex"); + if should_prefix("-webkit-flex:display", self.env, false) { + replace_ident(&mut webkit_value, "flex", "-webkit-flex"); + } + + if should_prefix("-webkit-inline-flex", self.env, false) { + replace_ident(&mut webkit_value, "inline-flex", "-webkit-inline-flex"); + } } if self.rule_prefix == Some(Prefix::Moz) || self.rule_prefix.is_none() { - replace_ident(&mut moz_value, "flex", "-moz-box"); - replace_ident(&mut moz_value, "inline-flex", "-moz-inline-box"); + if should_prefix("-moz-box", self.env, false) { + replace_ident(&mut moz_value, "flex", "-moz-box"); + } + + if should_prefix("-moz-inline-box", self.env, false) { + replace_ident(&mut moz_value, "inline-flex", "-moz-inline-box"); + } } if self.rule_prefix == Some(Prefix::Ms) || self.rule_prefix.is_none() { - replace_ident(&mut ms_value, "flex", "-ms-flexbox"); - replace_ident(&mut ms_value, "inline-flex", "-ms-inline-flexbox"); + if should_prefix("-ms-flexbox", self.env, false) { + replace_ident(&mut ms_value, "flex", "-ms-flexbox"); + } + + if should_prefix("-ms-inline-flexbox", self.env, false) { + replace_ident(&mut ms_value, "inline-flex", "-ms-inline-flexbox"); + } } } @@ -1661,7 +1702,7 @@ impl VisitMut for Prefixer { add_declaration!( Prefix::Webkit, "-webkit-box-flex", - Some(vec![spec_2009_value.clone()]) + Some(Box::new(|| { vec![spec_2009_value.clone()] })) ); } else { add_declaration!(Prefix::Webkit, "-webkit-box-flex", None); @@ -1673,34 +1714,41 @@ impl VisitMut for Prefixer { add_declaration!( Prefix::Moz, "-moz-box-flex", - Some(vec![spec_2009_value.clone()]) + Some(Box::new(|| { vec![spec_2009_value.clone()] })) ); } else { add_declaration!(Prefix::Webkit, "-moz-box-flex", None); } if n.value.len() == 3 { - let mut value = ms_value.clone(); + add_declaration!( + Prefix::Ms, + "-ms-flex", + Some(Box::new(|| { + let mut value = ms_value.clone(); - if let Some(ComponentValue::Integer(Integer { value: 0, span, .. })) = - value.get(2) - { - value[2] = ComponentValue::Dimension(Dimension::Length(Length { - span: *span, - value: Number { - span: DUMMY_SP, - value: 0.0, - raw: None, - }, - unit: Ident { - span: DUMMY_SP, - value: "px".into(), - raw: None, - }, - })); - } + if let Some(ComponentValue::Integer(Integer { + value: 0, span, .. + })) = value.get(2) + { + value[2] = ComponentValue::Dimension(Dimension::Length(Length { + span: *span, + value: Number { + span: DUMMY_SP, + value: 0.0, + raw: None, + }, + unit: Ident { + span: DUMMY_SP, + value: "px".into(), + raw: None, + }, + })); + } - add_declaration!(Prefix::Ms, "-ms-flex", Some(value)); + value + })) + ); } else { add_declaration!(Prefix::Ms, "-ms-flex", None); } @@ -1752,12 +1800,12 @@ impl VisitMut for Prefixer { add_declaration!( Prefix::Webkit, "-webkit-box-orient", - Some(vec![str_to_ident!(orient)]) + Some(Box::new(|| { vec![str_to_ident!(orient)] })) ); add_declaration!( Prefix::Webkit, "-webkit-box-direction", - Some(vec![str_to_ident!(direction)]) + Some(Box::new(|| { vec![str_to_ident!(direction)] })) ); } @@ -1767,12 +1815,12 @@ impl VisitMut for Prefixer { add_declaration!( Prefix::Moz, "-moz-box-orient", - Some(vec![str_to_ident!(orient)]) + Some(Box::new(|| { vec![str_to_ident!(orient)] })) ); add_declaration!( Prefix::Webkit, "-moz-box-direction", - Some(vec![str_to_ident!(direction)]) + Some(Box::new(|| { vec![str_to_ident!(direction)] })) ); } @@ -1833,12 +1881,12 @@ impl VisitMut for Prefixer { add_declaration!( Prefix::Webkit, "-webkit-box-orient", - Some(vec![str_to_ident!(orient)]) + Some(Box::new(|| { vec![str_to_ident!(orient)] })) ); add_declaration!( Prefix::Webkit, "-webkit-box-direction", - Some(vec![str_to_ident!(direction)]) + Some(Box::new(|| { vec![str_to_ident!(direction)] })) ); } @@ -1848,12 +1896,12 @@ impl VisitMut for Prefixer { add_declaration!( Prefix::Moz, "-moz-box-orient", - Some(vec![str_to_ident!(orient)]) + Some(Box::new(|| { vec![str_to_ident!(orient)] })) ); add_declaration!( Prefix::Moz, "-moz-box-direction", - Some(vec![str_to_ident!(direction)]) + Some(Box::new(|| { vec![str_to_ident!(direction)] })) ); } @@ -1870,46 +1918,58 @@ impl VisitMut for Prefixer { _ => true, }; - if need_old_spec - && (self.rule_prefix == Some(Prefix::Webkit) || self.rule_prefix.is_none()) - { - let mut old_spec_webkit_new_value = webkit_value.clone(); - - replace_ident(&mut old_spec_webkit_new_value, "flex-start", "start"); - replace_ident(&mut old_spec_webkit_new_value, "flex-end", "end"); - replace_ident(&mut old_spec_webkit_new_value, "space-between", "justify"); - + if need_old_spec { add_declaration!( Prefix::Webkit, "-webkit-box-pack", - Some(old_spec_webkit_new_value) + Some(Box::new(|| { + let mut old_spec_webkit_new_value = webkit_value.clone(); + + replace_ident(&mut old_spec_webkit_new_value, "flex-start", "start"); + replace_ident(&mut old_spec_webkit_new_value, "flex-end", "end"); + replace_ident( + &mut old_spec_webkit_new_value, + "space-between", + "justify", + ); + + old_spec_webkit_new_value + })) ); } add_declaration!(Prefix::Webkit, "-webkit-justify-content", None); - if need_old_spec - && (self.rule_prefix == Some(Prefix::Moz) || self.rule_prefix.is_none()) - { - let mut old_spec_moz_value = moz_value.clone(); + if need_old_spec { + add_declaration!( + Prefix::Moz, + "-moz-box-pack", + Some(Box::new(|| { + let mut old_spec_moz_value = moz_value.clone(); - replace_ident(&mut old_spec_moz_value, "flex-start", "start"); - replace_ident(&mut old_spec_moz_value, "flex-end", "end"); - replace_ident(&mut old_spec_moz_value, "space-between", "justify"); + replace_ident(&mut old_spec_moz_value, "flex-start", "start"); + replace_ident(&mut old_spec_moz_value, "flex-end", "end"); + replace_ident(&mut old_spec_moz_value, "space-between", "justify"); - add_declaration!(Prefix::Moz, "-moz-box-pack", Some(old_spec_moz_value)); + old_spec_moz_value + })) + ); } - if self.rule_prefix == Some(Prefix::Ms) || self.rule_prefix.is_none() { - let mut old_spec_ms_value = ms_value.clone(); + add_declaration!( + Prefix::Ms, + "-ms-flex-pack", + Some(Box::new(|| { + let mut old_spec_ms_value = ms_value.clone(); - replace_ident(&mut old_spec_ms_value, "flex-start", "start"); - replace_ident(&mut old_spec_ms_value, "flex-end", "end"); - replace_ident(&mut old_spec_ms_value, "space-between", "justify"); - replace_ident(&mut old_spec_ms_value, "space-around", "distribute"); + replace_ident(&mut old_spec_ms_value, "flex-start", "start"); + replace_ident(&mut old_spec_ms_value, "flex-end", "end"); + replace_ident(&mut old_spec_ms_value, "space-between", "justify"); + replace_ident(&mut old_spec_ms_value, "space-around", "distribute"); - add_declaration!(Prefix::Ms, "-ms-flex-pack", Some(old_spec_ms_value)); - } + old_spec_ms_value + })) + ); } "order" => { @@ -1923,7 +1983,9 @@ impl VisitMut for Prefixer { add_declaration!( Prefix::Webkit, "-webkit-box-ordinal-group", - Some(vec![str_to_ident!(old_spec_num.to_string())]) + Some(Box::new(|| { + vec![str_to_ident!(old_spec_num.to_string())] + })) ); } _ => { @@ -1938,7 +2000,9 @@ impl VisitMut for Prefixer { add_declaration!( Prefix::Moz, "-moz-box-ordinal-group", - Some(vec![str_to_ident!(old_spec_num.to_string())]) + Some(Box::new(|| { + vec![str_to_ident!(old_spec_num.to_string())] + })) ); } _ => { @@ -1950,90 +2014,112 @@ impl VisitMut for Prefixer { } "align-items" => { - if self.rule_prefix == Some(Prefix::Webkit) || self.rule_prefix.is_none() { - let mut old_spec_webkit_new_value = webkit_value.clone(); + add_declaration!( + Prefix::Webkit, + "-webkit-box-align", + Some(Box::new(|| { + let mut old_spec_webkit_new_value = webkit_value.clone(); - replace_ident(&mut old_spec_webkit_new_value, "flex-end", "end"); - replace_ident(&mut old_spec_webkit_new_value, "flex-start", "start"); - - add_declaration!( - Prefix::Webkit, - "-webkit-box-align", - Some(old_spec_webkit_new_value) - ); - } + replace_ident(&mut old_spec_webkit_new_value, "flex-end", "end"); + replace_ident(&mut old_spec_webkit_new_value, "flex-start", "start"); + old_spec_webkit_new_value + })) + ); add_declaration!(Prefix::Webkit, "-webkit-align-items", None); + add_declaration!( + Prefix::Moz, + "-moz-box-align", + Some(Box::new(|| { + let mut old_spec_moz_value = moz_value.clone(); - if self.rule_prefix == Some(Prefix::Moz) || self.rule_prefix.is_none() { - let mut old_spec_moz_value = moz_value.clone(); + replace_ident(&mut old_spec_moz_value, "flex-end", "end"); + replace_ident(&mut old_spec_moz_value, "flex-start", "start"); - replace_ident(&mut old_spec_moz_value, "flex-end", "end"); - replace_ident(&mut old_spec_moz_value, "flex-start", "start"); + old_spec_moz_value + })) + ); + add_declaration!( + Prefix::Ms, + "-ms-flex-align", + Some(Box::new(|| { + let mut old_spec_ms_value = ms_value.clone(); - add_declaration!(Prefix::Moz, "-moz-box-align", Some(old_spec_moz_value)); - } + replace_ident(&mut old_spec_ms_value, "flex-end", "end"); + replace_ident(&mut old_spec_ms_value, "flex-start", "start"); - if self.rule_prefix == Some(Prefix::Ms) || self.rule_prefix.is_none() { - let mut old_spec_ms_value = ms_value.clone(); - - replace_ident(&mut old_spec_ms_value, "flex-end", "end"); - replace_ident(&mut old_spec_ms_value, "flex-start", "start"); - - add_declaration!(Prefix::Ms, "-ms-flex-align", Some(old_spec_ms_value)); - } + old_spec_ms_value + })) + ); } "align-self" => { add_declaration!(Prefix::Webkit, "-webkit-align-self", None); + add_declaration!( + Prefix::Ms, + "-ms-flex-item-align", + Some(Box::new(|| { + let mut spec_2012_ms_value = ms_value.clone(); - if self.rule_prefix == Some(Prefix::Ms) || self.rule_prefix.is_none() { - let mut spec_2012_ms_value = ms_value.clone(); + replace_ident(&mut spec_2012_ms_value, "flex-end", "end"); + replace_ident(&mut spec_2012_ms_value, "flex-start", "start"); - replace_ident(&mut spec_2012_ms_value, "flex-end", "end"); - replace_ident(&mut spec_2012_ms_value, "flex-start", "start"); - - add_declaration!(Prefix::Ms, "-ms-flex-item-align", Some(spec_2012_ms_value)); - } + spec_2012_ms_value + })) + ); } "align-content" => { add_declaration!(Prefix::Webkit, "-webkit-align-content", None); + add_declaration!( + Prefix::Ms, + "-ms-flex-line-pack", + Some(Box::new(|| { + let mut spec_2012_ms_value = ms_value.clone(); - if self.rule_prefix == Some(Prefix::Ms) || self.rule_prefix.is_none() { - let mut spec_2012_ms_value = ms_value.clone(); + replace_ident(&mut spec_2012_ms_value, "flex-end", "end"); + replace_ident(&mut spec_2012_ms_value, "flex-start", "start"); + replace_ident(&mut spec_2012_ms_value, "space-between", "justify"); + replace_ident(&mut spec_2012_ms_value, "space-around", "distribute"); - replace_ident(&mut spec_2012_ms_value, "flex-end", "end"); - replace_ident(&mut spec_2012_ms_value, "flex-start", "start"); - replace_ident(&mut spec_2012_ms_value, "space-between", "justify"); - replace_ident(&mut spec_2012_ms_value, "space-around", "distribute"); - - add_declaration!(Prefix::Ms, "-ms-flex-line-pack", Some(spec_2012_ms_value)); - } + spec_2012_ms_value + })) + ); } "image-rendering" => { if self.rule_prefix == Some(Prefix::Webkit) || self.rule_prefix.is_none() { - // Fallback to nearest-neighbor algorithm - replace_ident(&mut webkit_value, "pixelated", "-webkit-optimize-contrast"); - replace_ident( - &mut webkit_value, - "crisp-edges", - "-webkit-optimize-contrast", - ); + if should_prefix("-webkit-optimize-contrast:fallback", self.env, false) { + // Fallback to nearest-neighbor algorithm + replace_ident(&mut webkit_value, "pixelated", "-webkit-optimize-contrast"); + } + + if should_prefix("-webkit-optimize-contrast", self.env, false) { + replace_ident( + &mut webkit_value, + "crisp-edges", + "-webkit-optimize-contrast", + ); + } } - if self.rule_prefix == Some(Prefix::Moz) || self.rule_prefix.is_none() { + if should_prefix("-moz-crisp-edges", self.env, false) + && (self.rule_prefix == Some(Prefix::Moz) || self.rule_prefix.is_none()) + { // Fallback to nearest-neighbor algorithm replace_ident(&mut moz_value, "pixelated", "-moz-crisp-edges"); replace_ident(&mut moz_value, "crisp-edges", "-moz-crisp-edges"); } - if self.rule_prefix == Some(Prefix::O) || self.rule_prefix.is_none() { + if should_prefix("-o-pixelated", self.env, false) + && (self.rule_prefix == Some(Prefix::O) || self.rule_prefix.is_none()) + { replace_ident(&mut o_value, "pixelated", "-o-pixelated"); } - if self.rule_prefix == Some(Prefix::Ms) || self.rule_prefix.is_none() { + if should_prefix("nearest-neighbor", self.env, false) + && (self.rule_prefix == Some(Prefix::Ms) || self.rule_prefix.is_none()) + { let mut old_spec_ms_value = ms_value.clone(); replace_ident(&mut old_spec_ms_value, "pixelated", "nearest-neighbor"); @@ -2042,7 +2128,7 @@ impl VisitMut for Prefixer { add_declaration!( Prefix::Ms, "-ms-interpolation-mode", - Some(old_spec_ms_value) + Some(Box::new(|| { old_spec_ms_value.clone() })) ); } } @@ -2183,7 +2269,9 @@ impl VisitMut for Prefixer { } "position" if n.value.len() == 1 => { - if self.rule_prefix == Some(Prefix::Webkit) || self.rule_prefix.is_none() { + if should_prefix("-webkit-sticky", self.env, false) + && (self.rule_prefix == Some(Prefix::Webkit) || self.rule_prefix.is_none()) + { replace_ident(&mut webkit_value, "sticky", "-webkit-sticky"); } } @@ -2198,7 +2286,7 @@ impl VisitMut for Prefixer { add_declaration!( Prefix::Ms, "-ms-user-select", - Some(vec![str_to_ident!("element")]) + Some(Box::new(|| { vec![str_to_ident!("element")] })) ); } "all" => {} @@ -2210,6 +2298,9 @@ impl VisitMut for Prefixer { } "transform" => { + add_declaration!(Prefix::Webkit, "-webkit-transform", None); + add_declaration!(Prefix::Moz, "-moz-transform", None); + let has_3d_function = n.value.iter().any(|n| match n { ComponentValue::Function(Function { name, .. }) if matches!( @@ -2231,9 +2322,6 @@ impl VisitMut for Prefixer { _ => false, }); - add_declaration!(Prefix::Webkit, "-webkit-transform", None); - add_declaration!(Prefix::Moz, "-moz-transform", None); - if !has_3d_function { if !self.in_keyframe_block { add_declaration!(Prefix::Ms, "-ms-transform", None); @@ -2322,7 +2410,7 @@ impl VisitMut for Prefixer { add_declaration!( Prefix::Webkit, "-webkit-text-decoration-skip", - Some(vec![str_to_ident!("ink")]) + Some(Box::new(|| { vec![str_to_ident!("ink")] })) ); } _ => { @@ -2350,19 +2438,28 @@ impl VisitMut for Prefixer { // TODO https://github.com/postcss/autoprefixer/blob/main/lib/transition.js "transition" => { if self.rule_prefix == Some(Prefix::Webkit) || self.rule_prefix.is_none() { - replace_ident(&mut webkit_value, "transform", "-webkit-transform"); - replace_ident(&mut webkit_value, "filter", "-webkit-filter"); + if should_prefix("-webkit-transform", self.env, false) { + replace_ident(&mut webkit_value, "transform", "-webkit-transform"); + } + + if should_prefix("-webkit-filter", self.env, false) { + replace_ident(&mut webkit_value, "filter", "-webkit-filter"); + } } add_declaration!(Prefix::Webkit, "-webkit-transition", None); - if self.rule_prefix == Some(Prefix::Moz) || self.rule_prefix.is_none() { + if should_prefix("-moz-transform", self.env, false) + && (self.rule_prefix == Some(Prefix::Moz) || self.rule_prefix.is_none()) + { replace_ident(&mut moz_value, "transform", "-moz-transform"); } add_declaration!(Prefix::Moz, "-moz-transition", None); - if self.rule_prefix == Some(Prefix::O) || self.rule_prefix.is_none() { + if should_prefix("-o-transform", self.env, false) + && (self.rule_prefix == Some(Prefix::O) || self.rule_prefix.is_none()) + { replace_ident(&mut o_value, "transform", "-o-transform"); } @@ -2370,15 +2467,27 @@ impl VisitMut for Prefixer { } "transition-property" => { - if self.rule_prefix == Some(Prefix::Webkit) || self.rule_prefix.is_none() { + if should_prefix("-webkit-transform", self.env, false) + && (self.rule_prefix == Some(Prefix::Webkit) || self.rule_prefix.is_none()) + { replace_ident(&mut webkit_value, "transform", "-webkit-transform"); } - if self.rule_prefix == Some(Prefix::Moz) || self.rule_prefix.is_none() { + if should_prefix("-webkit-filter", self.env, false) + && (self.rule_prefix == Some(Prefix::Webkit) || self.rule_prefix.is_none()) + { + replace_ident(&mut webkit_value, "filter", "-webkit-filter"); + } + + if should_prefix("-moz-transform", self.env, false) + && (self.rule_prefix == Some(Prefix::Moz) || self.rule_prefix.is_none()) + { replace_ident(&mut moz_value, "transform", "-moz-transform"); } - if self.rule_prefix == Some(Prefix::O) || self.rule_prefix.is_none() { + if should_prefix("-o-transform", self.env, false) + && (self.rule_prefix == Some(Prefix::O) || self.rule_prefix.is_none()) + { replace_ident(&mut o_value, "transform", "-o-transform"); } @@ -2433,14 +2542,14 @@ impl VisitMut for Prefixer { add_declaration!( Prefix::Ms, "-ms-writing-mode", - Some(vec![str_to_ident!("tb-lr")]) + Some(Box::new(|| { vec![str_to_ident!("tb-lr")] })) ); } Some("rtl") => { add_declaration!( Prefix::Ms, "-ms-writing-mode", - Some(vec![str_to_ident!("bt-lr")]) + Some(Box::new(|| { vec![str_to_ident!("bt-lr")] })) ); } _ => {} @@ -2455,14 +2564,14 @@ impl VisitMut for Prefixer { add_declaration!( Prefix::Ms, "-ms-writing-mode", - Some(vec![str_to_ident!("tb-rl")]) + Some(Box::new(|| { vec![str_to_ident!("tb-rl")] })) ); } Some("rtl") => { add_declaration!( Prefix::Ms, "-ms-writing-mode", - Some(vec![str_to_ident!("bt-rl")]) + Some(Box::new(|| { vec![str_to_ident!("bt-rl")] })) ); } _ => {} @@ -2477,14 +2586,14 @@ impl VisitMut for Prefixer { add_declaration!( Prefix::Ms, "-ms-writing-mode", - Some(vec![str_to_ident!("lr-tb")]) + Some(Box::new(|| { vec![str_to_ident!("lr-tb")] })) ); } Some("rtl") => { add_declaration!( Prefix::Ms, "-ms-writing-mode", - Some(vec![str_to_ident!("rl-tb")]) + Some(Box::new(|| { vec![str_to_ident!("rl-tb")] })) ); } _ => {} @@ -2532,43 +2641,90 @@ impl VisitMut for Prefixer { ); if self.rule_prefix == Some(Prefix::Webkit) || self.rule_prefix.is_none() { - replace_ident(&mut webkit_value, "fit-content", "-webkit-fit-content"); - replace_ident(&mut webkit_value, "max-content", "-webkit-max-content"); - replace_ident(&mut webkit_value, "min-content", "-webkit-min-content"); - replace_ident( - &mut webkit_value, - "fill-available", - "-webkit-fill-available", - ); - replace_ident(&mut webkit_value, "fill", "-webkit-fill-available"); - replace_ident(&mut webkit_value, "stretch", "-webkit-fill-available"); + if should_prefix("-webkit-fit-content", self.env, false) { + replace_ident(&mut webkit_value, "fit-content", "-webkit-fit-content"); + } + + if should_prefix("-webkit-max-content", self.env, false) { + replace_ident(&mut webkit_value, "max-content", "-webkit-max-content"); + } + + if should_prefix("-webkit-min-content", self.env, false) { + replace_ident(&mut webkit_value, "min-content", "-webkit-min-content"); + } + + if should_prefix("-webkit-fill-available", self.env, false) { + replace_ident( + &mut webkit_value, + "fill-available", + "-webkit-fill-available", + ); + replace_ident(&mut webkit_value, "fill", "-webkit-fill-available"); + replace_ident(&mut webkit_value, "stretch", "-webkit-fill-available"); + } } if !is_grid_property && (self.rule_prefix == Some(Prefix::Moz) || self.rule_prefix.is_none()) { - replace_ident(&mut moz_value, "fit-content", "-moz-fit-content"); - replace_ident(&mut moz_value, "max-content", "-moz-max-content"); - replace_ident(&mut moz_value, "min-content", "-moz-min-content"); - replace_ident(&mut moz_value, "fill-available", "-moz-available"); - replace_ident(&mut moz_value, "fill", "-moz-available"); - replace_ident(&mut moz_value, "stretch", "-moz-available"); + if should_prefix("-moz-fit-content", self.env, false) { + replace_ident(&mut moz_value, "fit-content", "-moz-fit-content"); + } + + if should_prefix("-moz-max-content", self.env, false) { + replace_ident(&mut moz_value, "max-content", "-moz-max-content"); + } + + if should_prefix("-moz-min-content", self.env, false) { + replace_ident(&mut moz_value, "min-content", "-moz-min-content"); + } + + if should_prefix("-moz-available", self.env, false) { + replace_ident(&mut moz_value, "fill-available", "-moz-available"); + replace_ident(&mut moz_value, "fill", "-moz-available"); + replace_ident(&mut moz_value, "stretch", "-moz-available"); + } } } "touch-action" => { - if self.rule_prefix == Some(Prefix::Ms) || self.rule_prefix.is_none() { - let mut new_ms_value = ms_value.clone(); + add_declaration!( + Prefix::Ms, + "-ms-touch-action", + Some(Box::new(|| { + let mut new_ms_value = ms_value.clone(); - replace_ident(&mut new_ms_value, "pan-x", "-ms-pan-x"); - replace_ident(&mut new_ms_value, "pan-y", "-ms-pan-y"); - replace_ident(&mut new_ms_value, "double-tap-zoom", "-ms-double-tap-zoom"); - replace_ident(&mut new_ms_value, "manipulation", "-ms-manipulation"); - replace_ident(&mut new_ms_value, "none", "-ms-none"); - replace_ident(&mut new_ms_value, "pinch-zoom", "-ms-pinch-zoom"); + if should_prefix("-ms-pan-x", self.env, false) { + replace_ident(&mut new_ms_value, "pan-x", "-ms-pan-x"); + } - add_declaration!(Prefix::Ms, "-ms-touch-action", Some(new_ms_value)); - } + if should_prefix("-ms-pan-y", self.env, false) { + replace_ident(&mut new_ms_value, "pan-y", "-ms-pan-y"); + } + + if should_prefix("-ms-double-tap-zoom", self.env, false) { + replace_ident( + &mut new_ms_value, + "double-tap-zoom", + "-ms-double-tap-zoom", + ); + } + + if should_prefix("-ms-manipulation", self.env, false) { + replace_ident(&mut new_ms_value, "manipulation", "-ms-manipulation"); + } + + if should_prefix("-ms-none", self.env, false) { + replace_ident(&mut new_ms_value, "none", "-ms-none"); + } + + if should_prefix("-ms-pinch-zoom", self.env, false) { + replace_ident(&mut new_ms_value, "pinch-zoom", "-ms-pinch-zoom"); + } + + new_ms_value + })) + ); add_declaration!(Prefix::Ms, "-ms-touch-action", None); } @@ -2579,17 +2735,33 @@ impl VisitMut for Prefixer { "unicode-bidi" => { if self.rule_prefix == Some(Prefix::Webkit) || self.rule_prefix.is_none() { - replace_ident(&mut moz_value, "isolate", "-moz-isolate"); - replace_ident(&mut moz_value, "isolate-override", "-moz-isolate-override"); - replace_ident(&mut moz_value, "plaintext", "-moz-plaintext"); + if should_prefix("-moz-isolate", self.env, false) { + replace_ident(&mut moz_value, "isolate", "-moz-isolate"); + } - replace_ident(&mut webkit_value, "isolate", "-webkit-isolate"); - replace_ident( - &mut webkit_value, - "isolate-override", - "-webpack-isolate-override", - ); - replace_ident(&mut webkit_value, "plaintext", "-webpack-plaintext"); + if should_prefix("-moz-isolate-override", self.env, false) { + replace_ident(&mut moz_value, "isolate-override", "-moz-isolate-override"); + } + + if should_prefix("-moz-plaintext", self.env, false) { + replace_ident(&mut moz_value, "plaintext", "-moz-plaintext"); + } + + if should_prefix("-webkit-isolate", self.env, false) { + replace_ident(&mut webkit_value, "isolate", "-webkit-isolate"); + } + + if should_prefix("-webpack-isolate-override", self.env, false) { + replace_ident( + &mut webkit_value, + "isolate-override", + "-webpack-isolate-override", + ); + } + + if should_prefix("-webpack-plaintext", self.env, false) { + replace_ident(&mut webkit_value, "plaintext", "-webpack-plaintext"); + } } } @@ -2736,14 +2908,14 @@ impl VisitMut for Prefixer { add_declaration!( Prefix::Ms, "-ms-scroll-chaining", - Some(vec![str_to_ident!("chained")]) + Some(Box::new(|| { vec![str_to_ident!("chained")] })) ); } "none" | "contain" => { add_declaration!( Prefix::Ms, "-ms-scroll-chaining", - Some(vec![str_to_ident!("none")]) + Some(Box::new(|| { vec![str_to_ident!("none")] })) ); } _ => { @@ -2785,7 +2957,7 @@ impl VisitMut for Prefixer { add_declaration!( Prefix::Webkit, "-webkit-column-break-before", - Some(vec![str_to_ident!("always")]) + Some(Box::new(|| { vec![str_to_ident!("always")] })) ); } _ => {} @@ -2803,7 +2975,7 @@ impl VisitMut for Prefixer { add_declaration!( Prefix::Webkit, "-webkit-column-break-after", - Some(vec![str_to_ident!("always")]) + Some(Box::new(|| { vec![str_to_ident!("always")] })) ); } _ => {} diff --git a/crates/swc_css_prefixer/tests/fixture/basic/output.defaults-not-ie-11.css b/crates/swc_css_prefixer/tests/fixture/basic/output.defaults-not-ie-11.css index b2495518421..c199b990122 100644 --- a/crates/swc_css_prefixer/tests/fixture/basic/output.defaults-not-ie-11.css +++ b/crates/swc_css_prefixer/tests/fixture/basic/output.defaults-not-ie-11.css @@ -3,10 +3,6 @@ body { } :hover { color: red; - display: -webkit-box; - display: -webkit-flex; - display: -moz-box; - display: -ms-flexbox; display: flex; animation: foo 1s ease-out; } diff --git a/crates/swc_css_prefixer/tests/fixture/cursor/output.defaults-not-ie-11.css b/crates/swc_css_prefixer/tests/fixture/cursor/output.defaults-not-ie-11.css index 107983b0271..a957b94a10f 100644 --- a/crates/swc_css_prefixer/tests/fixture/cursor/output.defaults-not-ie-11.css +++ b/crates/swc_css_prefixer/tests/fixture/cursor/output.defaults-not-ie-11.css @@ -2,13 +2,9 @@ cursor: none; } .class { - cursor: -webkit-grab; - cursor: -moz-grab; cursor: grab; } .class { - cursor: url(cursor_1.png) 4 12, -webkit-grab; - cursor: url(cursor_1.png) 4 12, -moz-grab; cursor: url(cursor_1.png) 4 12, grab; } .class { @@ -16,32 +12,22 @@ cursor: image-set(url(foo.jpg) 2x), pointer; } .class { - cursor: -webkit-image-set(url(foo.jpg) 2x), -webkit-grab; - cursor: image-set(url(foo.jpg) 2x), -moz-grab; + cursor: -webkit-image-set(url(foo.jpg) 2x), grab; cursor: image-set(url(foo.jpg) 2x), grab; } .class { - cursor: url(cursor_1.svg) 4 5, url(cursor_2.svg), -webkit-image-set(url(foo.jpg) 2x) 5 5, -webkit-grab; - cursor: url(cursor_1.svg) 4 5, url(cursor_2.svg), image-set(url(foo.jpg) 2x) 5 5, -moz-grab; + cursor: url(cursor_1.svg) 4 5, url(cursor_2.svg), -webkit-image-set(url(foo.jpg) 2x) 5 5, grab; cursor: url(cursor_1.svg) 4 5, url(cursor_2.svg), image-set(url(foo.jpg) 2x) 5 5, grab; } .class { - cursor: -webkit-zoom-in; - cursor: -moz-zoom-in; cursor: zoom-in; } .class { - cursor: -webkit-zoom-out; - cursor: -moz-zoom-out; cursor: zoom-out; } .class { - cursor: -webkit-grabbing; - cursor: -moz-grabbing; cursor: grabbing; } .class { - cursor: url(cursor_1.svg) 4 5, url(cursor_2.svg), IMAGE_SET(url(foo.jpg) 2x) 5 5, -webkit-grab; - cursor: url(cursor_1.svg) 4 5, url(cursor_2.svg), IMAGE_SET(url(foo.jpg) 2x) 5 5, -moz-grab; cursor: url(cursor_1.svg) 4 5, url(cursor_2.svg), IMAGE_SET(url(foo.jpg) 2x) 5 5, GRAB; } diff --git a/crates/swc_css_prefixer/tests/fixture/display/output.defaults-not-ie-11.css b/crates/swc_css_prefixer/tests/fixture/display/output.defaults-not-ie-11.css index c88b9ce5570..fe20e406a79 100644 --- a/crates/swc_css_prefixer/tests/fixture/display/output.defaults-not-ie-11.css +++ b/crates/swc_css_prefixer/tests/fixture/display/output.defaults-not-ie-11.css @@ -2,35 +2,17 @@ display: block; } .class { - display: -webkit-box !important; - display: -webkit-flex !important; - display: -moz-box !important; - display: -ms-flexbox !important; display: flex !important; } .class { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -moz-inline-box; - display: -ms-inline-flexbox; display: inline-flex; } .class { - display: -webkit-box; - display: -webkit-flex; - display: -moz-box; - display: -ms-flexbox; display: flex; } :-webkit-full-screen a { - display: -webkit-box; - display: -webkit-flex; display: flex; } :fullscreen a { - display: -webkit-box; - display: -webkit-flex; - display: -moz-box; - display: -ms-flexbox; display: flex; } diff --git a/crates/swc_css_prefixer/tests/fixture/filter/output.defaults-not-ie-11.css b/crates/swc_css_prefixer/tests/fixture/filter/output.defaults-not-ie-11.css index ffb2d65da1d..26ec654af3b 100644 --- a/crates/swc_css_prefixer/tests/fixture/filter/output.defaults-not-ie-11.css +++ b/crates/swc_css_prefixer/tests/fixture/filter/output.defaults-not-ie-11.css @@ -4,7 +4,6 @@ } a { filter: blur(10px); - transition: -webkit-filter 2s; transition: filter 2s; } div { diff --git a/crates/swc_css_prefixer/tests/fixture/flex/output.defaults-not-ie-11.css b/crates/swc_css_prefixer/tests/fixture/flex/output.defaults-not-ie-11.css index e1ea4873678..e8a3276a3f4 100644 --- a/crates/swc_css_prefixer/tests/fixture/flex/output.defaults-not-ie-11.css +++ b/crates/swc_css_prefixer/tests/fixture/flex/output.defaults-not-ie-11.css @@ -1,9 +1,5 @@ a { -js-display: flex; - display: -webkit-box; - display: -webkit-flex; - display: -moz-box; - display: -ms-flexbox; display: flex; flex-flow: row; order: 0; @@ -11,20 +7,12 @@ a { transition: flex 200ms; } .inline { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -moz-inline-box; - display: -ms-inline-flexbox; display: inline-flex; align-self: auto; align-content: stretch; flex: auto; } .a { - display: -webkit-box; - display: -webkit-flex; - display: -moz-box; - display: -ms-flexbox; display: flex; flex-direction: row; justify-content: flex-start; @@ -35,10 +23,6 @@ a { flex: none; } .b { - display: -webkit-box; - display: -webkit-flex; - display: -moz-box; - display: -ms-flexbox; display: flex; flex-direction: row-reverse; justify-content: flex-end; @@ -49,10 +33,6 @@ a { flex-shrink: 1; } .c { - display: -webkit-box; - display: -webkit-flex; - display: -moz-box; - display: -ms-flexbox; display: flex; flex-direction: column; justify-content: center; @@ -63,10 +43,6 @@ a { flex-basis: auto; } .e { - display: -webkit-box; - display: -webkit-flex; - display: -moz-box; - display: -ms-flexbox; display: flex; flex-direction: column-reverse; justify-content: space-between; @@ -75,10 +51,6 @@ a { align-self: baseline; } .f { - display: -webkit-box; - display: -webkit-flex; - display: -moz-box; - display: -ms-flexbox; display: flex; justify-content: space-around; align-items: stretch; @@ -86,10 +58,6 @@ a { align-self: stretch; } .g { - display: -webkit-box; - display: -webkit-flex; - display: -moz-box; - display: -ms-flexbox; display: flex; flex: calc(1em + 1px) 0 0; } @@ -103,12 +71,8 @@ a { order: inherit; flex-direction: inherit; } -@supports ((display: flex) or (display: -webkit-box) or (display: -webkit-flex) or (display: -moz-box) or (display: -ms-flexbox)) { +@supports (display: flex) { .foo { - display: -webkit-box; - display: -webkit-flex; - display: -moz-box; - display: -ms-flexbox; display: flex; } } diff --git a/crates/swc_css_prefixer/tests/fixture/image-rendering/output.defaults-not-ie-11.css b/crates/swc_css_prefixer/tests/fixture/image-rendering/output.defaults-not-ie-11.css index 888964f4ed8..1a4c5416795 100644 --- a/crates/swc_css_prefixer/tests/fixture/image-rendering/output.defaults-not-ie-11.css +++ b/crates/swc_css_prefixer/tests/fixture/image-rendering/output.defaults-not-ie-11.css @@ -1,22 +1,12 @@ img { - image-rendering: -webkit-optimize-contrast; - image-rendering: -moz-crisp-edges; image-rendering: crisp-edges; } img.other { - image-rendering: -webkit-optimize-contrast; - image-rendering: -moz-crisp-edges; - image-rendering: -o-pixelated; image-rendering: pixelated; } img.already { -ms-interpolation-mode: nearest-neighbor; display: block; - image-rendering: -webkit-optimize-contrast; - image-rendering: -moz-crisp-edges; image-rendering: crisp-edges; - image-rendering: -webkit-optimize-contrast; - image-rendering: -moz-crisp-edges; - image-rendering: -o-pixelated; image-rendering: pixelated; } diff --git a/crates/swc_css_prefixer/tests/fixture/isolate-override/output.defaults-not-ie-11.css b/crates/swc_css_prefixer/tests/fixture/isolate-override/output.defaults-not-ie-11.css index fbdc6954875..498f9d8a7dc 100644 --- a/crates/swc_css_prefixer/tests/fixture/isolate-override/output.defaults-not-ie-11.css +++ b/crates/swc_css_prefixer/tests/fixture/isolate-override/output.defaults-not-ie-11.css @@ -1,18 +1,12 @@ .bible-quote { direction: rtl; - unicode-bidi: -webpack-isolate-override; - unicode-bidi: -moz-isolate-override; unicode-bidi: isolate-override; } .bible-quote { direction: rtl; - unicode-bidi: -webpack-plaintext; - unicode-bidi: -moz-plaintext; unicode-bidi: plaintext; } .bible-quote { direction: rtl; - unicode-bidi: -webkit-isolate; - unicode-bidi: -moz-isolate; unicode-bidi: isolate; } diff --git a/crates/swc_css_prefixer/tests/fixture/keyframes/output.defaults-not-ie-11.css b/crates/swc_css_prefixer/tests/fixture/keyframes/output.defaults-not-ie-11.css index 18099042d4a..6ce2fd6f7b7 100644 --- a/crates/swc_css_prefixer/tests/fixture/keyframes/output.defaults-not-ie-11.css +++ b/crates/swc_css_prefixer/tests/fixture/keyframes/output.defaults-not-ie-11.css @@ -5,10 +5,6 @@ } 50% { top: 0; - display: -webkit-box; - display: -webkit-flex; - display: -moz-box; - display: -ms-flexbox; display: flex; } to { diff --git a/crates/swc_css_prefixer/tests/fixture/prefixed/output.defaults-not-ie-11.css b/crates/swc_css_prefixer/tests/fixture/prefixed/output.defaults-not-ie-11.css index 76169c4f6f4..2bb07185052 100644 --- a/crates/swc_css_prefixer/tests/fixture/prefixed/output.defaults-not-ie-11.css +++ b/crates/swc_css_prefixer/tests/fixture/prefixed/output.defaults-not-ie-11.css @@ -61,10 +61,6 @@ } .class-13 { display: block; - display: -webkit-box; - display: -webkit-flex; - display: -moz-box; - display: -ms-flexbox; display: flex; } .class-14 { @@ -87,10 +83,6 @@ align-content: flex-start; } .class-19 { - display: -webkit-box; - display: -webkit-flex; - display: -moz-box; - display: -ms-flexbox; display: -webkit-box; display: -webkit-flex; display: -moz-box; diff --git a/crates/swc_css_prefixer/tests/fixture/recovery/output.defaults-not-ie-11.css b/crates/swc_css_prefixer/tests/fixture/recovery/output.defaults-not-ie-11.css index 39c4ac24482..e0d1ddc4e2c 100644 --- a/crates/swc_css_prefixer/tests/fixture/recovery/output.defaults-not-ie-11.css +++ b/crates/swc_css_prefixer/tests/fixture/recovery/output.defaults-not-ie-11.css @@ -1,8 +1,4 @@ main { - display: -webkit-box; - display: -webkit-flex; - display: -moz-box; - display: -ms-flexbox; display: flex; flex-direction: __styled-jsx-placeholder; justify-content: space-between; diff --git a/crates/swc_css_prefixer/tests/fixture/supports/output.defaults-not-ie-11.css b/crates/swc_css_prefixer/tests/fixture/supports/output.defaults-not-ie-11.css index 1c017b8ce0b..e7336c7eca9 100644 --- a/crates/swc_css_prefixer/tests/fixture/supports/output.defaults-not-ie-11.css +++ b/crates/swc_css_prefixer/tests/fixture/supports/output.defaults-not-ie-11.css @@ -1,55 +1,35 @@ -@supports ((display: flex) or (display: -webkit-box) or (display: -webkit-flex) or (display: -moz-box) or (display: -ms-flexbox)) { +@supports (display: flex) { div { - display: -webkit-box; - display: -webkit-flex; - display: -moz-box; - display: -ms-flexbox; display: flex; } } -@supports not ((display: flex) or (display: -webkit-box) or (display: -webkit-flex) or (display: -moz-box) or (display: -ms-flexbox)) { +@supports not (display: flex) { a { color: #000; } } -@supports not ( not ((display: flex) or (display: -webkit-box) or (display: -webkit-flex) or (display: -moz-box) or (display: -ms-flexbox))) { +@supports not ( not (display: flex)) { a { color: #000; } } -@supports ((display: flex) or (display: -webkit-box) or (display: -webkit-flex) or (display: -moz-box) or (display: -ms-flexbox)) or ((cursor: grab) or (cursor: -webkit-grab) or (cursor: -moz-grab)) { +@supports (display: flex) or (cursor: grab) { div { - display: -webkit-box; - display: -webkit-flex; - display: -moz-box; - display: -ms-flexbox; display: flex; } } -@supports ((display: flex) or (display: -webkit-box) or (display: -webkit-flex) or (display: -moz-box) or (display: -ms-flexbox)) and ((cursor: grab) or (cursor: -webkit-grab) or (cursor: -moz-grab)) { +@supports (display: flex) and (cursor: grab) { div { - display: -webkit-box; - display: -webkit-flex; - display: -moz-box; - display: -ms-flexbox; display: flex; } } -@supports (((display: flex) or (display: -webkit-box) or (display: -webkit-flex) or (display: -moz-box) or (display: -ms-flexbox)) and ((cursor: grab) or (cursor: -webkit-grab) or (cursor: -moz-grab))) { +@supports ((display: flex) and (cursor: grab)) { div { - display: -webkit-box; - display: -webkit-flex; - display: -moz-box; - display: -ms-flexbox; display: flex; } } -@supports (((display: flex) or (display: -webkit-box) or (display: -webkit-flex) or (display: -moz-box) or (display: -ms-flexbox))) and (((cursor: grab) or (cursor: -webkit-grab) or (cursor: -moz-grab))) { +@supports ((display: flex)) and ((cursor: grab)) { div { - display: -webkit-box; - display: -webkit-flex; - display: -moz-box; - display: -ms-flexbox; display: flex; } } @@ -58,37 +38,25 @@ color: #000; } } -@supports ((cursor: grab) or (cursor: -webkit-grab) or (cursor: -moz-grab)) or (color: black) { +@supports (cursor: grab) or (color: black) { a { color: black; } } -@supports ((display: flex) or (display: -webkit-box) or (display: -webkit-flex) or (display: -moz-box) or (display: -ms-flexbox)) { +@supports (display: flex) { @media screen and (min-width: 900px) { article { - display: -webkit-box; - display: -webkit-flex; - display: -moz-box; - display: -ms-flexbox; display: flex; } } } @supports ((display: flex) or (display: -webkit-box) or (display: -webkit-flex) or (display: -moz-box) or (display: -ms-flexbox)) { div { - display: -webkit-box; - display: -webkit-flex; - display: -moz-box; - display: -ms-flexbox; display: flex; } } -@supports ((display: flex) or (display: -webkit-flex) or (display: -moz-box) or (display: -ms-flexbox)) or (display: -webkit-box) { +@supports (display: flex) or (display: -webkit-box) { div { - display: -webkit-box; - display: -webkit-flex; - display: -moz-box; - display: -ms-flexbox; display: flex; } } diff --git a/crates/swc_css_prefixer/tests/fixture/transform/output.defaults-not-ie-11.css b/crates/swc_css_prefixer/tests/fixture/transform/output.defaults-not-ie-11.css index 2c917da6e0a..cf300743ca3 100644 --- a/crates/swc_css_prefixer/tests/fixture/transform/output.defaults-not-ie-11.css +++ b/crates/swc_css_prefixer/tests/fixture/transform/output.defaults-not-ie-11.css @@ -2,9 +2,6 @@ transform: rotate(30deg); } a { - transition: -webkit-transform 1s; - transition: -moz-transform 1s; - transition: -o-transform 1s; transition: transform 1s; transform: rotateX(45deg); } diff --git a/crates/swc_css_prefixer/tests/fixture/transition/output.css b/crates/swc_css_prefixer/tests/fixture/transition/output.css index 40b6dbc0a41..fb284f3edf1 100644 --- a/crates/swc_css_prefixer/tests/fixture/transition/output.css +++ b/crates/swc_css_prefixer/tests/fixture/transition/output.css @@ -13,9 +13,10 @@ a { transform: rotate(10deg); } div { - -webkit-transition-property: filter; + -webkit-transition-property: -webkit-filter; -moz-transition-timing-function: filter; -o-transition-timing-function: filter; + transition-property: -webkit-filter; transition-property: filter; -webkit-animation-name: rotating; -moz-animation-name: rotating; @@ -23,9 +24,10 @@ div { animation-name: rotating; } .good { - -webkit-transition-property: filter; + -webkit-transition-property: -webkit-filter; -moz-transition-timing-function: filter; -o-transition-timing-function: filter; + transition-property: -webkit-filter; transition-property: filter; -webkit-transition-duration: 1s; -moz-transition-duration: 1s; @@ -33,9 +35,10 @@ div { transition-duration: 1s; } .good2 { - -webkit-transition-property: color, filter; + -webkit-transition-property: color, -webkit-filter; -moz-transition-timing-function: color, filter; -o-transition-timing-function: color, filter; + transition-property: color, -webkit-filter; transition-property: color, filter; -webkit-transition-timing-function: cubic-bezier(0.55, 0, 0.1, 1); -moz-transition-timing-function: cubic-bezier(0.55, 0, 0.1, 1); @@ -43,9 +46,10 @@ div { transition-timing-function: cubic-bezier(0.55, 0, 0.1, 1); } .bad { - -webkit-transition-property: color, filter; + -webkit-transition-property: color, -webkit-filter; -moz-transition-timing-function: color, filter; -o-transition-timing-function: color, filter; + transition-property: color, -webkit-filter; transition-property: color, filter; -webkit-transition-duration: 1s, 2s; -moz-transition-duration: 1s, 2s; diff --git a/crates/swc_css_prefixer/tests/fixture/transition/output.defaults-not-ie-11.css b/crates/swc_css_prefixer/tests/fixture/transition/output.defaults-not-ie-11.css index 212d0d4d73e..40469a60570 100644 --- a/crates/swc_css_prefixer/tests/fixture/transition/output.defaults-not-ie-11.css +++ b/crates/swc_css_prefixer/tests/fixture/transition/output.defaults-not-ie-11.css @@ -1,7 +1,4 @@ a { - transition: color 200ms, -webkit-transform 200ms; - transition: color 200ms, -moz-transform 200ms; - transition: color 200ms, -o-transform 200ms; transition: color 200ms, transform 200ms; transform: rotate(10deg); } @@ -22,15 +19,9 @@ div { transition-duration: 1s, 2s; } .revert { - transition: 200ms -webkit-transform; - transition: 200ms -moz-transform; - transition: 200ms -o-transform; transition: 200ms transform; } input[type=range]::-moz-range-thumb { - transition: color 200ms, -webkit-transform 200ms; - transition: color 200ms, -moz-transform 200ms; - transition: color 200ms, -o-transform 200ms; transition: color 200ms, transform 200ms; transform: rotate(10deg); } @@ -41,67 +32,37 @@ input[type=range]::-webkit-slider-thumb { button::-moz-submit-invalid { opacity: 1; transform: translateX(45px); - transition: opacity 0.5s 2s, -webkit-transform 0.5s 0.5s; - transition: opacity 0.5s 2s, -moz-transform 0.5s 0.5s; - transition: opacity 0.5s 2s, -o-transform 0.5s 0.5s; transition: opacity 0.5s 2s, transform 0.5s 0.5s; } -@supports ((transition: opacity 0.5s 2s, transform 0.5s 0.5s) or (transition: opacity 0.5s 2s, -webkit-transform 0.5s 0.5s) or (transition: opacity 0.5s 2s, -moz-transform 0.5s 0.5s) or (transition: opacity 0.5s 2s, -o-transform 0.5s 0.5s)) { +@supports (transition: opacity 0.5s 2s, transform 0.5s 0.5s) { button::-moz-submit-invalid { opacity: 1; transform: translateX(45px); - transition: opacity 0.5s 2s, -webkit-transform 0.5s 0.5s; - transition: opacity 0.5s 2s, -moz-transform 0.5s 0.5s; - transition: opacity 0.5s 2s, -o-transform 0.5s 0.5s; transition: opacity 0.5s 2s, transform 0.5s 0.5s; } button { opacity: 1; transform: translateX(45px); - transition: opacity 0.5s 2s, -webkit-transform 0.5s 0.5s; - transition: opacity 0.5s 2s, -moz-transform 0.5s 0.5s; - transition: opacity 0.5s 2s, -o-transform 0.5s 0.5s; transition: opacity 0.5s 2s, transform 0.5s 0.5s; } } button::-webkit-search-cancel-button { - display: -webkit-box; - display: -webkit-flex; - display: -moz-box; - display: -ms-flexbox; display: flex; - transition: color 200ms, -webkit-transform 200ms; - transition: color 200ms, -moz-transform 200ms; - transition: color 200ms, -o-transform 200ms; transition: color 200ms, transform 200ms; transform: rotate(10deg); } button::-webkit-search-cancel-button { display: -webkit-box; display: -webkit-flex; - display: -webkit-box; - display: -webkit-flex; - display: -moz-box; - display: -ms-flexbox; display: flex; -webkit-transition: color 200ms, -webkit-transform 200ms; transition: color 200ms, -webkit-transform 200ms; - transition: color 200ms, -webkit-transform 200ms; - transition: color 200ms, -moz-transform 200ms; - transition: color 200ms, -o-transform 200ms; transition: color 200ms, transform 200ms; - transition: color 200ms, -webkit-transform 200ms, -webkit-transform 200ms; - transition: color 200ms, -moz-transform 200ms, -webkit-transform 200ms; - transition: color 200ms, -o-transform 200ms, -webkit-transform 200ms; transition: color 200ms, transform 200ms, -webkit-transform 200ms; -webkit-transform: rotate(10deg); transform: rotate(10deg); } .a::-webkit-search-cancel-button { - display: -webkit-box; - display: -webkit-flex; - display: -moz-box; - display: -ms-flexbox; display: flex; flex-flow: row; order: 0; @@ -113,9 +74,6 @@ button::-webkit-search-cancel-button { transition-duration: 1s, 2s; } div { - transition-property: -webkit-transform; - transition-property: -moz-transform; - transition-property: -o-transform; transition-property: transform; transform: rotate(10deg); } diff --git a/crates/swc_css_prefixer/tests/fixture/width-size/output.defaults-not-ie-11.css b/crates/swc_css_prefixer/tests/fixture/width-size/output.defaults-not-ie-11.css index ddb21078b0e..2547c03155f 100644 --- a/crates/swc_css_prefixer/tests/fixture/width-size/output.defaults-not-ie-11.css +++ b/crates/swc_css_prefixer/tests/fixture/width-size/output.defaults-not-ie-11.css @@ -1,12 +1,9 @@ div { - width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; width: -webkit-max-content; - width: -moz-max-content; width: max-content; width: -webkit-min-content; - width: -moz-min-content; width: min-content; width: -webkit-fill-available; width: -moz-available; @@ -14,37 +11,26 @@ div { width: -webkit-fill-available; width: -moz-available; width: stretch; - min-width: -webkit-fit-content; min-width: -moz-fit-content; min-width: fit-content; - max-width: -webkit-fit-content; max-width: -moz-fit-content; max-width: fit-content; - height: -webkit-fit-content; height: -moz-fit-content; height: fit-content; - min-height: -webkit-fit-content; min-height: -moz-fit-content; min-height: fit-content; - max-height: -webkit-fit-content; max-height: -moz-fit-content; max-height: fit-content; - inline-size: -webkit-fit-content; inline-size: -moz-fit-content; inline-size: fit-content; - min-inline-size: -webkit-fit-content; min-inline-size: -moz-fit-content; min-inline-size: fit-content; - max-inline-size: -webkit-fit-content; max-inline-size: -moz-fit-content; max-inline-size: fit-content; - block-size: -webkit-fit-content; block-size: -moz-fit-content; block-size: fit-content; - min-block-size: -webkit-fit-content; min-block-size: -moz-fit-content; min-block-size: fit-content; - max-block-size: -webkit-fit-content; max-block-size: -moz-fit-content; max-block-size: fit-content; } @@ -60,14 +46,11 @@ a { } b { height: -webkit-max-content; - height: -moz-max-content; height: max-content; } p { block-size: -webkit-min-content; - block-size: -moz-min-content; block-size: min-content; - min-inline-size: -webkit-fit-content; min-inline-size: -moz-fit-content; min-inline-size: fit-content; } @@ -85,11 +68,11 @@ p { width: calc(100% - var(--jqx-circular-progress-bar-fill-size)); } .grid { - grid: -webkit-min-content -webkit-max-content/ -webkit-fit-content(500px); + grid: -webkit-min-content -webkit-max-content/ fit-content(500px); grid: min-content max-content/ fit-content(500px); } .grid-template { - grid-template: -webkit-min-content/ -webkit-fit-content(10px) -webkit-max-content; + grid-template: -webkit-min-content/ fit-content(10px) -webkit-max-content; grid-template: min-content/ fit-content(10px) max-content; grid-template: -webkit-max-content 1fr -webkit-max-content -webkit-max-content/ -webkit-max-content 1fr; grid-template: max-content 1fr max-content max-content/ max-content 1fr; diff --git a/crates/swc_css_prefixer/tests/fixture/width/output.defaults-not-ie-11.css b/crates/swc_css_prefixer/tests/fixture/width/output.defaults-not-ie-11.css index a09b5f91a94..9bd59df492e 100644 --- a/crates/swc_css_prefixer/tests/fixture/width/output.defaults-not-ie-11.css +++ b/crates/swc_css_prefixer/tests/fixture/width/output.defaults-not-ie-11.css @@ -29,7 +29,6 @@ width: --max-content; } .class { - width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; } @@ -38,12 +37,10 @@ } .class { min-width: -webkit-max-content; - min-width: -moz-max-content; min-width: max-content; } .class { max-width: -webkit-min-content; - max-width: -moz-min-content; max-width: min-content; } .class { @@ -52,7 +49,6 @@ height: fill-available; } .class { - max-height: -webkit-fit-content; max-height: -moz-fit-content; max-height: fit-content; } @@ -68,12 +64,10 @@ } .class { min-block-size: -webkit-max-content; - min-block-size: -moz-max-content; min-block-size: max-content; } .class { min-inline-size: -webkit-max-content; - min-inline-size: -moz-max-content; min-inline-size: max-content; } .class {