feat: improve `@support` at-rule output (#4372)

src/language-css/clean.js

@@ -122,6 +122,11 @@ function clean(ast, newObj) {
       newObj.value = lowercasedValue;
     }
   }
+
+  // Workaround when `postcss-values-parser` parse `not`, `and` or `or` keywords as `value-func`
+  if (ast.type === "css-atrule" && ast.name.toLowerCase() === "supports") {
+    delete newObj.value;
+  }
 }
 
 function cleanCSSStrings(value) {

src/language-css/parser-postcss.js

@@ -389,7 +389,8 @@ function parseNestedCSS(node) {
           "function",
           "return",
           "define-mixin",
-          "add-mixin"
+          "add-mixin",
+          "supports"
         ].indexOf(name) !== -1
       ) {
         // Remove unnecessary spaces in SCSS variable arguments
@@ -414,7 +415,7 @@ function parseNestedCSS(node) {
       }
 
       if (
-        ["namespace", "import", "media", "supports", "custom-media"].indexOf(
+        ["namespace", "import", "media", "custom-media"].indexOf(
           lowercasedName
         ) !== -1
       ) {

src/language-css/printer-postcss.js

@@ -695,7 +695,18 @@ function genericPrint(path, options, print) {
       return path.call(print, "group");
     }
     case "value-func": {
-      return concat([node.value, path.call(print, "group")]);
+      const atRuleAncestorNode = getAncestorNode(path, "css-atrule");
+      const isSupportsAtRule =
+        atRuleAncestorNode &&
+        atRuleAncestorNode.name.toLowerCase() === "supports";
+      const isKeyword =
+        ["not", "and", "or"].indexOf(node.value.toLowerCase()) !== -1;
+
+      return concat([
+        node.value,
+        isSupportsAtRule && isKeyword ? " " : "",
+        path.call(print, "group")
+      ]);
     }
     case "value-paren": {
       return node.value;

tests/css_atrule/__snapshots__/jsfmt.spec.js.snap

@@ -3941,6 +3941,9 @@ run-in
 @supports (transform-style: preserve) or (-moz-transform-style: preserve) {}
 @supports (transform-style: preserve) or (-moz-transform-style: preserve) or (-o-transform-style: preserve) or (-webkit-transform-style: preserve) {}
 @supports (transform-style: preserve-3d) or ((-moz-transform-style: preserve-3d) or ((-o-transform-style: preserve-3d) or (-webkit-transform-style: preserve-3d))) {}
+@supports not((text-align-last:justify)or(-moz-text-align-last:justify)){ }
+@supports not((text-align-last:justify)and(-moz-text-align-last:justify)){ }
+@supports (--foo:green) {}
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 @supports (transform-origin: 5% 5%) {
 }
@@ -3948,34 +3951,35 @@ run-in
 }
 @supports (transform-origin: 5% 5%) {
 }
-@supports (transform-origin: 5%  5%) {
+@supports (transform-origin: 5% 5%) {
+}
+@supports (transform-origin: 5% 5%) {
 }
 @supports (transform-origin: 5% 5%) {
 }
 @supports (transform-origin: 5% 5%) {
 }
-@supports (transform-origin: 5%
-5%) {
+@supports (transform-origin: 5% 5%) {
 }
-@supports (transform-origin: 5%
-
-5%) {
+@supports (
+  very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-prop:
+    very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-value
+) {
 }
-@supports (very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-prop: very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-value) {
+@supports (
+  very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-prop:
+    very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-value
+) {
 }
-@supports (very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-prop: very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-value) {
+@supports (
+  very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-prop:
+    very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-value
+) {
 }
-@supports (very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-prop: very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-value) {
-}
-@supports (very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-prop: very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-value) {
-}
-@supports not(transform-origin: 10em 10em 10em) {
-}
-@supports not (transform-origin: 10em 10em 10em) {
-}
-@supports not (transform-origin: 10em 10em 10em) {
-}
-@supports not (transform-origin: 10em  10em  10em) {
+@supports (
+  very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-prop:
+    very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-value
+) {
 }
 @supports not (transform-origin: 10em 10em 10em) {
 }
@@ -3983,50 +3987,58 @@ run-in
 }
 @supports not (transform-origin: 10em 10em 10em) {
 }
-@supports not (transform-origin: 10em
-10em
-10em) {
+@supports not (transform-origin: 10em 10em 10em) {
 }
-@supports not (transform-origin: 10em
-
-10em
-
-10em) {
+@supports not (transform-origin: 10em 10em 10em) {
 }
-@supports not (very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-prop: very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-value) {
+@supports not (transform-origin: 10em 10em 10em) {
 }
-@supports not (very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-prop: very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-value) {
+@supports not (transform-origin: 10em 10em 10em) {
 }
-@supports not (very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-prop: very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-value) {
+@supports not (transform-origin: 10em 10em 10em) {
 }
-@supports not (very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-prop: very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-value) {
+@supports not (transform-origin: 10em 10em 10em) {
 }
-@supports not (very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-prop: very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-value) {
+@supports not (
+  very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-prop:
+    very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-value
+) {
 }
-@supports not (not (transform-origin: 2px)) {
+@supports not (
+  very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-prop:
+    very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-value
+) {
 }
-@supports not(not(transform-origin:2px)) {
+@supports not (
+  very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-prop:
+    very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-value
+) {
 }
-@supports not (not ( transform-origin: 2px )) {
+@supports not (
+  very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-prop:
+    very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-value
+) {
 }
-@supports not (not ( transform-origin: 2px  )) {
+@supports not (
+  very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-prop:
+    very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-value
+) {
 }
 @supports not (not (transform-origin: 2px)) {
 }
 @supports not (not (transform-origin: 2px)) {
 }
-@supports not (not
-(
-transform-origin: 2px
-)) {
+@supports not (not (transform-origin: 2px)) {
 }
-@supports not (not
-
-(
-
-transform-origin: 2px
-
-)) {
+@supports not (not (transform-origin: 2px)) {
+}
+@supports not (not (transform-origin: 2px)) {
+}
+@supports not (not (transform-origin: 2px)) {
+}
+@supports not (not (transform-origin: 2px)) {
+}
+@supports not (not (transform-origin: 2px)) {
 }
 @supports (display: flexbox) and (not (display: inline-grid)) {
 }
@@ -4052,45 +4064,33 @@ transform-origin: 2px
 }
 @supports (display: table-cell) and ((display: list-item) and (display: run-in)) {
 }
-@supports (display: table-cell) and ((display: list-item)
-  and (display: run-in)) {
+@supports (display: table-cell) and ((display: list-item) and (display: run-in)) {
 }
-@supports (display: table-cell) and ((display: list-item) and
-  (display: run-in)) {
+@supports (display: table-cell) and ((display: list-item) and (display: run-in)) {
 }
-@supports (display: table-cell) and ((
-display: list-item
-)
-and
-(
-display
-:
-run-in
-)) {
+@supports (display: table-cell) and ((display: list-item) and (display: run-in)) {
 }
-@supports (display: table-cell) and ((
-
-display: list-item
-
-)
-
-and
-
-(
-
-display
-
-:
-
-run-in
-
-)) {
+@supports (display: table-cell) and ((display: list-item) and (display: run-in)) {
 }
 @supports (transform-style: preserve) or (-moz-transform-style: preserve) {
 }
-@supports (transform-style: preserve) or (-moz-transform-style: preserve) or (-o-transform-style: preserve) or (-webkit-transform-style: preserve) {
+@supports (transform-style: preserve) or (-moz-transform-style: preserve) or
+  (-o-transform-style: preserve) or (-webkit-transform-style: preserve) {
 }
-@supports (transform-style: preserve-3d) or ((-moz-transform-style: preserve-3d) or ((-o-transform-style: preserve-3d) or (-webkit-transform-style: preserve-3d))) {
+@supports (transform-style: preserve-3d) or
+  (
+    (-moz-transform-style: preserve-3d) or
+      (
+        (-o-transform-style: preserve-3d) or
+          (-webkit-transform-style: preserve-3d)
+      )
+  ) {
+}
+@supports not ((text-align-last: justify) or (-moz-text-align-last: justify)) {
+}
+@supports not ((text-align-last: justify) and (-moz-text-align-last: justify)) {
+}
+@supports (--foo: green) {
 }
 
 `;

tests/css_atrule/supports.css

@@ -278,3 +278,6 @@ run-in
 @supports (transform-style: preserve) or (-moz-transform-style: preserve) {}
 @supports (transform-style: preserve) or (-moz-transform-style: preserve) or (-o-transform-style: preserve) or (-webkit-transform-style: preserve) {}
 @supports (transform-style: preserve-3d) or ((-moz-transform-style: preserve-3d) or ((-o-transform-style: preserve-3d) or (-webkit-transform-style: preserve-3d))) {}
+@supports not((text-align-last:justify)or(-moz-text-align-last:justify)){ }
+@supports not((text-align-last:justify)and(-moz-text-align-last:justify)){ }
+@supports (--foo:green) {}

tests/css_comments/__snapshots__/jsfmt.spec.js.snap

@@ -327,17 +327,52 @@ exports[`at-rules.css 1`] = `
     /* comment 156 */) /* comment 157 */ /* comment 158 */ {
 } /* comment 159 */
 
-@supports /* comment 160 */ (/* comment 161 */ display /* comment 162 */: /* comment 163 */ flex /* comment 164 */) /* comment 165 */ {
+@supports /* comment 160 */
+  (
+    /* comment 161 */ display /* comment 162 */: /* comment 163 */ flex
+      /* comment 164 */
+  )
+  /* comment 165 */ {
 }
-@supports /* comment 166 */ not /* comment 167 */ (/* comment 168 */ display /* comment 169 */: /* comment 170 */ flex /* comment 171 */) /* comment 172 */ {
+@supports /* comment 166 */ not /* comment 167 */
+  (
+    /* comment 168 */ display /* comment 169 */: /* comment 170 */ flex
+      /* comment 171 */
+  )
+  /* comment 172 */ {
 }
-@supports /* comment 173 */ (/* comment 174 */ display /* comment 175 */: /* comment 176 */ table-cell /* comment 177 */) /* comment 178 */ and /* comment 179 */ (/* comment 180 */ display /* comment 181 */: /* comment 182 */ list-item /* comment 183 */) /* comment 184 */ and /* comment 185 */ (/* comment 186 */display /* comment 187 */: /* comment 188 */ run-in /* comment 189 */) /* comment 190 */ {
+@supports /* comment 173 */
+  (
+    /* comment 174 */ display /* comment 175 */: /* comment 176 */ table-cell
+      /* comment 177 */
+  )
+  /* comment 178 */ and /* comment 179 */
+  (
+    /* comment 180 */ display /* comment 181 */: /* comment 182 */ list-item
+      /* comment 183 */
+  )
+  /* comment 184 */ and /* comment 185 */
+  (
+    /* comment 186 */ display /* comment 187 */: /* comment 188 */ run-in
+      /* comment 189 */
+  )
+  /* comment 190 */ {
 }
-@supports /* comment 191 */ (/* comment 192 */ --foo /* comment 193 */: /* comment 194 */ green /* comment 195 */) /* comment 196 */ {
+@supports /* comment 191 */
+  (
+    /* comment 192 */ --foo /* comment 193 */: /* comment 194 */ green
+      /* comment 195 */
+  )
+  /* comment 196 */ {
 }
 
 /* comment 197 */
-@supports /* comment 198 */ (/* comment 199 */ display /* comment 200 */: /* comment 201 */ flex /* comment 202 */) /* comment 203 */ {
+@supports /* comment 198 */
+  (
+    /* comment 199 */ display /* comment 200 */: /* comment 201 */ flex
+      /* comment 202 */
+  )
+  /* comment 203 */ {
   /* comment 204 */
   @media /* comment 205 */ screen /* comment 206 */ and /* comment 207 */ (/* comment 208 */ min-width /* comment 209 */: /* comment 210 */ 900px /* comment 211 */) /* comment 212 */ {
     /* comment 213 */