fix(css): at rules improve formatting and tests (#3828)

package.json

@@ -82,7 +82,7 @@
     "rollup-plugin-node-globals": "1.1.0",
     "rollup-plugin-node-resolve": "2.0.0",
     "rollup-plugin-replace": "1.2.1",
-    "shelljs": "0.7.8",
+    "shelljs": "0.8.1",
     "snapshot-diff": "0.2.2",
     "strip-ansi": "4.0.0",
     "sw-toolbox": "3.6.0",

src/language-css/parser-postcss.js

@@ -168,10 +168,12 @@ const GLOBAL_SCSS_DIRECTIVE = "!global";
 function parseNestedCSS(node) {
   if (node && typeof node === "object") {
     delete node.parent;
+
     for (const key in node) {
       parseNestedCSS(node[key]);
     }
-    if (typeof node.selector === "string") {
+
+    if (typeof node.selector === "string" && node.selector.trim().length > 0) {
       const selector = node.raws.selector
         ? node.raws.selector.raw
         : node.selector;
@@ -194,11 +196,15 @@ function parseNestedCSS(node) {
           value: selector
         };
       }
+
+      return node;
     }
+
     if (
       node.type &&
       node.type !== "css-comment-yaml" &&
-      typeof node.value === "string"
+      typeof node.value === "string" &&
+      node.value.trim().length > 0
     ) {
       try {
         if (node.value.endsWith(DEFAULT_SCSS_DIRECTIVE)) {
@@ -218,26 +224,101 @@ function parseNestedCSS(node) {
           node.source
         );
       }
+
+      return node;
     }
-    if (node.type === "css-atrule" && typeof node.params === "string") {
+
+    if (
+      node.type === "css-atrule" &&
+      typeof node.params === "string" &&
+      node.params.trim().length > 0
+    ) {
+      if (
+        node.name === "charset" ||
+        node.name.toLowerCase() === "counter-style" ||
+        node.name.toLowerCase().endsWith("keyframes") ||
+        node.name.toLowerCase() === "page" ||
+        node.name.toLowerCase() === "font-feature-values"
+      ) {
+        return node;
+      }
+
       if (node.name === "warn" || node.name === "error") {
         node.params = {
           type: "media-unknown",
           value: node.params
         };
-      } else {
-        if (node.params.includes("#{")) {
-          // Workaround for media at rule with scss interpolation
-          return {
-            type: "media-unknown",
-            value: node.params
-          };
+
+        return node;
+      }
+
+      if (node.name === "extend") {
+        node.selector = parseSelector(node.params);
+        delete node.params;
+
+        return node;
+      }
+
+      if (node.name === "at-root") {
+        if (/^\(\s*(without|with)\s*:[\s\S]+\)$/.test(node.params)) {
+          node.params = parseMediaQuery(node.params);
+        } else {
+          node.selector = parseSelector(node.params);
+          delete node.params;
         }
 
-        node.params = parseMediaQuery(node.params);
+        return node;
       }
+
+      if (
+        node.name === "if" ||
+        node.name === "else" ||
+        node.name === "for" ||
+        node.name === "each" ||
+        node.name === "while" ||
+        node.name === "debug" ||
+        node.name === "mixin" ||
+        node.name === "include" ||
+        node.name === "function" ||
+        node.name === "return"
+      ) {
+        // Remove unnecessary spaces in SCSS variable arguments
+        node.params = node.params.replace(/\s+\.\.\./, "...");
+        // Remove unnecessary spaces before SCSS control, mixin and function directives
+        node.params = node.params.replace(/^(\S+)\s+\(/, "$1(");
+
+        node.value = parseValue(node.params);
+        delete node.params;
+
+        return node;
+      }
+
+      if (node.params.includes("#{")) {
+        // Workaround for media at rule with scss interpolation
+        return {
+          type: "media-unknown",
+          value: node.params
+        };
+      }
+
+      if (/^custom-selector$/i.test(node.name)) {
+        const customSelector = node.params.match(/:--\S+?\s+/)[0].trim();
+
+        node.customSelector = customSelector;
+        node.selector = parseSelector(
+          node.params.substring(customSelector.length)
+        );
+        delete node.params;
+
+        return node;
+      }
+
+      node.params = parseMediaQuery(node.params);
+
+      return node;
     }
   }
+
   return node;
 }
 

src/language-css/printer-postcss.js

@@ -129,6 +129,19 @@ function genericPrint(path, options, print) {
         hasParams &&
         n.params.type === "media-query-list" &&
         /^\(\s*\)$/.test(n.params.value);
+      const isControlDirective =
+        n.name === "if" ||
+        n.name === "else" ||
+        n.name === "for" ||
+        n.name === "each" ||
+        n.name === "while";
+      const hasParensAround =
+        n.value &&
+        n.value.group.group.type === "value-paren_group" &&
+        n.value.group.group.open !== null &&
+        n.value.group.group.close !== null;
+      const isElse = n.name === "else";
+
       return concat([
         "@",
         // If a Less file ends up being parsed with the SCSS parser, Less
@@ -143,9 +156,20 @@ function genericPrint(path, options, print) {
               path.call(print, "params")
             ])
           : "",
+        n.selector ? indent(concat([" ", path.call(print, "selector")])) : "",
+        n.value
+          ? group(
+              concat([
+                " ",
+                path.call(print, "value"),
+                isControlDirective ? (hasParensAround ? " " : line) : ""
+              ])
+            )
+          : isElse ? " " : "",
         n.nodes
           ? concat([
-              " {",
+              isControlDirective ? "" : " ",
+              "{",
               indent(
                 concat([
                   n.nodes.length > 0 ? softline : "",
@@ -244,7 +268,25 @@ function genericPrint(path, options, print) {
       return adjustNumbers(adjustStrings(maybeToLowerCase(n.value), options));
     }
     case "selector-root": {
-      return group(join(concat([",", hardline]), path.map(print, "nodes")));
+      const parentAtRule = getAncestorNode(path, "css-atrule");
+      const insideInExtend = parentAtRule && parentAtRule.name === "extend";
+      const insideInCustomSelector =
+        parentAtRule && parentAtRule.name === "custom-selector";
+
+      return group(
+        concat([
+          insideInCustomSelector
+            ? concat([parentAtRule.customSelector, line])
+            : "",
+          join(
+            concat([
+              ",",
+              insideInExtend || insideInCustomSelector ? line : hardline
+            ]),
+            path.map(print, "nodes")
+          )
+        ])
+      );
     }
     case "selector-comment": {
       return n.value;
@@ -325,11 +367,21 @@ function genericPrint(path, options, print) {
         declParent = path.getParentNode(i++);
       } while (declParent && declParent.type !== "css-decl");
 
-      const declParentProp = declParent.prop.toLowerCase();
+      const declParentProp =
+        declParent && declParent.prop && declParent.prop.toLowerCase();
       const isGridValue =
+        declParentProp &&
         parent.type === "value-value" &&
         (declParentProp === "grid" ||
           declParentProp.startsWith("grid-template"));
+      const atRule = getAncestorNode(path, "css-atrule");
+      const isControlDirective =
+        atRule &&
+        (atRule.name === "if" ||
+          atRule.name === "else" ||
+          atRule.name === "for" ||
+          atRule.name === "each" ||
+          atRule.name === "while");
 
       const printed = path.map(print, "groups");
       const parts = [];
@@ -341,6 +393,33 @@ function genericPrint(path, options, print) {
           n.groups[i + 1].raws &&
           n.groups[i + 1].raws.before !== ""
         ) {
+          const isNextValueOperator = n.groups[i + 1].type === "value-operator";
+          const isNextMathOperator =
+            isNextValueOperator &&
+            ["+", "-", "/", "*", "%"].indexOf(n.groups[i + 1].value) !== -1;
+          const isNextValueWord = n.groups[i + 1].type === "value-word";
+          const isNextEqualityOperator =
+            isControlDirective &&
+            isNextValueWord &&
+            ["==", "!="].indexOf(n.groups[i + 1].value) !== -1;
+          const isNextRelationalOperator =
+            isControlDirective &&
+            isNextValueWord &&
+            ["<", ">", "<=", ">="].indexOf(n.groups[i + 1].value) !== -1;
+          const isNextIfElseKeyword =
+            isControlDirective &&
+            ["and", "or", "not"].indexOf(n.groups[i + 1].value) !== -1;
+          const isNextEachKeyword =
+            isControlDirective && ["in"].indexOf(n.groups[i + 1].value) !== -1;
+          const isForKeyword =
+            atRule &&
+            atRule.name === "for" &&
+            ["from", "through", "end"].indexOf(n.groups[i].value) !== -1;
+          const isNextForKeyword =
+            isControlDirective &&
+            ["from", "through", "end"].indexOf(n.groups[i + 1].value) !== -1;
+          const IsNextColon = n.groups[i + 1].value === ":";
+
           if (isGridValue) {
             if (
               n.groups[i].source.start.line !==
@@ -352,11 +431,14 @@ function genericPrint(path, options, print) {
               parts.push(" ");
             }
           } else if (
-            n.groups[i + 1].type === "value-operator" &&
-            ["+", "-", "/", "*", "%"].indexOf(n.groups[i + 1].value) !== -1
+            isNextMathOperator ||
+            isNextEqualityOperator ||
+            isNextRelationalOperator ||
+            isNextIfElseKeyword ||
+            isForKeyword
           ) {
             parts.push(" ");
-          } else if (n.groups[i + 1].value !== ":") {
+          } else if (!IsNextColon || isNextForKeyword || isNextEachKeyword) {
             parts.push(line);
           }
         }
@@ -366,6 +448,10 @@ function genericPrint(path, options, print) {
         parts.unshift(hardline);
       }
 
+      if (isControlDirective) {
+        return group(indent(concat(parts)));
+      }
+
       return group(indent(fill(parts)));
     }
     case "value-paren_group": {
@@ -471,6 +557,26 @@ function genericPrint(path, options, print) {
   }
 }
 
+function getAncestorCounter(path, typeOrTypes) {
+  const types = [].concat(typeOrTypes);
+
+  let counter = -1;
+  let ancestorNode;
+
+  while ((ancestorNode = path.getParentNode(++counter))) {
+    if (types.indexOf(ancestorNode.type) !== -1) {
+      return counter;
+    }
+  }
+
+  return -1;
+}
+
+function getAncestorNode(path, typeOrTypes) {
+  const counter = getAncestorCounter(path, typeOrTypes);
+  return counter === -1 ? null : path.getParentNode(counter);
+}
+
 function printNodeSequence(path, options, print) {
   const node = path.getValue();
   const parts = [];

tests/css_atrule/at-root.css

@@ -0,0 +1,292 @@
+.parent {
+    @at-root {
+        .child1 {
+            width: 100px;
+        }
+        .child2 {
+            width: 200px;
+        }
+    }
+}
+.parent {
+@at-root {
+.child1 {
+width: 100px;
+}
+.child2 {
+width: 200px;
+}
+}
+}
+.parent {
+    @at-root  {
+        .child1 {
+            width: 100px;
+        }
+        .child2 {
+            width: 200px;
+        }
+    }
+}
+.parent  {
+    @at-root  {
+        .child1  {
+            width: 100px;
+        }
+        .child2  {
+            width: 200px;
+        }
+    }
+}
+.parent
+{
+@at-root
+{
+.child1
+{
+width
+:
+100px
+;
+}
+.child2
+{
+width
+:
+200px
+;
+}
+}
+}
+.parent
+
+{
+
+@at-root
+
+{
+
+.child1
+
+{
+
+width
+
+:
+
+100px
+
+;
+
+}
+.child2
+
+{
+
+width
+
+:
+
+200px
+
+;
+
+}
+
+}
+
+}
+.parent {
+    @at-root .child {
+        width: 100px;
+    }
+}
+.parent {
+@at-root .child {
+width: 100px;
+}
+}
+.parent{
+    @at-root .child{
+        width: 100px;
+    }
+}
+.parent  {
+    @at-root  .child  {
+        width: 100px;
+    }
+}
+.parent
+{
+@at-root
+.child
+{
+width
+:
+100px
+;
+}
+}
+.parent
+
+{
+
+@at-root
+
+.child
+
+{
+
+width
+
+:
+
+100px
+
+;
+
+}
+
+}
+.parent {
+@at-root
+input[
+type
+=
+'radio'
+]
+{
+color
+:
+red
+;
+}
+}
+@media print {
+    .page {
+        width: 8in;
+
+        @at-root (with: media) {
+            color: red;
+        }
+    }
+}
+@media print {
+.page {
+width: 8in;
+
+@at-root (with: media) {
+color: red;
+}
+}
+}
+@media print{
+    .page{
+        width: 8in;
+
+        @at-root (with:media){
+            color: red;
+        }
+    }
+}
+@media print {
+    .page {
+        width: 8in;
+
+        @at-root ( with : media ) {
+            color: red;
+        }
+    }
+}
+@media print  {
+    .page  {
+        width: 8in;
+
+        @at-root  (  with  :  media  ) {
+            color: red;
+        }
+    }
+}
+@media print  {
+    .page  {
+        width: 8in;
+
+    @at-root
+        (with: media) {
+            color: red;
+        }
+    }
+}
+@media print
+{
+.page
+{
+width
+:
+8in
+;
+@at-root
+(
+with
+:
+media
+)
+{
+color
+:
+red
+;
+}
+}
+}
+@media print
+
+{
+
+.page
+
+{
+
+width
+
+:
+
+8in
+
+;
+
+@at-root
+
+(
+
+with
+
+:
+
+media
+
+)
+
+{
+
+color
+:
+
+red
+
+;
+
+}
+
+}
+
+}
+@media print {
+    .page {
+        width: 8in;
+
+        @at-root (without: media) {
+            color: red;
+        }
+    }
+}

tests/css_atrule/charset.css

@@ -0,0 +1,6 @@
+@charset "UTF-8";
+@charset "iso-8859-15";
+@charset 'iso-8859-15'; /* Invalid, wrong quoting style used */
+@charset  "UTF-8"; /* Invalid, more than one space */
+@charset "UTF-8"; /* Invalid, there is a character (a space) before the at-rule */
+@charset UTF-8; /* Invalid, without ' or ", the charset is not a CSS <string> */

tests/css_atrule/counter-style.css

@@ -0,0 +1,69 @@
+@counter-style identifier {
+    system: cyclic;
+    symbols: "\1F44D";
+    suffix: " ";
+}
+@counter-style identifier {
+system: cyclic;
+symbols: "\1F44D";
+suffix: " ";
+}
+@counter-style identifier{
+    system: cyclic;
+    symbols: "\1F44D";
+    suffix: " ";
+}
+@counter-style  identifier  {
+    system: cyclic;
+    symbols: "\1F44D";
+    suffix: " ";
+}
+@counter-style
+identifier
+{
+system
+:
+cyclic
+;
+symbols
+:
+"\1F44D"
+;
+suffix
+:
+" "
+;
+}
+
+@counter-style
+
+identifier
+
+{
+
+system
+
+:
+
+cyclic
+
+;
+
+symbols
+
+
+:
+
+"\1F44D"
+
+;
+
+suffix
+
+:
+
+" "
+
+;
+
+}

tests/css_atrule/custom-selector.css

@@ -0,0 +1,64 @@
+@custom-selector :--heading h1, h2, h3, h4, h5, h6;
+@custom-selector :--heading h1,h2,h3,h4,h5,h6;
+@custom-selector  :--heading  h1  ,  h2  ,  h3  ,  h4  ,  h5  ,  h6  ;
+@custom-selector :--heading
+    h1, h2, h3, h4, h5, h6;
+@custom-selector
+    :--heading
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6;
+@custom-selector
+:--heading
+h1
+,
+h2
+,
+h3
+,
+h4
+,
+h5
+,
+h6
+;
+@custom-selector
+
+:--heading
+
+h1
+
+,
+
+h2
+
+,
+
+h3
+
+,
+
+h4
+
+,
+
+h5
+
+,
+
+h6
+
+;
+@custom-selector :--very-very-very-very-very-very-very-very-very-long-selector-name h1, h2, h3, h4, h5, h6;
+@custom-selector :--very-very-very-very-very-very-very-very-very-long-selector-name h1 + h1, h2, h3, h4, h5, h6;
+@custom-selector :--very-very-very-very-very-very-very-very-very-long-selector-name .very-very-very-very-very-very-very-very-very-long-selector-name + very-very-very-very-very-very-very-very-very-long-selector-name-other, h2, h3, h4, h5, h6;
+@custom-selector :--very-very-very-very-very-very-very-very-very-long-selector-name h1 h1, h2, h3, h4, h5, h6;
+@custom-selector :--heading .very-very-very-very-very-very-very-very-very-very-long-class-name, .very-very-very-very-very-very-very-very-very-very-long-class-name-other;
+@custom-selector :--enter :hover, :focus;
+@custom-selector :--visible :global.visible;
+@custom-selector :--icon i[class^='icon-'], i[class*=' icon-'];
+@custom-selector :--placeholder :placehoder-shown, ::-webkit-input-placeholder, ::-moz-placeholder, :-ms-input-placeholder;
+@custom-selector :--enter :matches(:hover, :focus, :active);

tests/css_atrule/debug.css

@@ -0,0 +1,22 @@
+@debug 10em + 12em;
+@debug 10em+12em;
+@debug  10em  +  12em  ;
+@debug 10em
+    +
+    12em
+    ;
+@debug
+10em
++
+12em
+;
+@debug
+
+10em
+
++
+
+12em
+
+;
+@debug $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-var;

tests/css_atrule/each.css

@@ -0,0 +1,139 @@
+@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) {}
+

tests/css_atrule/extend.css

@@ -0,0 +1,151 @@
+.master {
+    color:  black;
+    font-size: 12px;
+}
+.emphasis {
+    @extend .master;
+    font-weight: bold;
+}
+.emphasis {
+@extend .master;
+font-weight: bold;
+}
+.emphasis {
+    @extend  .master ;
+    font-weight: bold;
+}
+.emphasis {
+    @extend   .master  ;
+    font-weight: bold;
+}
+.emphasis
+{
+@extend
+.master
+;
+font-weight
+:
+bold
+;
+}
+.emphasis
+
+{
+
+@extend
+
+.master
+
+;
+
+font-weight
+
+:
+
+bold
+
+;
+
+}
+%message-shared {
+    border: 1px solid #ccc;
+    padding: 10px;
+    color: #333;
+}
+.message {
+    @extend %message-shared;
+}
+.message {
+@extend %message-shared;
+}
+.message {
+    @extend  %message-shared ;
+}
+.message {
+    @extend   %message-shared  ;
+}
+.message {
+@extend
+%message-shared;
+}
+.message {
+
+@extend
+
+%message-shared;
+
+}
+a.important {
+    @extend .notice !optional;
+}
+a.important {
+@extend .notice !optional;
+}
+a.important {
+    @extend  .notice !optional ;
+}
+a.important {
+    @extend  .notice  !optional  ;
+}
+a.important
+{
+@extend
+.notice
+!optional
+;
+}
+a.important
+
+{
+
+@extend
+
+.notice
+
+!optional
+
+;
+
+}
+.message-error {
+    @extend .message, .important;
+}
+.message-error {
+    @extend .message , .important ;
+}
+.message-error {
+    @extend   .message  ,  .important  ;
+}
+.message-error {
+    @extend .message,
+        .important;
+}
+.message-error {
+    @extend
+        .message,
+        .important;
+}
+.message-error
+{
+@extend
+.message
+,
+.important
+;
+}
+.message-error
+
+{
+
+@extend
+
+.message
+
+,
+
+.important;
+
+}
+.message-error {
+    @extend .very-very-very-very-very-very-very-very-very-very-very-very-very-long-selector, .very-very-very-very-very-very-very-very-very-very-very-very-very-long-selector;
+}

tests/css_atrule/font-face.css

@@ -3,36 +3,87 @@
     src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
         url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
 }
-
 @font-face {
-    font-family: "Open Sans";
-    src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
-        url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
+font-family: "Open Sans";
+src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
+url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
 }
-
 @font-face{
     font-family: "Open Sans";
     src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
         url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
 }
-
 @font-face  {
     font-family: "Open Sans";
     src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
         url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
 }
-
 @font-face
 {
-    font-family: "Open Sans";
-    src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
-        url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
+font-family
+:
+"Open Sans"
+;
+src
+:
+url(
+"/fonts/OpenSans-Regular-webfont.woff2"
+)
+format(
+"woff2"
+)
+,
+url(
+"/fonts/OpenSans-Regular-webfont.woff"
+)
+format(
+"woff"
+)
+;
 }
-
 @font-face
 
 {
-    font-family: "Open Sans";
-    src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
-        url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
+
+font-family
+
+:
+
+"Open Sans"
+
+;
+
+src
+
+:
+
+url(
+
+"/fonts/OpenSans-Regular-webfont.woff2"
+
+)
+
+format(
+
+"woff2"
+
+)
+
+,
+
+url(
+
+"/fonts/OpenSans-Regular-webfont.woff"
+
+)
+
+format(
+
+
+"woff"
+
+)
+
+;
+
 }

tests/css_atrule/font-feature-values.css

@@ -0,0 +1,52 @@
+@font-feature-values Font One {
+    @styleset {
+        nice-style: 12;
+    }
+}
+@font-feature-values Font One {
+@styleset {
+nice-style: 12;
+}
+}
+@font-feature-values Font One{
+    @styleset{
+        nice-style: 12;
+    }
+}
+@font-feature-values  Font One  {
+    @styleset  {
+        nice-style: 12;
+    }
+}
+@font-feature-values
+Font One
+{
+@styleset
+{
+nice-style
+:
+12
+;
+}
+}
+
+@font-feature-values
+
+Font One
+
+{
+
+@styleset
+{
+
+nice-style
+
+:
+
+12
+
+;
+
+}
+
+}

tests/css_atrule/for.css

@@ -0,0 +1,42 @@
+@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 ($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) {}

tests/css_atrule/function.css

@@ -0,0 +1,88 @@
+@function func($arg, $arg1, $arg2: 10, $args...) {
+    @return "Func";
+}
+@function func($arg,$arg1,$arg2:10,$args...){
+    @return "Func";
+}
+@function func ( $arg , $arg1 , $arg2 : 10 , $args ... ) {
+    @return "Func";
+}
+@function  func  (  $arg  ,  $arg1  ,  $arg2  :  10  ,  $args  ...  )  {
+    @return "Func";
+}
+@function func(
+    $arg,
+    $arg1,
+    $arg2: 10,
+    $args...
+)  {
+    @return "Func";
+}
+@function
+    func(
+        $arg,
+        $arg1,
+        $arg2: 10,
+        $args...
+    )  {
+    @return "Func";
+}
+@function
+func
+(
+$arg
+,
+$arg1
+,
+$arg2
+:
+10
+,
+$args
+...
+)
+{
+@return
+"Func"
+;
+}
+@function
+
+func
+
+(
+
+$arg
+
+,
+
+$arg1
+
+,
+
+$arg2
+
+:
+
+10
+
+,
+
+$args
+
+...
+
+)
+
+{
+
+@return
+
+"Func"
+
+;
+
+}
+@function func($very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-arg, $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-arg1, $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-arg2: 10, $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-args...) {
+    @return "Func";
+}

tests/css_atrule/if-else.css

@@ -5,3 +5,140 @@
 } @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) == " : ") {}
+}

tests/css_atrule/include.css

@@ -0,0 +1,84 @@
+@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
+
+        {
+
+        }
+}

tests/css_atrule/keyframes.css

@@ -0,0 +1,226 @@
+@keyframes identifier {
+  0% {
+    top: 0;
+    left: 0;
+  }
+  30% {
+    top: 50px;
+  }
+  68%,
+  72% {
+    left: 50px;
+  }
+  100% {
+    top: 100px;
+    left: 100%;
+  }
+}
+@keyframes identifier {
+0%{top:0;left:0;}
+30%{top: 50px;}
+68%,72%{left: 50px;}
+100%{top: 100px; left: 100%;}
+}
+@keyframes identifier{
+    0% {
+        top:0;
+        left:0;
+    }
+    30% {
+        top: 50px;
+    }
+    68%, 72% {
+        left: 50px;
+    }
+    100% {
+        top: 100px;
+        left: 100%;
+    }
+}
+@keyframes  identifier  {
+    0% {
+        top:0;
+        left:0;
+    }
+    30% {
+        top: 50px;
+    }
+    68%, 72% {
+        left: 50px;
+    }
+    100% {
+        top: 100px;
+        left: 100%;
+    }
+}
+@keyframes
+identifier
+{
+0%
+{
+top
+:
+0;
+left
+:
+0
+;
+}
+30%
+{
+top
+:
+50px
+;
+}
+68%
+,
+72%
+{
+left
+:
+50px
+;
+}
+100%
+{
+top
+:
+100px
+;
+left
+:
+100%
+;
+}
+}
+@keyframes
+
+identifier
+
+{
+
+0%
+
+{
+
+top
+
+:
+
+0
+
+;
+
+left
+
+:
+
+0
+
+;
+
+}
+
+30%
+
+{
+
+top
+
+:
+
+50px
+
+;
+
+}
+
+68%
+
+,
+
+72%
+
+{
+
+left
+
+:
+
+50px
+
+;
+
+}
+
+100%
+
+{
+
+top
+
+:
+
+100px
+
+;
+
+left
+
+:
+
+100%
+
+;
+
+}
+
+}
+@keyframes identifier {
+  from {
+    margin-top: 50px;
+  }
+  to {
+    margin-top: 100px;
+  }
+}
+@keyframes
+identifier
+{
+from
+{
+margin-top: 50px;
+}
+to
+{
+margin-top: 100px;
+}
+}
+@keyframes
+
+identifier
+
+{
+
+from
+
+{
+
+margin-top: 50px;
+
+}
+
+to
+
+{
+
+margin-top: 100px;
+
+}
+
+}
+@-webkit-keyframes identifier {
+  0%   { opacity: 0; top: 4rem; }
+  100% { opacity: 1; top: 0; }
+}

tests/css_atrule/mixin.css

@@ -0,0 +1,84 @@
+@mixin clearfix {}
+@mixin clearfix{}
+@mixin  clearfix  {}
+@mixin clearfix
+  {}
+@mixin
+  clearfix
+  {}
+@mixin
+clearfix
+{
+}
+@mixin
+
+clearfix
+
+{
+
+}
+
+@mixin mix($arg, $arg1, $arg2: 10, $args...) {}
+@mixin mix($arg,$arg1,$arg2:10,$args...){}
+@mixin mix ( $arg , $arg1 , $arg2 : 10 , $args ... ) {}
+@mixin  mix  (  $arg  ,  $arg1  ,  $arg2  :  10  ,  $args  ...  )  {}
+@mixin mix(
+    $arg,
+    $arg1,
+    $arg2: 10,
+    $args...
+) {}
+@mixin
+mix(
+    $arg,
+    $arg1,
+    $arg2: 10,
+    $args...
+    ) {}
+@mixin
+mix
+(
+$arg
+,
+$arg1
+,
+$arg2
+:
+10
+,
+$args
+...
+)
+{
+}
+@mixin
+
+mix
+
+(
+
+$arg
+
+,
+
+$arg1
+
+,
+
+$arg2
+
+:
+
+10
+
+,
+
+$args
+
+...
+
+)
+
+{
+}
+@mixin mix($very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-arg, $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-arg1, $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-arg2: 10, $very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-args...) {}

tests/css_atrule/namespaces.css

@@ -5,18 +5,38 @@
 @namespace
 toto
 "http://toto.example.org"
+;
+@namespace
+
+toto
+
+"http://toto.example.org"
+
 ;
 @namespace very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-namespace "http://toto.example.org";
 @namespace
 very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-namespace
 "http://toto.example.org"
+;
+@namespace
+
+very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-namespace
+
+"http://toto.example.org"
+
 ;
 @namespace "http://example.com/foo";
 @namespace url("http://example.com/foo");
 @namespace url("http://example.com/foo") ;
 @namespace  url("http://example.com/foo")  ;
 @namespace
+url("http://example.com/foo");
+@namespace
+
 url("http://example.com/foo");
 @namespace url("http://example.com/foo/very/very/very/very/very/very/very/very/very/very/very/very/very/very");
 @namespace
 url("http://example.com/foo/very/very/very/very/very/very/very/very/very/very/very/very/very/very/very");
+@namespace
+
+url("http://example.com/foo/very/very/very/very/very/very/very/very/very/very/very/very/very/very/very");

tests/css_atrule/page.css

@@ -0,0 +1,69 @@
+@page {
+    margin: 1cm;
+}
+@page {
+margin: 1cm;
+}
+@page{
+margin: 1cm;
+}
+@page  {
+    margin: 1cm;
+}
+@page
+{
+margin
+:
+1cm
+;
+}
+@page
+
+{
+
+margin
+:
+
+1cm
+
+;
+
+}
+@page :first {
+    margin: 2cm;
+}
+@page :first {
+margin: 2cm;
+}
+@page :first{
+    margin: 2cm;
+}
+@page  :first  {
+    margin: 2cm;
+}
+@page
+:first
+{
+margin
+:
+2cm
+;
+}
+@page
+
+:first
+
+{
+
+margin
+
+:
+
+2cm
+
+;
+
+}
+@page vertical {
+    size: A4 portrait;
+}

tests/css_atrule/return.css

@@ -0,0 +1,99 @@
+@function grid-width($n) {
+    @return $n * $grid-width + ($n - 1) * $gutter-width;
+}
+@function grid-width($n) {
+@return $n * $grid-width + ($n - 1) * $gutter-width;
+}
+@function grid-width($n) {
+@return $n*$grid-width+($n-1)*$gutter-width;
+}
+@function grid-width($n) {
+    @return $n * $grid-width + ( $n - 1 ) * $gutter-width ;
+}
+@function grid-width($n) {
+    @return  $n   *  $grid-width  +  (  $n  -  1  )  *  $gutter-width  ;
+}
+@function grid-width($n) {
+    @return $n
+        *
+        $grid-width
+        + (
+            $n
+            -
+            1
+        )
+        *
+        $gutter-width;
+}
+@function grid-width($n) {
+    @return
+        $n
+        *
+        $grid-width
+        + (
+            $n
+            -
+            1
+        )
+        *
+        $gutter-width;
+}
+@function
+grid-width(
+$n
+)
+{
+@return
+$n
+*
+$grid-width
++
+(
+$n
+-
+1
+)
+*
+$gutter-width
+;
+}
+@function
+
+grid-width(
+
+$n
+
+)
+
+{
+
+@return
+
+$n
+
+*
+
+$grid-width
+
++
+
+(
+
+$n
+
+-
+
+1
+
+)
+
+*
+
+$gutter-width
+
+;
+
+}
+@function grid-width($n) {
+    @return $very-very-very-very-very-very-vey-long-var * $very-very-very-very-very-very-vey-long-var + ($very-very-very-very-very-very-vey-long-var - 1) * $very-very-very-very-very-very-vey-long-var;
+}

tests/css_atrule/supports.css

@@ -13,6 +13,21 @@ transform-origin
 5%
 5%
 ) {}
+@supports
+
+(
+
+transform-origin
+
+:
+
+5%
+
+5%
+
+)
+
+{}
 @supports (very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-prop: very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-value) {}
 @supports
   (very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-prop: very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-value) {}
@@ -22,6 +37,19 @@ very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-
 :
 very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-value
 ) {}
+@supports
+
+(
+
+very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-prop
+
+:
+
+very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-value
+
+)
+
+{}
 @supports not(transform-origin: 10em 10em 10em) {}
 @supports not (transform-origin: 10em 10em 10em) {}
 @supports  not  ( transform-origin : 10em 10em 10em ) {}
@@ -42,6 +70,25 @@ transform-origin
 10em
 10em
 ) {}
+@supports
+
+not
+
+(
+
+transform-origin
+
+:
+
+10em
+
+10em
+
+10em
+
+)
+
+{}
 @supports not (very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-prop: very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-value) {}
 @supports
   not (very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-prop: very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-value) {}
@@ -54,6 +101,21 @@ very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-
 :
 very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-value
 ) {}
+@supports
+
+not
+
+(
+
+very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-prop
+
+:
+
+very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-value
+
+)
+
+{}
 @supports not (not (transform-origin: 2px)) {}
 @supports not(not(transform-origin:2px)) {}
 @supports not ( not ( transform-origin : 2px ) ) {}
@@ -74,6 +136,27 @@ transform-origin
 2px
 )
 ) {}
+@supports
+
+not
+
+(
+
+not
+
+(
+
+transform-origin
+
+:
+
+2px
+
+)
+
+)
+
+{}
 @supports (display: flexbox) and (not (display: inline-grid)) {}
 @supports (display: table-cell) and (display: list-item) {}
 @supports ( display : table-cell ) and ( display : list-item ) {}
@@ -96,6 +179,31 @@ display
 :
 list-item
 ) {}
