fix(scss): `!default` directive (#3724)

src/language-css/parser-postcss.js

@@ -161,6 +161,8 @@ function parseMediaQuery(value) {
   return addTypePrefix(result, "media-");
 }
 
+const DEFAULT_SCSS_DIRECTIVE = "!default";
+
 function parseNestedCSS(node) {
   if (node && typeof node === "object") {
     delete node.parent;
@@ -189,6 +191,11 @@ function parseNestedCSS(node) {
     }
     if (node.type && typeof node.value === "string") {
       try {
+        if (node.value.endsWith(DEFAULT_SCSS_DIRECTIVE)) {
+          node.default = true;
+          node.value = node.value.slice(0, -DEFAULT_SCSS_DIRECTIVE.length);
+        }
+
         node.value = parseValue(node.value);
       } catch (e) {
         throw createError(

src/language-css/printer-postcss.js

@@ -96,6 +96,7 @@ function genericPrint(path, options, print) {
           ? removeLines(path.call(print, "value"))
           : path.call(print, "value"),
         n.important ? " !important" : "",
+        n.default ? " !default" : "",
         n.nodes
           ? concat([
               " {",

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

@@ -19,6 +19,20 @@ div {
 }
 a { margin: 0 { left: 10px; } }
 $map: (color: #111111, text-shadow: 1px 1px 0 salmon);
+$theme-checkbox-colors: (
+    default: $theme-color-border,
+    checked: $theme-color-checked,
+    disabled: $theme-color-disabled,
+    disabled-font: $theme-color-font-secondary,
+) !default;
+$default: #111111 !default;
+$default: #111111   !default;
+$default: #111111
+!default;
+$default: "very-long-long-long-long-long-long-long-long-long-long-long-value" !default;
+$default: "very-long-long-long-long-long-long-long-long-long-long-long-value"   !default;
+$default: "very-long-long-long-long-long-long-long-long-long-long-long-value"
+!default;
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 @media #{$g-breakpoint-tiny} {
 }
@@ -43,5 +57,17 @@ $map: (
   color: #111111,
   text-shadow: 1px 1px 0 salmon
 );
+$theme-checkbox-colors: (
+  default: $theme-color-border,
+  checked: $theme-color-checked,
+  disabled: $theme-color-disabled,
+  disabled-font: $theme-color-font-secondary
+) !default;
+$default: #111111 !default;
+$default: #111111 !default;
+$default: #111111 !default;
+$default: "very-long-long-long-long-long-long-long-long-long-long-long-value" !default;
+$default: "very-long-long-long-long-long-long-long-long-long-long-long-value" !default;
+$default: "very-long-long-long-long-long-long-long-long-long-long-long-value" !default;
 
 `;

tests/css_scss/scss.css

@@ -9,3 +9,17 @@ div {
 }
 a { margin: 0 { left: 10px; } }
 $map: (color: #111111, text-shadow: 1px 1px 0 salmon);
+$theme-checkbox-colors: (
+    default: $theme-color-border,
+    checked: $theme-color-checked,
+    disabled: $theme-color-disabled,
+    disabled-font: $theme-color-font-secondary,
+) !default;
+$default: #111111 !default;
+$default: #111111   !default;
+$default: #111111
+!default;
+$default: "very-long-long-long-long-long-long-long-long-long-long-long-value" !default;
+$default: "very-long-long-long-long-long-long-long-long-long-long-long-value"   !default;
+$default: "very-long-long-long-long-long-long-long-long-long-long-long-value"
+!default;