feat(css/prefixer): Support place-* properties (#6685)

crates/swc_css_prefixer/data/prefixes_and_browsers.json

@@ -3895,6 +3895,48 @@
     },
     {}
   ],
+
+  "place-content": [
+    {
+      "chrome": "4",
+      "edge": "12",
+      "safari": "3.1",
+      "firefox": "2",
+      "opera": "10",
+      "ie": "6",
+      "ios": "3.2",
+      "samsung": "4",
+      "android": "2.1"
+    },
+    {
+      "chrome": "58",
+      "edge": "18",
+      "safari": "8",
+      "firefox": "44",
+      "opera": "45",
+      "ie": "11",
+      "ios": "8.4",
+      "android": "4.4.4",
+      "samsung": "6.4"
+    }
+  ],
+  "place-items": [
+    {
+      "chrome": "4"
+    },
+    {
+      "chrome": "58"
+    }
+  ],
+  "place-self": [
+    {
+      "chrome": "4"
+    },
+    {
+      "chrome": "58"
+    }
+  ],
+
   "opacity": [
     {
       "chrome": "4",

crates/swc_css_prefixer/src/prefixer.rs

@@ -1578,19 +1578,28 @@ impl VisitMut for Prefixer {
                     let value: Option<Box<dyn Fn() -> Vec<ComponentValue>>> = $value;
 
                     if let Some(value) = value {
-                        self.added_declarations.push(Box::new(Declaration {
+                        let mut declaration = Declaration {
                             span: n.span,
                             name,
                             value: value(),
                             important: n.important.clone(),
-                        }));
+                        };
+
+                        // TODO should we handle with prefix?
+                        declaration.visit_mut_with(self);
+
+                        self.added_declarations.push(Box::new(declaration));
                     } else {
-                        self.added_declarations.push(Box::new(Declaration {
+                        let mut declaration = Declaration {
                             span: n.span,
                             name,
                             value: n.value.clone(),
                             important: n.important.clone(),
-                        }));
+                        };
+
+                        declaration.visit_mut_with(self);
+
+                        self.added_declarations.push(Box::new(declaration));
                     }
                 }
             }};
@@ -3558,6 +3567,84 @@ impl VisitMut for Prefixer {
                 }
             }
 
+            js_word!("place-content") if should_prefix("place-content", self.env, false) => {
+                match (n.value.get(0), n.value.get(1)) {
+                    (Some(left), Some(right)) => {
+                        add_declaration!(
+                            js_word!("align-content"),
+                            Some(Box::new(|| { vec![left.clone()] }))
+                        );
+                        add_declaration!(
+                            js_word!("justify-content"),
+                            Some(Box::new(|| { vec![right.clone()] }))
+                        );
+                    }
+                    (Some(left), None) => {
+                        add_declaration!(
+                            js_word!("align-content"),
+                            Some(Box::new(|| { vec![left.clone()] }))
+                        );
+                        add_declaration!(
+                            js_word!("justify-content"),
+                            Some(Box::new(|| { vec![left.clone()] }))
+                        );
+                    }
+                    _ => {}
+                }
+            }
+
+            js_word!("place-items") if should_prefix("place-items", self.env, false) => {
+                match (n.value.get(0), n.value.get(1)) {
+                    (Some(left), Some(right)) => {
+                        add_declaration!(
+                            js_word!("align-items"),
+                            Some(Box::new(|| { vec![left.clone()] }))
+                        );
+                        add_declaration!(
+                            js_word!("justify-items"),
+                            Some(Box::new(|| { vec![right.clone()] }))
+                        );
+                    }
+                    (Some(left), None) => {
+                        add_declaration!(
+                            js_word!("align-items"),
+                            Some(Box::new(|| { vec![left.clone()] }))
+                        );
+                        add_declaration!(
+                            js_word!("justify-items"),
+                            Some(Box::new(|| { vec![left.clone()] }))
+                        );
+                    }
+                    _ => {}
+                }
+            }
+
+            js_word!("place-self") if should_prefix("place-self", self.env, false) => {
+                match (n.value.get(0), n.value.get(1)) {
+                    (Some(left), Some(right)) => {
+                        add_declaration!(
+                            js_word!("align-self"),
+                            Some(Box::new(|| { vec![left.clone()] }))
+                        );
+                        add_declaration!(
+                            js_word!("justify-self"),
+                            Some(Box::new(|| { vec![right.clone()] }))
+                        );
+                    }
+                    (Some(left), None) => {
+                        add_declaration!(
+                            js_word!("align-self"),
+                            Some(Box::new(|| { vec![left.clone()] }))
+                        );
+                        add_declaration!(
+                            js_word!("justify-self"),
+                            Some(Box::new(|| { vec![left.clone()] }))
+                        );
+                    }
+                    _ => {}
+                }
+            }
+
             // 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/display/output.css

@@ -83,10 +83,18 @@
   display: list-item inline flow;
 }
 .block-flex {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -moz-box;
+  display: -ms-flexbox;
   display: flex;
   display: block flex;
 }
 .inline-flex {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -moz-inline-box;
+  display: -ms-inline-flexbox;
   display: inline-flex;
   display: inline flex;
 }

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

@@ -0,0 +1,82 @@
+a {
+    place-content: space-between center;
+    place-items: center normal;
+    place-self: center;
+}
+
+A {
+    PLACE-CONTENT: space-between center;
+    PLACE-ITEMS: center normal;
+    PLACE-SELF: auto center;
+}
+
+b {
+    place-content: space-between;
+    place-items: center;
+    place-self: center;
+}
+
+c {
+    place-content: var(--first) center;
+    place-items: var(--first) normal;
+    place-self: var(--first);
+}
+
+d {
+    place-content: space-between var(--second);
+    place-items: self-start var(--second);
+}
+
+e {
+    place-content: var(--first, var(--fallback)) center;
+    place-items: var(--first, var(--fallback)) legacy;
+}
+
+.test-unparseable-var-in-place-declaration {
+    place-content: var(var(--foo), ; );
+}
+
+.order-0 {
+    -webkit-place-content: first second;
+}
+
+.order-1 {
+    -moz-place-content: first second;
+}
+
+.order-2 {
+    -ms-place-content: first second;
+}
+
+.order-3 {
+    -o-place-content: first second;
+}
+
+.order-4 {
+    --place-content: first second;
+}
+
+.order-5 {
+    foo-place-content: first second;
+}
+
+/* place-content: first second; */
+
+.content {
+    content: 'place-content: first second;';
+}
+
+.important {
+    place-content: first second !important;
+}
+
+@supports (place-content: first second) {
+    .support {
+        place-content: first second;
+    }
+}
+@keyframes KEYFRAMES {
+    50% {
+        place-content: first second;
+    }
+}