+@supports
+
+(
+
+display
+
+:
+
+table-cell
+
+)
+
+and
+
+(
+
+display
+
+:
+
+list-item
+
+)
+
+{}
 @supports (display: table-cell) and (display: list-item) and (display: run-in) {}
 @supports (display: table-cell) and ((display: list-item) and (display: run-in)) {}
 @supports
@@ -126,6 +234,47 @@ display
 run-in
 )
 ) {}
+@supports
+
+(
+
+display
+
+:
+
+table-cell
+
+)
+
+and
+
+(
+
+(
+
+display
+
+:
+
+list-item
+
+)
+
+and
+
+(
+
+display
+
+:
+
+run-in
+
+)
+
+)
+
+{}
 @supports (transform-style: preserve) or (-moz-transform-style: preserve) {}
 @supports (transform-style: preserve) or (-moz-transform-style: preserve) or (-o-transform-style: preserve) or (-webkit-transform-style: preserve) {}
 @supports (transform-style: preserve-3d) or ((-moz-transform-style: preserve-3d) or ((-o-transform-style: preserve-3d) or (-webkit-transform-style: preserve-3d))) {}

tests/css_atrule/viewport.css

@@ -20,13 +20,34 @@ max-width: 800px;
 
 @viewport
 {
-  min-width: 640px;
-  max-width: 800px;
+min-width
+:
+640px
+;
+max-width
+:
+800px
+;
 }
 
 @viewport
 
 {
-  min-width: 640px;
-  max-width: 800px;
+
+min-width
+
+:
+
+640px
+
+;
+
+max-width
+
+:
+
+800px
+
+;
+
 }

