style-dictionary 3.0.0 → 3.1.0

package/README.md

@@ -22,6 +22,9 @@ For detailed usage head to https://amzn.github.io/style-dictionary
 ## Watch the Demo on Youtube
 [![Watch the video](/docs/assets/fake_player.png)](http://youtu.be/1HREvonfqhY)
 
+## Experiment in the playground
+Try the browser-based Style Dictionary playground: [https://www.style-dictionary-play.dev/](https://www.style-dictionary-play.dev/), built by the folks at [\<div\>RIOTS](https://divriots.com/).
+
 ## Contents
 * [Installation](#installation)
 * [Usage](#usage)

package/bin/style-dictionary

@@ -29,7 +29,7 @@ function getConfigPath(options) {
       process.exit(1);
     }
   }
-  
+
   return configPath;
 }
 
@@ -72,7 +72,7 @@ program
 
 // error on unknown commands
 program.on('command:*', function () {
-  console.error('Invalid command: %s\nSee --help for a list of available commands.', args.join(' '));
+  console.error('Invalid command: %s\nSee --help for a list of available commands.', process.argv.slice(2).join(' '));
   process.exit(1);
 });
 

package/examples/advanced/assets-base64-embed/package.json

@@ -11,6 +11,6 @@
   "author": "",
   "license": "Apache-2.0",
   "devDependencies": {
-    "style-dictionary": "3.0.0"
+    "style-dictionary": "3.1.0"
   }
 }

package/examples/advanced/auto-rebuild-watcher/package.json

@@ -10,13 +10,13 @@
   "scripts": {
     "build": "node_modules/.bin/style-dictionary build",
     "clean": "rm -rf build",
-    "watch": "npm run build && chokidar  \"properties/**/*.json\" -c \"npm run build\"",
+    "watch": "npm run build && chokidar  \"tokens/**/*.json\" -c \"npm run build\"",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "author": "",
   "license": "Apache-2.0",
   "devDependencies": {
     "chokidar-cli": "^1.2.0",
-    "style-dictionary": "3.0.0"
+    "style-dictionary": "3.1.0"
   }
 }

package/examples/advanced/component-cti/package.json

@@ -15,6 +15,6 @@
   "author": "",
   "license": "Apache-2.0",
   "devDependencies": {
-    "style-dictionary": "3.0.0"
+    "style-dictionary": "3.1.0"
   }
 }

package/examples/advanced/create-react-app/package.json

@@ -3,14 +3,14 @@
   "description": "",
   "version": "1.0.0",
   "dependencies": {
-    "node-sass": "^5.0.0",
+    "node-sass": "^6.0.1",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-scripts": "^4.0.3",
-    "styled-components": "^5.2.1"
+    "styled-components": "^5.3.0"
   },
   "devDependencies": {
-    "style-dictionary": "3.0.0"
+    "style-dictionary": "3.1.0"
   },
   "resolutions": {
     "immer": "8.0.1",

package/examples/advanced/create-react-native-app/package.json

@@ -27,7 +27,7 @@
     "babel-jest": "~25.2.6",
     "jest": "~25.2.6",
     "react-test-renderer": "~16.13.1",
-    "style-dictionary": "3.0.0"
+    "style-dictionary": "3.1.0"
   },
   "jest": {
     "preset": "react-native"

package/examples/advanced/custom-file-header/package.json

@@ -10,6 +10,6 @@
   "author": "",
   "license": "ISC",
   "devDependencies": {
-    "style-dictionary": "3.0.0"
+    "style-dictionary": "3.1.0"
   }
 }

package/examples/advanced/custom-formats-with-templates/package.json

@@ -18,6 +18,6 @@
     "handlebars": "^4.7.7",
     "lodash": "^4.17.21",
     "pug": "^3.0.2",
-    "style-dictionary": "3.0.0"
+    "style-dictionary": "3.1.0"
   }
 }

