| Param | Type | Default | Description | +
|---|---|---|---|
| options | Object | + | |
| [options.mapName] | String | tokens | Name the Sass map + |
+
| [options.showFileHeader] | Boolean | true | Whether or not to include a comment that has the build date + |
+
| [options.themeable] | Boolean | true | Whether or not to add the `!default` flag on Sass variables by default. This may be overridden by setting a `themeable` attribute in a token's definition. + |
+
| [options.outputReferences] | Boolean | false | Whether or not to keep references (a -> b -> c) in the output. + |
+
| options | Object | ||
| [options.showFileHeader] | Boolean | true | Whether or not to include a comment that has the build date + |
+
| [options.themeable] | Boolean | false | Whether or not to add the `!default` flag on Sass variables by default. This may be overridden by setting a `themeable` attribute in a token's definition. |
| [options.outputReferences] | Boolean | false | Whether or not to keep references (a -> b -> c) in the output. diff --git a/lib/common/formatHelpers/createPropertyFormatter.js b/lib/common/formatHelpers/createPropertyFormatter.js index 107da4bc1..3dd1d8af6 100644 --- a/lib/common/formatHelpers/createPropertyFormatter.js +++ b/lib/common/formatHelpers/createPropertyFormatter.js @@ -45,9 +45,10 @@ const defaultFormatting = { * @param {Dictionary} options.dictionary - The dictionary object sent to the formatter function * @param {String} options.format - Available formats are: 'css', 'sass', 'less', and 'stylus'. If you want to customize the format and can't use one of those predefined formats, use the `formatting` option * @param {Object} options.formatting - Custom formatting properties that define parts of a declaration line in code. The configurable strings are: prefix, indentation, separator, suffix, and commentStyle. Those are used to generate a line like this: `${indentation}${prefix}${prop.name}${separator} ${prop.value}${suffix}` + * @param {Boolean} options.themeable [false] - Whether tokens should default to being themeable. * @returns {Function} */ -function createPropertyFormatter({outputReferences, dictionary, format, formatting={}}) { +function createPropertyFormatter({ outputReferences, dictionary, format, formatting = {}, themeable = false }) { let {prefix, commentStyle, indentation, separator, suffix} = Object.assign({}, defaultFormatting, formatting); switch(format) { @@ -117,7 +118,8 @@ function createPropertyFormatter({outputReferences, dictionary, format, formatti to_ret_prop += prop.attributes.category === 'asset' ? `"${value}"` : value; - if (format == 'sass' && prop.themeable === true) { + const themeable_prop = typeof prop.themeable === 'boolean' ? prop.themeable : themeable; + if (format === 'sass' && themeable_prop) { to_ret_prop += ' !default'; } @@ -135,4 +137,4 @@ function createPropertyFormatter({outputReferences, dictionary, format, formatti } } -module.exports = createPropertyFormatter; \ No newline at end of file +module.exports = createPropertyFormatter; diff --git a/lib/common/formatHelpers/formattedVariables.js b/lib/common/formatHelpers/formattedVariables.js index 02830b3d0..a6b18ee1a 100644 --- a/lib/common/formatHelpers/formattedVariables.js +++ b/lib/common/formatHelpers/formattedVariables.js @@ -27,6 +27,7 @@ const defaultFormatting = { * @param {Object} options.dictionary - The dictionary object that gets passed to the formatter method. * @param {Boolean} options.outputReferences - Whether or not to output references * @param {Object} options.formatting - Custom formatting properties that define parts of a declaration line in code. This will get passed to `formatHelpers.createPropertyFormatter` and used for the `lineSeparator` between lines of code. + * @param {Boolean} options.themeable [false] - Whether tokens should default to being themeable. * @returns {String} * @example * ```js @@ -38,7 +39,7 @@ const defaultFormatting = { * }); * ``` */ -function formattedVariables({format, dictionary, outputReferences=false, formatting={}}) { +function formattedVariables({ format, dictionary, outputReferences = false, formatting = {}, themeable = false}) { let {allTokens} = dictionary; let {lineSeparator} = Object.assign({}, defaultFormatting, formatting); @@ -56,9 +57,9 @@ function formattedVariables({format, dictionary, outputReferences=false, formatt } return allTokens - .map(createPropertyFormatter({ outputReferences, dictionary, format, formatting })) + .map(createPropertyFormatter({ outputReferences, dictionary, format, formatting, themeable })) .filter(function(strVal) { return !!strVal }) .join(lineSeparator); } -module.exports = formattedVariables; \ No newline at end of file +module.exports = formattedVariables; diff --git a/lib/common/formats.js b/lib/common/formats.js index 063b16bfe..761e8b7de 100644 --- a/lib/common/formats.js +++ b/lib/common/formats.js @@ -84,6 +84,9 @@ module.exports = { * * @memberof Formats * @kind member + * @param {Object} options + * @param {Boolean} [options.outputReferences=false] - Whether or not to keep [references](/#/formats?id=references-in-output-files) (a -> b -> c) in the output. + * @param {Boolean} [options.themeable=true] - Whether or not tokens should default to being themeable, if not otherwise specified per token. * @example * ```scss * $color-background-base: #f0f0f0 !default; @@ -100,8 +103,15 @@ module.exports = { * ``` */ 'scss/map-deep': function({dictionary, options, file}) { - const template = _template(fs.readFileSync(__dirname + '/templates/scss/map-deep.template')); - return template({dictionary, file, options, fileHeader}); + const mapTemplate = _template(fs.readFileSync(__dirname + '/templates/scss/map-deep.template')); + + // Default the "themeable" option to true for backward compatibility. + const { outputReferences, themeable = true } = options; + return '\n' + + fileHeader({ file, commentStyle: 'long' }) + + formattedVariables({ format: 'sass', dictionary, outputReferences, themeable }) + + '\n' + + mapTemplate({dictionary, file}); }, // This will soon be removed, is left here only for backwards compatibility @@ -120,6 +130,7 @@ module.exports = { * @param {Object} options * @param {Boolean} [options.showFileHeader=true] - Whether or not to include a comment that has the build date * @param {Boolean} [options.outputReferences=false] - Whether or not to keep [references](/#/formats?id=references-in-output-files) (a -> b -> c) in the output. + * @param {Boolean} [options.themeable=false] - Whether or not tokens should default to being themeable, if not otherwise specified per token. * @example * ```scss * $color-background-base: #f0f0f0; @@ -127,9 +138,9 @@ module.exports = { * ``` */ 'scss/variables': function({dictionary, options, file}) { - const { outputReferences } = options; + const { outputReferences, themeable = false } = options; return fileHeader({file, commentStyle: 'short'}) + - formattedVariables({format: 'sass', dictionary, outputReferences}); + formattedVariables({format: 'sass', dictionary, outputReferences, themeable}); }, /** @@ -1165,4 +1176,4 @@ declare const ${moduleName}: ${JSON.stringify(treeWalker(dictionary.tokens), nul // Mark which formats are nested module.exports['json/nested'].nested = true; module.exports['javascript/module'].nested = true; -module.exports['javascript/object'].nested = true; \ No newline at end of file +module.exports['javascript/object'].nested = true; diff --git a/lib/common/templates/scss/map-deep.template b/lib/common/templates/scss/map-deep.template index 4a2654739..386c0d5af 100644 --- a/lib/common/templates/scss/map-deep.template +++ b/lib/common/templates/scss/map-deep.template @@ -13,21 +13,7 @@ // express or implied. See the License for the specific language governing // permissions and limitations under the License. %> -<%= fileHeader({file, commentStyle: 'long'}) %><% - // output the list of tokens as Sass variables - // - dictionary.allTokens.forEach(function(prop) { - var output = ''; - output += '$' + prop.name + ': ' + (prop.attributes.category==='asset' ? '"'+prop.value+'"' : prop.value) + ' !default;' - if(prop.comment) { - output += ' // ' + prop.comment; - } - output += '\n'; - print(output); - }); - - print('\n'); - +<% // output the list of tokens as a Sass nested map // (the values are pointing to the variables) // |