From 12b7754f940e0ab1bcf3b40970b6ae3d33109c8c 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 1/2] 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__/formats/scssVariables.test.js | 14 ++++++++++++++
 lib/common/formats.js                   | 15 ++++++++++++---
 2 files changed, 26 insertions(+), 3 deletions(-)

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..79c2f6a22 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) {

From e98f4a2ac9274012decdad30893f7b60b864440d Mon Sep 17 00:00:00 2001
From: Jeremy McDuffie <jmmcduffie@users.noreply.github.com>
Date: Thu, 5 Dec 2019 09:25:19 -0600
Subject: [PATCH 2/2] fix: address feedback from code review

---
 __tests__/formats/scssVariables.test.js |  3 +--
 lib/common/formats.js                   | 26 ++++++++++++++++++++-----
 2 files changed, 22 insertions(+), 7 deletions(-)

diff --git a/__tests__/formats/scssVariables.test.js b/__tests__/formats/scssVariables.test.js
index d5b2ca5e7..a30cec3bb 100644
--- a/__tests__/formats/scssVariables.test.js
+++ b/__tests__/formats/scssVariables.test.js
@@ -63,7 +63,7 @@ describe('formats', () => {
       });
     });
 
-    it('should optionally use !default', done => {
+    it('should optionally use !default', () => {
       var themeableDictionary = _.cloneDeep(dictionary),
         formattedScss = formatter(dictionary),
         themeableScss = "";
@@ -74,7 +74,6 @@ describe('formats', () => {
       themeableScss = formatter(themeableDictionary);
 
       expect(themeableScss).toMatch("#EF5350 !default;");
-      return done();
     });
   });
 });
diff --git a/lib/common/formats.js b/lib/common/formats.js
index 79c2f6a22..add5f9cf4 100644
--- a/lib/common/formats.js
+++ b/lib/common/formats.js
@@ -38,12 +38,28 @@ function fileHeader(options, commentStyle) {
   return to_ret;
 }
 
-function variablesWithPrefix(prefix, properties, commentStyle) {
+function formattedVariables(format, properties) {
+  var prefix, commentStyle;
+
+  switch(format) {
+    case 'css':
+      prefix = '  --';
+      break;
+    case 'sass':
+      prefix = '$';
+      commentStyle = 'short';
+      break;
+    case 'less':
+      prefix = '@';
+      commentStyle = 'short';
+      break;
+  }
+
   return properties.map(function(prop) {
       var to_ret_prop = prefix + prop.name + ': ';
       to_ret_prop += (prop.attributes.category==='asset' ? '"'+prop.value+'"' : prop.value);
 
-      if (prop.themeable === true) {
+      if (format == 'sass' && prop.themeable === true) {
         to_ret_prop += ' !default';
       }
 
@@ -111,7 +127,7 @@ module.exports = {
   'css/variables': function(dictionary) {
     return fileHeader(this.options) +
       ':root {\n' +
-      variablesWithPrefix('  --', dictionary.allProperties) +
+      formattedVariables('css', dictionary.allProperties) +
       '\n}\n';
   },
 
@@ -195,7 +211,7 @@ module.exports = {
    * ```
    */
   'scss/variables': function(dictionary) {
-    return fileHeader(this.options, 'short') + variablesWithPrefix('$', dictionary.allProperties, 'short');
+    return fileHeader(this.options, 'short') + formattedVariables('sass', dictionary.allProperties);
   },
 
   /**
@@ -225,7 +241,7 @@ module.exports = {
    * ```
    */
   'less/variables': function(dictionary) {
-    return fileHeader(this.options, 'short') + variablesWithPrefix('@', dictionary.allProperties, 'short');
+    return fileHeader(this.options, 'short') + formattedVariables('less', dictionary.allProperties);
   },
 
   /**