From 3bc3e801c8d0e59ec28a3ae3650dad7e1e30b68e Mon Sep 17 00:00:00 2001
From: Evilebot Tnawi <evilebottnawi@users.noreply.github.com>
Date: Tue, 23 Jan 2018 14:33:18 +0300
Subject: [PATCH] tests: `scss` syntax (#3757)

---
 .../css_scss/__snapshots__/jsfmt.spec.js.snap | 508 ++++++++++++++++++
 tests/css_scss/scss.css                       | 248 +++++++++
 2 files changed, 756 insertions(+)

diff --git a/tests/css_scss/__snapshots__/jsfmt.spec.js.snap b/tests/css_scss/__snapshots__/jsfmt.spec.js.snap
index c8462fc5..5ceb4810 100644
--- a/tests/css_scss/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/css_scss/__snapshots__/jsfmt.spec.js.snap
@@ -69,6 +69,254 @@ $default: "very-long-long-long-long-long-long-long-long-long-long-long-value"
 @error "Very long long long long long long long long long long long long long line Error (#{$message}).";
 @error
   "Very long long long long long long long long long long long long long line Error (#{$message}).";
+
+$buttonConfig: "save" 50px, 'cancel' 50px, "help" 100PX;
+
+$locale: "en_us";
+html[lang=#{$locale}] {
+  font-size: 10px;
+}
+$alertClass: "error";
+p.message-#{$alertClass} {
+  color: red;
+}
+$mediumBreakpoint: 768px;
+@media (max-width: #{$mediumBreakpoint}) {
+  a {
+    font-size: 18px;
+  }
+}
+
+p {
+  @media (max-width: 768px) {
+    font-size: 150%;
+
+    @media (orientation: landscape) {
+        line-height: 75%;
+    }
+  }
+}
+
+.popularAnimal {
+    background: gray;
+}
+.GoodBoy {
+    color: green;
+}
+.dog {
+  @extend .popularAnimal;
+  @extend .GoodBoy;
+  color: white;
+}
+
+%animal {
+  background: gray;
+}
+.cat {
+  @extend %animal;
+  color: white;
+}
+.dog {
+  @extend %animal;
+  color: black;
+}
+
+%mfw-standing-out {
+  font-size: 150%;
+  font-style: italic;
+  padding: 25px;
+}
+%mfwSlightlyShadowed {
+  @include box-shadow(black 2px 2px 10px); // from Compass
+}
+%MFWRounded {
+  @include border-radius(25px); // from Compass
+}
+#join-button {
+  @extend %mfw-standing-out;
+  @extend %mfwSlightlyShadowed;
+  @extend %MFWRounded;
+  background: green;
+  color: white;
+}
+
+a {
+  &:hover {
+    color: red;
+  }
+}
+p {
+  body.no-touch & {
+    display: none;
+  }
+}
+.foo.bar .baz.bang, .bip.qux {
+  $selector: &;
+}
+@mixin does-parent-exist {
+  @if & {
+    &:hover {
+      color: red;
+    }
+  } @else {
+    a {
+      color: red;
+    }
+  }
+}
+
+p {
+  @if 1 + 1 == 2 {
+    border: 1px solid;
+  }
+  @if 5 < 3 {
+    border: 2px dotted;
+  }
+  @if null {
+    border: 3px double;
+  }
+}
+
+$mosterType: monster;
+p {
+  @if $mosterType == ocean {
+    color: blue;
+  } @else if $mosterType == matador {
+    color: red;
+  } @else if $mosterType == monster {
+    color: green;
+  } @else if $mosterType == nightKing {
+    color: green;
+  } @else if $mosterType == VeryWickedWolf {
+    color: green;
+  } @else {
+    color: black;
+  }
+}
+
+@for $i from 1 through 3 {
+  .item-#{$i} {
+    width: 2em * $i;
+  }
+}
+
+@each $animal in puma, sea-slug, cheerfulDog, BigSalamander, "string", 'another-string', "camelCaseString", "PascalCaseString" {
+  .#{$animal}-icon {
+    background-image: url('/images/#{$animal}.png');
+  }
+}
+
+$i: 6;
+@while $i > 0 {
+  .item-#{$i} {
+    width: 2em * $i;
+  }
+  $i: $i - 2;
+}
+
+@mixin cool-border($width: 10px, $coolStyle: 'solid', $AwesomeColor: "black") {
+  border: $width $coolStyle $AwesomeColor;
+}
+
+p {
+  @include cool-border(1px, "solid", $fff);
+}
+p {
+  @include cool-border($width: 1px, $coolStyle: 'solid', $AwesomeColor: #fff);
+}
+p {
+  @include coolBorder();
+}
+
+@mixin coolBorder() {
+  border: 10px solid #fff;
+}
+p {
+  @include coolBorder(1px, "solid", $fff);
+}
+
+@mixin CoolBorder() {
+  border: 10px solid #fff;
+}
+p {
+  @include CoolBorder(1px, "solid", $fff);
+}
+
+@mixin box-shadow($shadows...) {
+  -moz-box-shadow: $shadows;
+  -webkit-box-shadow: $shadows;
+  box-shadow: $shadows;
+}
+.shadows {
+  @include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
+}
+
+@mixin apply-to-ie6-only {
+  * html {
+    @content;
+  }
+}
+@include apply-to-ie6-only {
+  #logo {
+    background-image: url(/logo.gif);
+  }
+}
+
+@mixin applyToIe6Only {
+  * html {
+    @content;
+  }
+}
+@include applyToIe6Only {
+  #logo {
+    background-image: url(/logo.gif);
+  }
+}
+
+@mixin ApplyToIe6Only {
+  * html {
+    @content;
+  }
+}
+@include ApplyToIe6Only {
+  #logo {
+    background-image: url(/logo.gif);
+  }
+}
+
+@mixin config-icon-colors($prefix, $colors...) {
+  @each $i in $colors {
+    .#{$prefix}#{nth($i, 1)} {
+      color: nth($i, 2);
+    }
+  }
+}
+@include config-icon-colors(
+  "icon-",
+  "save" green,
+  "cancel" gray,
+  "delete" red,
+  'wait' blue
+);
+
+@function my-calculation-function($some-number, $anotherNumber, $BigNumber){
+  @return $some-number + $anotherNumber + $BigNumber;
+}
+@function myCalculationFunction($some-number, $anotherNumber, $BigNumber){
+  @return $some-number + $anotherNumber + $BigNumber;
+}
+@function AnotherMyCalculationFunction($some-number, $anotherNumber, $BigNumber: 100px){
+  @return $some-number + $anotherNumber + $BigNumber;
+}
+@function border($borders...) {
+  @return $borders;
+}
+.foo {
+  padding: my-calculation-function(10px, 5px, 100px);
+  margin: myCalculationFunction($some-number: 10px, $anotherNumber: 5px, $BigNumber: 100px);
+  width: AnotherMyCalculationFunction(10px, 5px);
+  border: border(25px, 35px);
+}
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 @media #{$g-breakpoint-tiny} {
 }
