style-dictionary 3.7.2 → 3.8.0

package/README.md

@@ -229,7 +229,7 @@ A design token is an attribute to describe something visually. It is atomic (it
 
 While not exactly necessary, we feel this classification structure of design tokens makes the most sense semantically. Design tokens can be organized into a hierarchical tree structure with the top level, category, defining the primitive nature of the token. For example, we have the color category and every token underneath is always a color. As you proceed down the tree to type, item, sub-item, and state, you get more specific about what that color is. Is it a background color, a text color, or a border color? What kind of text color is it? You get the point. Now you can structure your token json files like simple objects:
 
-```
+```json
 {
   "size": {
     "font": {
@@ -250,7 +250,7 @@ Also, the CTI structure provides a good mechanism to target transforms for speci
 
 You can also add a _comment_ to a design token:
 
-```
+```json
 {
   "size": {
     "font": {
@@ -280,11 +280,11 @@ const StyleDictionary = require('style-dictionary').extend('config.json');
 StyleDictionary.registerTransform({
   name: 'time/seconds',
   type: 'value',
-  matcher: function(prop) {
-    return prop.attributes.category === 'time';
+  matcher: function(token) {
+    return token.attributes.category === 'time';
   },
-  transformer: function(prop) {
-    return (parseInt(prop.original.value) / 1000).toString() + 's';
+  transformer: function(token) {
+    return (parseInt(token.original.value) / 1000).toString() + 's';
   }
 });
 

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

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

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

@@ -17,6 +17,6 @@
   "license": "Apache-2.0",
   "devDependencies": {
     "chokidar-cli": "^1.2.0",
-    "style-dictionary": "3.7.2"
+    "style-dictionary": "3.8.0"
   }
 }

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

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

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

@@ -10,7 +10,7 @@
     "styled-components": "^5.3.0"
   },
   "devDependencies": {
-    "style-dictionary": "3.7.2"
+    "style-dictionary": "3.8.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.7.2"
+    "style-dictionary": "3.8.0"
   },
   "jest": {
     "preset": "react-native"

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

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

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

@@ -15,6 +15,6 @@
   "author": "",
   "license": "Apache-2.0",
   "devDependencies": {
-    "style-dictionary": "3.7.2"
+    "style-dictionary": "3.8.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.7.2"
+    "style-dictionary": "3.8.0"
   }
 }

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

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

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

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

package/examples/advanced/font-face-rules/package.json

@@ -8,6 +8,6 @@
   },
   "license": "Apache-2.0",
   "devDependencies": {
-    "style-dictionary": "3.7.2"
+    "style-dictionary": "3.8.0"
   }
 }

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

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

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.7.2"
+    "style-dictionary": "3.8.0"
   }
 }

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

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

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.7.2",
+    "style-dictionary": "3.8.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.7.2"
+    "style-dictionary": "3.8.0"
   }
 }

package/examples/advanced/referencing_aliasing/package.json

@@ -15,6 +15,6 @@
   "author": "",
   "license": "Apache-2.0",
   "devDependencies": {
-    "style-dictionary": "3.7.2"
+    "style-dictionary": "3.8.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.7.2"
+    "style-dictionary": "3.8.0"
   }
 }

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

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

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

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

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

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

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

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

package/lib/common/formatHelpers/getTypeScriptType.js

