Update postcss-scss to v3 (#9210)

fisker · web-flow · commit 9efeb8309e1b · 2020-09-27T08:49:16.000+08:00
diff --git a/package.json b/package.json
@@ -67,7 +67,7 @@
     "postcss": "8.0.9",
     "postcss-less": "3.1.4",
     "postcss-media-query-parser": "0.2.3",
-    "postcss-scss": "2.1.1",
+    "postcss-scss": "3.0.1",
     "postcss-selector-parser": "2.2.3",
     "postcss-values-parser": "2.0.1",
     "regexp-util": "1.2.2",
diff --git a/src/language-css/clean.js b/src/language-css/clean.js
@@ -95,6 +95,9 @@ function clean(ast, newObj, parent) {
   if (ast.type === "value-number") {
     newObj.unit = newObj.unit.toLowerCase();
   }
+  if (ast.type === "value-unknown") {
+    newObj.value = newObj.value.replace(/;$/g, "");
+  }
 
   if (
     (ast.type === "media-feature" ||
diff --git a/src/language-css/parser-postcss.js b/src/language-css/parser-postcss.js
@@ -302,7 +302,7 @@ function parseNestedCSS(node, options) {
 
     // Custom properties looks like declarations
     if (
-      options.parser === "css" &&
+      (options.parser === "css" || options.parser === "scss") &&
       node.type === "css-decl" &&
       typeof node.prop === "string" &&
       node.prop.startsWith("--") &&
@@ -322,9 +322,15 @@ function parseNestedCSS(node, options) {
             node.source.end.offset + 1
           );
         const fakeContent = textBefore.replace(/[^\n]/g, " ") + nodeText;
+        let parse;
+        if (options.parser === "scss") {
+          parse = parseScss;
+        } else if (options.parser === "css") {
+          parse = parseCss;
+        }
         let ast;
         try {
-          ast = parseCss(fakeContent, [], { ...options });
+          ast = parse(fakeContent, [], { ...options });
         } catch (_) {
           // noop
         }
diff --git a/src/language-css/printer-postcss.js b/src/language-css/printer-postcss.js
@@ -245,6 +245,11 @@ function genericPrint(path, options, print) {
           ]);
         }
       }
+      const isImportUnknownValueEndsWithSemiColon =
+        node.name === "import" &&
+        node.params &&
+        node.params.type === "value-unknown" &&
+        node.params.value.endsWith(";");
 
       return concat([
         "@",
@@ -313,7 +318,8 @@ function genericPrint(path, options, print) {
               softline,
               "}",
             ])
-          : isTemplatePlaceholderNodeWithoutSemiColon
+          : isTemplatePlaceholderNodeWithoutSemiColon ||
+            isImportUnknownValueEndsWithSemiColon
           ? ""
           : ";",
       ]);
diff --git a/tests/misc/errors/scss/__snapshots__/jsfmt.spec.js.snap b/tests/misc/errors/scss/__snapshots__/jsfmt.spec.js.snap
@@ -6,14 +6,3 @@ exports[`less-syntax.less error test 1`] = `
     |    ^
   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 | "
-`;
diff --git a/tests/scss/comments/__snapshots__/jsfmt.spec.js.snap b/tests/scss/comments/__snapshots__/jsfmt.spec.js.snap
@@ -320,11 +320,11 @@ printWidth: 80
 /* 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;
-  }
+  };
 }
 
 ================================================================================
diff --git a/tests/scss/variables/__snapshots__/jsfmt.spec.js.snap b/tests/scss/variables/__snapshots__/jsfmt.spec.js.snap
@@ -23,6 +23,20 @@ printWidth: 80
   --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 */
 
@@ -31,15 +45,75 @@ printWidth: 80
     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[`postcss-8-improment.scss format 1`] = `
+====================================options=====================================
+parsers: ["scss"]
+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;
   }
 }
 
diff --git a/tests/scss/variables/apply-rule.scss b/tests/scss/variables/apply-rule.scss
@@ -14,3 +14,17 @@
 :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;
+  };
+}
diff --git a/tests/scss/variables/postcss-8-improment.scss b/tests/scss/variables/postcss-8-improment.scss
diff --git a/yarn.lock b/yarn.lock
@@ -6555,12 +6555,12 @@ postcss-media-query-parser@0.2.3:
   resolved "https://registry.yarnpkg.com/postcss-media-query-parser/-/postcss-media-query-parser-0.2.3.tgz#27b39c6f4d94f81b1a73b8f76351c609e5cef244"
   integrity sha1-J7Ocb02U+Bsac7j3Y1HGCeXO8kQ=
 
-postcss-scss@2.1.1:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/postcss-scss/-/postcss-scss-2.1.1.tgz#ec3a75fa29a55e016b90bf3269026c53c1d2b383"
-  integrity sha512-jQmGnj0hSGLd9RscFw9LyuSVAa5Bl1/KBPqG1NQw9w8ND55nY4ZEsdlVuYJvLPpV+y0nwTV5v/4rHPzZRihQbA==
+postcss-scss@3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/postcss-scss/-/postcss-scss-3.0.1.tgz#174745f0ca1fda2ddb7d2a5e5d60fa74db3cbd48"
+  integrity sha512-gEri2aZT2Nwjbbqn0x9SoNHPL3QmswiTPEYS8Cc+kLivP3edPmNJgnENHRhUup8fF9xTpbqHRItBybGGpskj8w==
   dependencies:
-    postcss "^7.0.6"
+    postcss "^8.0.7"
 
 postcss-selector-parser@2.2.3:
   version "2.2.3"
@@ -6580,7 +6580,7 @@ postcss-values-parser@2.0.1:
     indexes-of "^1.0.1"
     uniq "^1.0.1"
 
-postcss@8.0.9:
+postcss@8.0.9, postcss@^8.0.7:
   version "8.0.9"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.0.9.tgz#d112fc1e8bbed550657901550fa736ae3dd25ec5"
   integrity sha512-9Ikq03Hvb/L6dgnOtNOUbcgg9Rsff5uKrI1TyNTQ2ALpa6psZk1Ar3/Hhxv2Q0rECRGDxtcMUTZIQglXozlrDQ==
@@ -6590,7 +6590,7 @@ postcss@8.0.9:
     nanoid "^3.1.12"
     source-map "^0.6.1"
 
-postcss@^7.0.14, postcss@^7.0.6:
+postcss@^7.0.14:
   version "7.0.32"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.32.tgz#4310d6ee347053da3433db2be492883d62cec59d"
   integrity sha512-03eXong5NLnNCD05xscnGKGDZ98CyzoqPSMjOe6SuoQY7Z2hIj0Ld1g/O/UQRuOle2aRtiIRDg9tDcTGAkLfKw==

Original file line number	Diff line number	Diff line change
`@@ -95,6 +95,9 @@ function clean(ast, newObj, parent) {`
`95`	`95`	`if (ast.type === "value-number") {`
`96`	`96`	`newObj.unit = newObj.unit.toLowerCase();`
`97`	`97`	`}`
	`98`	`+ if (ast.type === "value-unknown") {`
	`99`	`+ newObj.value = newObj.value.replace(/;$/g, "");`
	`100`	`+ }`
`98`	`101`
`99`	`102`	`if (`
`100`	`103`	`(ast.type === "media-feature" \|\|`