tests/css_atrule/while.css

@@ -0,0 +1,110 @@
+@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) {}

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

@@ -1,5 +1,53 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`custom-selector.css 1`] = `
+@custom-selector :--icon i[class^='icon-'], i[class*=' icon-'];
+@custom-selector :--icon i[ class ^= 'icon-' ], i[ class *= ' icon-' ];
+@custom-selector
+:--icon
+i[
+class
+^=
+'icon-'
+]
+,
+i[
+class
+*=
+' icon-'
+]
+;
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+@custom-selector :--icon i[class^="icon-"], i[class*=" icon-"];
+@custom-selector :--icon i[class^="icon-"], i[class*=" icon-"];
+@custom-selector :--icon i[class^="icon-"], i[class*=" icon-"];
+
+`;
+
+exports[`custom-selector.css 2`] = `
+@custom-selector :--icon i[class^='icon-'], i[class*=' icon-'];
+@custom-selector :--icon i[ class ^= 'icon-' ], i[ class *= ' icon-' ];
+@custom-selector
+:--icon
+i[
+class
+^=
+'icon-'
+]
+,
+i[
+class
+*=
+' icon-'
+]
+;
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+@custom-selector :--icon i[class^='icon-'], i[class*=' icon-'];
+@custom-selector :--icon i[class^='icon-'], i[class*=' icon-'];
+@custom-selector :--icon i[class^='icon-'], i[class*=' icon-'];
+
+`;
+
 exports[`insensitive.css 1`] = `
 input[type="radio" i] {}
 img[alt~="person" i][src*="lorem" i] {}

tests/css_attribute/custom-selector.css

@@ -0,0 +1,16 @@
+@custom-selector :--icon i[class^='icon-'], i[class*=' icon-'];
+@custom-selector :--icon i[ class ^= 'icon-' ], i[ class *= ' icon-' ];
+@custom-selector
+:--icon
+i[
+class
+^=
+'icon-'
+]
+,
+i[
+class
+*=
+' icon-'
+]
+;

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

@@ -96,6 +96,30 @@ $KeepScssVar: val;
 @MEDIA (MIN-WIDTH: 700PX) /*:*/ {}
 
 @MEDIA (@{Keep}: @{Keep}) {}
+
+@KEYFRAMES identifier {
+  FROM {
+    margin-top: 50px;
+  }
+  50%  {
+    margin-top: 150px;
+  }
+  TO {
+    margin-top: 100px;
+  }
+}
+
+@-WEBKIT-KEYFRAMES float-up {
+  FROM {
+    margin-top: 50px;
+  }
+  50%  {
+    margin-top: 150px;
+  }
+  TO {
+    margin-top: 100px;
+  }
+}
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 // Convention in this test file:
 // - The case should be preserved for things prefixed with "Keep".
@@ -201,6 +225,30 @@ $KeepScssVar: val;
 @media (@{Keep}: @{Keep}) {
 }
 
+@keyframes identifier {
+  FROM {
+    margin-top: 50px;
+  }
+  50% {
+    margin-top: 150px;
+  }
+  TO {
+    margin-top: 100px;
+  }
+}
+
+@-webkit-keyframes float-up {
+  FROM {
+    margin-top: 50px;
+  }
+  50% {
+    margin-top: 150px;
+  }
+  TO {
+    margin-top: 100px;
+  }
+}
+
 `;
 
 exports[`case.scss 1`] = `
@@ -252,8 +300,8 @@ svg[viewBox] linearGradient,
 @custom-media --KeepCustomMedia screen and (width >= 768px);
 @media (--KeepCustomMedia) {}
 
-@FUNCTION KeepFuncName() {
-    @RETURN 12;
+@function KeepFuncName() {
+    @return 12;
 }
 
 %KeepPlaceholderSelector {
@@ -263,7 +311,7 @@ svg[viewBox] linearGradient,
 $KeepTopLevelVar: val;
 @KeepLessVar: val;
 
-@MIXIN KeepMixinName($Keep: 15IN, $Keep: $Keep15IN, $Keep: Keep-1E-2Em) {
+@mixin KeepMixinName($Keep: 15IN, $Keep: $Keep15IN, $Keep: Keep-1E-2Em) {
     $KeepVar: KeepFuncName();
     #{$KeepInterpolationVar}: val;
     #{$Keep + 15PX}: val;
@@ -292,7 +340,7 @@ $KeepTopLevelVar: val;
     }
 }
 
-@Mixin Keep($Keep: $Keep15IN, $Keep: Keepå1E1) {}
+@mixin Keep($Keep: $Keep15IN, $Keep: Keepå1E1) {}
 
 @MEDIA (MIN-WIDTH: 700PX) {
     @include Keep;
@@ -301,6 +349,30 @@ $KeepTopLevelVar: val;
 }
 
 @MEDIA (#{$Keep}: #{$Keep}) {}
+
+@KEYFRAMES identifier {
+  FROM {
+    margin-top: 50px;
+  }
+  50%  {
+    margin-top: 150px;
+  }
+  TO {
+    margin-top: 100px;
+  }
+}
+
+@-WEBKIT-KEYFRAMES float-up {
+  FROM {
+    margin-top: 50px;
+  }
+  50%  {
+    margin-top: 150px;
+  }
+  TO {
+    margin-top: 100px;
+  }
+}
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 // Convention in this test file:
 // - The case should be preserved for things prefixed with "Keep".
@@ -403,4 +475,28 @@ $KeepTopLevelVar: val;
 @media (#{$Keep}: #{$Keep}) {
 }
 
+@keyframes identifier {
+  FROM {
+    margin-top: 50px;
+  }
+  50% {
+    margin-top: 150px;
+  }
+  TO {
+    margin-top: 100px;
+  }
+}
+
+@-webkit-keyframes float-up {
+  FROM {
+    margin-top: 50px;
+  }
+  50% {
+    margin-top: 150px;
+  }
+  TO {
+    margin-top: 100px;
+  }
+}
+
 `;

