feat(css/prefixer): Support font-face format (#6644)

Author: alexander-akait

crates/swc_atoms/words.txt

@@ -798,6 +798,7 @@ code
 codebase
 col
 colgroup
+collection
 color
 color-index
 color-mix
@@ -893,6 +894,7 @@ ellipse
 else
 em
 embed
+embedded-opentype
 empty-cells
 encoding
 end
@@ -1014,6 +1016,7 @@ foreignObject
 foreignobject
 form
 formaction
+format
 frame
 frameset
 from
@@ -1423,6 +1426,7 @@ onwebkitanimationstart
 onwebkittransitionend
 onwheel
 opacity
+opentype
 optgroup
 option
 or
@@ -1793,6 +1797,7 @@ translateZ
 transparent
 tref
 true
+truetype
 try
 tspan
 tt
@@ -1841,6 +1846,8 @@ widows
 width
 will-change
 with
+woff
+woff2
 word-break
 word-spacing
 word-wrap

crates/swc_css_prefixer/data/prefixes_and_browsers.json

@@ -3929,5 +3929,21 @@
       "ios": "14.8",
       "firefox": "69"
     }
+  ],
+  "font-face-format-ident": [
+    {
+      "chrome": "4",
+      "edge": "12",
+      "firefox": "2",
+      "samsung": "4",
+      "ios": "3.2",
+      "opera": "10",
+      "safari": "3.1",
+      "ie": "6"
+    },
+    {
+      "safari": "3.2",
+      "ios": "4.3"
+    }
   ]
 }

crates/swc_css_prefixer/src/prefixer.rs

@@ -265,7 +265,7 @@ impl VisitMut for ImageSetFunctionReplacerOnLegacyVariant<'_> {
     fn visit_mut_function(&mut self, n: &mut Function) {
         let old_in_function = self.in_function;
 
-        self.in_function = true;
+        self.in_function = n.name.value.eq_str_ignore_ascii_case(self.from);
 
         n.visit_mut_children_with(self);
 
@@ -591,6 +591,53 @@ where
     });
 }
 
