diff --git a/changelog_unreleased/css/9209.md b/changelog_unreleased/css/9209.md
new file mode 100644
index 000000000..748fb6a26
--- /dev/null
+++ b/changelog_unreleased/css/9209.md
@@ -0,0 +1,42 @@
+#### Improve custom properties format (#9209 by @fisker)
+
+Thanks to [`PostCSS 8.0`](https://github.com/postcss/postcss/releases/tag/8.0.0), we can handle these edge cases on custom properties.
+
+<!-- prettier-ignore -->
+```css
+/* Input */
+:root {
+  --empty: ;
+  --JSON: [1, "2", {"three": {"a":1}}, [4]];
+  --javascript: function(rule) { console.log(rule) };
+}
+
+@supports (--element(".minwidth", { "minWidth": 300 })) {
+  [--self] {
+    background: greenyellow;
+  }
+}
+
+/* Prettier stable */
+SyntaxError: (postcss) CssSyntaxError Missed semicolon (3:20)
+  1 | :root {
+  2 |   --empty: ;
+> 3 |   --JSON: [1, "2", {"three": {"a":1}}, [4]];
+    |                    ^
+  4 |   --javascript: function(rule) { console.log(rule) };
+  5 | }
+  6 |
+
+/* Prettier main */
+:root {
+  --empty: ;
+  --JSON: [1, "2", {"three": {"a": 1}}, [4]];
+  --javascript: function(rule) {console.log(rule)};
+}
+
+@supports (--element(".minwidth", {"minWidth": 300})) {
+  [--self] {
+    background: greenyellow;
+  }
+}
+```