tests/css_case/case.less

@@ -93,3 +93,27 @@ $KeepScssVar: val;
 @MEDIA (MIN-WIDTH: 700PX) /*:*/ {}
 
 @MEDIA (@{Keep}: @{Keep}) {}
+
+@KEYFRAMES identifier {
+  FROM {
+    margin-top: 50px;
+  }
+  50%  {
+    margin-top: 150px;
+  }
+  TO {
+    margin-top: 100px;
+  }
+}
+
+@-WEBKIT-KEYFRAMES float-up {
+  FROM {
+    margin-top: 50px;
+  }
+  50%  {
+    margin-top: 150px;
+  }
+  TO {
+    margin-top: 100px;
+  }
+}

tests/css_case/case.scss

@@ -46,8 +46,8 @@ svg[viewBox] linearGradient,
 @custom-media --KeepCustomMedia screen and (width >= 768px);
 @media (--KeepCustomMedia) {}
 
-@FUNCTION KeepFuncName() {
-    @RETURN 12;
+@function KeepFuncName() {
+    @return 12;
 }
 
 %KeepPlaceholderSelector {
@@ -57,7 +57,7 @@ svg[viewBox] linearGradient,
 $KeepTopLevelVar: val;
 @KeepLessVar: val;
 
-@MIXIN KeepMixinName($Keep: 15IN, $Keep: $Keep15IN, $Keep: Keep-1E-2Em) {
+@mixin KeepMixinName($Keep: 15IN, $Keep: $Keep15IN, $Keep: Keep-1E-2Em) {
     $KeepVar: KeepFuncName();
     #{$KeepInterpolationVar}: val;
     #{$Keep + 15PX}: val;
@@ -86,7 +86,7 @@ $KeepTopLevelVar: val;
     }
 }
 
-@Mixin Keep($Keep: $Keep15IN, $Keep: Keepå1E1) {}
+@mixin Keep($Keep: $Keep15IN, $Keep: Keepå1E1) {}
 
 @MEDIA (MIN-WIDTH: 700PX) {
     @include Keep;
@@ -95,3 +95,27 @@ $KeepTopLevelVar: val;
 }
 
 @MEDIA (#{$Keep}: #{$Keep}) {}
+
+@KEYFRAMES identifier {
+  FROM {
+    margin-top: 50px;
+  }
+  50%  {
+    margin-top: 150px;
+  }
+  TO {
+    margin-top: 100px;
+  }
+}
+
+@-WEBKIT-KEYFRAMES float-up {
+  FROM {
+    margin-top: 50px;
+  }
+  50%  {
+    margin-top: 150px;
+  }
+  TO {
+    margin-top: 100px;
+  }
+}

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

@@ -19,7 +19,10 @@ exports[`comment-in-if.css 1`] = `
     @return true;
   }
   // If $include is set to (all), make sure $section is not in $exclude.
-  @else if not index($_normalize-exclude, $section) and index($_normalize-include, all) {
+  @else if not
+    index($_normalize-exclude, $section) and
+    index($_normalize-include, all)
+  {
     @return true;
   }
   @return false;

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

@@ -18,6 +18,62 @@ exports[`multiple.css 1`] = `
 
 `;
 
+exports[`nested.css 1`] = `
+#main {
+    @import "example";
+}
+#main {
+@import "example";
+}
+#main {
+    @import "example" ;
+}
+#main {
+    @import  "example"  ;
+}
+#main {
+    @import
+        "example";
+}
+#main
+{
+@import
+"example";
+}
+#main
+
+{
+
+@import
+
+"example";
+
+}
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+#main {
+  @import "example";
+}
+#main {
+  @import "example";
+}
+#main {
+  @import "example";
+}
+#main {
+  @import "example";
+}
+#main {
+  @import "example";
+}
+#main {
+  @import "example";
+}
+#main {
+  @import "example";
+}
+
+`;
+
 exports[`nodes.css 1`] = `
 @import "test.less" {}
 