@@ -32,12 +32,17 @@ const { unique } = require('../../utils/es6_');
  * });
  *```
  * @param {*} value A value to check the type of.
+ * @param {Object} options
+ * @param {Boolean} options.outputStringLiterals - Whether or not to output literal types for string values
  * @return {String} A valid name for a TypeScript type.
  *
  */
-function getTypeScriptType(value) {
+function getTypeScriptType(value, options = {})  {
+  const { outputStringLiterals = false } = options;
+
   if (Array.isArray(value)) return getArrayType(value)
   if (typeof value === 'object') return getObjectType(value)
+  if (outputStringLiterals && typeof value === 'string') return `"${value}"`
   if (['string', 'number', 'boolean'].includes(typeof value)) return typeof value
 
   return 'any'

package/lib/common/formatHelpers/index.js

@@ -24,5 +24,6 @@
   sortByReference: require('./sortByReference'),
   sortByName: require('./sortByName'),
   minifyDictionary: require('./minifyDictionary'),
-  setSwiftFileProperties: require('./setSwiftFileProperties')
+  setSwiftFileProperties: require('./setSwiftFileProperties'),
+  setComposeObjectProperties: require('./setComposeObjectProperties')
 }

package/{examples/advanced/custom-file-header/node_modules/style-dictionary/lib/performActions.js → lib/common/formatHelpers/setComposeObjectProperties.js}

@@ -12,22 +12,19 @@
  */
 
 /**
- * Performs any actions in a platform config. Pretty
- * simple really. Actions should be an array of functions,
- * the calling function should map the functions accordingly.
- * @private
- * @memberof module:style-dictionary
- * @param {Object} dictionary
- * @param {Object} platform
- * @returns {null}
+ * Outputs an object for compose format configurations. Sets import.
+ * @memberof module:formatHelpers
+ * @param {Object} options - The options object declared at configuration
+ * @returns {Object}
  */
-function performActions(dictionary, platform) {
-  if (platform.actions) {
-    platform.actions.forEach(function(action) {
-      action.do(dictionary, platform);
-    });
+ function setComposeObjectProperties(options) {
+    if (typeof options.import === 'undefined') {
+        options.import = ['androidx.compose.ui.graphics.Color', 'androidx.compose.ui.unit.*'];
+    } else if (typeof options.import === 'string') {
+        options.import = [options.import];
+    }
+  
+    return options
   }
-}
-
-
-module.exports = performActions;
+  
+  module.exports = setComposeObjectProperties;

package/lib/common/formats.js

@@ -15,7 +15,18 @@ const fs = require('fs');
 const path = require('path');
 const _template = require('lodash/template');
 const GroupMessages = require('../utils/groupMessages');
-const { fileHeader, formattedVariables, getTypeScriptType, iconsWithPrefix, minifyDictionary, sortByReference, createPropertyFormatter, sortByName, setSwiftFileProperties } = require('./formatHelpers');
+const {
+  fileHeader,
+  formattedVariables,
+  getTypeScriptType,
+  iconsWithPrefix,
+  minifyDictionary,
+  sortByReference,
+  createPropertyFormatter,
+  sortByName,
+  setSwiftFileProperties,
+  setComposeObjectProperties
+} = require('./formatHelpers');
 
 const SASS_MAP_FORMAT_DEPRECATION_WARNINGS = GroupMessages.GROUP.SassMapFormatDeprecationWarnings;
 
@@ -140,7 +151,7 @@ module.exports = {
   'scss/variables': function({dictionary, options, file}) {
     const { outputReferences, themeable = false } = options;
     return fileHeader({file, commentStyle: 'short'}) +
-      formattedVariables({format: 'sass', dictionary, outputReferences, themeable});
+      formattedVariables({format: 'sass', dictionary, outputReferences, themeable}) + '\n';
   },
 
   /**
@@ -175,7 +186,7 @@ module.exports = {
   'less/variables': function({dictionary, options, file}) {
     const { outputReferences } = options;
     return fileHeader({file, commentStyle: 'short'}) +
-      formattedVariables({format: 'less', dictionary, outputReferences});
+      formattedVariables({format: 'less', dictionary, outputReferences}) + '\n';
   },
 
   /**
@@ -207,7 +218,7 @@ module.exports = {
   'stylus/variables': function({dictionary, options, file}) {
     const { outputReferences } = options;
     return fileHeader({file, commentStyle: 'short'}) +
-      formattedVariables({format: 'stylus', dictionary, outputReferences});
+      formattedVariables({format: 'stylus', dictionary, outputReferences}) + '\n';
   },
 
   /**
@@ -231,7 +242,7 @@ module.exports = {
   'javascript/module': function({dictionary, file}) {
     return fileHeader({file}) +
     'module.exports = ' +
-      JSON.stringify(dictionary.tokens, null, 2) + ';';
+      JSON.stringify(dictionary.tokens, null, 2) + ';\n';
   },
 
   /**
@@ -248,8 +259,9 @@ module.exports = {
    */
   'javascript/module-flat': function({dictionary, file}) {
     return fileHeader({file}) +
-      'module.exports = ' +
-        module.exports['json/flat']({dictionary}) + ';';
+      'module.exports = ' + '{\n' + dictionary.allTokens.map(function(token) {
+        return `  "${token.name}": ${JSON.stringify(token.value)}`;
+      }).join(',\n') + '\n}' + ';\n';
   },
 
   /**
@@ -277,7 +289,7 @@ module.exports = {
       (file.name || '_styleDictionary') +
       ' = ' +
       JSON.stringify(dictionary.tokens, null, 2) +
-      ';';
+      ';\n';
   },
 
   /**
@@ -367,7 +379,7 @@ module.exports = {
         if (token.comment)
           to_ret = to_ret.concat(' // ' + token.comment);
         return to_ret;
-      }).join('\n');
+      }).join('\n') + '\n';
   },
 
   // TypeScript declarations
@@ -396,20 +408,23 @@ module.exports = {
    *
    * @memberof Formats
    * @kind member
+   * @param {Object} options
+   * @param {Boolean} [options.outputStringLiterals=false] - Whether or not to output literal types for string values
    * @example
    * ```typescript
    * export const ColorBackgroundBase : string;
    * export const ColorBackgroundAlt : string;
    * ```
    */
-  'typescript/es6-declarations': function({dictionary, file}) {
+  'typescript/es6-declarations': function({dictionary, file, options}) {
     return fileHeader({file}) +
       dictionary.allProperties.map(function(prop) {
-        var to_ret_prop = 'export const ' + prop.name + ' : ' + getTypeScriptType(prop.value) + ';';
+        let to_ret_prop = '';
         if (prop.comment)
-          to_ret_prop = to_ret_prop.concat(' // ' + prop.comment);
+          to_ret_prop += '/** ' + prop.comment + ' */\n';
+        to_ret_prop += 'export const ' + prop.name + ' : ' + getTypeScriptType(prop.value, options) + ';';
         return to_ret_prop;
-      }).join('\n');
+      }).join('\n') + '\n';
   },
 
   /**
@@ -502,7 +517,7 @@ declare const ${moduleName}: ${JSON.stringify(treeWalker(dictionary.tokens), nul
 
     // JSON stringify will quote strings, because this is a type we need
     // it unquoted.
-    return output.replace(/"DesignToken"/g,'DesignToken');
+    return output.replace(/"DesignToken"/g, 'DesignToken') + '\n';
   },
 
   // Android templates
@@ -706,6 +721,7 @@ declare const ${moduleName}: ${JSON.stringify(treeWalker(dictionary.tokens), nul
    * @param {String} className The name of the generated Kotlin object
    * @param {String} packageName The package for the generated Kotlin object
    * @param {Object} options
+   * @param {String[]} [options.import=['androidx.compose.ui.graphics.Color', 'androidx.compose.ui.unit.*']] - Modules to import. Can be a string or array of strings
    * @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.
    * @example
@@ -740,6 +756,8 @@ declare const ${moduleName}: ${JSON.stringify(treeWalker(dictionary.tokens), nul
       allProperties = [...dictionary.allProperties].sort(sortByName);
     }
 
+    options = setComposeObjectProperties(options);
+
     return template({allProperties, file, options, formatProperty, fileHeader});
   },
 
@@ -909,7 +927,8 @@ declare const ${moduleName}: ${JSON.stringify(treeWalker(dictionary.tokens), nul
    * @kind member
    * @param {Object} options
    * @param {String} [options.accessControl=public] - Level of [access](https://docs.swift.org/swift-book/LanguageGuide/AccessControl.html) of the generated swift object
-   * @param {String[]} [options.import=UIKit] - Modules to import. Can be a string or array of string
+   * @param {String[]} [options.import=UIKit] - Modules to import. Can be a string or array of strings
+   * @param {String} [options.className] - The name of the generated Swift class
    * @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.
    * @example
@@ -950,7 +969,7 @@ declare const ${moduleName}: ${JSON.stringify(treeWalker(dictionary.tokens), nul
    * @kind member
    * @param {Object} options
    * @param {String} [options.accessControl=public] - Level of [access](https://docs.swift.org/swift-book/LanguageGuide/AccessControl.html) of the generated swift object
-   * @param {String[]} [options.import=UIKit] - Modules to import. Can be a string or array of string
+   * @param {String[]} [options.import=UIKit] - Modules to import. Can be a string or array of strings
    * @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.
    * @example
@@ -1068,7 +1087,7 @@ declare const ${moduleName}: ${JSON.stringify(treeWalker(dictionary.tokens), nul
    * ```
    */
   'json': function({dictionary}) {
-    return JSON.stringify(dictionary.tokens, null, 2);
+    return JSON.stringify(dictionary.tokens, null, 2) + '\n';
   },
 
   /**
@@ -1110,7 +1129,7 @@ declare const ${moduleName}: ${JSON.stringify(treeWalker(dictionary.tokens), nul
    * ```
    */
   'json/nested': function({dictionary}) {
-    return JSON.stringify(minifyDictionary(dictionary.tokens), null, 2);
+    return JSON.stringify(minifyDictionary(dictionary.tokens), null, 2) + '\n';
   },
 
   /**
@@ -1128,7 +1147,7 @@ declare const ${moduleName}: ${JSON.stringify(treeWalker(dictionary.tokens), nul
   'json/flat': function({dictionary}) {
     return '{\n' + dictionary.allTokens.map(function(token) {
         return `  "${token.name}": ${JSON.stringify(token.value)}`;
-      }).join(',\n') + '\n}';
+    }).join(',\n') + '\n}' + '\n';
   },
 
   /**
@@ -1161,7 +1180,7 @@ declare const ${moduleName}: ${JSON.stringify(treeWalker(dictionary.tokens), nul
       .map(function(token) {
         return token.value;
       });
-    return JSON.stringify(to_ret, null, 2);
+    return JSON.stringify(to_ret, null, 2) + '\n';
   },
 
   /**
@@ -1195,7 +1214,7 @@ declare const ${moduleName}: ${JSON.stringify(treeWalker(dictionary.tokens), nul
         }, token.value)
       })
     };
-    return JSON.stringify(to_ret, null, 2);
+    return JSON.stringify(to_ret, null, 2) + '\n';
   },
 
 

package/lib/common/templates/compose/object.kt.template

@@ -17,9 +17,10 @@
 
 package <%= file.packageName %>;
 
-<%  // Ideally we would selectively import the correct classes & functions based on whether the applied transforms actually need them. %>
-import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.unit.*
+<%= options.import.map(function(item) {
+    return 'import ' + item
+  }).join('\n')
+%>
 
 object <%= file.className %> {
   <%= allProperties.map(function(prop) {

package/lib/common/templates/flutter/class.dart.template

@@ -23,4 +23,4 @@ class <%= file.className %> {
     <%= allTokens.map(function(prop) {
       return 'static const ' + formatProperty(prop);
     }).join('\n    ') %>
-}
+}

package/lib/common/transforms.js

@@ -412,7 +412,7 @@ module.exports = {
    * Transforms the value into a Color class for Compose
    *
    * ```kotlin
-   * // Matches: prop.attributes.category === 'color'
+   * // Matches: token.attributes.category === 'color'
    * // Returns:
    * Color(0xFF009688)
    * ```
@@ -422,8 +422,8 @@ module.exports = {
   'color/composeColor': {
     type: 'value',
     matcher: isColor,
-    transformer: function (prop) {
-      var str = Color(prop.value).toHex8();
+    transformer: function (token) {
+      var str = Color(token.value).toHex8();
       return 'Color(0x' + str.slice(6) + str.slice(0,6) + ')'
     }
   },
@@ -742,7 +742,7 @@ module.exports = {
    * Transforms the value from a REM size on web into a scale-independent pixel (sp) value for font sizes in Compose. It WILL scale the number by a factor of 16 (or the value of 'basePxFontSize' on the platform in your config).
    *
    * ```kotlin
-   * // Matches: prop.attributes.category === 'size' && prop.attributes.type === 'font'
+   * // Matches: token.attributes.category === 'size' && token.attributes.type === 'font'
    * // Returns:
    * "16.0.sp"
    * ```
@@ -752,10 +752,10 @@ module.exports = {
   'size/compose/remToSp': {
     type: 'value',
     matcher: isFontSize,
-    transformer: function(prop, options) {
-      const val = parseFloat(prop.value);
+    transformer: function(token, options) {
+      const val = parseFloat(token.value);
       const baseFont = getBasePxFontSize(options);
-      if (isNaN(val)) throwSizeError(prop.name, prop.value, 'sp');
+      if (isNaN(val)) throwSizeError(token.name, token.value, 'sp');
       return (val * baseFont).toFixed(2) + '.sp';
     }
   },
@@ -765,7 +765,7 @@ module.exports = {
    * Transforms the value from a REM size on web into a density-independent pixel (dp) value for font sizes in Compose. It WILL scale the number by a factor of 16 (or the value of 'basePxFontSize' on the platform in your config).
    *
    * ```kotlin
-   * // Matches: prop.attributes.category === 'size' && prop.attributes.type !== 'font'
+   * // Matches: token.attributes.category === 'size' && token.attributes.type !== 'font'
    * // Returns:
    * "16.0.dp"
    * ```
@@ -775,10 +775,10 @@ module.exports = {
   'size/compose/remToDp': {
     type: 'value',
     matcher: isNotFontSize,
-    transformer: function(prop, options) {
-      const val = parseFloat(prop.value);
+    transformer: function(token, options) {
+      const val = parseFloat(token.value);
       const baseFont = getBasePxFontSize(options);
-      if (isNaN(val)) throwSizeError(prop.name, prop.value, 'dp');
+      if (isNaN(val)) throwSizeError(token.name, token.value, 'dp');
       return (val * baseFont).toFixed(2) + '.dp';
     }
   },
@@ -787,7 +787,7 @@ module.exports = {
    * Adds the .em Compose extension to the end of a number. Does not scale the value
    *
    * ```kotlin
-   * // Matches: prop.attributes.category === 'size' && prop.attributes.type === 'font'
+   * // Matches: token.attributes.category === 'size' && token.attributes.type === 'font'
    * // Returns:
    * "16.0em"
    * ```
@@ -797,9 +797,9 @@ module.exports = {
   'size/compose/em': {
     type: 'value',
     matcher: isFontSize,
-    transformer: function(prop) {
-      const val = parseFloat(prop.value);
-      if (isNaN(val)) throwSizeError(prop.name, prop.value, 'em');
+    transformer: function(token) {
+      const val = parseFloat(token.value);
+      if (isNaN(val)) throwSizeError(token.name, token.value, 'em');
       return val + '.em';
     }
   },

package/lib/register/action.js

@@ -46,15 +46,15 @@
  * });
  * ```
  */
-function registerAction(options) {
-  if (typeof options.name !== 'string')
+function registerAction(action) {
+  if (typeof action.name !== 'string')
     throw new Error('name must be a string');
-  if (typeof options.do !== 'function')
+  if (typeof action.do !== 'function')
     throw new Error('do must be a function');
 
-  this.action[options.name] = {
-    do: options.do,
-    undo: options.undo
+  this.action[action.name] = {
+    do: action.do,
+    undo: action.undo
   };
 
   return this;