Update postcss to v8

changelog_unreleased/css/pr-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 master */
+:root {
+  --empty: ;
+  --JSON: [1, "2", {"three": {"a": 1}}, [4]];
+  --javascript: function(rule) {console.log(rule)};
+}
+
+@supports (--element(".minwidth", {"minWidth": 300})) {
+  [--self] {
+    background: greenyellow;
+  }
+}
+```

jest.config.js

@@ -23,8 +23,15 @@ if (isProduction) {
         presets: [
           [
             "@babel/env",
-            // Workaround for https://github.com/babel/babel/issues/11994
-            { loose: true },
+            {
+              targets: { node: "current" },
+              exclude: [
+                "transform-async-to-generator",
+                "transform-classes",
+                "proposal-async-generator-functions",
+                "transform-regenerator",
+              ],
+            },
           ],
         ],
       },

package.json

@@ -64,7 +64,7 @@
     "outdent": "0.7.1",
     "parse-srcset": "ikatyang/parse-srcset#54eb9c1cb21db5c62b4d0e275d7249516df6f0ee",
     "please-upgrade-node": "3.2.0",
-    "postcss": "7.0.32",
+    "postcss": "8.0.7",
     "postcss-less": "3.1.4",
     "postcss-media-query-parser": "0.2.3",
     "postcss-scss": "2.1.1",
@@ -145,7 +145,7 @@
     "lint:eslint": "cross-env EFF_NO_LINK_RULES=true eslint . --format friendly",
     "lint:changelog": "node ./scripts/lint-changelog.js",
     "lint:prettier": "prettier . \"!test*\" --check",
-    "lint:dist": "eslint --no-eslintrc --no-ignore --env=es6,browser --parser-options=ecmaVersion:2016 \"dist/!(bin-prettier|index|third-party).js\"",
+    "lint:dist": "eslint --no-eslintrc --no-ignore --env=es6,browser --parser-options=ecmaVersion:2017 \"dist/!(bin-prettier|index|third-party).js\"",
     "lint:spellcheck": "cspell \"**/*\" \".github/**/*\"",
     "lint:deps": "node ./scripts/check-deps.js",
     "fix": "run-s fix:eslint fix:prettier",

src/language-css/parser-postcss.js

@@ -300,6 +300,57 @@ function parseNestedCSS(node, options) {
       node.raws = {};
     }
 
+    // Custom properties looks like declarations
+    if (
+      options.parser === "css" &&
+      node.type === "css-decl" &&
+      typeof node.prop === "string" &&
+      node.prop.startsWith("--") &&
+      typeof node.value === "string" &&
+      node.value.startsWith("{")
+    ) {
+      let rules;
+      if (node.value.endsWith("}")) {
+        const textBefore = options.originalText.slice(
+          0,
+          node.source.start.offset
+        );
+        const nodeText =
+          "a".repeat(node.prop.length) +
+          options.originalText.slice(
+            node.source.start.offset + node.prop.length,
+            node.source.end.offset + 1
+          );
+        const fakeContent = textBefore.replace(/[^\n]/g, " ") + nodeText;
+        let ast;
+        try {
+          ast = parseCss(fakeContent, [], { ...options });
+        } catch (_) {
+          // noop
+        }
+        if (
+          ast &&
+          ast.nodes &&
+          ast.nodes.length === 1 &&
+          ast.nodes[0].type === "css-rule"
+        ) {
+          rules = ast.nodes[0].nodes;
+        }
+      }
+      if (rules) {
+        node.value = {
+          type: "css-rule",
+          nodes: rules,
+        };
+      } else {
+        node.value = {
+          type: "value-unknown",
+          value: node.raws.value.raw,
+        };
+      }
+      return node;
+    }
+
     let selector = "";
 
     if (typeof node.selector === "string") {
@@ -594,6 +645,7 @@ function parseWithParser(parse, text, options) {
     throw createError("(postcss) " + e.name + " " + e.reason, { start: e });
   }
 
+  options.originalText = text;
   result = parseNestedCSS(addTypePrefix(result, "css-"), options);
 
   calculateLoc(result, text);

src/language-css/printer-postcss.js

@@ -121,7 +121,9 @@ function genericPrint(path, options, print) {
               node.selector.type === "selector-unknown" &&
               lastLineHasInlineComment(node.selector.value)
                 ? line
-                : " ",
+                : node.selector
+                ? " "
+                : "",
               "{",
               node.nodes.length > 0
                 ? indent(
@@ -141,6 +143,8 @@ function genericPrint(path, options, print) {
       const { between: rawBetween } = node.raws;
       const trimmedBetween = rawBetween.trim();
       const isColon = trimmedBetween === ":";
+      const isValueAllSpace =
+        typeof node.value === "string" && /^ *$/.test(node.value);
 
       let value = hasComposesNode(node)
         ? removeLines(path.call(print, "value"))
@@ -155,7 +159,7 @@ function genericPrint(path, options, print) {
         insideICSSRuleNode(path) ? node.prop : maybeToLowerCase(node.prop),
         trimmedBetween.startsWith("//") ? " " : "",
         trimmedBetween,
-        node.extend ? "" : " ",
+        node.extend || isValueAllSpace ? "" : " ",
         options.parser === "less" && node.extend && node.selector
           ? concat(["extend(", path.call(print, "selector"), ")"])
           : "",

tests/css/comments/__snapshots__/jsfmt.spec.js.snap

@@ -304,6 +304,44 @@ printWidth: 80
 ================================================================================
 `;
 