tests/css_import/nested.css

@@ -0,0 +1,30 @@
+#main {
+    @import "example";
+}
+#main {
+@import "example";
+}
+#main {
+    @import "example" ;
+}
+#main {
+    @import  "example"  ;
+}
+#main {
+    @import
+        "example";
+}
+#main
+{
+@import
+"example";
+}
+#main
+
+{
+
+@import
+
+"example";
+
+}

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

@@ -79,6 +79,223 @@ exports[`media.css 1`] = `
 
 `;
 
+exports[`nested.css 1`] = `
+.screen-color {
+    @media screen {
+        color: green;
+
+        @media (min-width: 768px) {
+            color: red;
+        }
+    }
+    @media tv {
+        color: black;
+    }
+}
+.screen-color {
+@media screen {
+color: green;
+
+@media (min-width: 768px) {
+color: red;
+}
+}
+@media tv {
+color: black;
+}
+}
+.screen-color{
+    @media screen{
+        color: green;
+
+        @media (min-width: 768px){
+            color: red;
+        }
+    }
+    @media tv{
+        color: black;
+    }
+}
+.screen-color  {
+    @media screen  {
+        color: green;
+
+        @media (min-width: 768px)  {
+            color: red;
+        }
+    }
+    @media tv  {
+        color: black;
+    }
+}
+.screen-color
+{
+@media
+screen
+{
+color
+:
+green
+;
+@media
+(
+min-width
+:
+768px
+)
+{
+color
+:
+red
+;
+}
+}
+@media
+tv
+{
+color
+:
+black
+;
+}
+}
+.screen-color
+
+{
+
+@media
+
+screen
+
+{
+
+color
+
+:
+
+green
+
+;
+
+@media
+
+(
+
+min-width
+
+:
+
+768px
+
+)
+
+{
+
+color
+
+:
+
+red
+
+;
+
+}
+
+}
+
+@media
+
+tv
+
+{
+
+color
+
+:
+
+black
+
+;
+
+}
+
+}
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+.screen-color {
+  @media screen {
+    color: green;
+
+    @media (min-width: 768px) {
+      color: red;
+    }
+  }
+  @media tv {
+    color: black;
+  }
+}
+.screen-color {
+  @media screen {
+    color: green;
+
+    @media (min-width: 768px) {
+      color: red;
+    }
+  }
+  @media tv {
+    color: black;
+  }
+}
+.screen-color {
+  @media screen {
+    color: green;
+
+    @media (min-width: 768px) {
+      color: red;
+    }
+  }
+  @media tv {
+    color: black;
+  }
+}
+.screen-color {
+  @media screen {
+    color: green;
+
+    @media (min-width: 768px) {
+      color: red;
+    }
+  }
+  @media tv {
+    color: black;
+  }
+}
+.screen-color {
+  @media screen {
+    color: green;
+    @media (min-width: 768px) {
+      color: red;
+    }
+  }
+  @media tv {
+    color: black;
+  }
+}
+.screen-color {
+  @media screen {
+    color: green;
+
+    @media (min-width: 768px) {
+      color: red;
+    }
+  }
+
+  @media tv {
+    color: black;
+  }
+}
+
+`;
+
 exports[`overflow.css 1`] = `
 @media all and (-webkit-min-device-pixel-ratio: 1.5), all and (-o-min-device-pixel-ratio: 3/2), all and (min--moz-device-pixel-ratio: 1.5), all and (min-device-pixel-ratio: 1.5) {
 }

tests/css_media/nested.css

@@ -0,0 +1,140 @@
+.screen-color {
+    @media screen {
+        color: green;
+
+        @media (min-width: 768px) {
+            color: red;
+        }
+    }
+    @media tv {
+        color: black;
+    }
+}
+.screen-color {
+@media screen {
+color: green;
+
+@media (min-width: 768px) {
+color: red;
+}
+}
+@media tv {
+color: black;
+}
+}
+.screen-color{
+    @media screen{
+        color: green;
+
+        @media (min-width: 768px){
+            color: red;
+        }
+    }
+    @media tv{
+        color: black;
+    }
+}
+.screen-color  {
+    @media screen  {
+        color: green;
+
+        @media (min-width: 768px)  {
+            color: red;
+        }
+    }
+    @media tv  {
+        color: black;
+    }
+}
+.screen-color
+{
+@media
+screen
+{
+color
+:
+green
+;
+@media
+(
+min-width
+:
+768px
+)
+{
+color
+:
+red
+;
+}
+}
+@media
+tv
+{
+color
+:
+black
+;
+}
+}
+.screen-color
+
+{
+
+@media
+
+screen
+
+{
+
+color
+
+:
+
+green
+
+;
+
+@media
+
+(
+
+min-width
+
+:
+
+768px
+
+)
+
+{
+
+color
+
+:
+
+red
+
+;
+
+}
+
+}
+
+@media
+
+tv
+
+{
+
+color
+
+:
+
+black
+
+;
+
+}
+
+}

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

@@ -4,7 +4,6 @@ exports[`quotes.css 1`] = `
 @charset "UTF-8";
 /* @charset must always have double quotes: https://www.w3.org/TR/css-syntax-3/#determine-the-fallback-encoding */
 /* Also, it has to be the very first thing in the file, but here are some more tests anyway: */
