From f0e837e31aff8b41def5386e9f1c1a77a8a1e987 Mon Sep 17 00:00:00 2001
From: Jeremy McDuffie <jmmcduffie@users.noreply.github.com>
Date: Sat, 23 Nov 2019 14:10:29 -0600
Subject: [PATCH] feat: add support for !default in SCSS variables format

For any token definition that includes the property
`themeable: true`, a `!default` will now be added in
the scss/variables format.

GitHub issue #307
---
 __tests__/__output/json-nested.json     | 12 ++++++++++++
 __tests__/formats/scssVariables.test.js | 14 ++++++++++++++
 lib/common/formats.js                   | 16 +++++++++++++---
 3 files changed, 39 insertions(+), 3 deletions(-)
 create mode 100644 __tests__/__output/json-nested.json

diff --git a/__tests__/__output/json-nested.json b/__tests__/__output/json-nested.json
new file mode 100644
index 000000000..943677682
--- /dev/null
+++ b/__tests__/__output/json-nested.json
@@ -0,0 +1,12 @@
+{
+  "color": {
+    "base": {
+      "red": {
+        "primary": "#611D1C",
+        "secondary": {
+          "inverse": "#000000"
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/__tests__/formats/scssVariables.test.js b/__tests__/formats/scssVariables.test.js
index 3cf3dd7ec..d5b2ca5e7 100644
--- a/__tests__/formats/scssVariables.test.js
+++ b/__tests__/formats/scssVariables.test.js
@@ -13,6 +13,7 @@
 
 var formats = require('../../lib/common/formats');
 var scss = require('node-sass');
+var _ = require('lodash');
 
 var file = {
   "destination": "__output/",
@@ -62,5 +63,18 @@ describe('formats', () => {
       });
     });
 
+    it('should optionally use !default', done => {
+      var themeableDictionary = _.cloneDeep(dictionary),
+        formattedScss = formatter(dictionary),
+        themeableScss = "";
+
+      expect(formattedScss).not.toMatch("!default");
+
+      themeableDictionary.allProperties[0].themeable = true;
+      themeableScss = formatter(themeableDictionary);
+
+      expect(themeableScss).toMatch("#EF5350 !default;");
+      return done();
+    });
   });
 });
diff --git a/lib/common/formats.js b/lib/common/formats.js
index 0531189b3..30603680c 100644
--- a/lib/common/formats.js
+++ b/lib/common/formats.js
@@ -40,7 +40,14 @@ function fileHeader(options, commentStyle) {
 
 function variablesWithPrefix(prefix, properties, commentStyle) {
   return properties.map(function(prop) {
-      var to_ret_prop = prefix + prop.name + ': ' + (prop.attributes.category==='asset' ? '"'+prop.value+'"' : prop.value) + ';';
+      var to_ret_prop = prefix + prop.name + ': ';
+      to_ret_prop += (prop.attributes.category==='asset' ? '"'+prop.value+'"' : prop.value);
+
+      if (prop.themeable === true) {
+        to_ret_prop += ' !default';
+      }
+
+      to_ret_prop += ';';
 
       if (prop.comment) {
         if (commentStyle === 'short') {
@@ -175,14 +182,16 @@ module.exports = {
   },
 
   /**
-   * Creates a SCSS file with variable definitions based on the style dictionary
+   * Creates a SCSS file with variable definitions based on the style dictionary.
+   *
+   * Add `!default` to any variable by setting a `themeable: true` property in the token's definition.
    *
    * @memberof Formats
    * @kind member
    * @example
    * ```scss
    * $color-background-base: #f0f0f0;
-   * $color-background-alt: #eeeeee;
+   * $color-background-alt: #eeeeee !default;
    * ```
    */
   'scss/variables': function(dictionary) {
@@ -371,6 +380,7 @@ module.exports = {
       dictionary.allProperties.map(function(prop) {
         var to_ret_prop = 'export const ' + prop.name + ' = ' + JSON.stringify(prop.value) + ';';
         if (prop.comment)
+
           to_ret_prop = to_ret_prop.concat(' // ' + prop.comment);
         return to_ret_prop;
       }).join('\n');