+exports[`custom-properties.css format 1`] = `
+====================================options=====================================
+parsers: ["css"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+   /* comment 1 */
+       :root {
+  /* comment 2 */
+  --prop : {
+  /* comment 3 */
+color/* comment 4 */: /* comment 5 */#fff/* comment 6 */;/* comment 7 */
+  /* comment 8 */
+font-size: 12px;
+  /* comment 9 */
+  };
+  /* comment 10 */
+}
+     /* comment 11 */
+
+=====================================output=====================================
+/* comment 1 */
+:root {
+  /* comment 2 */
+  --prop: {
+    /* comment 3 */
+    color/* comment 4 */: /* comment 5 */ #fff /* comment 6 */; /* comment 7 */
+    /* comment 8 */
+    font-size: 12px;
+    /* comment 9 */
+  };
+  /* comment 10 */
+}
+/* comment 11 */
+
+================================================================================
+`;
+
 exports[`declaration.css format 1`] = `
 ====================================options=====================================
 parsers: ["css"]
@@ -887,11 +925,11 @@ article /* comment 168 */ :--heading /* comment 169 */ + /* comment 170 */ p /*
 /* custom properties set & @apply rule */
 :root {
   /* comments 192 */
-  --centered /* comments 193 */ : /* comments 194 */ {
+  --centered/* comments 193 */ : /* comments 194 */ {
     display: flex;
     align-items: center;
     justify-content: center;
-  }
+  };
 }
 
 ================================================================================

tests/css/comments/custom-properties.css

@@ -0,0 +1,13 @@
+   /* comment 1 */
+       :root {
+  /* comment 2 */
+  --prop : {
+  /* comment 3 */
+color/* comment 4 */: /* comment 5 */#fff/* comment 6 */;/* comment 7 */
+  /* comment 8 */
+font-size: 12px;
+  /* comment 9 */
+  };
+  /* comment 10 */
+}
+     /* comment 11 */

tests/css/postcss-8-improment/__snapshots__/jsfmt.spec.js.snap

@@ -0,0 +1,71 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`empty-props.css format 1`] = `
+====================================options=====================================
+parsers: ["css"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+:root {
+  --empty:;
+     --one-space: ;
+  --two-space:  ;
+--many-space:       ;
+}
+
+=====================================output=====================================
+:root {
+  --empty:;
+  --one-space: ;
+  --two-space:  ;
+  --many-space:       ;
+}
+
+================================================================================
+`;
+
+exports[`test.css format 1`] = `
+====================================options=====================================
+parsers: ["css"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+/*
+This test is copied from \`postcss@8\` release note
+
+https://github.com/postcss/postcss/releases/tag/8.0.0
+*/
+
+:root {
+  --empty: ;
+  --JSON: [1, "2", {"three": {"a":1}}, [4]];
+  --javascript: function(rule) { console.log(rule) };
+}
+
+@supports (--element(".minwidth", { "minWidth": 300 })) {
+  [--self] {
+    background: greenyellow;
+  }
+}
+
+=====================================output=====================================
+/*
+This test is copied from \`postcss@8\` release note
+
+https://github.com/postcss/postcss/releases/tag/8.0.0
+*/
+
+:root {
+  --empty: ;
+  --JSON: [1, "2", {"three": {"a": 1}}, [4]];
+  --javascript: function(rule) {console.log(rule)};
+}
+
+@supports (--element(".minwidth", {"minWidth": 300})) {
+  [--self] {
+    background: greenyellow;
+  }
+}
+
+================================================================================
+`;

tests/css/postcss-8-improment/empty-props.css

@@ -0,0 +1,6 @@
+:root {
+  --empty:;
+     --one-space: ;
+  --two-space:  ;
+--many-space:       ;
+}

tests/css/postcss-8-improment/jsfmt.spec.js

@@ -0,0 +1 @@
+run_spec(__dirname, ["css"]);

tests/css/postcss-8-improment/test.css

@@ -0,0 +1,17 @@
+/*
+This test is copied from `postcss@8` release note
+
+https://github.com/postcss/postcss/releases/tag/8.0.0
+*/
+
+:root {
+  --empty: ;
+  --JSON: [1, "2", {"three": {"a":1}}, [4]];
+  --javascript: function(rule) { console.log(rule) };
+}
+
+@supports (--element(".minwidth", { "minWidth": 300 })) {
+  [--self] {
+    background: greenyellow;
+  }
+}