Add support for SCSS (#1790)

We use a heuristic to figure out if it's a SCSS or Less file. And if it doesn't work, we try again with the other one. We do the same for JSX and TypeScript.

Fixes #1784

package.json

@@ -30,6 +30,7 @@
     "postcss": "^6.0.1",
     "postcss-less": "^1.0.0",
     "postcss-media-query-parser": "^0.2.3",
+    "postcss-scss": "1.0.0",
     "postcss-selector-parser": "^2.2.3",
     "postcss-values-parser": "git://github.com/shellscape/postcss-values-parser.git#5e351360479116f3fe309602cdd15b0a233bc29f",
     "prettier": "^1.3.1",

src/clean-ast.js

@@ -28,7 +28,9 @@ function massageAST(ast) {
 
     const newObj = {};
     for (const key in ast) {
-      newObj[key] = massageAST(ast[key]);
+      if (typeof ast[key] !== "function") {
+        newObj[key] = massageAST(ast[key]);        
+      }
     }
 
     [

src/parser.js

@@ -306,16 +306,22 @@ function parseNestedCSS(node) {
       parseNestedCSS(node[key]);
     }
     if (typeof node.selector === "string") {
-      try {
-        node.selector = parseSelector(
-          node.raws.selector ? node.raws.selector.raw : node.selector
-        );
-      } catch (e) {
-        throw createError(
-          e.toString(),
-          node.source.start.line,
-          node.source.start.column - 1
-        );
+      const selector = node.raws.selector
+        ? node.raws.selector.raw
+        : node.selector;
+
+      if (selector.trim().endsWith(":")) {
+        node.selector = selector;
+      } else {
+        try {
+          node.selector = parseSelector(selector);
+        } catch (e) {
+          throw createError(
+            "(postcss-selector-parser) " + e.toString(),
+            node.source.start.line,
+            node.source.start.column - 1
+          );
+        }
       }
     }
     if (node.type && typeof node.value === "string") {
@@ -325,7 +331,7 @@ function parseNestedCSS(node) {
         const line = +(e.toString().match(/line: ([0-9]+)/) || [1, 1])[1];
         const column = +(e.toString().match(/column ([0-9]+)/) || [0, 0])[1];
         throw createError(
-          e.toString(),
+          "(postcss-values-parser) " + e.toString(),
           node.source.start.line + line - 1,
           node.source.start.column + column + node.prop.length
         );
@@ -338,19 +344,38 @@ function parseNestedCSS(node) {
   return node;
 }
 
-function parseWithPostCSS(text) {
-  const r = require;
-  const parser = r("postcss-less");
+function parseWithPostCSSParser(parser, text) {
+  let result;
   try {
-    const result = parser.parse(text);
-    const prefixedResult = addTypePrefix(result, "css-");
-    const parsedResult = parseNestedCSS(prefixedResult);
-    return parsedResult;
+    result = parser.parse(text);
   } catch (e) {
     if (typeof e.line !== "number") {
       throw e;
     }
-    throw createError(e.name + " " + e.reason, e.line, e.column);
+    throw createError("(postcss) " + e.name + " " + e.reason, e.line, e.column);
+  }
+  const prefixedResult = addTypePrefix(result, "css-");
+  const parsedResult = parseNestedCSS(prefixedResult);
+  return parsedResult;
+}
+
+function parseWithPostCSS(text) {
+  const r = require;
+  const isLikelySCSS = text.match(/(\w\s*: [^}:]+|#){/);
+  try {
+    return parseWithPostCSSParser(
+      r(isLikelySCSS ? "postcss-scss" : "postcss-less"),
+      text
+    );
+  } catch (e) {
+    try {
+      return parseWithPostCSSParser(
+        r(isLikelySCSS ? "postcss-less" : "postcss-scss"),
+        text
+      );
+    } catch (e2) {
+      throw e;
+    }
   }
 }
 

src/printer.js

@@ -2532,7 +2532,9 @@ function genericPrintNoParens(path, options, print, args) {
       return concat([printNodeSequence(path, options, print), hardline]);
     }
     case "css-comment": {
-      return n.raws.content;
+      return n.raws.content
+        ? n.raws.content
+        : options.originalText.slice(util.locStart(n), util.locEnd(n));
     }
     case "css-rule": {
       return concat([
@@ -2558,7 +2560,16 @@ function genericPrintNoParens(path, options, print, args) {
         ": ",
         path.call(print, "value"),
         n.important ? " !important" : "",
-        ";"
+        n.nodes
+          ? concat([
+              " {",
+              indent(
+                concat([softline, printNodeSequence(path, options, print)])
+              ),
+              softline,
+              "}"
+            ])
+          : ";"
       ]);
     }
     case "css-atrule": {

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

@@ -0,0 +1,36 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`scss.css 1`] = `
+@media #{$g-breakpoint-tiny} {}
+.#{$fa-css-prefix}-glass:before { content: $fa-var-glass; }
+a {height: calc(#{$foo} + 1);}
+div {
+  background: {
+      size: auto 60%;
+      position: bottom 2px left;
+  }
+}
+a { margin: 0 { left: 10px; } }
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+@media #{$g-breakpoint-tiny} {
+
+}
+.#{$fa-css-prefix}-glass:before {
+  content: $fa-var-glass;
+}
+a {
+  height: calc(#{$foo} + 1);
+}
+div {
+  background: {
+    size: auto 60%;
+    position: bottom 2px left;
+  }
+}
+a {
+  margin: 0 {
+    left: 10px;
+  }
+}
+
+`;

tests/css_scss/jsfmt.spec.js

@@ -0,0 +1 @@
+run_spec(__dirname, { parser: "postcss" });

tests/css_scss/scss.css

@@ -0,0 +1,10 @@
+@media #{$g-breakpoint-tiny} {}
+.#{$fa-css-prefix}-glass:before { content: $fa-var-glass; }
+a {height: calc(#{$foo} + 1);}
+div {
+  background: {
+      size: auto 60%;
+      position: bottom 2px left;
+  }
+}
+a { margin: 0 { left: 10px; } }

yarn.lock

@@ -2199,6 +2199,12 @@ postcss-media-query-parser@^0.2.3:
   version "0.2.3"
   resolved "https://registry.yarnpkg.com/postcss-media-query-parser/-/postcss-media-query-parser-0.2.3.tgz#27b39c6f4d94f81b1a73b8f76351c609e5cef244"
 
+postcss-scss@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-scss/-/postcss-scss-1.0.0.tgz#4957013097973dfd5bd9b1ad8a6dc13456a5d1ba"
+  dependencies:
+    postcss "^6.0.1"
+
 postcss-selector-parser@^2.2.3:
   version "2.2.3"
   resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-2.2.3.tgz#f9437788606c3c9acee16ffe8d8b16297f27bb90"
@@ -2815,13 +2821,6 @@ typedarray@^0.0.6:
     lodash.unescape "4.0.1"
     semver "5.3.0"
 
-"typescript-eslint-parser@git://github.com/eslint/typescript-eslint-parser.git#a3610632a8bd1ee9ad4179ed01a01b7739143bf5":
-  version "3.0.0"
-  resolved "git://github.com/eslint/typescript-eslint-parser.git#a3610632a8bd1ee9ad4179ed01a01b7739143bf5"
-  dependencies:
-    lodash.unescape "4.0.1"
-    semver "5.3.0"
-
 typescript@2.3.2:
   version "2.3.2"
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-2.3.2.tgz#f0f045e196f69a72f06b25fd3bd39d01c3ce9984"