feat: add support for !default in SCSS variables format (#359)

Fixes #307

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

__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,17 @@ describe('formats', () => {
       });
     });
 
+    it('should optionally use !default', () => {
+      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;");
+    });
   });
 });

lib/common/formats.js

@@ -38,9 +38,32 @@ 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 + ': ' + (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 (format == 'sass' && prop.themeable === true) {
+        to_ret_prop += ' !default';
+      }
+
+      to_ret_prop += ';';
 
       if (prop.comment) {
         if (commentStyle === 'short') {
@@ -104,7 +127,7 @@ module.exports = {
   'css/variables': function(dictionary) {
     return fileHeader(this.options) +
       ':root {\n' +
-      variablesWithPrefix('  --', dictionary.allProperties) +
+      formattedVariables('css', dictionary.allProperties) +
       '\n}\n';
   },
 
@@ -175,18 +198,20 @@ 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) {
-    return fileHeader(this.options, 'short') + variablesWithPrefix('$', dictionary.allProperties, 'short');
+    return fileHeader(this.options, 'short') + formattedVariables('sass', dictionary.allProperties);
   },
 
   /**
@@ -216,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);
   },
 
   /**