+pub struct FontFaceFormatOldSyntax {}
+
+impl VisitMut for FontFaceFormatOldSyntax {
+    fn visit_mut_function(&mut self, n: &mut Function) {
+        n.visit_mut_children_with(self);
+
+        if !n.name.value.eq_ignore_ascii_case(&js_word!("format")) {
+            return;
+        }
+
+        if n.value.len() != 1 {
+            return;
+        }
+
+        if let Some(ComponentValue::Ident(box ident)) = n.value.get(0) {
+            let new_value: JsWord = ident.value.to_ascii_lowercase();
+            let new_value = match new_value {
+                js_word!("woff")
+                | js_word!("truetype")
+                | js_word!("opentype")
+                | js_word!("woff2")
+                | js_word!("embedded-opentype")
+                | js_word!("collection")
+                | js_word!("svg") => new_value,
+                _ => {
+                    return;
+                }
+            };
+
+            let new_value = Str {
+                value: new_value,
+                span: ident.span,
+                raw: None,
+            };
+
+            n.value = vec![ComponentValue::Str(Box::new(new_value))];
+        }
+    }
+}
+
+pub fn font_face_format_old_syntax<N>(node: &mut N)
+where
+    N: VisitMutWith<FontFaceFormatOldSyntax>,
+{
+    node.visit_mut_with(&mut FontFaceFormatOldSyntax {});
+}
+
 macro_rules! to_ident {
     ($val:expr) => {{
         ComponentValue::Ident(Box::new(Ident {
@@ -3294,6 +3341,16 @@ impl VisitMut for Prefixer {
                 add_declaration!(Prefix::Moz, "-moz-border-radius-bottomleft", None);
             }
 
+            "src" if should_prefix("font-face-format-ident", self.env, true) => {
+                let mut new_declaration = n.clone();
+
+                font_face_format_old_syntax(&mut new_declaration);
+
+                if n.value != new_declaration.value {
+                    self.added_declarations.push(Box::new(new_declaration));
+                }
+            }
+
             // TODO add `grid` support https://github.com/postcss/autoprefixer/tree/main/lib/hacks (starting with grid)
             // TODO fix me https://github.com/postcss/autoprefixer/blob/main/test/cases/custom-prefix.out.css
             _ => {}

crates/swc_css_prefixer/tests/fixture/font-face-format/input.css

@@ -0,0 +1,28 @@
+@font-face {
+    src: format(woff);
+}
+
+@font-face {
+    src: url(a) format(woff), url(b) format(svg);
+}
+
+@font-face {
+    src: format(woff), format(truetype), format(opentype), format(woff2), format(embedded-opentype), format(collection), format(svg);
+}
+
+@Font-face {
+    src: FORMAT(WOFF)
+}
+
+@font-face {
+    src: format("woff");
+}
+
+@font-face {
+    src: url(a) format("woff"), url(b) format(svg);
+}
+
+@font-face {
+    src: url(a) format("woff"), url(b) format("svg");
+}
+

crates/swc_css_prefixer/tests/fixture/font-face-format/output.css

@@ -0,0 +1,26 @@
+@font-face{
+  src: format("woff");
+  src: format(woff);
+}
+@font-face{
+  src: url(a) format("woff"), url(b) format("svg");
+  src: url(a) format(woff), url(b) format(svg);
+}
+@font-face{
+  src: format("woff"), format("truetype"), format("opentype"), format("woff2"), format("embedded-opentype"), format("collection"), format("svg");
+  src: format(woff), format(truetype), format(opentype), format(woff2), format(embedded-opentype), format(collection), format(svg);
+}
+@Font-face{
+  src: FORMAT("woff");
+  src: FORMAT(WOFF);
+}
+@font-face{
+  src: format("woff");
+}
+@font-face{
+  src: url(a) format("woff"), url(b) format("svg");
+  src: url(a) format("woff"), url(b) format(svg);
+}
+@font-face{
+  src: url(a) format("woff"), url(b) format("svg");
+}

crates/swc_css_prefixer/tests/fixture/font-face-format/output.defaults-not-ie-11.css

@@ -0,0 +1,26 @@
+@font-face{
+  src: format("woff");
+  src: format(woff);
+}
+@font-face{
+  src: url(a) format("woff"), url(b) format("svg");
+  src: url(a) format(woff), url(b) format(svg);
+}
+@font-face{
+  src: format("woff"), format("truetype"), format("opentype"), format("woff2"), format("embedded-opentype"), format("collection"), format("svg");
+  src: format(woff), format(truetype), format(opentype), format(woff2), format(embedded-opentype), format(collection), format(svg);
+}
+@Font-face{
+  src: FORMAT("woff");
+  src: FORMAT(WOFF);
+}
+@font-face{
+  src: format("woff");
+}
+@font-face{
+  src: url(a) format("woff"), url(b) format("svg");
+  src: url(a) format("woff"), url(b) format(svg);
+}
+@font-face{
+  src: url(a) format("woff"), url(b) format("svg");
+}

crates/swc_css_prefixer/tests/fixture/image-set/input.css

@@ -36,4 +36,12 @@ h1 {
 
 .broken {
     content: image-set('foo@1x.png' 1x, "foo@2x.png" 2x) "test";
+}
+
+a {
+    background-image: image-set("foo@1x.png" 1x, url(foo@2x.png) 2x);
+}
+
+a {
+    background-image: image-set(url(foo@1x.png) 1x, unknown("foo@2x.png") 2x);
 }

crates/swc_css_prefixer/tests/fixture/image-set/output.css

@@ -43,3 +43,11 @@ h1 {
   content: -webkit-image-set(url("foo@1x.png") 1x, url("foo@2x.png") 2x) "test";
   content: image-set('foo@1x.png' 1x, "foo@2x.png" 2x) "test";
 }
+a {
+  background-image: -webkit-image-set(url("foo@1x.png") 1x, url(foo@2x.png) 2x);
+  background-image: image-set("foo@1x.png" 1x, url(foo@2x.png) 2x);
+}
+a {
+  background-image: -webkit-image-set(url(foo@1x.png) 1x, unknown("foo@2x.png") 2x);
+  background-image: image-set(url(foo@1x.png) 1x, unknown("foo@2x.png") 2x);
+}

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

@@ -40,3 +40,11 @@ h1 {
   content: -webkit-image-set(url("foo@1x.png") 1x, url("foo@2x.png") 2x) "test";
   content: image-set('foo@1x.png' 1x, "foo@2x.png" 2x) "test";
 }
+a {
+  background-image: -webkit-image-set(url("foo@1x.png") 1x, url(foo@2x.png) 2x);
+  background-image: image-set("foo@1x.png" 1x, url(foo@2x.png) 2x);
+}
+a {
+  background-image: -webkit-image-set(url(foo@1x.png) 1x, unknown("foo@2x.png") 2x);
+  background-image: image-set(url(foo@1x.png) 1x, unknown("foo@2x.png") 2x);
+}