Update postcss to v8 (#9209)

* Update `postcss` v8

* Parser custom properties

* Improve logic

* Update lint script

* Fix node location

* Fix comments inside

* Add a test

* Test on `less` and `scss` too

* Fix empty prop print

* Clean

* Update `postcss`

* Exclude `regenerator`

* Test `no-semi`

* Add changelog

* Typo

* Apply review suggestion

* Style

* Simplify logic

* Remove error test, we don't throw on this anymore

* Style

* Update postcss

* Update postcss

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;
+  }
+}

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

@@ -1,5 +1,79 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`apply-rule.css format 1`] = `
+====================================options=====================================
+parsers: ["css"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+/* http://tabatkins.github.io/specs/css-apply-rule/#defining */
+
+:root {
+  --toolbar-theme: {
+    background-color: hsl(120, 70%, 95%);
+    border-radius: 4px;
+    border: 1px solid var(--theme-color late);
+  };
+  --toolbar-title-theme: {
+    color: green;
+  };
+}
+
+:root {
+  --without-semi: {color:red;}
+}
+
+:root {
+  --like-a-apply-rule: {
+  color:red;} /* no semi here*/
+  --another-prop: blue;
+}
+
+:root {
+  --like-a-apply-rule: {
+  color:red;} /* no semi here*/
+  --another-one-like-a-apply-rule: {
+    color:red;
+  };
+}
+
+=====================================output=====================================
+/* http://tabatkins.github.io/specs/css-apply-rule/#defining */
+
+:root {
+  --toolbar-theme: {
+    background-color: hsl(120, 70%, 95%);
+    border-radius: 4px;
+    border: 1px solid var(--theme-color late);
+  };
+  --toolbar-title-theme: {
+    color: green;
+  };
+}
+
+:root {
+  --without-semi: {
+    color: red;
+  };
+}
+
+:root {
+  --like-a-apply-rule: {
+  color:red;} /* no semi here*/
+  --another-prop: blue;
+}
+
+:root {
+  --like-a-apply-rule: {
+  color:red;} /* no semi here*/
+  --another-one-like-a-apply-rule: {
+    color:red;
+  };
+}
+
+================================================================================
+`;
+
 exports[`variables.css format 1`] = `
 ====================================options=====================================
 parsers: ["css"]

tests/css/variables/apply-rule.css

@@ -0,0 +1,30 @@
+/* http://tabatkins.github.io/specs/css-apply-rule/#defining */
+
+:root {
+  --toolbar-theme: {
+    background-color: hsl(120, 70%, 95%);
+    border-radius: 4px;
+    border: 1px solid var(--theme-color late);
+  };
+  --toolbar-title-theme: {
+    color: green;
+  };
+}
+
+:root {
+  --without-semi: {color:red;}
+}
+
+:root {
+  --like-a-apply-rule: {
+  color:red;} /* no semi here*/
+  --another-prop: blue;
+}
+
+:root {
+  --like-a-apply-rule: {
+  color:red;} /* no semi here*/
+  --another-one-like-a-apply-rule: {
+    color:red;
+  };
+}

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

@@ -367,6 +367,35 @@ foo {
 ================================================================================
 `;
 