package/examples/advanced/custom-parser/package.json

@@ -9,6 +9,6 @@
   "author": "",
   "license": "Apache-2.0",
   "devDependencies": {
-    "style-dictionary": "3.0.0"
+    "style-dictionary": "3.1.0"
   }
 }

package/examples/advanced/custom-transforms/build.js

@@ -95,7 +95,7 @@ StyleDictionary.registerTransformGroup({
 
 StyleDictionary.registerFormat({
   name: 'custom/android/xml',
-  formatter: function(dictionary) {
+  formatter: function({ dictionary }) {
     return dictionary.allTokens.map(function(token) {
       return `<item name="${token.name}">${token.value}</item>`;
     }).join('\n');

package/examples/advanced/custom-transforms/package.json

@@ -15,6 +15,6 @@
   "author": "",
   "license": "Apache-2.0",
   "devDependencies": {
-    "style-dictionary": "3.0.0"
+    "style-dictionary": "3.1.0"
   }
 }

package/examples/advanced/format-helpers/package.json

@@ -10,6 +10,6 @@
   "author": "",
   "license": "Apache-2.0",
   "devDependencies": {
-    "style-dictionary": "3.0.0"
+    "style-dictionary": "3.1.0"
   }
 }

package/examples/advanced/format-helpers/sd.config.js

@@ -30,7 +30,7 @@ module.exports = {
       // proper style. If the file has a custom file header defined, or
       // showFileHeader option, it will honor those.
       return fileHeader({file, commentStyle: 'short'}) +
-        dictionary.allProperties
+        dictionary.allTokens
           // sortByReference returns a function that can be used as to sort
           // an array. This will sort the array so that references always
           // come after their instantiation so that there are no errors

package/examples/advanced/matching-build-files/config.js

@@ -81,7 +81,7 @@ module.exports = {
 
 StyleDictionary.registerFormat({
   name: "custom/cjsmodule",
-  formatter: function (dictionary) {
+  formatter: function({ dictionary }) {
     return `module.exports = {${dictionary.allTokens.map(
       (token) => `\n\t${token.name}: "${token.value}"`
     )}\n};`;

package/examples/advanced/matching-build-files/package.json

@@ -16,6 +16,6 @@
   "author": "Kelly Harrop <kn.harrop@gmail.com>",
   "license": "Apache-2.0",
   "devDependencies": {
-    "style-dictionary": "3.0.0"
+    "style-dictionary": "3.1.0"
   }
 }

package/examples/advanced/multi-brand-multi-platform/package.json

@@ -15,6 +15,6 @@
   "author": "",
   "license": "Apache-2.0",
   "devDependencies": {
-    "style-dictionary": "3.0.0"
+    "style-dictionary": "3.1.0"
   }
 }

package/examples/advanced/node-modules-as-config-and-properties/config.js

@@ -18,7 +18,7 @@ StyleDictionary.registerTransform({
 
 StyleDictionary.registerFormat({
   name: 'myRegisteredFormat',
-  formatter: (dictionary) => {
+  formatter: ({ dictionary }) => {
     return dictionary.allTokens.map((token) => token.value).join('\n');
   }
 })

package/examples/advanced/node-modules-as-config-and-properties/package.json

@@ -19,7 +19,7 @@
   },
   "homepage": "https://github.com/dbanksdesign/style-dictionary-node#readme",
   "devDependencies": {
-    "style-dictionary": "3.0.0",
+    "style-dictionary": "3.1.0",
     "tinycolor2": "^1.4.1"
   }
 }

package/examples/advanced/npm-module/package.json

@@ -16,6 +16,6 @@
   "author": "",
   "license": "Apache-2.0",
   "devDependencies": {
-    "style-dictionary": "3.0.0"
+    "style-dictionary": "3.1.0"
   }
 }

package/examples/advanced/referencing_aliasing/package.json

@@ -15,6 +15,6 @@
   "author": "",
   "license": "Apache-2.0",
   "devDependencies": {
-    "style-dictionary": "3.0.0"
+    "style-dictionary": "3.1.0"
   }
 }

package/examples/advanced/s3/package.json

@@ -15,6 +15,6 @@
   "devDependencies": {
     "aws-sdk": "^2.7.21",
     "fs-extra": "^1.0.0",
-    "style-dictionary": "3.0.0"
+    "style-dictionary": "3.1.0"
   }
 }

package/examples/advanced/tokens-deprecation/package.json

@@ -16,6 +16,6 @@
   "license": "Apache-2.0",
   "devDependencies": {
     "lodash": "^4.17.11",
-    "style-dictionary": "3.0.0"
+    "style-dictionary": "3.1.0"
   }
 }

package/examples/advanced/transitive-transforms/package.json

@@ -11,6 +11,6 @@
   "license": "ISC",
   "devDependencies": {
     "chroma-js": "^2.1.0",
-    "style-dictionary": "3.0.0"
+    "style-dictionary": "3.1.0"
   }
 }

package/examples/advanced/variables-in-outputs/README.md

@@ -24,17 +24,21 @@ The `sd.config.js` file has everything you need to see. The tokens included in t
 Here is an example that shows how to get an alias's name within a custom format:
 ```javascript
 //...
-function(dictionary) {
+function({ dictionary }) {
   return dictionary.allTokens.map(token => {
     let value = JSON.stringify(token.value);
     // the `dictionary` object now has `usesReference()` and
     // `getReferences()` methods. `usesReference()` will return true if
     // the value has a reference in it. `getReferences()` will return 
-    // an array of references to the whole tokens so that you can access its 
-    // name or any other attributes.
+    // an array of references to the whole tokens so that you can access their
+    // names or any other attributes.
     if (dictionary.usesReference(token.original.value)) {
-      const reference = dictionary.getReferences(token.original.value);
-      value = reference.name;
+      const refs = dictionary.getReferences(token.original.value);
+      refs.forEach(ref => {
+        value = value.replace(ref.value, function() {
+          return `${ref.name}`;
+        });
+      });
     }
     return `export const ${token.name} = ${value};`
   }).join(`\n`)

package/examples/advanced/variables-in-outputs/package.json

@@ -10,6 +10,6 @@
   "author": "",
   "license": "MIT",
   "devDependencies": {
-    "style-dictionary": "3.0.0"
+    "style-dictionary": "3.1.0"
   }
 }

package/examples/advanced/variables-in-outputs/sd.config.js

@@ -9,11 +9,15 @@ module.exports = {
           // the `dictionary` object now has `usesReference()` and
           // `getReferences()` methods. `usesReference()` will return true if
           // the value has a reference in it. `getReferences()` will return
-          // an array of references to the whole tokens so that you can access its
-          // name or any other attributes.
+          // an array of references to the whole tokens so that you can access
+          // their names or any other attributes.
           if (dictionary.usesReference(token.original.value)) {
-            const reference = dictionary.getReferences(token.original.value);
-            value = reference.name;
+            const refs = dictionary.getReferences(token.original.value);
+            refs.forEach(ref => {
+              value = value.replace(ref.value, function() {
+                return `${ref.name}`;
+              });
+            });
           }
         }
 

package/examples/advanced/yaml-tokens/package.json

@@ -9,7 +9,7 @@
   "author": "",
   "license": "Apache-2.0",
   "devDependencies": {
-    "style-dictionary": "3.0.0",
+    "style-dictionary": "3.1.0",
     "yaml": "^1.10.0"
   }
 }

package/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;
+module.exports = createPropertyFormatter;

package/lib/common/formatHelpers/fileHeader.js

@@ -38,7 +38,7 @@ const defaultFormatting = {
  * StyleDictionary.registerFormat({
  *   name: 'myCustomFormat',
  *   formatter: function({ dictionary, file }) {
- *     return fileHeader({file, 'short') +
+ *     return fileHeader({file, commentStyle: 'short'}) +
  *       dictionary.allTokens.map(token => `${token.name} = ${token.value}`)
  *         .join('\n');
  *   }

package/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;
+module.exports = formattedVariables;

package/lib/common/formatHelpers/getTypeScriptType.js

@@ -0,0 +1,77 @@
+/*
+ * Copyright 2017 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License"). You may not use this file except in compliance with
+ * the License. A copy of the License is located at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * or in the "license" file accompanying this file. This file is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR
+ * CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions
+ * and limitations under the License.
+ */
+const { unique } = require('../../utils/es6_');
+
+/**
+ * Given some value, returns a basic valid TypeScript type for that value.
+ * Supports numbers, strings, booleans, arrays and objects of any of those types.
+ *
+ * @memberof module:formatHelpers
+ * @example
+ * ```javascript
+ * StyleDictionary.registerFormat({
+ *   name: 'myCustomFormat',
+ *   formatter: function({ dictionary, options }) {
+ *    return dictionary.allProperties.map(function(prop) {
+ *      var to_ret_prop = 'export const ' + prop.name + ' : ' + getTypeScriptType(prop.value) + ';';
+ *      if (prop.comment)
+ *        to_ret_prop = to_ret_prop.concat(' // ' + prop.comment);
+ *      return to_ret_prop;
+ *    }).join('\n');
+ *   }
+ * });
+ *
+ * @param {*} value A value to check the type of.
+ * @return {String} A valid name for a TypeScript type.
+ * ```
+ */
+ function getTypeScriptType(value)  {
+  if (Array.isArray(value)) return getArrayType(value)
+  if (typeof value === 'object') return getObjectType(value)
+  if (['string', 'number', 'boolean'].includes(typeof value)) return typeof value
+
+  return 'any'
+}
+
+/**
+ * @param {Object} value An object with uknown type properties
+ * @returns {String} A representation of the type model for the passed object
+ */
+function getObjectType(value)  {
+  const entries = Object.entries(value)
+  return `{ ${entries.map(([key, property], index) => {
+    const isLast = entries.length === index + 1
+    return `${key}: ${getTypeScriptType(property)}${!isLast ? ', ' : ''}`
+  }).join('')} }`
+}
+
+/**
+ * @param {Array} value An array to check each property of
+ * @returns {String} A valid type for the passed array and it's items
+ */
+function getArrayType(passedArray)  {
+  if (passedArray.length > 0) {
+    const firstValueType = getTypeScriptType(passedArray[0]);
+    if (passedArray.every((v) => getTypeScriptType(v) === firstValueType)) {
+      return firstValueType + '[]';
+    } else {
+      return `(${unique(passedArray.map((item, index) => {
+        const isLast = passedArray.length === index + 1;
+        return `${getTypeScriptType(item)}${!isLast ? ' | ' : ''}`
+      })).join('')})[]`
+    }
+  }
+  return 'any[]';
+}
+
+module.exports = getTypeScriptType;

package/lib/common/formatHelpers/index.js

@@ -15,10 +15,11 @@
  *
  * @module formatHelpers
  */
-module.exports = {
+ module.exports = {
   createPropertyFormatter: require('./createPropertyFormatter'),
   fileHeader: require('./fileHeader'),
   formattedVariables: require('./formattedVariables'),
+  getTypeScriptType: require('./getTypeScriptType'),
   iconsWithPrefix: require('./iconsWithPrefix'),
   sortByReference: require('./sortByReference'),
   sortByName: require('./sortByName'),

package/lib/common/formats.js

@@ -15,7 +15,7 @@ const fs = require('fs');
 const path = require('path');
 const _template = require('lodash/template');
 const GroupMessages = require('../utils/groupMessages');
-const { fileHeader, formattedVariables, iconsWithPrefix, minifyDictionary, sortByReference, createPropertyFormatter, sortByName } = require('./formatHelpers');
+const { fileHeader, formattedVariables, getTypeScriptType, iconsWithPrefix, minifyDictionary, sortByReference, createPropertyFormatter, sortByName } = require('./formatHelpers');
 
 const SASS_MAP_FORMAT_DEPRECATION_WARNINGS = GroupMessages.GROUP.SassMapFormatDeprecationWarnings;
 
@@ -32,6 +32,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 {string} [options.selector] - Override the root css selector
    * @example
    * ```css
    * :root {
@@ -83,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;
@@ -99,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
@@ -119,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;
@@ -126,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});
   },
 
   /**
@@ -393,7 +405,7 @@ module.exports = {
   'typescript/es6-declarations': function({dictionary, file}) {
     return fileHeader({file}) +
       dictionary.allProperties.map(function(prop) {
-        var to_ret_prop = 'export const ' + prop.name + ' : string;';
+        var to_ret_prop = 'export const ' + prop.name + ' : ' + getTypeScriptType(prop.value) + ';';
         if (prop.comment)
           to_ret_prop = to_ret_prop.concat(' // ' + prop.comment);
         return to_ret_prop;
@@ -445,7 +457,7 @@ module.exports = {
    * const JsonToTS = require('json-to-ts');
    * StyleDictionaryPackage.registerFormat({
    *   name: 'typescript/accurate-module-declarations',
-   *   formatter: function(dictionary) {
+   *   formatter: function({ dictionary }) {
    *     return 'declare const root: RootObject\n' +
    *     'export default root\n' +
    *     JsonToTS(dictionary.properties).join('\n');
@@ -641,9 +653,9 @@ declare const ${moduleName}: ${JSON.stringify(treeWalker(dictionary.tokens), nul
    * ```xml
    * <?xml version="1.0" encoding="UTF-8"?>
    * <resources>
-   *   <integer name="time_duration_short">1000</string>
-   *   <integer name="time_duration_medium">2000</string>
-   *   <integer name="time_duration_long">4000</string>
+   *   <integer name="time_duration_short">1000</integer>
+   *   <integer name="time_duration_medium">2000</integer>
+   *   <integer name="time_duration_long">4000</integer>
    * ```
    */
   'android/integers': function({dictionary, options, file}) {
@@ -900,7 +912,7 @@ declare const ${moduleName}: ${JSON.stringify(treeWalker(dictionary.tokens), nul
    * @example
    * ```swift
    * public class StyleDictionary {
-   *   public static let colorBackgroundDanger = UIColor(red: 1.000, green: 0.918, blue: 0.914, alpha:1)
+   *   public static let colorBackgroundDanger = UIColor(red: 1.000, green: 0.918, blue: 0.914, alpha: 1)
    * }
    * ```
    */
@@ -1164,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;
+module.exports['javascript/object'].nested = true;

package/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)
     //

package/lib/common/transforms.js

@@ -457,7 +457,7 @@ module.exports = {
    * ```swift
    * // Matches: token.attributes.category === 'color'
    * // Returns:
-   * UIColor(red: 0.667, green: 0.667, blue: 0.667, alpha:0.6)
+   * UIColor(red: 0.667, green: 0.667, blue: 0.667, alpha: 0.6)
    * ```
    *
    * @memberof Transforms
@@ -470,7 +470,30 @@ module.exports = {
       const rFixed = (r / 255.0).toFixed(3);
       const gFixed = (g / 255.0).toFixed(3);
       const bFixed = (b / 255.0).toFixed(3);
-      return `UIColor(red: ${rFixed}, green: ${gFixed}, blue: ${bFixed}, alpha:${a})`;
+      return `UIColor(red: ${rFixed}, green: ${gFixed}, blue: ${bFixed}, alpha: ${a})`;
+    }
+  },
+
+    /**
+   * Transforms the value into an UIColor swift class for iOS
+   *
+   * ```swift
+   * // Matches: token.attributes.category === 'color'
+   * // Returns:
+   * Color(red: 0.667, green: 0.667, blue: 0.667, opacity: 0.6)
+   * ```
+   *
+   * @memberof Transforms
+   */
+  'color/ColorSwiftUI': {
+    type: 'value',
+    matcher: isColor,
+    transformer: function (token) {
+      const { r, g, b, a } = Color(token.value).toRgb();
+      const rFixed = (r / 255.0).toFixed(3);
+      const gFixed = (g / 255.0).toFixed(3);
+      const bFixed = (b / 255.0).toFixed(3);
+      return `Color(red: ${rFixed}, green: ${gFixed}, blue: ${bFixed}, opacity: ${a})`;
     }
   },
 

package/lib/extend.js

@@ -12,6 +12,7 @@
  */
 
 require('json5/lib/register');
+require.extensions[".jsonc"] = require("./utils/jsonc").register;
 
 var combineJSON = require('./utils/combineJSON'),
     deepExtend = require('./utils/deepExtend'),

package/lib/utils/combineJSON.js

@@ -12,6 +12,7 @@
  */
 
 require('json5/lib/register');
+require.extensions[".jsonc"] = require("./jsonc").register;
 
 var glob = require('glob'),
   deepExtend = require('./deepExtend'),

package/lib/utils/createFormatArgs.js

@@ -14,7 +14,7 @@
 const deepExtend = require('./deepExtend');
 
 function createFormatArgs({ dictionary, platform, file = {} }) {
-  const {allProperties, properties, usesReference, getReferences} = dictionary;
+  const {allProperties, properties, allTokens, tokens, usesReference, getReferences} = dictionary;
   // This will merge platform and file-level configuration
   // where the file configuration takes precedence
   const {options} = platform;
@@ -26,6 +26,10 @@ function createFormatArgs({ dictionary, platform, file = {} }) {
     getReferences,
     allProperties,
     properties,
+    // adding tokens and allTokens as the new way starting in v3,
+    // keeping properties and allProperties around for backwards-compatibility
+    allTokens,
+    tokens,
     platform,
     file,
     options: file.options || {}

package/lib/utils/es6_.js

@@ -101,7 +101,7 @@ const assign = function () {
 
 /* global Set */
 const pull = function (arr, ...removeList){
-  var removeSet = new Set(removeList) 
+  var removeSet = new Set(removeList)
   for (let i=arr.length-1;i>=0;i--) {
       if (removeSet.has(arr[i])) {
         arr.splice(i, 1)
@@ -109,6 +109,10 @@ const pull = function (arr, ...removeList){
   }
 }
 
+const unique = function (arr){
+  return [...new Set(arr)]
+}
+
 const upperFirst = function (str) {
   return str ? str[0].toUpperCase() + str.substr(1) : ''
 }
@@ -157,4 +161,5 @@ module.exports = {
   kebabCase: ChangeCase.paramCase,
   pull: pull,
   matches: matches,
+  unique: unique,
 }

package/lib/utils/jsonc.js

@@ -0,0 +1,14 @@
+const fs = require("fs");
+const jsonc = require("jsonc-parser");
+
+module.exports = {
+  register(module, filename) {
+    const content = fs.readFileSync(filename, "utf8");
+    try {
+      module.exports = jsonc.parse(content);
+    } catch (err) {
+      err.message = filename + ": " + err.message;
+      throw err;
+    }
+  },
+};

package/lib/utils/references/getReferences.js

@@ -67,7 +67,7 @@ function getReferences(value) {
   // function which iterates over the object to see if there is a reference
   if (typeof value === 'object') {
     for (const key in value) {
-      if (value.hasOwnProperty(key)) {
+      if (value.hasOwnProperty(key) && typeof value[key] === 'string') {
         value[key].replace(regex, findReference);
       }
     }

package/lib/utils/resolveObject.js

@@ -94,8 +94,19 @@ function compile_value(value, stack) {
     // Find what the value is referencing
     const pathName = getPath(variable, options);
     const context = getName(current_context, options);
+    const refHasValue = pathName[pathName.length-1] === 'value';
     ref = resolveReference(pathName, updated_object);
 
+    // If the reference doesn't end in 'value'
+    // and
+    // the reference points to someplace that has a `value` attribute
+    // we should take the '.value' of the reference
+    // per the W3C draft spec where references do not have .value
+    // https://design-tokens.github.io/community-group/format/#aliases-references
+    if (!refHasValue && ref && ref.hasOwnProperty('value')) {
+      ref = ref.value;
+    }
+
     if (typeof ref !== 'undefined') {
       if (typeof ref === 'string') {
         to_ret = value.replace(match, ref);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "style-dictionary",
-  "version": "3.0.0",
+  "version": "3.1.0",
   "description": "Style once, use everywhere. A build system for creating cross-platform styles.",
   "keywords": [
     "style dictionary",
@@ -79,6 +79,7 @@
     ],
     "transform": {
       "^.+\\.json5$": "json5-jest",
+      "^.+\\.jsonc$": "json5-jest",
       "^.+\\.jsx?$": "babel-jest"
     }
   },
@@ -141,9 +142,10 @@
     "jsdoc-escape-at": "^1.0.1",
     "jsdoc-to-markdown": "^7.0.1",
     "json5-jest": "^1.0.1",
+    "jsonc-parser": "^3.0.0",
     "less": "^3.11.2",
     "lint-staged": "^10.2.7",
-    "node-sass": "^4.14.1",
+    "node-sass": "^6.0.1",
     "standard-version": "^9.0.0",
     "stylus": "^0.54.8",
     "tsd": "^0.15.1",

package/types/Config.d.ts

@@ -16,7 +16,7 @@ import { Transform } from './Transform';
 import { TransformGroup } from './TransformGroup';
 import { Filter } from './Filter';
 import { FileHeader } from './FileHeader';
-import { Format } from './Format';
+import { Formatter } from './Format';
 import { Action } from './Action';
 import { Platform } from './Platform';
 import { DesignTokens } from './DesignToken';
@@ -25,7 +25,7 @@ export interface Config {
   parsers?: Parser[];
   transform?: Record<string, Transform>;
   transformGroup?: Record<string, TransformGroup>;
-  format?: Record<string, Format>;
+  format?: Record<string, Formatter>;
   filter?: Record<string, Filter>;
   fileHeader?: Record<string, FileHeader>;
   action?: Record<string, Action>;

package/types/File.d.ts

@@ -15,8 +15,9 @@ import { Options } from './Options';
 import { TransformedToken } from './TransformedToken';
 
 export interface File {
+  className?: string;
   destination: string;
   format?: string;
   filter?: string | Partial<TransformedToken> | ((token: TransformedToken) => boolean);
   options?: Options;
-}
+}

package/types/FileHeader.d.ts

@@ -11,4 +11,4 @@
  * and limitations under the License.
  */
 
-export type FileHeader = (defaultMessage: string) => string[];
+export type FileHeader = (defaultMessage: string[]) => string[];

package/types/Format.d.ts

@@ -42,5 +42,6 @@ export interface FormatterArguments {
 export type Formatter = (arguments: FormatterArguments) => string;
 
 export interface Format {
+  name: string;
   formatter: Formatter;
-}
+}

package/types/FormatHelpers.d.ts

@@ -39,7 +39,7 @@ export interface CommentFormatting {
 
 export interface FileHeaderArgs {
   file: File;
-  commentStyle: string;
+  commentStyle?: string;
   formatting?: CommentFormatting;
 }
 

package/types/Platform.d.ts

@@ -17,6 +17,7 @@ import { File } from './File';
 export interface Platform {
   transformGroup?: string;
   transforms?: string[];
+  basePxFontSize?: number;
   prefix?: string;
   buildPath?: string;
   files?: File[];

package/types/TransformGroup.d.ts

@@ -12,6 +12,5 @@
  */
 
 export interface TransformGroup {
-  name: string;
-  transforms: string[];
+  transforms: Array<string>;
 }

package/types/_helpers.ts

@@ -11,6 +11,4 @@
  * and limitations under the License.
  */
 
-type Named<T> = T & { name: string; };
-
-export { Named }
+export type Named<T> = T & { name: string; };

package/types/index.d.ts

@@ -28,7 +28,7 @@ import {Platform as _Platform} from './Platform';
 import {Transform as _Transform} from './Transform';
 import {TransformedToken as _TransformedToken, TransformedTokens as _TransformedTokens} from './TransformedToken';
 import {TransformGroup as _TransformGroup} from './TransformGroup';
-import {Named} from './_helpers';
+import {Named as _Named} from './_helpers';
 
 // Because this library is used in Node and needs to be accessible
 // as a CommonJS module, we are declaring it as a namespace so that
@@ -51,6 +51,7 @@ declare namespace StyleDictionary {
   type TransformedToken = _TransformedToken;
   type TransformedTokens = _TransformedTokens;
   type TransformGroup = _TransformGroup;
+  type Named<T> = _Named<T>
 
   interface Core {
     VERSION: string;
@@ -61,7 +62,7 @@ declare namespace StyleDictionary {
     options: Config;
 
     transform: Record<string, Transform>;
-    transformGroup: Record<string, TransformGroup>;
+    transformGroup: Record<string, TransformGroup['transforms']>;
     format: Record<string, Format>;
     action: Record<string, Action>;
     filter: Record<string, Filter>;
@@ -162,10 +163,30 @@ declare namespace StyleDictionary {
     */
     registerFilter(filter: Named<Filter>): this;
 
+    /**
+     * Add a custom file header to Style Dictionary. File headers are used to write a
+     * custom messasge on top of the generated files.
+     * @param {String} fileHeader.name The name of the file header to be added
+     * @param {Function} fileHeader.fileHeader The file header function
+     * @example
+     * ```js
+     * StyleDictionary.registerFileHeader({
+     *   name: 'custmoHeader',
+     *   fileHeader: function(defaultMessage) {
+     *      return return [
+     *        `hello`,
+     *        ...defaultMessage
+     *      ]
+     *   }
+     * })
+     * ```
+     */
+     registerFileHeader(fileHeader: Named<{ fileHeader: FileHeader }>): this;
+
     /**
      * Adds a custom parser to parse style dictionary files. This allows you to modify
      * the design token data before it gets to Style Dictionary or write your
-     * token files in a language other than JSON, JSON5, or CommonJS modules.
+     * token files in a language other than JSON, JSONC, JSON5, or CommonJS modules.
      *
      * @param {Regex} parser.pattern - A file path regular expression to match which files this parser should be be used on. This is similar to how webpack loaders work. `/\.json$/` will match any file ending in '.json', for example.
      * @param {Function} parser.parse - Function to parse the file contents. Takes 1 argument, which is an object with 2 attributes: contents which is the string of the file contents and filePath. The function should return a plain Javascript object.
@@ -305,4 +326,4 @@ declare namespace StyleDictionary {
 }
 
 declare var StyleDictionary: StyleDictionary.Core;
-export = StyleDictionary;
+export = StyleDictionary;

package/types/index.test-d.ts

@@ -142,6 +142,10 @@ expectAssignable<StyleDictionary.File>({
 });
 
 
+expectAssignable<StyleDictionary.Platform>({
+  basePxFontSize: 16,
+});
+
 expectAssignable<StyleDictionary.Platform>({
   transformGroup: `css`,
 });