-@CHARSET "UTF-8"; /* Case insensitive for "consistency". */
 @charset 'UTF-8'; /* Single quotes are invalid here. Keep them since we don't know what the user is doing. */
 
 @supports (content: one "two" three 'four') {
@@ -97,7 +96,6 @@ one 'two' three {}
 @charset "UTF-8";
 /* @charset must always have double quotes: https://www.w3.org/TR/css-syntax-3/#determine-the-fallback-encoding */
 /* Also, it has to be the very first thing in the file, but here are some more tests anyway: */
-@charset "UTF-8"; /* Case insensitive for "consistency". */
 @charset 'UTF-8'; /* Single quotes are invalid here. Keep them since we don't know what the user is doing. */
 
 @supports (content: one "two" three "four") {
@@ -195,7 +193,6 @@ exports[`quotes.css 2`] = `
 @charset "UTF-8";
 /* @charset must always have double quotes: https://www.w3.org/TR/css-syntax-3/#determine-the-fallback-encoding */
 /* Also, it has to be the very first thing in the file, but here are some more tests anyway: */
-@CHARSET "UTF-8"; /* Case insensitive for "consistency". */
 @charset 'UTF-8'; /* Single quotes are invalid here. Keep them since we don't know what the user is doing. */
 
 @supports (content: one "two" three 'four') {
@@ -288,7 +285,6 @@ one 'two' three {}
 @charset "UTF-8";
 /* @charset must always have double quotes: https://www.w3.org/TR/css-syntax-3/#determine-the-fallback-encoding */
 /* Also, it has to be the very first thing in the file, but here are some more tests anyway: */
-@charset "UTF-8"; /* Case insensitive for "consistency". */
 @charset 'UTF-8'; /* Single quotes are invalid here. Keep them since we don't know what the user is doing. */
 
 @supports (content: one 'two' three 'four') {

tests/css_quotes/quotes.css

@@ -1,7 +1,6 @@
 @charset "UTF-8";
 /* @charset must always have double quotes: https://www.w3.org/TR/css-syntax-3/#determine-the-fallback-encoding */
 /* Also, it has to be the very first thing in the file, but here are some more tests anyway: */
-@CHARSET "UTF-8"; /* Case insensitive for "consistency". */
 @charset 'UTF-8'; /* Single quotes are invalid here. Keep them since we don't know what the user is doing. */
 
 @supports (content: one "two" three 'four') {

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

@@ -596,17 +596,17 @@ $map: map-merge($map, ($key: $value));
 $map: map-merge($map, ($key: $value));
 
 .card-column-simple {
-  @include breakpoint( getBp( md ) ) {
+  @include breakpoint(getBp(md)) {
     padding: $spacing_content-sm $spacing_content-md;
   }
 
-  @include breakpoint (getBp(md)) {
+  @include breakpoint(getBp(md)) {
     &:nth-child(2n + 3) {
       clear: both;
     }
   }
 
-  @include breakpoint (getBp(xl)) {
+  @include breakpoint(getBp(xl)) {
     &:nth-child(2n + 3) {
       clear: none;
     }
@@ -760,14 +760,9 @@ p {
   }
 }
 
-@each $animal in puma,
-  sea-slug,
-  cheerfulDog,
-  BigSalamander,
-  "string",
-  "another-string",
-  "camelCaseString",
-  "PascalCaseString" {
+@each $animal in puma, sea-slug, cheerfulDog, BigSalamander, "string",
+  "another-string", "camelCaseString", "PascalCaseString"
+{
   .#{$animal}-icon {
     background-image: url("/images/#{$animal}.png");
   }
@@ -872,7 +867,11 @@ p {
 @function myCalculationFunction($some-number, $anotherNumber, $BigNumber) {
   @return $some-number + $anotherNumber + $BigNumber;
 }
-@function AnotherMyCalculationFunction($some-number, $anotherNumber, $BigNumber: 100px) {
+@function AnotherMyCalculationFunction(
+  $some-number,
+  $anotherNumber,
+  $BigNumber: 100px
+) {
   @return $some-number + $anotherNumber + $BigNumber;
 }
 @function border($borders...) {

tests/stylefmt/readme/__snapshots__/jsfmt.spec.js.snap

@@ -29,7 +29,7 @@ padding: 12px
 }
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 // mixin for clearfix
-@mixin clearfix () {
+@mixin clearfix() {
   &:before,
   &:after {
     content: " ";

yarn.lock

@@ -4160,9 +4160,9 @@ shebang-regex@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/shebang-regex/-/shebang-regex-1.0.0.tgz#da42f49740c0b42db2ca9728571cb190c98efea3"
 
-shelljs@0.7.8:
-  version "0.7.8"
-  resolved "https://registry.yarnpkg.com/shelljs/-/shelljs-0.7.8.tgz#decbcf874b0d1e5fb72e14b164a9683048e9acb3"
+shelljs@0.8.1:
+  version "0.8.1"
+  resolved "https://registry.yarnpkg.com/shelljs/-/shelljs-0.8.1.tgz#729e038c413a2254c4078b95ed46e0397154a9f1"
   dependencies:
     glob "^7.0.0"
     interpret "^1.0.0"