@@ -140,4 +388,264 @@ $default: "very-long-long-long-long-long-long-long-long-long-long-long-value" !d
 @error "Very long long long long long long long long long long long long long line Error (#{$message}).";
 @error "Very long long long long long long long long long long long long long line Error (#{$message}).";
 
+$buttonConfig: "save" 50px, "cancel" 50px, "help" 100px;
+
+$locale: "en_us";
+html[lang="#{$locale}"] {
+  font-size: 10px;
+}
+$alertClass: "error";
+p.message-#{$alertClass} {
+  color: red;
+}
+$mediumBreakpoint: 768px;
+@media (max-width: #{$mediumBreakpoint}) {
+  a {
+    font-size: 18px;
+  }
+}
+
+p {
+  @media (max-width: 768px) {
+    font-size: 150%;
+
+    @media (orientation: landscape) {
+      line-height: 75%;
+    }
+  }
+}
+
+.popularAnimal {
+  background: gray;
+}
+.GoodBoy {
+  color: green;
+}
+.dog {
+  @extend .popularAnimal;
+  @extend .GoodBoy;
+  color: white;
+}
+
+%animal {
+  background: gray;
+}
+.cat {
+  @extend %animal;
+  color: white;
+}
+.dog {
+  @extend %animal;
+  color: black;
+}
+
+%mfw-standing-out {
+  font-size: 150%;
+  font-style: italic;
+  padding: 25px;
+}
+%mfwSlightlyShadowed {
+  @include box-shadow(black 2px 2px 10px); // from Compass
+}
+%MFWRounded {
+  @include border-radius(25px); // from Compass
+}
+#join-button {
+  @extend %mfw-standing-out;
+  @extend %mfwSlightlyShadowed;
+  @extend %MFWRounded;
+  background: green;
+  color: white;
+}
+
+a {
+  &:hover {
+    color: red;
+  }
+}
+p {
+  body.no-touch & {
+    display: none;
+  }
+}
+.foo.bar .baz.bang,
+.bip.qux {
+  $selector: &;
+}
+@mixin does-parent-exist {
+  @if & {
+    &:hover {
+      color: red;
+    }
+  } @else {
+    a {
+      color: red;
+    }
+  }
+}
+
+p {
+  @if 1 + 1 == 2 {
+    border: 1px solid;
+  }
+  @if 5 < 3 {
+    border: 2px dotted;
+  }
+  @if null {
+    border: 3px double;
+  }
+}
+
+$mosterType: monster;
+p {
+  @if $mosterType == ocean {
+    color: blue;
+  } @else if $mosterType == matador {
+    color: red;
+  } @else if $mosterType == monster {
+    color: green;
+  } @else if $mosterType == nightKing {
+    color: green;
+  } @else if $mosterType == VeryWickedWolf {
+    color: green;
+  } @else {
+    color: black;
+  }
+}
+
+@for $i from 1 through 3 {
+  .item-#{$i} {
+    width: 2em * $i;
+  }
+}
+
+@each $animal in puma,
+  sea-slug,
+  cheerfulDog,
+  BigSalamander,
+  "string",
+  "another-string",
+  "camelCaseString",
+  "PascalCaseString" {
+  .#{$animal}-icon {
+    background-image: url("/images/#{$animal}.png");
+  }
+}
+
+$i: 6;
+@while $i > 0 {
+  .item-#{$i} {
+    width: 2em * $i;
+  }
+  $i: $i - 2;
+}
+
+@mixin cool-border($width: 10px, $coolStyle: "solid", $AwesomeColor: "black") {
+  border: $width $coolStyle $AwesomeColor;
+}
+
+p {
+  @include cool-border(1px, "solid", $fff);
+}
+p {
+  @include cool-border($width: 1px, $coolStyle: "solid", $AwesomeColor: #fff);
+}
+p {
+  @include coolBorder();
+}
+
+@mixin coolBorder() {
+  border: 10px solid #fff;
+}
+p {
+  @include coolBorder(1px, "solid", $fff);
+}
+
+@mixin CoolBorder() {
+  border: 10px solid #fff;
+}
+p {
+  @include CoolBorder(1px, "solid", $fff);
+}
+
+@mixin box-shadow($shadows...) {
+  -moz-box-shadow: $shadows;
+  -webkit-box-shadow: $shadows;
+  box-shadow: $shadows;
+}
+.shadows {
+  @include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
+}
+
+@mixin apply-to-ie6-only {
+  * html {
+    @content;
+  }
+}
+@include apply-to-ie6-only {
+  #logo {
+    background-image: url(/logo.gif);
+  }
+}
+
+@mixin applyToIe6Only {
+  * html {
+    @content;
+  }
+}
+@include applyToIe6Only {
+  #logo {
+    background-image: url(/logo.gif);
+  }
+}
+
+@mixin ApplyToIe6Only {
+  * html {
+    @content;
+  }
+}
+@include ApplyToIe6Only {
+  #logo {
+    background-image: url(/logo.gif);
+  }
+}
+
+@mixin config-icon-colors($prefix, $colors...) {
+  @each $i in $colors {
+    .#{$prefix}#{nth($i, 1)} {
+      color: nth($i, 2);
+    }
+  }
+}
+@include config-icon-colors(
+  "icon-",
+  "save" green,
+  "cancel" gray,
+  "delete" red,
+  "wait" blue
+);
+
+@function my-calculation-function($some-number, $anotherNumber, $BigNumber) {
+  @return $some-number + $anotherNumber + $BigNumber;
+}
+@function myCalculationFunction($some-number, $anotherNumber, $BigNumber) {
+  @return $some-number + $anotherNumber + $BigNumber;
+}
+@function AnotherMyCalculationFunction($some-number, $anotherNumber, $BigNumber: 100px) {
+  @return $some-number + $anotherNumber + $BigNumber;
+}
+@function border($borders...) {
+  @return $borders;
+}
+.foo {
+  padding: my-calculation-function(10px, 5px, 100px);
+  margin: myCalculationFunction(
+    $some-number: 10px,
+    $anotherNumber: 5px,
+    $BigNumber: 100px
+  );
+  width: AnotherMyCalculationFunction(10px, 5px);
+  border: border(25px, 35px);
+}
+
 `;
diff --git a/tests/css_scss/scss.css b/tests/css_scss/scss.css
index 57d52da8..1d478490 100644
--- a/tests/css_scss/scss.css
+++ b/tests/css_scss/scss.css
@@ -59,3 +59,251 @@ $default: "very-long-long-long-long-long-long-long-long-long-long-long-value"
 @error "Very long long long long long long long long long long long long long line Error (#{$message}).";
 @error
   "Very long long long long long long long long long long long long long line Error (#{$message}).";
+
+$buttonConfig: "save" 50px, 'cancel' 50px, "help" 100PX;
+
+$locale: "en_us";
+html[lang=#{$locale}] {
+  font-size: 10px;
+}
+$alertClass: "error";
+p.message-#{$alertClass} {
+  color: red;
+}
+$mediumBreakpoint: 768px;
+@media (max-width: #{$mediumBreakpoint}) {
+  a {
+    font-size: 18px;
+  }
+}
+
+p {
+  @media (max-width: 768px) {
+    font-size: 150%;
+
+    @media (orientation: landscape) {
+        line-height: 75%;
+    }
+  }
+}
+
+.popularAnimal {
+    background: gray;
+}
+.GoodBoy {
+    color: green;
+}
+.dog {
+  @extend .popularAnimal;
+  @extend .GoodBoy;
+  color: white;
+}
+
+%animal {
+  background: gray;
+}
+.cat {
+  @extend %animal;
+  color: white;
+}
+.dog {
+  @extend %animal;
+  color: black;
+}
+
+%mfw-standing-out {
+  font-size: 150%;
+  font-style: italic;
+  padding: 25px;
+}
+%mfwSlightlyShadowed {
+  @include box-shadow(black 2px 2px 10px); // from Compass
+}
+%MFWRounded {
+  @include border-radius(25px); // from Compass
+}
+#join-button {
+  @extend %mfw-standing-out;
+  @extend %mfwSlightlyShadowed;
+  @extend %MFWRounded;
+  background: green;
+  color: white;
+}
+
+a {
+  &:hover {
+    color: red;
+  }
+}
+p {
+  body.no-touch & {
+    display: none;
+  }
+}
+.foo.bar .baz.bang, .bip.qux {
+  $selector: &;
+}
+@mixin does-parent-exist {
+  @if & {
+    &:hover {
+      color: red;
+    }
+  } @else {
+    a {
+      color: red;
+    }
+  }
+}
+
+p {
+  @if 1 + 1 == 2 {
+    border: 1px solid;
+  }
+  @if 5 < 3 {
+    border: 2px dotted;
+  }
+  @if null {
+    border: 3px double;
+  }
+}
+
+$mosterType: monster;
+p {
+  @if $mosterType == ocean {
+    color: blue;
+  } @else if $mosterType == matador {
+    color: red;
+  } @else if $mosterType == monster {
+    color: green;
+  } @else if $mosterType == nightKing {
+    color: green;
+  } @else if $mosterType == VeryWickedWolf {
+    color: green;
+  } @else {
+    color: black;
+  }
+}
+
+@for $i from 1 through 3 {
+  .item-#{$i} {
+    width: 2em * $i;
+  }
+}
+
+@each $animal in puma, sea-slug, cheerfulDog, BigSalamander, "string", 'another-string', "camelCaseString", "PascalCaseString" {
+  .#{$animal}-icon {
+    background-image: url('/images/#{$animal}.png');
+  }
+}
+
+$i: 6;
+@while $i > 0 {
+  .item-#{$i} {
+    width: 2em * $i;
+  }
+  $i: $i - 2;
+}
+
+@mixin cool-border($width: 10px, $coolStyle: 'solid', $AwesomeColor: "black") {
+  border: $width $coolStyle $AwesomeColor;
+}
+
+p {
+  @include cool-border(1px, "solid", $fff);
+}
+p {
+  @include cool-border($width: 1px, $coolStyle: 'solid', $AwesomeColor: #fff);
+}
+p {
+  @include coolBorder();
+}
+
+@mixin coolBorder() {
+  border: 10px solid #fff;
+}
+p {
+  @include coolBorder(1px, "solid", $fff);
+}
+
+@mixin CoolBorder() {
+  border: 10px solid #fff;
+}
+p {
+  @include CoolBorder(1px, "solid", $fff);
+}
+
+@mixin box-shadow($shadows...) {
+  -moz-box-shadow: $shadows;
+  -webkit-box-shadow: $shadows;
+  box-shadow: $shadows;
+}
+.shadows {
+  @include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
+}
+
+@mixin apply-to-ie6-only {
+  * html {
+    @content;
+  }
+}
+@include apply-to-ie6-only {
+  #logo {
+    background-image: url(/logo.gif);
+  }
+}
+
+@mixin applyToIe6Only {
+  * html {
+    @content;
+  }
+}
+@include applyToIe6Only {
+  #logo {
+    background-image: url(/logo.gif);
+  }
+}
+
+@mixin ApplyToIe6Only {
+  * html {
+    @content;
+  }
+}
+@include ApplyToIe6Only {
+  #logo {
+    background-image: url(/logo.gif);
+  }
+}
+
+@mixin config-icon-colors($prefix, $colors...) {
+  @each $i in $colors {
+    .#{$prefix}#{nth($i, 1)} {
+      color: nth($i, 2);
+    }
+  }
+}
+@include config-icon-colors(
+  "icon-",
+  "save" green,
+  "cancel" gray,
+  "delete" red,
+  'wait' blue
+);
+
+@function my-calculation-function($some-number, $anotherNumber, $BigNumber){
+  @return $some-number + $anotherNumber + $BigNumber;
+}
+@function myCalculationFunction($some-number, $anotherNumber, $BigNumber){
+  @return $some-number + $anotherNumber + $BigNumber;
+}
+@function AnotherMyCalculationFunction($some-number, $anotherNumber, $BigNumber: 100px){
+  @return $some-number + $anotherNumber + $BigNumber;
+}
+@function border($borders...) {
+  @return $borders;
+}
+.foo {
+  padding: my-calculation-function(10px, 5px, 100px);
+  margin: myCalculationFunction($some-number: 10px, $anotherNumber: 5px, $BigNumber: 100px);
+  width: AnotherMyCalculationFunction(10px, 5px);
+  border: border(25px, 35px);
+}