feat(css/prefixer): Support overflow (#6678)

crates/swc_atoms/words.txt

@@ -1,4 +1,7 @@
 *
+*
+-infinity
+-moz-activehyperlinktext
 -moz-animation
 -moz-animation-delay
 -moz-animation-direction
@@ -9,6 +12,8 @@
 -moz-animation-play-state
 -moz-animation-timing-function
 -moz-any
+-moz-any
+-moz-any
 -moz-appearance
 -moz-backface-visibility
 -moz-background-origin
@@ -29,7 +34,14 @@
 -moz-box-pack
 -moz-box-shadow
 -moz-box-sizing
+-moz-buttondefault
+-moz-buttonhoverface
+-moz-buttonhovertext
 -moz-calc
+-moz-calc
+-moz-calc
+-moz-cellhighlight
+-moz-cellhighlighttext
 -moz-column-count
 -moz-column-fill
 -moz-column-gap
@@ -40,14 +52,48 @@
 -moz-column-span
 -moz-column-width
 -moz-columns
+-moz-combobox
+-moz-comboboxtext
+-moz-default-background-color
+-moz-default-color
+-moz-dialog
+-moz-dialogtext
 -moz-document
+-moz-document
+-moz-document
+-moz-dragtargetzone
+-moz-eventreerow
 -moz-font-feature-settings
 -moz-font-language-override
 -moz-font-variant-ligatures
+-moz-html-cellhighlight
+-moz-html-cellhighlighttext
+-moz-hyperlinktext
 -moz-hyphens
 -moz-keyframes
+-moz-keyframes
+-moz-keyframes
+-moz-mac-accentdarkestshadow
+-moz-mac-accentdarkshadow
+-moz-mac-accentface
+-moz-mac-accentlightesthighlight
+-moz-mac-accentlightshadow
+-moz-mac-accentregularhighlight
+-moz-mac-accentregularshadow
+-moz-mac-chrome-active
+-moz-mac-chrome-inactive
+-moz-mac-focusring
+-moz-mac-menuselect
+-moz-mac-menushadow
+-moz-mac-menutextselect
 -moz-margin-end
 -moz-margin-start
+-moz-menubarhovertext
+-moz-menubartext
+-moz-menuhover
+-moz-menuhovertext
+-moz-nativehyperlinktext
+-moz-oddtreerow
 -moz-padding-end
 -moz-padding-start
 -moz-perspective
@@ -67,6 +113,11 @@
 -moz-transition-duration
 -moz-transition-timing-function
 -moz-user-select
+-moz-visitedhyperlinktext
+-moz-win-accentcolor
+-moz-win-accentcolortext
+-moz-win-communicationstext
+-moz-win-mediatext
 -ms-appearance
 -ms-flex
 -ms-flex-align
@@ -85,57 +136,6 @@
 -ms-high-contrast-adjust
 -ms-hyphens
 -ms-interpolation-mode
--moz-any
--moz-calc
--moz-document
--moz-keyframes
-*
--infinity
--moz-activehyperlinktext
--moz-any
--moz-buttondefault
--moz-buttonhoverface
--moz-buttonhovertext
--moz-calc
--moz-cellhighlight
--moz-cellhighlighttext
--moz-combobox
--moz-comboboxtext
--moz-default-background-color
--moz-default-color
--moz-dialog
--moz-dialogtext
--moz-document
--moz-dragtargetzone
--moz-eventreerow
--moz-html-cellhighlight
--moz-html-cellhighlighttext
--moz-hyperlinktext
--moz-keyframes
--moz-mac-accentdarkestshadow
--moz-mac-accentdarkshadow
--moz-mac-accentface
--moz-mac-accentlightesthighlight
--moz-mac-accentlightshadow
--moz-mac-accentregularhighlight
--moz-mac-accentregularshadow
--moz-mac-chrome-active
--moz-mac-chrome-inactive
--moz-mac-focusring
--moz-mac-menuselect
--moz-mac-menushadow
--moz-mac-menutextselect
--moz-menubarhovertext
--moz-menubartext
--moz-menuhover
--moz-menuhovertext
--moz-nativehyperlinktext
--moz-oddtreerow
--moz-visitedhyperlinktext
--moz-win-accentcolor
--moz-win-accentcolortext
--moz-win-communicationstext
--moz-win-mediatext
 -ms-keyframes
 -ms-region-fragment
 -ms-scroll-chaining
@@ -1929,6 +1929,8 @@ overflow-block
 overflow-clip-margin
 overflow-inline
 overflow-wrap
+overflow-x
+overflow-y
 overline
 override
 overscroll-behavior

crates/swc_css_prefixer/data/prefixes_and_browsers.json

@@ -3955,6 +3955,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",

crates/swc_css_prefixer/src/prefixer.rs

@@ -1920,7 +1920,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)),
@@ -2044,7 +2044,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)),
@@ -3390,11 +3390,41 @@ impl VisitMut for Prefixer {
                 add_declaration!(js_word!("word-wrap"), None);
             }
 
+            js_word!("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!(
+                            js_word!("overflow"),
+                            Some(Box::new(|| { vec![left.clone()] }))
+                        );
+                    } else {
+                        add_declaration!(
+                            js_word!("overflow-x"),
+                            Some(Box::new(|| { vec![left.clone()] }))
+                        );
+                        add_declaration!(
+                            js_word!("overflow-y"),
+                            Some(Box::new(|| { vec![right.clone()] }))
+                        );
+                    }
+                }
+            }
+
             js_word!("tab-size") => {
                 add_declaration!(Prefix::Moz, js_word!("-moz-tab-size"), None);
                 add_declaration!(Prefix::O, js_word!("-o-tab-size"), None);
             }
 
+            js_word!("overflow-wrap") => {
+                add_declaration!(js_word!("word-wrap"), None);
+            }
+
             js_word!("hyphens") => {
                 add_declaration!(Prefix::Webkit, js_word!("-webkit-hyphens"), None);
                 add_declaration!(Prefix::Moz, js_word!("-moz-hyphens"), None);
@@ -3589,7 +3619,7 @@ impl VisitMut for Prefixer {
                 add_declaration!(Prefix::Moz, js_word!("-moz-border-radius-bottomleft"), None);
             }
 
-            js_word!("src") if should_prefix("font-face-format-ident", self.env, true) => {
+            js_word!("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);
@@ -3718,7 +3748,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);

crates/swc_css_prefixer/tests/fixture/overflow/input.css

@@ -1,3 +1,68 @@
-.class {
+html.single-overflow {
-    text-overflow: clip;
+    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;
+    }
+}

crates/swc_css_prefixer/tests/fixture/overflow/output.css

@@ -1,4 +1,88 @@
-.class {
+html.single-overflow {
-  -o-text-overflow: clip;
+  overflow: hidden;
-  text-overflow: clip;
+}
+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;
+  }
 }

crates/swc_css_prefixer/tests/fixture/overflow/output.defaults-not-ie-11.css

@@ -1,3 +1,52 @@
-.class {
+html.single-overflow {
-  text-overflow: clip;
+  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;
+  }
 }

crates/swc_css_prefixer/tests/fixture/text-overflow/input.css

@@ -0,0 +1,3 @@
+.class {
+    text-overflow: clip;
+}

crates/swc_css_prefixer/tests/fixture/text-overflow/output.css

@@ -0,0 +1,4 @@
+.class {
+  -o-text-overflow: clip;
+  text-overflow: clip;
+}

crates/swc_css_prefixer/tests/fixture/text-overflow/output.defaults-not-ie-11.css

@@ -0,0 +1,3 @@
+.class {
+  text-overflow: clip;
+}