+exports[`selectors.less format 1`] = `
+====================================options=====================================
+parsers: ["less"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+/* custom properties set & @apply rule */
+:root {
+    /* comments 192 */ --centered /* comments 193 */ : /* comments 194 */ {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    };
+}
+
+=====================================output=====================================
+/* custom properties set & @apply rule */
+:root {
+  /* comments 192 */
+  --centered /* comments 193 */ : /* comments 194 */ {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}
+
+================================================================================
+`;
+
 exports[`trailing_star_slash.less format 1`] = `
 ====================================options=====================================
 parsers: ["less"]

tests/less/comments/selectors.less

@@ -0,0 +1,8 @@
+/* custom properties set & @apply rule */
+:root {
+    /* comments 192 */ --centered /* comments 193 */ : /* comments 194 */ {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    };
+}

tests/less/custom-properties/__snapshots__/jsfmt.spec.js.snap

@@ -0,0 +1,47 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`apply-rule.less format 1`] = `
+====================================options=====================================
+parsers: ["less"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+/* http://tabatkins.github.io/specs/css-apply-rule/#defining */
+
+:root {
+  --toolbar-theme: {
+    background-color: hsl(120, 70%, 95%);
+    border-radius: 4px;
+    border: 1px solid var(--theme-color late);
+  };
+  --toolbar-title-theme: {
+    color: green;
+  };
+}
+
+:root {
+  --without-semi: {color:red;}
+}
+
+=====================================output=====================================
+/* http://tabatkins.github.io/specs/css-apply-rule/#defining */
+
+:root {
+  --toolbar-theme: {
+    background-color: hsl(120, 70%, 95%);
+    border-radius: 4px;
+    border: 1px solid var(--theme-color late);
+  }
+  --toolbar-title-theme: {
+    color: green;
+  }
+}
+
+:root {
+  --without-semi: {
+    color: red;
+  }
+}
+
+================================================================================
+`;

tests/less/custom-properties/apply-rule.less

@@ -0,0 +1,16 @@
+/* http://tabatkins.github.io/specs/css-apply-rule/#defining */
+
+:root {
+  --toolbar-theme: {
+    background-color: hsl(120, 70%, 95%);
+    border-radius: 4px;
+    border: 1px solid var(--theme-color late);
+  };
+  --toolbar-title-theme: {
+    color: green;
+  };
+}
+
+:root {
+  --without-semi: {color:red;}
+}

tests/less/custom-properties/jsfmt.spec.js

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

tests/misc/errors/less/__snapshots__/jsfmt.spec.js.snap

@@ -29,7 +29,18 @@ exports[`open-sigle-quote.less error test 1`] = `
   4 | "
 `;
 
-exports[`scss-syntax.css error test 1`] = `
+exports[`postcss-8-improment.less error test 1`] = `
+"(postcss) CssSyntaxError Missed semicolon (9:20)
+   7 | :root {
+   8 |   --empty: ;
+>  9 |   --JSON: [1, \\"2\\", {\\"three\\": {\\"a\\":1}}, [4]];
+     |                    ^
+  10 |   --javascript: function(rule) { console.log(rule) };
+  11 | }
+  12 | "
+`;
+
+exports[`scss-syntax.scss error test 1`] = `
 "(postcss) CssSyntaxError Unknown word (1:15)
 > 1 | a {content: #{$foo}}
     |               ^

tests/misc/errors/less/postcss-8-improment.less

@@ -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;
+  }
+}

tests/misc/errors/scss/__snapshots__/jsfmt.spec.js.snap

@@ -1,8 +1,19 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`less-syntax.css error test 1`] = `
+exports[`less-syntax.less error test 1`] = `
 "(postcss) CssSyntaxError Unknown word (1:4)
 > 1 | a {.bordered();}
     |    ^
   2 | "
 `;
+
+exports[`postcss-8-improment.scss error test 1`] = `
+"(postcss) CssSyntaxError Missed semicolon (9:20)
+   7 | :root {
+   8 |   --empty: ;
+>  9 |   --JSON: [1, \\"2\\", {\\"three\\": {\\"a\\":1}}, [4]];
+     |                    ^
+  10 |   --javascript: function(rule) { console.log(rule) };
+  11 | }
+  12 | "
+`;

tests/misc/errors/scss/postcss-8-improment.scss

@@ -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;
+  }
+}

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

