diff --git a/changelog_unreleased/css/pr-7933.md b/changelog_unreleased/css/pr-7933.md
new file mode 100644
index 000000000..9f7d24878
--- /dev/null
+++ b/changelog_unreleased/css/pr-7933.md
@@ -0,0 +1,41 @@
+#### [BREAKING] Add the pure `css` parser (#7933, #9092, #9093 by @fisker)
+
+Previously, when `--parser=css` was passed, Prettier tried to parse the content using `postcss-scss` and `postcss-less`. This caused confusion, and made syntax errors difficult to spot. Now `--parser=css` works only with the vanilla CSS syntax.
+
+_If you use `parser="css"` for your `.less`/`.scss` files, update it to the correct parser or remove the `parser` option to let Prettier auto-detect the parser by the file extension._
+
+<!-- prettier-ignore -->
+```less
+/* Input */
+/* Less Syntax with `--parser=css` */
+a {.bordered();}
+
+/* Prettier stable */
+/* Less Syntax with `--parser=css` */
+a {
+  .bordered();
+}
+
+/* Prettier master */
+SyntaxError: (postcss) CssSyntaxError Unknown word (2:4)
+  1 | /* Less Syntax with `--parser=css` */
+> 2 | a {.bordered();}
+```
+
+<!-- prettier-ignore -->
+```scss
+/* Input */
+/* Scss Syntax with `--parser=css` */
+::before {content: #{$foo}}
+
+/* Prettier stable */
+/* Scss Syntax with `--parser=css` */
+::before {
+  content: #{$foo};
+}
+
+/* Prettier master */
+SyntaxError: (postcss) CssSyntaxError Unknown word (2:22)
+  1 | /* Scss Syntax with `--parser=css` */
+> 2 | ::before {content: #{$foo}}
+```
diff --git a/docs/options.md b/docs/options.md
index 9dc4220f9..273d33391 100644
--- a/docs/options.md
+++ b/docs/options.md
@@ -212,9 +212,9 @@ Valid options:
 - `"flow"` (via [flow-parser](https://github.com/facebook/flow/tree/master/src/parser))
 - `"typescript"` (via [@typescript-eslint/typescript-estree](https://github.com/typescript-eslint/typescript-eslint)) _First available in v1.4.0_
 - `"espree"` (via [espree](https://github.com/eslint/espree)) _First available in v2.2.0_
-- `"css"` (via [postcss-scss](https://github.com/postcss/postcss-scss) and [postcss-less](https://github.com/shellscape/postcss-less), autodetects which to use) _First available in v1.7.1_
-- `"scss"` (same parsers as `"css"`, prefers postcss-scss) _First available in v1.7.1_
-- `"less"` (same parsers as `"css"`, prefers postcss-less) _First available in v1.7.1_
+- `"css"` (via [postcss](https://github.com/postcss/postcss)) _First available in v1.7.1_
+- `"scss"` (via [postcss-scss](https://github.com/postcss/postcss-scss)) _First available in v1.7.1_
+- `"less"` (via [postcss-less](https://github.com/shellscape/postcss-less) _First available in v1.7.1_
 - `"json"` (via [@babel/parser parseExpression](https://babeljs.io/docs/en/next/babel-parser.html#babelparserparseexpressioncode-options)) _First available in v1.5.0_
 - `"json5"` (same parser as `"json"`, but outputs as [json5](https://json5.org/)) _First available in v1.13.0_
 - `"json-stringify"` (same parser as `"json"`, but outputs like `JSON.stringify`) _First available in v1.13.0_
diff --git a/package.json b/package.json
index 384ff6ab3..a396190c5 100644
--- a/package.json
+++ b/package.json
@@ -66,9 +66,10 @@
     "outdent": "0.7.1",
     "parse-srcset": "ikatyang/parse-srcset#54eb9c1cb21db5c62b4d0e275d7249516df6f0ee",
     "please-upgrade-node": "3.2.0",
-    "postcss-less": "3.1.4",
+    "postcss": "8.1.4",
+    "postcss-less": "4.0.0",
     "postcss-media-query-parser": "0.2.3",
-    "postcss-scss": "2.1.1",
+    "postcss-scss": "3.0.2",
     "postcss-selector-parser": "2.2.3",
     "postcss-values-parser": "2.0.1",
     "regexp-util": "1.2.2",
diff --git a/scripts/build/shims/fs.mjs b/scripts/build/shims/fs.mjs
index 26a5b26c2..2ee6ac3c9 100644
--- a/scripts/build/shims/fs.mjs
+++ b/scripts/build/shims/fs.mjs
@@ -1,3 +1,2 @@
 export const existsSync = () => false;
 export const readFileSync = () => "";
-export default { existsSync, readFileSync };
diff --git a/scripts/build/shims/path.mjs b/scripts/build/shims/path.mjs
index 85c8fe123..558f820cc 100644
--- a/scripts/build/shims/path.mjs
+++ b/scripts/build/shims/path.mjs
@@ -1,2 +1 @@
 export * from "path-browserify";
-export { default } from "path-browserify";
diff --git a/src/language-css/clean.js b/src/language-css/clean.js
index 500742594..a288aa440 100644
--- a/src/language-css/clean.js
+++ b/src/language-css/clean.js
@@ -93,6 +93,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
index b2974fe26..39d88fab9 100644
--- a/src/language-css/parser-postcss.js
+++ b/src/language-css/parser-postcss.js
@@ -6,8 +6,6 @@ const { hasPragma } = require("./pragma");
 const {
   hasSCSSInterpolation,
   hasStringOrFunction,
-  isLessParser,
-  isSCSS,
   isSCSSNestedPropertyNode,
   isSCSSVariable,
   stringifyNode,
@@ -42,7 +40,7 @@ function parseValueNode(valueNode, options) {
     const node = nodes[i];
 
     if (
-      isSCSS(options.parser, node.value) &&
+      options.parser === "scss" &&
       node.type === "number" &&
       node.unit === ".." &&
       node.value[node.value.length - 1] === "."
@@ -82,7 +80,8 @@ function parseValueNode(valueNode, options) {
       // Stringify if the value parser can't handle the content.
       if (
         hasSCSSInterpolation(groupList) ||
-        (!hasStringOrFunction(groupList) && !isSCSSVariable(groupList[0]))
+        (!hasStringOrFunction(groupList) &&
+          !isSCSSVariable(groupList[0], options))
       ) {
         const stringifiedContent = stringifyNode({
           groups: node.group.groups,
@@ -302,6 +301,64 @@ function parseNestedCSS(node, options) {
       node.raws = {};
     }
 
+    // Custom properties looks like declarations
+    if (
+      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 parse;
+        if (options.parser === "scss") {
+          parse = parseScss;
+        } else if (options.parser === "less") {
+          parse = parseLess;
+        } else {
+          parse = parseCss;
+        }
+        let ast;
+        try {
+          ast = parse(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") {
@@ -372,7 +429,7 @@ function parseNestedCSS(node, options) {
       }
 
       // Check on SCSS nested property
-      if (isSCSSNestedPropertyNode(node)) {
+      if (isSCSSNestedPropertyNode(node, options)) {
         node.isSCSSNesterProperty = true;
       }
 
@@ -415,7 +472,7 @@ function parseNestedCSS(node, options) {
     }
 
     if (
-      isLessParser(options) &&
+      options.parser === "less" &&
       node.type === "css-decl" &&
       value.startsWith("extend(")
     ) {
@@ -432,7 +489,7 @@ function parseNestedCSS(node, options) {
     }
 
     if (node.type === "css-atrule") {
-      if (isLessParser(options)) {
+      if (options.parser === "less") {
         // mixin
         if (node.mixin) {
           const source =
@@ -462,7 +519,7 @@ function parseNestedCSS(node, options) {
         return node;
       }
 
-      if (isLessParser(options)) {
+      if (options.parser === "less") {
         // postcss-less doesn't recognize variables in some cases.
         // `@color: blue;` is recognized fine, but the cases below aren't:
 
@@ -601,6 +658,7 @@ function parseWithParser(parse, text, options) {
     throw createError(`${name}: ${reason}`, { start: { line, column } });
   }
 
+  options.originalText = text;
   result = parseNestedCSS(addTypePrefix(result, "css-"), options);
 
   calculateLoc(result, text);
@@ -616,26 +674,9 @@ function parseWithParser(parse, text, options) {
   return result;
 }
 
-// TODO: make this only work on css
 function parseCss(text, parsers, options) {
-  const isSCSSParser = isSCSS(options.parser, text);
-  const parseFunctions = isSCSSParser
-    ? [parseScss, parseLess]
-    : [parseLess, parseScss];
-
-  let error;
-  for (const parse of parseFunctions) {
-    try {
-      return parse(text, parsers, options);
-    } catch (parseError) {
-      error = error || parseError;
-    }
-  }
-
-  /* istanbul ignore next */
-  if (error) {
-    throw error;
-  }
+  const { parse } = require("postcss");
+  return parseWithParser(parse, text, options);
 }
 
 function parseLess(text, parsers, options) {
diff --git a/src/language-css/printer-postcss.js b/src/language-css/printer-postcss.js
index 4818f6241..1f10689e9 100644
--- a/src/language-css/printer-postcss.js
+++ b/src/language-css/printer-postcss.js
@@ -38,9 +38,7 @@ const {
   insideURLFunctionInImportAtRuleNode,
   isKeyframeAtRuleKeywords,
   isWideKeywords,
-  isSCSS,
   isLastNode,
-  isLessParser,
   isSCSSControlDirectiveNode,
   isDetachedRulesetDeclarationNode,
   isRelationalOperatorNode,
@@ -122,7 +120,9 @@ function genericPrint(path, options, print) {
               node.selector.type === "selector-unknown" &&
               lastLineHasInlineComment(node.selector.value)
                 ? line
-                : " ",
+                : node.selector
+                ? " "
+                : "",
               "{",
               node.nodes.length > 0
                 ? indent(
@@ -142,6 +142,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"))
@@ -156,8 +158,8 @@ function genericPrint(path, options, print) {
         insideICSSRuleNode(path) ? node.prop : maybeToLowerCase(node.prop),
         trimmedBetween.startsWith("//") ? " " : "",
         trimmedBetween,
-        node.extend ? "" : " ",
-        isLessParser(options) && node.extend && node.selector
+        node.extend || isValueAllSpace ? "" : " ",
+        options.parser === "less" && node.extend && node.selector
           ? concat(["extend(", path.call(print, "selector"), ")"])
           : "",
         value,
@@ -201,7 +203,7 @@ function genericPrint(path, options, print) {
         !parentNode.raws.semicolon &&
         options.originalText[locEnd(node) - 1] !== ";";
 
-      if (isLessParser(options)) {
+      if (options.parser === "less") {
         if (node.mixin) {
           return concat([
             path.call(print, "selector"),
@@ -242,6 +244,11 @@ function genericPrint(path, options, print) {
           ]);
         }
       }
+      const isImportUnknownValueEndsWithSemiColon =
+        node.name === "import" &&
+        node.params &&
+        node.params.type === "value-unknown" &&
+        node.params.value.endsWith(";");
 
       return concat([
         "@",
@@ -277,7 +284,7 @@ function genericPrint(path, options, print) {
               concat([
                 " ",
                 path.call(print, "value"),
-                isSCSSControlDirectiveNode(node)
+                isSCSSControlDirectiveNode(node, options)
                   ? hasParensAroundNode(node)
                     ? " "
                     : line
@@ -289,7 +296,7 @@ function genericPrint(path, options, print) {
           : "",
         node.nodes
           ? concat([
-              isSCSSControlDirectiveNode(node)
+              isSCSSControlDirectiveNode(node, options)
                 ? ""
                 : (node.selector &&
                     !node.selector.nodes &&
@@ -310,7 +317,8 @@ function genericPrint(path, options, print) {
               softline,
               "}",
             ])
-          : isTemplatePlaceholderNodeWithoutSemiColon
+          : isTemplatePlaceholderNodeWithoutSemiColon ||
+            isImportUnknownValueEndsWithSemiColon
           ? ""
           : ";",
       ]);
@@ -534,7 +542,8 @@ function genericPrint(path, options, print) {
           declAncestorProp.startsWith("grid-template"));
       const atRuleAncestorNode = getAncestorNode(path, "css-atrule");
       const isControlDirective =
-        atRuleAncestorNode && isSCSSControlDirectiveNode(atRuleAncestorNode);
+        atRuleAncestorNode &&
+        isSCSSControlDirectiveNode(atRuleAncestorNode, options);
 
       const printed = path.map(print, "groups");
       const parts = [];
@@ -853,7 +862,7 @@ function genericPrint(path, options, print) {
         return group(indent(fill(res)));
       }
 
-      const isSCSSMapItem = isSCSSMapItemNode(path);
+      const isSCSSMapItem = isSCSSMapItemNode(path, options);
 
       const lastItem = node.groups[node.groups.length - 1];
       const isLastItemComment = lastItem && lastItem.type === "value-comment";
@@ -892,7 +901,7 @@ function genericPrint(path, options, print) {
           ),
           ifBreak(
             !isLastItemComment &&
-              isSCSS(options.parser, options.originalText) &&
+              options.parser === "scss" &&
               isSCSSMapItem &&
               shouldPrintComma(options)
               ? ","
diff --git a/src/language-css/utils.js b/src/language-css/utils.js
index c94814de3..1e02bbbc4 100644
--- a/src/language-css/utils.js
+++ b/src/language-css/utils.js
@@ -86,16 +86,13 @@ function hasStringOrFunction(groupList) {
   return false;
 }
 
-function isSCSS(parser, text) {
-  const hasExplicitParserChoice = parser === "less" || parser === "scss";
-  const IS_POSSIBLY_SCSS = /(\w\s*:\s*[^:}]+|#){|@import[^\n]+(?:url|,)/;
-  return hasExplicitParserChoice
-    ? parser === "scss"
-    : IS_POSSIBLY_SCSS.test(text);
-}
-
-function isSCSSVariable(node) {
-  return !!(node && node.type === "word" && node.value.startsWith("$"));
+function isSCSSVariable(node, options) {
+  return (
+    options.parser === "scss" &&
+    node &&
+    node.type === "word" &&
+    node.value.startsWith("$")
+  );
 }
 
 function isWideKeywords(value) {
@@ -256,14 +253,19 @@ function isRelationalOperatorNode(node) {
   );
 }
 
-function isSCSSControlDirectiveNode(node) {
+function isSCSSControlDirectiveNode(node, options) {
   return (
+    options.parser === "scss" &&
     node.type === "css-atrule" &&
     ["if", "else", "for", "each", "while"].includes(node.name)
   );
 }
 
-function isSCSSNestedPropertyNode(node) {
+function isSCSSNestedPropertyNode(node, options) {
+  if (options.parser !== "scss") {
+    return false;
+  }
+
   /* istanbul ignore next */
   if (!node.selector) {
     return false;
@@ -341,7 +343,11 @@ function isKeyValuePairInParenGroupNode(node) {
   );
 }
 
-function isSCSSMapItemNode(path) {
+function isSCSSMapItemNode(path, options) {
+  if (options.parser !== "scss") {
+    return false;
+  }
+
   const node = path.getValue();
 
   // Ignore empty item (i.e. `$key: ()`)
@@ -415,11 +421,6 @@ function isColorAdjusterFuncNode(node) {
   return colorAdjusterFunctions.has(node.value.toLowerCase());
 }
 
-// TODO: only check `less` when we don't use `less` to parse `css`
-function isLessParser(options) {
-  return options.parser === "css" || options.parser === "less";
-}
-
 function lastLineHasInlineComment(text) {
   return /\/\//.test(text.split(/[\n\r]/).pop());
 }
@@ -474,10 +475,8 @@ module.exports = {
   insideURLFunctionInImportAtRuleNode,
   isKeyframeAtRuleKeywords,
   isWideKeywords,
-  isSCSS,
   isSCSSVariable,
   isLastNode,
-  isLessParser,
   isSCSSControlDirectiveNode,
   isDetachedRulesetDeclarationNode,
   isRelationalOperatorNode,
diff --git a/tests/css/atrule/__snapshots__/jsfmt.spec.js.snap b/tests/css/atrule/__snapshots__/jsfmt.spec.js.snap
index 55209b323..5495e1fe0 100644
--- a/tests/css/atrule/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/css/atrule/__snapshots__/jsfmt.spec.js.snap
@@ -919,301 +919,6 @@ printWidth: 80
 ================================================================================
 `;
 
-exports[`each.css format 1`] = `
-====================================options=====================================
-parsers: ["css"]
-printWidth: 80
-                                                                                | printWidth
-=====================================input======================================
-@each $animal in puma, sea-slug, egret, salamander {}
-@each $animal in puma,sea-slug,egret,salamander{}
-@each  $animal  in  puma  ,  sea-slug  ,  egret  ,  salamander  {}
-@each $animal in
-    puma, sea-slug, egret, salamander {}
-@each
-    $animal
-    in
-    puma
-    ,
-    sea-slug
-    ,
-    egret
-    ,
-    salamander
-    {
-    }
-@each
-$animal
-in
-puma
-,
-sea-slug
-,
-egret
-,
-salamander
-{
-}
-@each
-
-$animal
-
-in
-
-puma
-
-,
-
-sea-slug
-
-,
-
-egret
-
-,
-
-salamander
-
-{
-
-}
-@each $animal in ((puma), (sea-slug), (egret), (salamander)) {}
-@each $animal in((puma),(sea-slug),(egret),(salamander)){}
-@each  $animal  in  (  (  puma  )  ,  (  sea-slug  )  ,  (  egret  )  ,  (  salamander  )  )  {}
-@each $animal
-    in ((puma), (sea-slug), (egret), (salamander)) {}
-@each
-    $animal
-    in (
-        (puma),
-        (sea-slug),
-        (egret),
-        (salamander)
-    ) {  }
-@each
-    $animal
-    in
-    (
-    (
-    puma
-    )
-    ,
-    (
-    sea-slug
-    )
-    ,
-    (
-    egret
-    )
-    ,
-    (
-    salamander
-    )
-    )
-    {
-    }
-@each
-
-    $animal
-
-    in
-
-    (
-
-    (
-
-    puma
-
-    )
-
-    ,
-
-    (
-
-    sea-slug
-
-    )
-
-    ,
-
-    (
-
-    egret
-
-    )
-
-    ,
-
-    (
-
-    salamander
-
-    )
-
-    )
-
-    {
-
-    }
-@each $animal, $color, $cursor in (puma, black, default), (sea-slug, blue, pointer), (egret, white, move) {}
-@each $animal,$color,$cursor in (puma,black,default),(sea-slug,blue,pointer),(egret,white,move){}
-@each $animal, $color, $cursor in
-    (puma, black, default),
-    (sea-slug, blue, pointer),
-    (egret, white, move) {}
-@each $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var in puma, sea-slug, egret, salamander {}
-@each $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var, $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var1, $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var-2 in (puma, black, default), (sea-slug, blue, pointer), (egret, white, move) {}
-@each $element, $size in (h1: 20px, h2: 16px, h3: 14px) {}
-@each $element,$size in(h1:20px,h2:16px,h3:14px){}
-@each  $element  ,  $size  in  (  h1  :  20px  ,  h2  :  16px  ,  h3  :  14px  )  {}
-@each $element,
-    $size in (h1: 20px, h2: 16px, h3: 14px) {}
-@each
-    $element,
-    $size
-    in
-    (
-    h1
-    :
-    20px
-    ,
-    h2
-    :
-    16px
-    ,
-    h3
-    :
-    14px
-    )
-    {
-    }
-@each
-$element,
-$size
-in
-(
-h1
-:
-20px
-,
-h2
-:
-16px
-,
-h3
-:
-14px
-)
-{
-}
-@each
-$element,
-
-$size
-
-in
-
-(
-
-h1
-
-:
-
-20px
-
-,
-
-h2
-
-:
-
-16px
-
-,
-
-h3
-
-:
-
-14px
-
-)
-
-{
-
-}
-
-=====================================output=====================================
-@each $animal in puma, sea-slug, egret, salamander {
-}
-@each $animal in puma, sea-slug, egret, salamander {
-}
-@each $animal in puma, sea-slug, egret, salamander {
-}
-@each $animal in puma, sea-slug, egret, salamander {
-}
-@each $animal in puma, sea-slug, egret, salamander {
-}
-@each $animal in puma, sea-slug, egret, salamander {
-}
-@each $animal in puma, sea-slug, egret, salamander {
-}
-@each $animal in ((puma), (sea-slug), (egret), (salamander)) {
-}
-@each $animal in((puma), (sea-slug), (egret), (salamander)) {
-}
-@each $animal in ((puma), (sea-slug), (egret), (salamander)) {
-}
-@each $animal in ((puma), (sea-slug), (egret), (salamander)) {
-}
-@each $animal in ((puma), (sea-slug), (egret), (salamander)) {
-}
-@each $animal in ((puma), (sea-slug), (egret), (salamander)) {
-}
-@each $animal in ((puma), (sea-slug), (egret), (salamander)) {
-}
-@each $animal, $color, $cursor in (puma, black, default),
-  (sea-slug, blue, pointer), (egret, white, move)
-{
-}
-@each $animal, $color, $cursor in (puma, black, default),
-  (sea-slug, blue, pointer), (egret, white, move)
-{
-}
-@each $animal, $color, $cursor in (puma, black, default),
-  (sea-slug, blue, pointer), (egret, white, move)
-{
-}
-@each $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var
-    in puma,
-  sea-slug, egret, salamander
-{
-}
-@each $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var,
-  $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var1,
-  $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var-2
-    in (puma, black, default),
-  (sea-slug, blue, pointer), (egret, white, move)
-{
-}
-@each $element, $size in (h1: 20px, h2: 16px, h3: 14px) {
-}
-@each $element, $size in(h1: 20px, h2: 16px, h3: 14px) {
-}
-@each $element, $size in (h1: 20px, h2: 16px, h3: 14px) {
-}
-@each $element, $size in (h1: 20px, h2: 16px, h3: 14px) {
-}
-@each $element, $size in (h1: 20px, h2: 16px, h3: 14px) {
-}
-@each $element, $size in (h1: 20px, h2: 16px, h3: 14px) {
-}
-@each $element, $size in (h1: 20px, h2: 16px, h3: 14px) {
-}
-
-================================================================================
-`;
-
 exports[`extend.css format 1`] = `
 ====================================options=====================================
 parsers: ["css"]
@@ -1699,116 +1404,6 @@ nice-style
 ================================================================================
 `;
 
-exports[`for.css format 1`] = `
-====================================options=====================================
-parsers: ["css"]
-printWidth: 80
-                                                                                | printWidth
-=====================================input======================================
-@for $i from 1 through 8 {}
-@for $i from 1 through 8{}
-@for  $i  from  1  through  8  {}
-@for  $i
-from
-1
-through
-8
-{}
-@for
-$i
-from
-1
-through
-8
-{}
-@for
-$i
-from
-1
-through
-8
-{}
-@for
-
-$i
-
-from
-
-1
-
-through
-
-8
-
-{}
-@for $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var from 1 through 5 {}
-@for $i from $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var1 through 5 {}
-@for $i from 1 through $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var-2 {}
-@for $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var from $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var1 through $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var-2 {}
-@for $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var from $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var1 end $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var-2 {}
-@for $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var from ($var1 + $var1) through ($var-2 + $var-2) {}
-@for $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var from ($very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var1 + $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var1) through ($very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var-2 + $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var-2) {}
-
-=====================================output=====================================
-@for $i from 1 through 8 {
-}
-@for $i from 1 through 8 {
-}
-@for $i from 1 through 8 {
-}
-@for $i from 1 through 8 {
-}
-@for $i from 1 through 8 {
-}
-@for $i from 1 through 8 {
-}
-@for $i from 1 through 8 {
-}
-@for $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var
-  from 1
-  through 5
-{
-}
-@for $i
-  from $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var1
-  through 5
-{
-}
-@for $i
-  from 1
-  through $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var-2
-{
-}
-@for $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var
-  from $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var1
-  through $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var-2
-{
-}
-@for $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var
-  from $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var1
-  end $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var-2
-{
-}
-@for $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var
-  from ($var1 + $var1)
-  through ($var-2 + $var-2)
-{
-}
-@for $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var
-  from (
-    $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var1 +
-      $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var1
-  )
-  through (
-    $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var-2 +
-      $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var-2
-  )
-{
-}
-
-================================================================================
-`;
-
 exports[`function.css format 1`] = `
 ====================================options=====================================
 parsers: ["css"]
@@ -1942,293 +1537,6 @@ $args
 ================================================================================
 `;
 
-exports[`if-else.css format 1`] = `
-====================================options=====================================
-parsers: ["css"]
-printWidth: 80
-                                                                                | printWidth
-=====================================input======================================
-@if $media == phonePortrait {
-    $k: .15625;
-} @else if $media == phoneLandscape {
-    $k: .08803;
-} @else if $media == tabletPortrait {
-    $k: .065106;
-}
-p {
-    @if $type == ocean {}
-    @if $type==ocean{}
-    @if  $type  ==  ocean  {}
-    @if $type
-        == ocean {}
-    @if
-    $type
-    ==
-    ocean
-    {
-    }
-    @if
-
-    $type
-
-    ==
-
-    ocean
-
-    {
-
-    }
-    @if (($type) == (ocean)) {}
-    @if (($type)==(ocean)){}
-    @if  (  (  $type  )  ==  (  ocean  )  )  {}
-    @if (($type)
-        == (ocean)) {}
-    @if
-    (
-    (
-    $type
-    )
-    ==
-    (
-    ocean
-    )
-    )
-    {
-    }
-    @if
-
-    (
-
-    (
-
-    $type
-
-    )
-
-    ==
-
-    (
-
-    ocean
-
-    )
-
-    )
-
-    {
-
-    }
-    @if $type == ocean {
-        color: blue;
-    } @else if $type == matador {
-        color: red;
-    } @else if $type == monster {
-        color: green;
-    } @else {
-        color: black;
-    }
-    @if $type == ocean {
-    } @else if $type == matador {
-    }
-    @if $type==ocean{}@else if $type==matador{}
-    @if  $type  ==  ocean  {  }  @else  if  $type  ==  matador  {  }
-    @if $type == ocean {}
-    @else if $type == matador {}
-    @if
-        $type == ocean {}
-    @else if
-        $type == matador {}
-    @if
-        $type
-        ==
-        ocean
-        {
-        }
-    @else
-        if
-        $type
-        ==
-        matador
-        {
-        }
-    @if
-
-        $type
-
-        ==
-
-        ocean
-
-        {
-
-        }
-
-    @else
-
-        if
-
-        $type
-
-        ==
-
-        matador
-
-        {
-
-        }
-    @if $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-variables == $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-variables {
-        color: blue;
-    } @else if $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-variables == $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-variables {
-        color: red;
-    } @else if $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-variables == $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-variables {
-        color: green;
-    } @else {
-        color: black;
-    }
-    @if $very-very-very-long-var == 0 and $very-very-very-long-var == 0 {}
-    @if $very-very-very-very-very-very-long-var == 0 and $very-very-very-long-var == 0 {}
-    @if $very-very-very-very-very-very-very-very-very-very-very-long-var == 0 and $very-very-very-very-very-very-very-very-very-very-very-long-var == 0 {}
-    @if $base-font-size != 16px or $base-line-height != 24px or $base-unit != 'em' or $h1-font-size != 2 * $base-font-size or $h2-font-size != 1.5 * $base-font-size or $h3-font-size != 1.17 * $base-font-size or $h4-font-size != 1 * $base-font-size or $h5-font-size != 0.83 * $base-font-size or $h6-font-size != 0.67 * $base-font-size or $indent-amount != 40px {}
-    @if (str-slice($item, 0, 1) == ":") {}
-    @if (str-slice($item, 0, 3) == " : ") {}
-    @if ($type == ocean) {} @else if ($type == matador) {} @else {}
-}
-
-=====================================output=====================================
-@if $media == phonePortrait {
-  $k: 0.15625;
-} @else if $media == phoneLandscape {
-  $k: 0.08803;
-} @else if $media == tabletPortrait {
-  $k: 0.065106;
-}
-p {
-  @if $type == ocean {
-  }
-  @if $type==ocean {
-  }
-  @if $type == ocean {
-  }
-  @if $type == ocean {
-  }
-  @if $type == ocean {
-  }
-  @if $type == ocean {
-  }
-  @if (($type) == (ocean)) {
-  }
-  @if (($type) ==(ocean)) {
-  }
-  @if (($type) == (ocean)) {
-  }
-  @if (($type) == (ocean)) {
-  }
-  @if (($type) == (ocean)) {
-  }
-  @if (($type) == (ocean)) {
-  }
-  @if $type == ocean {
-    color: blue;
-  } @else if $type == matador {
-    color: red;
-  } @else if $type == monster {
-    color: green;
-  } @else {
-    color: black;
-  }
-  @if $type == ocean {
-  } @else if $type == matador {
-  }
-  @if $type==ocean {
-  } @else if $type==matador {
-  }
-  @if $type == ocean {
-  } @else if $type == matador {
-  }
-  @if $type == ocean {
-  } @else if $type == matador {
-  }
-  @if $type == ocean {
-  } @else if $type == matador {
-  }
-  @if $type == ocean {
-  } @else if $type == matador {
-  }
-  @if $type == ocean {
-  } @else if $type == matador {
-  }
-  @if $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-variables ==
-    $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-variables
-  {
-    color: blue;
-  } @else if
-    $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-variables ==
-    $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-variables
-  {
-    color: red;
-  } @else if
-    $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-variables ==
-    $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-variables
-  {
-    color: green;
-  } @else {
-    color: black;
-  }
-  @if $very-very-very-long-var == 0 and $very-very-very-long-var == 0 {
-  }
-  @if $very-very-very-very-very-very-long-var ==
-    0 and
-    $very-very-very-long-var ==
-    0
-  {
-  }
-  @if $very-very-very-very-very-very-very-very-very-very-very-long-var ==
-    0 and
-    $very-very-very-very-very-very-very-very-very-very-very-long-var ==
-    0
-  {
-  }
-  @if $base-font-size !=
-    16px or
-    $base-line-height !=
-    24px or
-    $base-unit !=
-    "em" or
-    $h1-font-size !=
-    2 *
-    $base-font-size or
-    $h2-font-size !=
-    1.5 *
-    $base-font-size or
-    $h3-font-size !=
-    1.17 *
-    $base-font-size or
-    $h4-font-size !=
-    1 *
-    $base-font-size or
-    $h5-font-size !=
-    0.83 *
-    $base-font-size or
-    $h6-font-size !=
-    0.67 *
-    $base-font-size or
-    $indent-amount !=
-    40px
-  {
-  }
-  @if (str-slice($item, 0, 1) == ":") {
-  }
-  @if (str-slice($item, 0, 3) == " : ") {
-  }
-  @if ($type == ocean) {
-  } @else if ($type == matador) {
-  } @else {
-  }
-}
-
-================================================================================
-`;
-
 exports[`import.css format 1`] = `
 ====================================options=====================================
 parsers: ["css"]
@@ -2413,228 +1721,6 @@ $family: unquote("Droid+Sans");
 ================================================================================
 `;
 
-exports[`include.css format 1`] = `
-====================================options=====================================
-parsers: ["css"]
-printWidth: 80
-                                                                                | printWidth
-=====================================input======================================
-@include mix(1px, 2px, $arg2: 10, 2px 4px 6px);
-@include mix(1px,2px,$arg2:10,2px 4px 6px);
-@include mix ( 1px , 2px , $arg2 : 10 , 2px 4px 6px );
-@include mix  (  1px  ,  2px  , $arg2  :  10  ,  2px  4px  6px  );
-@include mix(
-    1px,
-    2px,
-    $arg2: 10,
-    2px  4px  6px
-);
-@include
-mix(
-    1px,
-    2px,
-    $arg2: 10,
-    2px  4px  6px
-);
-@include
-mix
-(
-1px
-,
-2px
-,
-$arg2
-:
-10
-,
-2px
-4px
-6px
-)
-;
-@include
-
-mix
-
-(
-
-1px
-
-,
-
-2px
-
-,
-
-$arg2
-
-:
-
-10
-
-,
-
-2px
-
-4px
-
-6px
-
-)
-
-;
-@include mix($very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-arg: 1px, $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-arg1: 2px, $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-arg2: 10, 2px 4px 6px);
-a {
-    @include global-variable-overriding;
-    @include mix($very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-arg: 1px, $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-arg1: 2px, $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-arg2: 10, 2px 4px 6px);
-    @include apply-to-ie6-only {}
-    @include apply-to-ie6-only{}
-    @include apply-to-ie6-only
-        {}
-    @include
-        apply-to-ie6-only
-        {
-        }
-    @include
-
-        apply-to-ie6-only
-
-        {
-
-        }
-}
-
-a {
-@include section-type-1(
-$header: (margin: 0 0 $margin-base, text-align: left),
-$decoration: (type: base, margin: 0 auto -1px 0, primary-color: $brand-primary, secondary-color: $gray-light),
-$title: (margin: 0 0 $margin-small, color: false, font-size: $font-size-h3, font-weight: false, line-height: $line-height-h3)
-);
-}
-
-a {
-@include item-spotlight-properties-transition(
-"-title",
-(box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15))
-);
-}
-
-a {
-@include item-spotlight-properties-transition(
-"-title",
-(
-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15),
-border-color: $brand-primary
-)
-);
-}
-
-a {
-@include item-spotlight-properties-transition(
-"-title",
-(
-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15),
-border-color: $very-very-very-very-very-very-very-very-very-very-very-very-very-long-value
-)
-);
-}
-
-=====================================output=====================================
-@include mix(1px, 2px, $arg2: 10, 2px 4px 6px);
-@include mix(1px, 2px, $arg2: 10, 2px 4px 6px);
-@include mix(1px, 2px, $arg2: 10, 2px 4px 6px);
-@include mix(1px, 2px, $arg2: 10, 2px 4px 6px);
-@include mix(1px, 2px, $arg2: 10, 2px 4px 6px);
-@include mix(1px, 2px, $arg2: 10, 2px 4px 6px);
-@include mix(1px, 2px, $arg2: 10, 2px 4px 6px);
-@include mix(1px, 2px, $arg2: 10, 2px 4px 6px);
-@include mix(
-  $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-arg:
-    1px,
-  $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-arg1:
-    2px,
-  $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-arg2:
-    10,
-  2px 4px 6px
-);
-a {
-  @include global-variable-overriding;
-  @include mix(
-    $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-arg:
-      1px,
-    $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-arg1:
-      2px,
-    $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-arg2:
-      10,
-    2px 4px 6px
-  );
-  @include apply-to-ie6-only {
-  }
-  @include apply-to-ie6-only {
-  }
-  @include apply-to-ie6-only {
-  }
-  @include apply-to-ie6-only {
-  }
-  @include apply-to-ie6-only {
-  }
-}
-
-a {
-  @include section-type-1(
-    $header: (
-      margin: 0 0 $margin-base,
-      text-align: left,
-    ),
-    $decoration: (
-      type: base,
-      margin: 0 auto -1px 0,
-      primary-color: $brand-primary,
-      secondary-color: $gray-light,
-    ),
-    $title: (
-      margin: 0 0 $margin-small,
-      color: false,
-      font-size: $font-size-h3,
-      font-weight: false,
-      line-height: $line-height-h3,
-    )
-  );
-}
-
-a {
-  @include item-spotlight-properties-transition(
-    "-title",
-    (
-      box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15),
-    )
-  );
-}
-
-a {
-  @include item-spotlight-properties-transition(
-    "-title",
-    (
-      box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15),
-      border-color: $brand-primary,
-    )
-  );
-}
-
-a {
-  @include item-spotlight-properties-transition(
-    "-title",
-    (
-      box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15),
-      border-color:
-        $very-very-very-very-very-very-very-very-very-very-very-very-very-long-value,
-    )
-  );
-}
-
-================================================================================
-`;
-
 exports[`keyframes.css format 1`] = `
 ====================================options=====================================
 parsers: ["css"]
@@ -4669,198 +3755,3 @@ max-width
 
 ================================================================================
 `;
-
-exports[`while.css format 1`] = `
-====================================options=====================================
-parsers: ["css"]
-printWidth: 80
-                                                                                | printWidth
-=====================================input======================================
-@while $i > 0 {}
-@while $i>0{}
-@while  $i  >  0  {}
-@while $i
-    >
-    0
-    {}
-@while
-    $i
-    >
-    0
-    {}
-@while
-$i
->
-0
-{
-}
-@while
-
-$i
-
->
-
-0
-
-{
-
-}
-@while ($i > 0) {}
-@while ($i>0){}
-@while ( $i > 0 ) {}
-@while  (  $i  >  0  )  {}
-@while (
-    $i > 0
-) {}
-@while
-    ($i > 0) {}
-@while
-(
-$i
->
-0
-)
-{
-}
-@while
-
-(
-
-$i
-
->
-
-0
-
-)
-
-{
-
-}
-@while $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var > 1 {}
-@while 1 > $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var {}
-@while $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var > $other-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var {}
-@while (($i) > (0)) {}
-@while (($i)>(0)){}
-@while  (  (  $i  )  >  (  0  )  )  {}
-@while (($i)
-    >
-    (0)
-) {}
-@while
-(
-(
-$i
-)
->
-(
-0
-)
-)
-{
-}
-@while
-
-(
-
-(
-
-$i
-
-)
-
->
-
-(
-
-0
-
-)
-
-)
-
-{
-
-}
-@while ($very-very-very-very-very-very-very-very-very-very-very-very-long-var > 1) {}
-@while (1 > $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var) {}
-@while ($very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var > 1) {}
-@while ($very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var > $other-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var) {}
-
-=====================================output=====================================
-@while $i > 0 {
-}
-@while $i>0 {
-}
-@while $i > 0 {
-}
-@while $i > 0 {
-}
-@while $i > 0 {
-}
-@while $i > 0 {
-}
-@while $i > 0 {
-}
-@while ($i > 0) {
-}
-@while ($i>0) {
-}
-@while ($i > 0) {
-}
-@while ($i > 0) {
-}
-@while ($i > 0) {
-}
-@while ($i > 0) {
-}
-@while ($i > 0) {
-}
-@while ($i > 0) {
-}
-@while $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var >
-  1
-{
-}
-@while 1 >
-  $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var
-{
-}
-@while $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var >
-  $other-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var
-{
-}
-@while (($i) > (0)) {
-}
-@while (($i) >(0)) {
-}
-@while (($i) > (0)) {
-}
-@while (($i) > (0)) {
-}
-@while (($i) > (0)) {
-}
-@while (($i) > (0)) {
-}
-@while (
-  $very-very-very-very-very-very-very-very-very-very-very-very-long-var > 1
-) {
-}
-@while (
-  1 >
-    $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var
-) {
-}
-@while (
-  $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var >
-    1
-) {
-}
-@while (
-  $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var >
-    $other-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var
-) {
-}
-
-================================================================================
-`;
diff --git a/tests/css/comments/__snapshots__/jsfmt.spec.js.snap b/tests/css/comments/__snapshots__/jsfmt.spec.js.snap
index af5a18338..2dd272a13 100644
--- a/tests/css/comments/__snapshots__/jsfmt.spec.js.snap
+++ b/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;
-  }
+  };
 }
 
 ================================================================================
diff --git a/tests/css/comments/custom-properties.css b/tests/css/comments/custom-properties.css
new file mode 100644
index 000000000..03119bfe1
--- /dev/null
+++ b/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 */
diff --git a/tests/css/inline-url/__snapshots__/jsfmt.spec.js.snap b/tests/css/inline-url/__snapshots__/jsfmt.spec.js.snap
index 05ccdfdf1..6943d7409 100644
--- a/tests/css/inline-url/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/css/inline-url/__snapshots__/jsfmt.spec.js.snap
@@ -107,7 +107,7 @@ printWidth: 80
 
 .validUnquotedUrlsThatAreParsedBySass {
   background: url($foo);
-  background: url($foo + $bar);
+  background: url($foo+$bar);
   background: url($foo*3);
   background: url($foo/$bar);
 }
diff --git a/tests/css/postcss-8-improment/__snapshots__/jsfmt.spec.js.snap b/tests/css/postcss-8-improment/__snapshots__/jsfmt.spec.js.snap
new file mode 100644
index 000000000..8d6e26db3
--- /dev/null
+++ b/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;
+  }
+}
+
+================================================================================
+`;
diff --git a/tests/css/postcss-8-improment/empty-props.css b/tests/css/postcss-8-improment/empty-props.css
new file mode 100644
index 000000000..172a41d5f
--- /dev/null
+++ b/tests/css/postcss-8-improment/empty-props.css
@@ -0,0 +1,6 @@
+:root {
+  --empty:;
+     --one-space: ;
+  --two-space:  ;
+--many-space:       ;
+}
diff --git a/tests/css/postcss-8-improment/jsfmt.spec.js b/tests/css/postcss-8-improment/jsfmt.spec.js
new file mode 100644
index 000000000..7d3726c81
--- /dev/null
+++ b/tests/css/postcss-8-improment/jsfmt.spec.js
@@ -0,0 +1 @@
+run_spec(__dirname, ["css"]);
diff --git a/tests/css/postcss-8-improment/test.css b/tests/css/postcss-8-improment/test.css
new file mode 100644
index 000000000..d269083a9
--- /dev/null
+++ b/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;
+  }
+}
diff --git a/tests/css/variables/__snapshots__/jsfmt.spec.js.snap b/tests/css/variables/__snapshots__/jsfmt.spec.js.snap
index ea1a54c90..61e7ec4fb 100644
--- a/tests/css/variables/__snapshots__/jsfmt.spec.js.snap
+++ b/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"]
diff --git a/tests/css/variables/apply-rule.css b/tests/css/variables/apply-rule.css
new file mode 100644
index 000000000..56c04e2c2
--- /dev/null
+++ b/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;
+  };
+}
diff --git a/tests/less/comments/__snapshots__/jsfmt.spec.js.snap b/tests/less/comments/__snapshots__/jsfmt.spec.js.snap
index ba0123c2a..883269135 100644
--- a/tests/less/comments/__snapshots__/jsfmt.spec.js.snap
+++ b/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"]
diff --git a/tests/less/comments/selectors.less b/tests/less/comments/selectors.less
new file mode 100644
index 000000000..3817d248d
--- /dev/null
+++ b/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;
+    };
+}
diff --git a/tests/less/custom-properties/__snapshots__/jsfmt.spec.js.snap b/tests/less/custom-properties/__snapshots__/jsfmt.spec.js.snap
new file mode 100644
index 000000000..0060b9c67
--- /dev/null
+++ b/tests/less/custom-properties/__snapshots__/jsfmt.spec.js.snap
@@ -0,0 +1,75 @@
+// 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;}
+}
+
+: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;
+  };
+}
+
+================================================================================
+`;
diff --git a/tests/less/custom-properties/apply-rule.less b/tests/less/custom-properties/apply-rule.less
new file mode 100644
index 000000000..56c04e2c2
--- /dev/null
+++ b/tests/less/custom-properties/apply-rule.less
@@ -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;
+  };
+}
diff --git a/tests/less/custom-properties/jsfmt.spec.js b/tests/less/custom-properties/jsfmt.spec.js
new file mode 100644
index 000000000..73b809901
--- /dev/null
+++ b/tests/less/custom-properties/jsfmt.spec.js
@@ -0,0 +1 @@
+run_spec(__dirname, ["less"]);
diff --git a/tests/less/postcss-8-improment/__snapshots__/jsfmt.spec.js.snap b/tests/less/postcss-8-improment/__snapshots__/jsfmt.spec.js.snap
new file mode 100644
index 000000000..075f3bd93
--- /dev/null
+++ b/tests/less/postcss-8-improment/__snapshots__/jsfmt.spec.js.snap
@@ -0,0 +1,71 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`empty-props.less format 1`] = `
+====================================options=====================================
+parsers: ["less"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+:root {
+  --empty:;
+     --one-space: ;
+  --two-space:  ;
+--many-space:       ;
+}
+
+=====================================output=====================================
+:root {
+  --empty:;
+  --one-space: ;
+  --two-space:  ;
+  --many-space:       ;
+}
+
+================================================================================
+`;
+
+exports[`test.less format 1`] = `
+====================================options=====================================
+parsers: ["less"]
+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/less/postcss-8-improment/empty-props.less b/tests/less/postcss-8-improment/empty-props.less
new file mode 100644
index 000000000..172a41d5f
--- /dev/null
+++ b/tests/less/postcss-8-improment/empty-props.less
@@ -0,0 +1,6 @@
+:root {
+  --empty:;
+     --one-space: ;
+  --two-space:  ;
+--many-space:       ;
+}
diff --git a/tests/less/postcss-8-improment/jsfmt.spec.js b/tests/less/postcss-8-improment/jsfmt.spec.js
new file mode 100644
index 000000000..73b809901
--- /dev/null
+++ b/tests/less/postcss-8-improment/jsfmt.spec.js
@@ -0,0 +1 @@
+run_spec(__dirname, ["less"]);
diff --git a/tests/less/postcss-8-improment/test.less b/tests/less/postcss-8-improment/test.less
new file mode 100644
index 000000000..d269083a9
--- /dev/null
+++ b/tests/less/postcss-8-improment/test.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;
+  }
+}
diff --git a/tests/misc/errors/css/__snapshots__/jsfmt.spec.js.snap b/tests/misc/errors/css/__snapshots__/jsfmt.spec.js.snap
new file mode 100644
index 000000000..a9d360798
--- /dev/null
+++ b/tests/misc/errors/css/__snapshots__/jsfmt.spec.js.snap
@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`less-syntax.css error test 1`] = `
+"CssSyntaxError: Unknown word (1:4)
+> 1 | a {.bordered();}
+    |    ^
+  2 | "
+`;
+
+exports[`scss-syntax.css error test 1`] = `
+"CssSyntaxError: Unknown word (1:15)
+> 1 | a {content: #{$foo}}
+    |               ^
+  2 | "
+`;
diff --git a/tests/misc/errors/css/jsfmt.spec.js b/tests/misc/errors/css/jsfmt.spec.js
new file mode 100644
index 000000000..7d3726c81
--- /dev/null
+++ b/tests/misc/errors/css/jsfmt.spec.js
@@ -0,0 +1 @@
+run_spec(__dirname, ["css"]);
diff --git a/tests/misc/errors/css/less-syntax.css b/tests/misc/errors/css/less-syntax.css
new file mode 100644
index 000000000..c093b5027
--- /dev/null
+++ b/tests/misc/errors/css/less-syntax.css
@@ -0,0 +1 @@
+a {.bordered();}
diff --git a/tests/misc/errors/css/scss-syntax.css b/tests/misc/errors/css/scss-syntax.css
new file mode 100644
index 000000000..b3d023332
--- /dev/null
+++ b/tests/misc/errors/css/scss-syntax.css
@@ -0,0 +1 @@
+a {content: #{$foo}}
diff --git a/tests/misc/errors/less/__snapshots__/jsfmt.spec.js.snap b/tests/misc/errors/less/__snapshots__/jsfmt.spec.js.snap
index ae6a1f615..ed13d724b 100644
--- a/tests/misc/errors/less/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/misc/errors/less/__snapshots__/jsfmt.spec.js.snap
@@ -28,3 +28,10 @@ exports[`open-sigle-quote.less error test 1`] = `
   3 | }
   4 | "
 `;
+
+exports[`scss-syntax.scss error test 1`] = `
+"CssSyntaxError: Unknown word (1:15)
+> 1 | a {content: #{$foo}}
+    |               ^
+  2 | "
+`;
diff --git a/tests/misc/errors/less/scss-syntax.scss b/tests/misc/errors/less/scss-syntax.scss
new file mode 100644
index 000000000..b3d023332
--- /dev/null
+++ b/tests/misc/errors/less/scss-syntax.scss
@@ -0,0 +1 @@
+a {content: #{$foo}}
diff --git a/tests/misc/errors/scss/__snapshots__/jsfmt.spec.js.snap b/tests/misc/errors/scss/__snapshots__/jsfmt.spec.js.snap
new file mode 100644
index 000000000..2f92777e6
--- /dev/null
+++ b/tests/misc/errors/scss/__snapshots__/jsfmt.spec.js.snap
@@ -0,0 +1,8 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`less-syntax.less error test 1`] = `
+"CssSyntaxError: Unknown word (1:4)
+> 1 | a {.bordered();}
+    |    ^
+  2 | "
+`;
diff --git a/tests/misc/errors/scss/jsfmt.spec.js b/tests/misc/errors/scss/jsfmt.spec.js
new file mode 100644
index 000000000..539bde086
--- /dev/null
+++ b/tests/misc/errors/scss/jsfmt.spec.js
@@ -0,0 +1 @@
+run_spec(__dirname, ["scss"]);
diff --git a/tests/misc/errors/scss/less-syntax.less b/tests/misc/errors/scss/less-syntax.less
new file mode 100644
index 000000000..c093b5027
--- /dev/null
+++ b/tests/misc/errors/scss/less-syntax.less
@@ -0,0 +1 @@
+a {.bordered();}
diff --git a/tests/scss/atrule/__snapshots__/jsfmt.spec.js.snap b/tests/scss/atrule/__snapshots__/jsfmt.spec.js.snap
new file mode 100644
index 000000000..e78630a3f
--- /dev/null
+++ b/tests/scss/atrule/__snapshots__/jsfmt.spec.js.snap
@@ -0,0 +1,1110 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`each.scss format 1`] = `
+====================================options=====================================
+parsers: ["scss"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+@each $animal in puma, sea-slug, egret, salamander {}
+@each $animal in puma,sea-slug,egret,salamander{}
+@each  $animal  in  puma  ,  sea-slug  ,  egret  ,  salamander  {}
+@each $animal in
+    puma, sea-slug, egret, salamander {}
+@each
+    $animal
+    in
+    puma
+    ,
+    sea-slug
+    ,
+    egret
+    ,
+    salamander
+    {
+    }
+@each
+$animal
+in
+puma
+,
+sea-slug
+,
+egret
+,
+salamander
+{
+}
+@each
+
+$animal
+
+in
+
+puma
+
+,
+
+sea-slug
+
+,
+
+egret
+
+,
+
+salamander
+
+{
+
+}
+@each $animal in ((puma), (sea-slug), (egret), (salamander)) {}
+@each $animal in((puma),(sea-slug),(egret),(salamander)){}
+@each  $animal  in  (  (  puma  )  ,  (  sea-slug  )  ,  (  egret  )  ,  (  salamander  )  )  {}
+@each $animal
+    in ((puma), (sea-slug), (egret), (salamander)) {}
+@each
+    $animal
+    in (
+        (puma),
+        (sea-slug),
+        (egret),
+        (salamander)
+    ) {  }
+@each
+    $animal
+    in
+    (
+    (
+    puma
+    )
+    ,
+    (
+    sea-slug
+    )
+    ,
+    (
+    egret
+    )
+    ,
+    (
+    salamander
+    )
+    )
+    {
+    }
+@each
+
+    $animal
+
+    in
+
+    (
+
+    (
+
+    puma
+
+    )
+
+    ,
+
+    (
+
+    sea-slug
+
+    )
+
+    ,
+
+    (
+
+    egret
+
+    )
+
+    ,
+
+    (
+
+    salamander
+
+    )
+
+    )
+
+    {
+
+    }
+@each $animal, $color, $cursor in (puma, black, default), (sea-slug, blue, pointer), (egret, white, move) {}
+@each $animal,$color,$cursor in (puma,black,default),(sea-slug,blue,pointer),(egret,white,move){}
+@each $animal, $color, $cursor in
+    (puma, black, default),
+    (sea-slug, blue, pointer),
+    (egret, white, move) {}
+@each $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var in puma, sea-slug, egret, salamander {}
+@each $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var, $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var1, $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var-2 in (puma, black, default), (sea-slug, blue, pointer), (egret, white, move) {}
+@each $element, $size in (h1: 20px, h2: 16px, h3: 14px) {}
+@each $element,$size in(h1:20px,h2:16px,h3:14px){}
+@each  $element  ,  $size  in  (  h1  :  20px  ,  h2  :  16px  ,  h3  :  14px  )  {}
+@each $element,
+    $size in (h1: 20px, h2: 16px, h3: 14px) {}
+@each
+    $element,
+    $size
+    in
+    (
+    h1
+    :
+    20px
+    ,
+    h2
+    :
+    16px
+    ,
+    h3
+    :
+    14px
+    )
+    {
+    }
+@each
+$element,
+$size
+in
+(
+h1
+:
+20px
+,
+h2
+:
+16px
+,
+h3
+:
+14px
+)
+{
+}
+@each
+$element,
+
+$size
+
+in
+
+(
+
+h1
+
+:
+
+20px
+
+,
+
+h2
+
+:
+
+16px
+
+,
+
+h3
+
+:
+
+14px
+
+)
+
+{
+
+}
+
+=====================================output=====================================
+@each $animal in puma, sea-slug, egret, salamander {
+}
+@each $animal in puma, sea-slug, egret, salamander {
+}
+@each $animal in puma, sea-slug, egret, salamander {
+}
+@each $animal in puma, sea-slug, egret, salamander {
+}
+@each $animal in puma, sea-slug, egret, salamander {
+}
+@each $animal in puma, sea-slug, egret, salamander {
+}
+@each $animal in puma, sea-slug, egret, salamander {
+}
+@each $animal in ((puma), (sea-slug), (egret), (salamander)) {
+}
+@each $animal in((puma), (sea-slug), (egret), (salamander)) {
+}
+@each $animal in ((puma), (sea-slug), (egret), (salamander)) {
+}
+@each $animal in ((puma), (sea-slug), (egret), (salamander)) {
+}
+@each $animal in ((puma), (sea-slug), (egret), (salamander)) {
+}
+@each $animal in ((puma), (sea-slug), (egret), (salamander)) {
+}
+@each $animal in ((puma), (sea-slug), (egret), (salamander)) {
+}
+@each $animal, $color, $cursor in (puma, black, default),
+  (sea-slug, blue, pointer), (egret, white, move)
+{
+}
+@each $animal, $color, $cursor in (puma, black, default),
+  (sea-slug, blue, pointer), (egret, white, move)
+{
+}
+@each $animal, $color, $cursor in (puma, black, default),
+  (sea-slug, blue, pointer), (egret, white, move)
+{
+}
+@each $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var
+    in puma,
+  sea-slug, egret, salamander
+{
+}
+@each $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var,
+  $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var1,
+  $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var-2
+    in (puma, black, default),
+  (sea-slug, blue, pointer), (egret, white, move)
+{
+}
+@each $element, $size in (h1: 20px, h2: 16px, h3: 14px) {
+}
+@each $element, $size in(h1: 20px, h2: 16px, h3: 14px) {
+}
+@each $element, $size in (h1: 20px, h2: 16px, h3: 14px) {
+}
+@each $element, $size in (h1: 20px, h2: 16px, h3: 14px) {
+}
+@each $element, $size in (h1: 20px, h2: 16px, h3: 14px) {
+}
+@each $element, $size in (h1: 20px, h2: 16px, h3: 14px) {
+}
+@each $element, $size in (h1: 20px, h2: 16px, h3: 14px) {
+}
+
+================================================================================
+`;
+
+exports[`for.scss format 1`] = `
+====================================options=====================================
+parsers: ["scss"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+@for $i from 1 through 8 {}
+@for $i from 1 through 8{}
+@for  $i  from  1  through  8  {}
+@for  $i
+from
+1
+through
+8
+{}
+@for
+$i
+from
+1
+through
+8
+{}
+@for
+$i
+from
+1
+through
+8
+{}
+@for
+
+$i
+
+from
+
+1
+
+through
+
+8
+
+{}
+@for $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var from 1 through 5 {}
+@for $i from $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var1 through 5 {}
+@for $i from 1 through $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var-2 {}
+@for $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var from $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var1 through $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var-2 {}
+@for $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var from $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var1 end $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var-2 {}
+@for $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var from ($var1 + $var1) through ($var-2 + $var-2) {}
+@for $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var from ($very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var1 + $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var1) through ($very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var-2 + $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var-2) {}
+
+=====================================output=====================================
+@for $i from 1 through 8 {
+}
+@for $i from 1 through 8 {
+}
+@for $i from 1 through 8 {
+}
+@for $i from 1 through 8 {
+}
+@for $i from 1 through 8 {
+}
+@for $i from 1 through 8 {
+}
+@for $i from 1 through 8 {
+}
+@for $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var
+  from 1
+  through 5
+{
+}
+@for $i
+  from $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var1
+  through 5
+{
+}
+@for $i
+  from 1
+  through $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var-2
+{
+}
+@for $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var
+  from $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var1
+  through $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var-2
+{
+}
+@for $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var
+  from $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var1
+  end $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var-2
+{
+}
+@for $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var
+  from ($var1 + $var1)
+  through ($var-2 + $var-2)
+{
+}
+@for $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var
+  from (
+    $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var1 +
+      $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var1
+  )
+  through (
+    $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var-2 +
+      $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var-2
+  )
+{
+}
+
+================================================================================
+`;
+
+exports[`if-else.scss format 1`] = `
+====================================options=====================================
+parsers: ["scss"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+@if $media == phonePortrait {
+    $k: .15625;
+} @else if $media == phoneLandscape {
+    $k: .08803;
+} @else if $media == tabletPortrait {
+    $k: .065106;
+}
+p {
+    @if $type == ocean {}
+    @if $type==ocean{}
+    @if  $type  ==  ocean  {}
+    @if $type
+        == ocean {}
+    @if
+    $type
+    ==
+    ocean
+    {
+    }
+    @if
+
+    $type
+
+    ==
+
+    ocean
+
+    {
+
+    }
+    @if (($type) == (ocean)) {}
+    @if (($type)==(ocean)){}
+    @if  (  (  $type  )  ==  (  ocean  )  )  {}
+    @if (($type)
+        == (ocean)) {}
+    @if
+    (
+    (
+    $type
+    )
+    ==
+    (
+    ocean
+    )
+    )
+    {
+    }
+    @if
+
+    (
+
+    (
+
+    $type
+
+    )
+
+    ==
+
+    (
+
+    ocean
+
+    )
+
+    )
+
+    {
+
+    }
+    @if $type == ocean {
+        color: blue;
+    } @else if $type == matador {
+        color: red;
+    } @else if $type == monster {
+        color: green;
+    } @else {
+        color: black;
+    }
+    @if $type == ocean {
+    } @else if $type == matador {
+    }
+    @if $type==ocean{}@else if $type==matador{}
+    @if  $type  ==  ocean  {  }  @else  if  $type  ==  matador  {  }
+    @if $type == ocean {}
+    @else if $type == matador {}
+    @if
+        $type == ocean {}
+    @else if
+        $type == matador {}
+    @if
+        $type
+        ==
+        ocean
+        {
+        }
+    @else
+        if
+        $type
+        ==
+        matador
+        {
+        }
+    @if
+
+        $type
+
+        ==
+
+        ocean
+
+        {
+
+        }
+
+    @else
+
+        if
+
+        $type
+
+        ==
+
+        matador
+
+        {
+
+        }
+    @if $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-variables == $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-variables {
+        color: blue;
+    } @else if $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-variables == $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-variables {
+        color: red;
+    } @else if $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-variables == $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-variables {
+        color: green;
+    } @else {
+        color: black;
+    }
+    @if $very-very-very-long-var == 0 and $very-very-very-long-var == 0 {}
+    @if $very-very-very-very-very-very-long-var == 0 and $very-very-very-long-var == 0 {}
+    @if $very-very-very-very-very-very-very-very-very-very-very-long-var == 0 and $very-very-very-very-very-very-very-very-very-very-very-long-var == 0 {}
+    @if $base-font-size != 16px or $base-line-height != 24px or $base-unit != 'em' or $h1-font-size != 2 * $base-font-size or $h2-font-size != 1.5 * $base-font-size or $h3-font-size != 1.17 * $base-font-size or $h4-font-size != 1 * $base-font-size or $h5-font-size != 0.83 * $base-font-size or $h6-font-size != 0.67 * $base-font-size or $indent-amount != 40px {}
+    @if (str-slice($item, 0, 1) == ":") {}
+    @if (str-slice($item, 0, 3) == " : ") {}
+    @if ($type == ocean) {} @else if ($type == matador) {} @else {}
+}
+
+=====================================output=====================================
+@if $media == phonePortrait {
+  $k: 0.15625;
+} @else if $media == phoneLandscape {
+  $k: 0.08803;
+} @else if $media == tabletPortrait {
+  $k: 0.065106;
+}
+p {
+  @if $type == ocean {
+  }
+  @if $type==ocean {
+  }
+  @if $type == ocean {
+  }
+  @if $type == ocean {
+  }
+  @if $type == ocean {
+  }
+  @if $type == ocean {
+  }
+  @if (($type) == (ocean)) {
+  }
+  @if (($type) ==(ocean)) {
+  }
+  @if (($type) == (ocean)) {
+  }
+  @if (($type) == (ocean)) {
+  }
+  @if (($type) == (ocean)) {
+  }
+  @if (($type) == (ocean)) {
+  }
+  @if $type == ocean {
+    color: blue;
+  } @else if $type == matador {
+    color: red;
+  } @else if $type == monster {
+    color: green;
+  } @else {
+    color: black;
+  }
+  @if $type == ocean {
+  } @else if $type == matador {
+  }
+  @if $type==ocean {
+  } @else if $type==matador {
+  }
+  @if $type == ocean {
+  } @else if $type == matador {
+  }
+  @if $type == ocean {
+  } @else if $type == matador {
+  }
+  @if $type == ocean {
+  } @else if $type == matador {
+  }
+  @if $type == ocean {
+  } @else if $type == matador {
+  }
+  @if $type == ocean {
+  } @else if $type == matador {
+  }
+  @if $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-variables ==
+    $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-variables
+  {
+    color: blue;
+  } @else if
+    $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-variables ==
+    $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-variables
+  {
+    color: red;
+  } @else if
+    $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-variables ==
+    $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-variables
+  {
+    color: green;
+  } @else {
+    color: black;
+  }
+  @if $very-very-very-long-var == 0 and $very-very-very-long-var == 0 {
+  }
+  @if $very-very-very-very-very-very-long-var ==
+    0 and
+    $very-very-very-long-var ==
+    0
+  {
+  }
+  @if $very-very-very-very-very-very-very-very-very-very-very-long-var ==
+    0 and
+    $very-very-very-very-very-very-very-very-very-very-very-long-var ==
+    0
+  {
+  }
+  @if $base-font-size !=
+    16px or
+    $base-line-height !=
+    24px or
+    $base-unit !=
+    "em" or
+    $h1-font-size !=
+    2 *
+    $base-font-size or
+    $h2-font-size !=
+    1.5 *
+    $base-font-size or
+    $h3-font-size !=
+    1.17 *
+    $base-font-size or
+    $h4-font-size !=
+    1 *
+    $base-font-size or
+    $h5-font-size !=
+    0.83 *
+    $base-font-size or
+    $h6-font-size !=
+    0.67 *
+    $base-font-size or
+    $indent-amount !=
+    40px
+  {
+  }
+  @if (str-slice($item, 0, 1) == ":") {
+  }
+  @if (str-slice($item, 0, 3) == " : ") {
+  }
+  @if ($type == ocean) {
+  } @else if ($type == matador) {
+  } @else {
+  }
+}
+
+================================================================================
+`;
+
+exports[`include.scss format 1`] = `
+====================================options=====================================
+parsers: ["scss"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+@include mix(1px, 2px, $arg2: 10, 2px 4px 6px);
+@include mix(1px,2px,$arg2:10,2px 4px 6px);
+@include mix ( 1px , 2px , $arg2 : 10 , 2px 4px 6px );
+@include mix  (  1px  ,  2px  , $arg2  :  10  ,  2px  4px  6px  );
+@include mix(
+    1px,
+    2px,
+    $arg2: 10,
+    2px  4px  6px
+);
+@include
+mix(
+    1px,
+    2px,
+    $arg2: 10,
+    2px  4px  6px
+);
+@include
+mix
+(
+1px
+,
+2px
+,
+$arg2
+:
+10
+,
+2px
+4px
+6px
+)
+;
+@include
+
+mix
+
+(
+
+1px
+
+,
+
+2px
+
+,
+
+$arg2
+
+:
+
+10
+
+,
+
+2px
+
+4px
+
+6px
+
+)
+
+;
+@include mix($very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-arg: 1px, $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-arg1: 2px, $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-arg2: 10, 2px 4px 6px);
+a {
+    @include global-variable-overriding;
+    @include mix($very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-arg: 1px, $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-arg1: 2px, $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-arg2: 10, 2px 4px 6px);
+    @include apply-to-ie6-only {}
+    @include apply-to-ie6-only{}
+    @include apply-to-ie6-only
+        {}
+    @include
+        apply-to-ie6-only
+        {
+        }
+    @include
+
+        apply-to-ie6-only
+
+        {
+
+        }
+}
+
+a {
+@include section-type-1(
+$header: (margin: 0 0 $margin-base, text-align: left),
+$decoration: (type: base, margin: 0 auto -1px 0, primary-color: $brand-primary, secondary-color: $gray-light),
+$title: (margin: 0 0 $margin-small, color: false, font-size: $font-size-h3, font-weight: false, line-height: $line-height-h3)
+);
+}
+
+a {
+@include item-spotlight-properties-transition(
+"-title",
+(box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15))
+);
+}
+
+a {
+@include item-spotlight-properties-transition(
+"-title",
+(
+box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15),
+border-color: $brand-primary
+)
+);
+}
+
+a {
+@include item-spotlight-properties-transition(
+"-title",
+(
+box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15),
+border-color: $very-very-very-very-very-very-very-very-very-very-very-very-very-long-value
+)
+);
+}
+
+=====================================output=====================================
+@include mix(1px, 2px, $arg2: 10, 2px 4px 6px);
+@include mix(1px, 2px, $arg2: 10, 2px 4px 6px);
+@include mix(1px, 2px, $arg2: 10, 2px 4px 6px);
+@include mix(1px, 2px, $arg2: 10, 2px 4px 6px);
+@include mix(1px, 2px, $arg2: 10, 2px 4px 6px);
+@include mix(1px, 2px, $arg2: 10, 2px 4px 6px);
+@include mix(1px, 2px, $arg2: 10, 2px 4px 6px);
+@include mix(1px, 2px, $arg2: 10, 2px 4px 6px);
+@include mix(
+  $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-arg:
+    1px,
+  $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-arg1:
+    2px,
+  $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-arg2:
+    10,
+  2px 4px 6px
+);
+a {
+  @include global-variable-overriding;
+  @include mix(
+    $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-arg:
+      1px,
+    $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-arg1:
+      2px,
+    $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-arg2:
+      10,
+    2px 4px 6px
+  );
+  @include apply-to-ie6-only {
+  }
+  @include apply-to-ie6-only {
+  }
+  @include apply-to-ie6-only {
+  }
+  @include apply-to-ie6-only {
+  }
+  @include apply-to-ie6-only {
+  }
+}
+
+a {
+  @include section-type-1(
+    $header: (
+      margin: 0 0 $margin-base,
+      text-align: left,
+    ),
+    $decoration: (
+      type: base,
+      margin: 0 auto -1px 0,
+      primary-color: $brand-primary,
+      secondary-color: $gray-light,
+    ),
+    $title: (
+      margin: 0 0 $margin-small,
+      color: false,
+      font-size: $font-size-h3,
+      font-weight: false,
+      line-height: $line-height-h3,
+    )
+  );
+}
+
+a {
+  @include item-spotlight-properties-transition(
+    "-title",
+    (
+      box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15),
+    )
+  );
+}
+
+a {
+  @include item-spotlight-properties-transition(
+    "-title",
+    (
+      box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15),
+      border-color: $brand-primary,
+    )
+  );
+}
+
+a {
+  @include item-spotlight-properties-transition(
+    "-title",
+    (
+      box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15),
+      border-color:
+        $very-very-very-very-very-very-very-very-very-very-very-very-very-long-value,
+    )
+  );
+}
+
+================================================================================
+`;
+
+exports[`while.scss format 1`] = `
+====================================options=====================================
+parsers: ["scss"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+@while $i > 0 {}
+@while $i>0{}
+@while  $i  >  0  {}
+@while $i
+    >
+    0
+    {}
+@while
+    $i
+    >
+    0
+    {}
+@while
+$i
+>
+0
+{
+}
+@while
+
+$i
+
+>
+
+0
+
+{
+
+}
+@while ($i > 0) {}
+@while ($i>0){}
+@while ( $i > 0 ) {}
+@while  (  $i  >  0  )  {}
+@while (
+    $i > 0
+) {}
+@while
+    ($i > 0) {}
+@while
+(
+$i
+>
+0
+)
+{
+}
+@while
+
+(
+
+$i
+
+>
+
+0
+
+)
+
+{
+
+}
+@while $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var > 1 {}
+@while 1 > $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var {}
+@while $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var > $other-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var {}
+@while (($i) > (0)) {}
+@while (($i)>(0)){}
+@while  (  (  $i  )  >  (  0  )  )  {}
+@while (($i)
+    >
+    (0)
+) {}
+@while
+(
+(
+$i
+)
+>
+(
+0
+)
+)
+{
+}
+@while
+
+(
+
+(
+
+$i
+
+)
+
+>
+
+(
+
+0
+
+)
+
+)
+
+{
+
+}
+@while ($very-very-very-very-very-very-very-very-very-very-very-very-long-var > 1) {}
+@while (1 > $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var) {}
+@while ($very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var > 1) {}
+@while ($very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var > $other-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var) {}
+
+=====================================output=====================================
+@while $i > 0 {
+}
+@while $i>0 {
+}
+@while $i > 0 {
+}
+@while $i > 0 {
+}
+@while $i > 0 {
+}
+@while $i > 0 {
+}
+@while $i > 0 {
+}
+@while ($i > 0) {
+}
+@while ($i>0) {
+}
+@while ($i > 0) {
+}
+@while ($i > 0) {
+}
+@while ($i > 0) {
+}
+@while ($i > 0) {
+}
+@while ($i > 0) {
+}
+@while ($i > 0) {
+}
+@while $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var >
+  1
+{
+}
+@while 1 >
+  $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var
+{
+}
+@while $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var >
+  $other-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var
+{
+}
+@while (($i) > (0)) {
+}
+@while (($i) >(0)) {
+}
+@while (($i) > (0)) {
+}
+@while (($i) > (0)) {
+}
+@while (($i) > (0)) {
+}
+@while (($i) > (0)) {
+}
+@while (
+  $very-very-very-very-very-very-very-very-very-very-very-very-long-var > 1
+) {
+}
+@while (
+  1 >
+    $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var
+) {
+}
+@while (
+  $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var >
+    1
+) {
+}
+@while (
+  $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var >
+    $other-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var
+) {
+}
+
+================================================================================
+`;
diff --git a/tests/css/atrule/each.css b/tests/scss/atrule/each.scss
similarity index 100%
rename from tests/css/atrule/each.css
rename to tests/scss/atrule/each.scss
diff --git a/tests/css/atrule/for.css b/tests/scss/atrule/for.scss
similarity index 100%
rename from tests/css/atrule/for.css
rename to tests/scss/atrule/for.scss
diff --git a/tests/css/atrule/if-else.css b/tests/scss/atrule/if-else.scss
similarity index 100%
rename from tests/css/atrule/if-else.css
rename to tests/scss/atrule/if-else.scss
diff --git a/tests/css/atrule/include.css b/tests/scss/atrule/include.scss
similarity index 100%
rename from tests/css/atrule/include.css
rename to tests/scss/atrule/include.scss
diff --git a/tests/scss/atrule/jsfmt.spec.js b/tests/scss/atrule/jsfmt.spec.js
new file mode 100644
index 000000000..539bde086
--- /dev/null
+++ b/tests/scss/atrule/jsfmt.spec.js
@@ -0,0 +1 @@
+run_spec(__dirname, ["scss"]);
diff --git a/tests/css/atrule/while.css b/tests/scss/atrule/while.scss
similarity index 100%
rename from tests/css/atrule/while.css
rename to tests/scss/atrule/while.scss
diff --git a/tests/scss/comments/__snapshots__/jsfmt.spec.js.snap b/tests/scss/comments/__snapshots__/jsfmt.spec.js.snap
index d6d360762..f83f793f9 100644
--- a/tests/scss/comments/__snapshots__/jsfmt.spec.js.snap
+++ b/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"]
diff --git a/tests/scss/comments/custom-properties.scss b/tests/scss/comments/custom-properties.scss
new file mode 100644
index 000000000..3817d248d
--- /dev/null
+++ b/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;
+    };
+}
diff --git a/tests/scss/inline-url/__snapshots__/jsfmt.spec.js.snap b/tests/scss/inline-url/__snapshots__/jsfmt.spec.js.snap
new file mode 100644
index 000000000..f42d0688d
--- /dev/null
+++ b/tests/scss/inline-url/__snapshots__/jsfmt.spec.js.snap
@@ -0,0 +1,112 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`inline_url.scss format 1`] = `
+====================================options=====================================
+parsers: ["scss"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+.stringContentIsNotModifiedEvenIfInvalid {
+  background: url('@images');
+  background: url("$images");
+  background: url('/+0PX!/"\\a?~^[]{} $%#');
+  background: url("/+0PX!/'\\a?~^[]{} $%#");
+  background: url(
+    "whitespace-around-string"
+  );
+}
+
+.validUnquotedUrls {
+  background: url(
+    whitespace-around-string
+  );
+  background-image: url(/images/product/simple_product_manager/breadcrumb/chevron_right.png);
+  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mO4/B8AAqgB0yr7dJgAAAAASUVORK5CYII=);
+  background-image: url(data:application/font-woff;charset=utf-8;base64,ThisIsNormalBut/+0ThisIsLowerCased);
+  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mO4/B8AAqgB0yr7dJgAAAAASUVORK5CYII=) center center no-repeat;
+  background: url(data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%229%22%20height=%229%22%3E%3Cpath%20d=%22M0%203h3%22%20stroke=%22red%22/%3E%3C/svg%3E);
+  offset-path: url(#path);
+  background: url(data/+0ThisShouldNotBeLowerCased);
+  background: url(https://foo/A*3I8oSY6AKRMAAAAAAAAAAABkARQnAQ);
+  background: url(https://example.com/some/quite,long,url,with,commas.jpg);
+  background: url(http://123.example.com);
+}
+@import url(https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900&display=swap);
+
+.validUnqotedUrlsThatAreParsedByLess {
+  background: url(@foo);
+}
+
+.validUnquotedUrlsThatAreParsedBySass {
+  background: url($foo);
+  background: url($foo+$bar);
+  background: url($foo*3);
+  background: url($foo/$bar);
+}
+
+.invalidUnquotedUrlsButWeParseThemAnyway {
+  background: url(--var(foo-bar,#dadce0));
+  -fb-sprite: url(fbglyph:cross-outline, fig-white);
+}
+
+.number {
+  background-image: url(http://123.com);
+  background: url(path/to/123.jpg);
+  background: url(#123.foo);
+  background: no-repeat center/80% url(http://123.com);
+  background: no-repeat center/80% url(path/to/123.jpg);
+  background: no-repeat center/80% url(#123.foo);
+}
+
+=====================================output=====================================
+.stringContentIsNotModifiedEvenIfInvalid {
+  background: url("@images");
+  background: url("$images");
+  background: url('/+0PX!/"\\a?~^[]{} $%#');
+  background: url("/+0PX!/'\\a?~^[]{} $%#");
+  background: url("whitespace-around-string");
+}
+
+.validUnquotedUrls {
+  background: url(whitespace-around-string);
+  background-image: url(/images/product/simple_product_manager/breadcrumb/chevron_right.png);
+  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mO4/B8AAqgB0yr7dJgAAAAASUVORK5CYII=);
+  background-image: url(data:application/font-woff;charset=utf-8;base64,ThisIsNormalBut/+0ThisIsLowerCased);
+  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mO4/B8AAqgB0yr7dJgAAAAASUVORK5CYII=)
+    center center no-repeat;
+  background: url(data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%229%22%20height=%229%22%3E%3Cpath%20d=%22M0%203h3%22%20stroke=%22red%22/%3E%3C/svg%3E);
+  offset-path: url(#path);
+  background: url(data/+0ThisShouldNotBeLowerCased);
+  background: url(https://foo/A*3I8oSY6AKRMAAAAAAAAAAABkARQnAQ);
+  background: url(https://example.com/some/quite,long,url,with,commas.jpg);
+  background: url(http://123.example.com);
+}
+@import url(https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900&display=swap);
+
+.validUnqotedUrlsThatAreParsedByLess {
+  background: url(@foo);
+}
+
+.validUnquotedUrlsThatAreParsedBySass {
+  background: url($foo);
+  background: url($foo + $bar);
+  background: url($foo*3);
+  background: url($foo/$bar);
+}
+
+.invalidUnquotedUrlsButWeParseThemAnyway {
+  background: url(--var(foo-bar, #dadce0));
+  -fb-sprite: url(fbglyph:cross-outline, fig-white);
+}
+
+.number {
+  background-image: url(http://123.com);
+  background: url(path/to/123.jpg);
+  background: url(#123.foo);
+  background: no-repeat center/80% url(http://123.com);
+  background: no-repeat center/80% url(path/to/123.jpg);
+  background: no-repeat center/80% url(#123.foo);
+}
+
+================================================================================
+`;
diff --git a/tests/scss/inline-url/inline_url.scss b/tests/scss/inline-url/inline_url.scss
new file mode 100644
index 000000000..4cd15e621
--- /dev/null
+++ b/tests/scss/inline-url/inline_url.scss
@@ -0,0 +1,51 @@
+.stringContentIsNotModifiedEvenIfInvalid {
+  background: url('@images');
+  background: url("$images");
+  background: url('/+0PX!/"\a?~^[]{} $%#');
+  background: url("/+0PX!/'\a?~^[]{} $%#");
+  background: url(
+    "whitespace-around-string"
+  );
+}
+
+.validUnquotedUrls {
+  background: url(
+    whitespace-around-string
+  );
+  background-image: url(/images/product/simple_product_manager/breadcrumb/chevron_right.png);
+  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mO4/B8AAqgB0yr7dJgAAAAASUVORK5CYII=);
+  background-image: url(data:application/font-woff;charset=utf-8;base64,ThisIsNormalBut/+0ThisIsLowerCased);
+  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mO4/B8AAqgB0yr7dJgAAAAASUVORK5CYII=) center center no-repeat;
+  background: url(data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%229%22%20height=%229%22%3E%3Cpath%20d=%22M0%203h3%22%20stroke=%22red%22/%3E%3C/svg%3E);
+  offset-path: url(#path);
+  background: url(data/+0ThisShouldNotBeLowerCased);
+  background: url(https://foo/A*3I8oSY6AKRMAAAAAAAAAAABkARQnAQ);
+  background: url(https://example.com/some/quite,long,url,with,commas.jpg);
+  background: url(http://123.example.com);
+}
+@import url(https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900&display=swap);
+
+.validUnqotedUrlsThatAreParsedByLess {
+  background: url(@foo);
+}
+
+.validUnquotedUrlsThatAreParsedBySass {
+  background: url($foo);
+  background: url($foo+$bar);
+  background: url($foo*3);
+  background: url($foo/$bar);
+}
+
+.invalidUnquotedUrlsButWeParseThemAnyway {
+  background: url(--var(foo-bar,#dadce0));
+  -fb-sprite: url(fbglyph:cross-outline, fig-white);
+}
+
+.number {
+  background-image: url(http://123.com);
+  background: url(path/to/123.jpg);
+  background: url(#123.foo);
+  background: no-repeat center/80% url(http://123.com);
+  background: no-repeat center/80% url(path/to/123.jpg);
+  background: no-repeat center/80% url(#123.foo);
+}
diff --git a/tests/scss/inline-url/jsfmt.spec.js b/tests/scss/inline-url/jsfmt.spec.js
new file mode 100644
index 000000000..539bde086
--- /dev/null
+++ b/tests/scss/inline-url/jsfmt.spec.js
@@ -0,0 +1 @@
+run_spec(__dirname, ["scss"]);
diff --git a/tests/scss/variables/__snapshots__/jsfmt.spec.js.snap b/tests/scss/variables/__snapshots__/jsfmt.spec.js.snap
index 6f19d50c0..4e99ead7f 100644
--- a/tests/scss/variables/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/scss/variables/__snapshots__/jsfmt.spec.js.snap
@@ -1,5 +1,125 @@
 // 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;}
+}
+
+: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[`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;
+  }
+}
+
+================================================================================
+`;
+
 exports[`variables.scss format 1`] = `
 ====================================options=====================================
 parsers: ["scss"]
diff --git a/tests/scss/variables/apply-rule.scss b/tests/scss/variables/apply-rule.scss
new file mode 100644
index 000000000..56c04e2c2
--- /dev/null
+++ b/tests/scss/variables/apply-rule.scss
@@ -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;
+  };
+}
diff --git a/tests/scss/variables/postcss-8-improment.scss b/tests/scss/variables/postcss-8-improment.scss
new file mode 100644
index 000000000..d269083a9
--- /dev/null
+++ b/tests/scss/variables/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;
+  }
+}
diff --git a/yarn.lock b/yarn.lock
index c77c7e1fc..a57321c56 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2161,7 +2161,7 @@ ccount@^1.0.0:
   resolved "https://registry.yarnpkg.com/ccount/-/ccount-1.0.5.tgz#ac82a944905a65ce204eb03023157edf29425c17"
   integrity sha512-MOli1W+nfbPLlKEhInaxhRdp7KVLFxLN5ykwzHgLsLI3H3gs5jjFAK4Eoj3OzzcxCtumDaI8onoVDeQyWaNTkw==
 
-chalk@2.4.2, chalk@^2.0.0, chalk@^2.4.1, chalk@^2.4.2:
+chalk@2.4.2, chalk@^2.0.0, chalk@^2.4.1:
   version "2.4.2"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424"
   integrity sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==
@@ -2300,6 +2300,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"
@@ -4876,16 +4881,7 @@ jest-watcher@^26.6.2:
     jest-util "^26.6.2"
     string-length "^4.0.1"
 
-jest-worker@^26.1.0, jest-worker@^26.2.1:
-  version "26.5.0"
-  resolved "https://registry.yarnpkg.com/jest-worker/-/jest-worker-26.5.0.tgz#87deee86dbbc5f98d9919e0dadf2c40e3152fa30"
-  integrity sha512-kTw66Dn4ZX7WpjZ7T/SUDgRhapFRKWmisVAF0Rv4Fu8SLFD7eLbqpLvbxVqYhSgaWa7I+bW7pHnbyfNsH6stug==
-  dependencies:
-    "@types/node" "*"
-    merge-stream "^2.0.0"
-    supports-color "^7.0.0"
-
-jest-worker@^26.6.1:
+jest-worker@^26.1.0, jest-worker@^26.2.1, jest-worker@^26.6.1:
   version "26.6.1"
   resolved "https://registry.yarnpkg.com/jest-worker/-/jest-worker-26.6.1.tgz#c2ae8cde6802cc14056043f997469ec170d9c32a"
   integrity sha512-R5IE3qSGz+QynJx8y+ICEkdI2OJ3RJjRQVEyCcFAd3yVhQSEtquziPO29Mlzgn07LOVE8u8jhJ1FqcwegiXWOw==
@@ -5093,6 +5089,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"
@@ -5379,6 +5383,11 @@ n-readlines@1.0.0:
   resolved "https://registry.yarnpkg.com/n-readlines/-/n-readlines-1.0.0.tgz#c353797f216c253fdfef7e91da4e8b17c29a91a6"
   integrity sha512-ISDqGcspVu6U3VKqtJZG1uR55SmNNF9uK0EMq1IvNVVZOui6MW6VR0+pIZhqz85ORAGp+4zW+5fJ/SE7bwEibA==
 
+nanoid@^3.1.15:
+  version "3.1.15"
+  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.1.15.tgz#28e7c4ce56aff2d0c2d37814c7aef9d6c5b3e6f3"
+  integrity sha512-n8rXUZ8UU3lV6+43atPrSizqzh25n1/f00Wx1sCiE7R1sSHytZLTTiQl8DjC4IDLOnEZDlgJhy0yO4VsIpMxow==
+
 nanomatch@^1.2.9:
   version "1.2.13"
   resolved "https://registry.yarnpkg.com/nanomatch/-/nanomatch-1.2.13.tgz#b87a8aa4fc0de8fe6be88895b38983ff265bd119"
@@ -5895,24 +5904,24 @@ posix-character-classes@^0.1.0:
   resolved "https://registry.yarnpkg.com/posix-character-classes/-/posix-character-classes-0.1.1.tgz#01eac0fe3b5af71a2a6c02feabb8c1fef7e00eab"
   integrity sha1-AerA/jta9xoqbAL+q7jB/vfgDqs=
 
-postcss-less@3.1.4:
-  version "3.1.4"
-  resolved "https://registry.yarnpkg.com/postcss-less/-/postcss-less-3.1.4.tgz#369f58642b5928ef898ffbc1a6e93c958304c5ad"
-  integrity sha512-7TvleQWNM2QLcHqvudt3VYjULVB49uiW6XzEUFmvwHzvsOEF5MwBrIXZDJQvJNFGjJQTzSzZnDoCJ8h/ljyGXA==
+postcss-less@4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-less/-/postcss-less-4.0.0.tgz#88ad544041750023650f249a896930a741506390"
+  integrity sha512-wKT2JuR3dTBgtQ61HAyqx/uPlYgkf4OTlYcZaqLWjW/hMIIV58d79ab03oilkn7ob84lOd9W1oBB1Pu7bmzUYQ==
   dependencies:
-    postcss "^7.0.14"
+    postcss "^8.1.2"
 
 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"
   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.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/postcss-scss/-/postcss-scss-3.0.2.tgz#b43afd45b49dfeb9f6266a0c7b29faf0941d18bd"
+  integrity sha512-gR31pETUW0nHKbciPh/2CU+HI3phdgT5Zw/9Z2Wq/hX1G54PmydF965Hx8X6ZDldrFgMuQageNJfk00V+U8YRQ==
   dependencies:
-    postcss "^7.0.6"
+    postcss "^8.1.0"
 
 postcss-selector-parser@2.2.3:
   version "2.2.3"
@@ -5932,14 +5941,15 @@ postcss-values-parser@2.0.1:
     indexes-of "^1.0.1"
     uniq "^1.0.1"
 
-postcss@^7.0.14, postcss@^7.0.6:
-  version "7.0.35"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.35.tgz#d2be00b998f7f211d8a276974079f2e92b970e24"
-  integrity sha512-3QT8bBJeX/S5zKTTjTCIjRF3If4avAT6kqxcASlTWEtAFCb9NH0OUxNDfgZSWdP5fJnBYCMEWkIFfWeugjzYMg==
+postcss@8.1.4, postcss@^8.1.0, postcss@^8.1.2:
+  version "8.1.4"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.1.4.tgz#356dfef367a70f3d04347f74560c85846e20e4c1"
+  integrity sha512-LfqcwgMq9LOd8pX7K2+r2HPitlIGC5p6PoZhVELlqhh2YGDVcXKpkCseqan73Hrdik6nBd2OvoDPUaP/oMj9hQ==
   dependencies:
-    chalk "^2.4.2"
+    colorette "^1.2.1"
+    line-column "^1.0.2"
+    nanoid "^3.1.15"
     source-map "^0.6.1"
-    supports-color "^6.1.0"
 
 prelude-ls@^1.2.1:
   version "1.2.1"
@@ -6881,13 +6891,6 @@ supports-color@^5.3.0:
   dependencies:
     has-flag "^3.0.0"
 
-supports-color@^6.1.0:
-  version "6.1.0"
-  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-6.1.0.tgz#0764abc69c63d5ac842dd4867e8d025e880df8f3"
-  integrity sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==
-  dependencies:
-    has-flag "^3.0.0"
-
 supports-color@^7.0.0, supports-color@^7.1.0:
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-7.1.0.tgz#68e32591df73e25ad1c4b49108a2ec507962bfd1"
@@ -6964,16 +6967,7 @@ terser-webpack-plugin@5.0.3, terser-webpack-plugin@^5.0.3:
     source-map "^0.6.1"
     terser "^5.3.8"
 
-terser@^5.0.0:
-  version "5.3.4"
-  resolved "https://registry.yarnpkg.com/terser/-/terser-5.3.4.tgz#e510e05f86e0bd87f01835c3238839193f77a60c"
-  integrity sha512-dxuB8KQo8Gt6OVOeLg/rxfcxdNZI/V1G6ze1czFUzPeCFWZRtvZMgSzlZZ5OYBZ4HoG607F6pFPNLekJyV+yVw==
-  dependencies:
-    commander "^2.20.0"
-    source-map "~0.7.2"
-    source-map-support "~0.5.19"
-
-terser@^5.3.8:
+terser@^5.0.0, terser@^5.3.8:
   version "5.3.8"
   resolved "https://registry.yarnpkg.com/terser/-/terser-5.3.8.tgz#991ae8ba21a3d990579b54aa9af11586197a75dd"
   integrity sha512-zVotuHoIfnYjtlurOouTazciEfL7V38QMAOhGqpXDEg6yT13cF4+fEP9b0rrCEQTn+tT46uxgFsTZzhygk+CzQ==