diff --git a/crates/swc_css_prefixer/data/prefixes_and_browsers.json b/crates/swc_css_prefixer/data/prefixes_and_browsers.json
index 411a6aab3bba..d3ad949af2f8 100644
--- a/crates/swc_css_prefixer/data/prefixes_and_browsers.json
+++ b/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",
diff --git a/crates/swc_css_prefixer/src/prefixer.rs b/crates/swc_css_prefixer/src/prefixer.rs
index bf6fb7193a55..ac9fcdcb60f3 100644
--- a/crates/swc_css_prefixer/src/prefixer.rs
+++ b/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
             _ => {}
diff --git a/crates/swc_css_prefixer/tests/fixture/display/output.css b/crates/swc_css_prefixer/tests/fixture/display/output.css
index f1ea7a756c96..738ab6cf6bd4 100644
--- a/crates/swc_css_prefixer/tests/fixture/display/output.css
+++ b/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;
 }
diff --git a/crates/swc_css_prefixer/tests/fixture/place/input.css b/crates/swc_css_prefixer/tests/fixture/place/input.css
new file mode 100644
index 000000000000..fd42e223004a
--- /dev/null
+++ b/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;
+    }
+}
diff --git a/crates/swc_css_prefixer/tests/fixture/place/output.css b/crates/swc_css_prefixer/tests/fixture/place/output.css
new file mode 100644
index 000000000000..a4afbf7260dd
--- /dev/null
+++ b/crates/swc_css_prefixer/tests/fixture/place/output.css
@@ -0,0 +1,222 @@
+a {
+  -webkit-align-content: space-between;
+  -ms-flex-line-pack: justify;
+  align-content: space-between;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -moz-box-pack: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  place-content: space-between center;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+  -moz-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  justify-items: normal;
+  place-items: center normal;
+  -webkit-align-self: center;
+  -ms-flex-item-align: center;
+  align-self: center;
+  justify-self: center;
+  place-self: center;
+}
+A {
+  -webkit-align-content: space-between;
+  -ms-flex-line-pack: justify;
+  align-content: space-between;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -moz-box-pack: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  PLACE-CONTENT: space-between center;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+  -moz-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  justify-items: normal;
+  PLACE-ITEMS: center normal;
+  -webkit-align-self: auto;
+  -ms-flex-item-align: auto;
+  align-self: auto;
+  justify-self: center;
+  PLACE-SELF: auto center;
+}
+b {
+  -webkit-align-content: space-between;
+  -ms-flex-line-pack: justify;
+  align-content: space-between;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -moz-box-pack: justify;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  place-content: space-between;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+  -moz-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  justify-items: center;
+  place-items: center;
+  -webkit-align-self: center;
+  -ms-flex-item-align: center;
+  align-self: center;
+  justify-self: center;
+  place-self: center;
+}
+c {
+  -webkit-align-content: var(--first);
+  -ms-flex-line-pack: var(--first);
+  align-content: var(--first);
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -moz-box-pack: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  place-content: var(--first) center;
+  -webkit-box-align: var(--first);
+  -webkit-align-items: var(--first);
+  -moz-box-align: var(--first);
+  -ms-flex-align: var(--first);
+  align-items: var(--first);
+  justify-items: normal;
+  place-items: var(--first) normal;
+  -webkit-align-self: var(--first);
+  -ms-flex-item-align: var(--first);
+  align-self: var(--first);
+  justify-self: var(--first);
+  place-self: var(--first);
+}
+d {
+  -webkit-align-content: space-between;
+  -ms-flex-line-pack: justify;
+  align-content: space-between;
+  -webkit-box-pack: var(--second);
+  -webkit-justify-content: var(--second);
+  -moz-box-pack: var(--second);
+  -ms-flex-pack: var(--second);
+  justify-content: var(--second);
+  place-content: space-between var(--second);
+  -webkit-box-align: self-start;
+  -webkit-align-items: self-start;
+  -moz-box-align: self-start;
+  -ms-flex-align: self-start;
+  align-items: self-start;
+  justify-items: var(--second);
+  place-items: self-start var(--second);
+}
+e {
+  -webkit-align-content: var(--first, var(--fallback));
+  -ms-flex-line-pack: var(--first, var(--fallback));
+  align-content: var(--first, var(--fallback));
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -moz-box-pack: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  place-content: var(--first, var(--fallback)) center;
+  -webkit-box-align: var(--first, var(--fallback));
+  -webkit-align-items: var(--first, var(--fallback));
+  -moz-box-align: var(--first, var(--fallback));
+  -ms-flex-align: var(--first, var(--fallback));
+  align-items: var(--first, var(--fallback));
+  justify-items: legacy;
+  place-items: var(--first, var(--fallback)) legacy;
+}
+.test-unparseable-var-in-place-declaration {
+  -webkit-align-content: var(var(--foo), ;);
+  -ms-flex-line-pack: var(var(--foo), ;);
+  align-content: var(var(--foo), ;);
+  -webkit-box-pack: var(var(--foo), ;);
+  -webkit-justify-content: var(var(--foo), ;);
+  -moz-box-pack: var(var(--foo), ;);
+  -ms-flex-pack: var(var(--foo), ;);
+  justify-content: var(var(--foo), ;);
+  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;
+}
+.content {
+  content: 'place-content: first second;';
+}
+.important {
+  -webkit-align-content: first !important;
+  -ms-flex-line-pack: first !important;
+  align-content: first !important;
+  -webkit-box-pack: second !important;
+  -webkit-justify-content: second !important;
+  -moz-box-pack: second !important;
+  -ms-flex-pack: second !important;
+  justify-content: second !important;
+  place-content: first second !important;
+}
+@supports ((place-content: first second) or (-webkit-align-content: first) or (-ms-flex-line-pack: first) or (align-content: first) or (-webkit-box-pack: second) or (-webkit-justify-content: second) or (-moz-box-pack: second) or (-ms-flex-pack: second) or (justify-content: second)) {
+  .support {
+    -webkit-align-content: first;
+    -ms-flex-line-pack: first;
+    align-content: first;
+    -webkit-box-pack: second;
+    -webkit-justify-content: second;
+    -moz-box-pack: second;
+    -ms-flex-pack: second;
+    justify-content: second;
+    place-content: first second;
+  }
+}
+@-webkit-keyframes KEYFRAMES {
+  50% {
+    -webkit-align-content: first;
+    align-content: first;
+    -webkit-box-pack: second;
+    -webkit-justify-content: second;
+    justify-content: second;
+    place-content: first second;
+  }
+}
+@-moz-keyframes KEYFRAMES {
+  50% {
+    align-content: first;
+    -moz-box-pack: second;
+    justify-content: second;
+    place-content: first second;
+  }
+}
+@-o-keyframes KEYFRAMES {
+  50% {
+    align-content: first;
+    justify-content: second;
+    place-content: first second;
+  }
+}
+@keyframes KEYFRAMES {
+  50% {
+    -webkit-align-content: first;
+    -ms-flex-line-pack: first;
+    align-content: first;
+    -webkit-box-pack: second;
+    -webkit-justify-content: second;
+    -moz-box-pack: second;
+    -ms-flex-pack: second;
+    justify-content: second;
+    place-content: first second;
+  }
+}
diff --git a/crates/swc_css_prefixer/tests/fixture/place/output.defaults-not-ie-11.css b/crates/swc_css_prefixer/tests/fixture/place/output.defaults-not-ie-11.css
new file mode 100644
index 000000000000..95f8c2efad7b
--- /dev/null
+++ b/crates/swc_css_prefixer/tests/fixture/place/output.defaults-not-ie-11.css
@@ -0,0 +1,65 @@
+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;
+}
+.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;
+  }
+}