@@ -301,6 +301,35 @@ printWidth: 80
 ================================================================================
 `;
 
+exports[`custom-properties.scss format 1`] = `
+====================================options=====================================
+parsers: ["scss"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+/* custom properties set & @apply rule */
+:root {
+    /* comments 192 */ --centered /* comments 193 */ : /* comments 194 */ {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    };
+}
+
+=====================================output=====================================
+/* custom properties set & @apply rule */
+:root {
+  /* comments 192 */
+  --centered /* comments 193 */ : /* comments 194 */ {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}
+
+================================================================================
+`;
+
 exports[`if-eslit-at-rule-decloration.scss format 1`] = `
 ====================================options=====================================
 parsers: ["scss"]

tests/scss/comments/custom-properties.scss

@@ -0,0 +1,8 @@
+/* custom properties set & @apply rule */
+:root {
+    /* comments 192 */ --centered /* comments 193 */ : /* comments 194 */ {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    };
+}

tests/scss/variables/__snapshots__/jsfmt.spec.js.snap

@@ -1,5 +1,51 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`apply-rule.scss format 1`] = `
+====================================options=====================================
+parsers: ["scss"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+/* http://tabatkins.github.io/specs/css-apply-rule/#defining */
+
+:root {
+  --toolbar-theme: {
+    background-color: hsl(120, 70%, 95%);
+    border-radius: 4px;
+    border: 1px solid var(--theme-color late);
+  };
+  --toolbar-title-theme: {
+    color: green;
+  };
+}
+
+:root {
+  --without-semi: {color:red;}
+}
+
+=====================================output=====================================
+/* http://tabatkins.github.io/specs/css-apply-rule/#defining */
+
+:root {
+  --toolbar-theme: {
+    background-color: hsl(120, 70%, 95%);
+    border-radius: 4px;
+    border: 1px solid var(--theme-color late);
+  }
+  --toolbar-title-theme: {
+    color: green;
+  }
+}
+
+:root {
+  --without-semi: {
+    color: red;
+  }
+}
+
+================================================================================
+`;
+
 exports[`variables.scss format 1`] = `
 ====================================options=====================================
 parsers: ["scss"]

tests/scss/variables/apply-rule.scss

@@ -0,0 +1,16 @@
+/* http://tabatkins.github.io/specs/css-apply-rule/#defining */
+
+:root {
+  --toolbar-theme: {
+    background-color: hsl(120, 70%, 95%);
+    border-radius: 4px;
+    border: 1px solid var(--theme-color late);
+  };
+  --toolbar-title-theme: {
+    color: green;
+  };
+}
+
+:root {
+  --without-semi: {color:red;}
+}

yarn.lock

@@ -2544,6 +2544,11 @@ color-name@~1.1.4:
   resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
   integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
 
+colorette@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/colorette/-/colorette-1.2.1.tgz#4d0b921325c14faf92633086a536db6e89564b1b"
+  integrity sha512-puCDz0CzydiSYOrnXpz/PKd69zRrribezjtE9yd4zvytoRc8+RY/KJPvtPFKZS3E3wP6neGyMe0vOTlHO5L3Pw==
+
 combined-stream@^1.0.6, combined-stream@~1.0.6:
   version "1.0.8"
   resolved "https://registry.yarnpkg.com/combined-stream/-/combined-stream-1.0.8.tgz#c3d45a8b34fd730631a110a8a2520682b31d5a7f"
@@ -5524,6 +5529,14 @@ levn@~0.3.0:
     prelude-ls "~1.1.2"
     type-check "~0.3.2"
 
+line-column@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/line-column/-/line-column-1.0.2.tgz#d25af2936b6f4849172b312e4792d1d987bc34a2"
+  integrity sha1-0lryk2tvSEkXKzEuR5LR2Ye8NKI=
+  dependencies:
+    isarray "^1.0.0"
+    isobject "^2.0.0"
+
 lines-and-columns@1.1.6, lines-and-columns@^1.1.6:
   version "1.1.6"
   resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.1.6.tgz#1c00c743b433cd0a4e80758f7b64a57440d9ff00"
@@ -5936,6 +5949,11 @@ nan@^2.12.1:
   resolved "https://registry.yarnpkg.com/nan/-/nan-2.14.1.tgz#d7be34dfa3105b91494c3147089315eff8874b01"
   integrity sha512-isWHgVjnFjh2x2yuJ/tj3JbwoHu3UC2dX5G/88Cm24yB6YopVgxvBObDY7n5xW6ExmFhJpSEQqFPvq9zaXc8Jw==
 
+nanoid@^3.1.12:
+  version "3.1.12"
+  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.1.12.tgz#6f7736c62e8d39421601e4a0c77623a97ea69654"
+  integrity sha512-1qstj9z5+x491jfiC4Nelk+f8XBad7LN20PmyWINJEMRSf3wcAjAWysw1qaA8z6NSKe2sjq1hRSDpBH5paCb6A==
+
 nanomatch@^1.2.9:
   version "1.2.13"
   resolved "https://registry.yarnpkg.com/nanomatch/-/nanomatch-1.2.13.tgz#b87a8aa4fc0de8fe6be88895b38983ff265bd119"
@@ -6562,7 +6580,17 @@ postcss-values-parser@2.0.1:
     indexes-of "^1.0.1"
     uniq "^1.0.1"
 
-postcss@7.0.32, postcss@^7.0.14, postcss@^7.0.6:
+postcss@8.0.7:
+  version "8.0.7"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.0.7.tgz#764d26d8bc64a87af6d945238ae6ef36bf6fc32d"
+  integrity sha512-LTCMGOjmC/CGWV/azk3h34u6TNj1s9p4XleEiW8yA3j+8k+z3mnv5V7yyREvWDKlkel8GxqhjEZJ+JXWTzKPWw==
+  dependencies:
+    colorette "^1.2.1"
+    line-column "^1.0.2"
+    nanoid "^3.1.12"
+    source-map "^0.6.1"
+
+postcss@^7.0.14, postcss@^7.0.6:
   version "7.0.32"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.32.tgz#4310d6ee347053da3433db2be492883d62cec59d"
   integrity sha512-03eXong5NLnNCD05xscnGKGDZ98CyzoqPSMjOe6SuoQY7Z2hIj0Ld1g/O/UQRuOle2aRtiIRDg9tDcTGAkLfKw==