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) {