Fix whitespace-only custom property with !important (#20055)

Co-authored-by: Cursor <cursoragent@cursor.com>
Co-authored-by: fisker <lionkay@gmail.com>

changelog_unreleased/css/20055.md

@@ -0,0 +1,19 @@
+#### Fix whitespace-only custom property with `!important` (#20055 by @scs0209)
+
+<!-- prettier-ignore -->
+```css
+/* Input */
+a {
+  --x: !important;
+}
+
+/* Prettier stable */
+a {
+  --x:  !important;
+}
+
+/* Prettier main */
+a {
+  --x: !important;
+}
+```

src/language-css/print/css-declaration.js

@@ -82,7 +82,8 @@ function printCssDeclaration(path, options, print) {
   parts.push(value);
 
   if (node.raws.important) {
-    parts.push(node.raws.important.replace(/\s*!\s*important/i, " !important"));
+    const directive = `${isValueAllSpace ? "" : " "}!important`;
+    parts.push(node.raws.important.replace(/\s*!\s*important/i, directive));
   } else if (node.important) {
     parts.push(" !important");
   }

tests/format/css/important/__snapshots__/format.test.js.snap

@@ -2,17 +2,41 @@
 
 exports[`important.css format 1`] = `
 ====================================options=====================================
-parsers: ["css"]
+parsers: ["css", "less", "scss"]
                                                       printWidth: 80 (default) |
 =====================================input======================================
 div {
   max-height: none !important;
 }
 
+a {
+  --x11:!important;
+  --x12: !important;
+  --x13:          !important;
+  --x21:;
+  --x22: ;
+  --x23:          ;
+  --x31:x!important;
+  --x32:x !important;
+  --x33:x          !important;
+}
+
 =====================================output=====================================
 div {
   max-height: none !important;
 }
 
+a {
+  --x11:!important;
+  --x12: !important;
+  --x13:          !important;
+  --x21:;
+  --x22: ;
+  --x23:          ;
+  --x31: x !important;
+  --x32: x !important;
+  --x33: x !important;
+}
+
 ================================================================================
 `;

tests/format/css/important/format.test.js

@@ -1 +1 @@
-runFormatTest(import.meta, ["css"]);
+runFormatTest(import.meta, ["css", "less", "scss"]);

tests/format/css/important/important.css

@@ -1,3 +1,15 @@
 div {
   max-height: none !important;
 }
+
+a {
+  --x11:!important;
+  --x12: !important;
+  --x13:          !important;
+  --x21:;
+  --x22: ;
+  --x23:          ;
+  --x31:x!important;
+  --x32:x !important;
+  --x33:x          !important;
+}