style-dictionary 3.1.0 → 3.7.1

package/index.js

@@ -43,8 +43,8 @@ var StyleDictionary = {
   format: require('./lib/common/formats'),
   action: require('./lib/common/actions'),
   formatHelpers: require('./lib/common/formatHelpers'),
-  filter: {}, // we need to initialise the object, since we don't have built-in filters
-  parsers: [], // ditto ^
+  filter: require('./lib/common/filters'),
+  parsers: [], // we need to initialise the array, since we don't have built-in parsers
   fileHeader: {},
 
   registerTransform: require('./lib/register/transform'),

package/lib/common/filters.js

@@ -0,0 +1,30 @@
+/*
+ * 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.
+ */
+
+/**
+ * @namespace Filters
+ */
+
+module.exports = {
+  /**
+   * Remove a token from the ditribution output if it contains a key `private` set to true
+   *
+   * @memberof Filters
+   * 
+   * @param {Object} token
+   * @returns {Boolean} 
+   */
+  removePrivate: function(token) {
+    return (token && token.private) ? false : true
+  }
+}

package/lib/common/formatHelpers/createPropertyFormatter.js

@@ -42,13 +42,21 @@ const defaultFormatting = {
  * ```
  * @param {Object} options
  * @param {Boolean} options.outputReferences - Whether or not to output references. You will want to pass this from the `options` object sent to the formatter function.
+ * @param {Boolean} options.outputReferenceFallbacks - Whether or not to output css variable fallback values when using output references. You will want to pass this from the `options` object sent to the formatter function.
  * @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 = {}, themeable = false }) {
+function createPropertyFormatter({
+  outputReferences = false,
+  outputReferenceFallbacks = false,
+  dictionary,
+  format,
+  formatting = {},
+  themeable = false
+}) {
   let {prefix, commentStyle, indentation, separator, suffix} = Object.assign({}, defaultFormatting, formatting);
 
   switch(format) {
@@ -106,7 +114,11 @@ function createPropertyFormatter({ outputReferences, dictionary, format, formatt
           if (ref.value && ref.name) {
             value = value.replace(ref.value, function() {
               if (format === 'css') {
-                return `var(${prefix}${ref.name})`
+                if (outputReferenceFallbacks) {
+                  return `var(${prefix}${ref.name}, ${ref.value})`;
+                } else {
+                  return `var(${prefix}${ref.name})`;
+                }
               } else {
                 return `${prefix}${ref.name}`;
               }

package/lib/common/formatHelpers/formattedVariables.js

@@ -34,7 +34,11 @@ const defaultFormatting = {
  * StyleDictionary.registerFormat({
  *   name: 'myCustomFormat',
  *   formatter: function({ dictionary, options }) {
- *     return formattedVariables('less', dictionary, options.outputReferences);
+ *     return formattedVariables({
+ *       format: 'less',
+ *       dictionary,
+ *       outputReferences: options.outputReferences
+ *     });
  *   }
  * });
  * ```

package/lib/common/formatHelpers/getTypeScriptType.js

@@ -30,10 +30,10 @@ const { unique } = require('../../utils/es6_');
  *    }).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)

package/lib/common/formatHelpers/index.js

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

package/lib/common/formatHelpers/setSwiftFileProperties.js

@@ -0,0 +1,55 @@
+/*
+ * 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.
+ */
+
+/**
+ * Outputs an object with swift format configurations. Sets import, object type and access control.
+ * @memberof module:formatHelpers
+ * @param {Object} options - The options object declared at configuration
+ * @param {String} objectType - The type of the object in the final file. Could be a class, enum, struct, etc.
+ * @param {String} transformGroup - The transformGroup of the file, so it can be applied proper import
+ * @returns {Object}
+ */
+function setSwiftFileProperties(options, objectType, transformGroup) {
+  if (typeof options.objectType === 'undefined') {
+    if (typeof objectType === 'undefined') {
+      options.objectType = 'class';
+    } else {
+      options.objectType = objectType;
+    }
+  }
+
+  if (typeof options.import === 'undefined') {
+    if (typeof transformGroup === 'undefined') {
+      options.import = ['UIKit'];
+    } else if (['ios-swift', 'ios-swift-separate'].includes(transformGroup)) {
+      options.import = ['UIKit'];
+    } else {
+      // future swift-ui transformGroup to be added here
+      options.import = ['SwiftUI'];
+    }
+  } else if (typeof options.import === 'string') {
+    options.import = [options.import];
+  }
+
+  if (typeof options.accessControl === 'undefined') {
+    options.accessControl = 'public ';
+  } else {
+    if (options.accessControl !== "") {
+      options.accessControl = `${options.accessControl} `;
+    }
+  }
+
+  return options
+}
+
+module.exports = setSwiftFileProperties;

package/lib/common/formatHelpers/sortByReference.js

@@ -30,6 +30,13 @@
     const aComesFirst = -1;
     const bComesFirst = 1;
 
+    // return early if a or b ar undefined
+    if (typeof a === 'undefined') {
+      return aComesFirst;
+    } else if (typeof b === 'undefined') {
+      return bComesFirst;
+    }
+
     // If token a uses a reference and token b doesn't, b might come before a
     // read on..
     if (a.original && dictionary.usesReference(a.original.value)) {

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, getTypeScriptType, iconsWithPrefix, minifyDictionary, sortByReference, createPropertyFormatter, sortByName } = require('./formatHelpers');
+const { fileHeader, formattedVariables, getTypeScriptType, iconsWithPrefix, minifyDictionary, sortByReference, createPropertyFormatter, sortByName, setSwiftFileProperties } = require('./formatHelpers');
 
 const SASS_MAP_FORMAT_DEPRECATION_WARNINGS = GroupMessages.GROUP.SassMapFormatDeprecationWarnings;
 
@@ -107,7 +107,7 @@ module.exports = {
 
     // Default the "themeable" option to true for backward compatibility.
     const { outputReferences, themeable = true } = options;
-    return '\n' + 
+    return '\n' +
       fileHeader({ file, commentStyle: 'long' }) +
       formattedVariables({ format: 'sass', dictionary, outputReferences, themeable })
       + '\n' +
@@ -744,6 +744,7 @@ declare const ${moduleName}: ${JSON.stringify(treeWalker(dictionary.tokens), nul
   },
 
   // iOS templates
+
   /**
    * Creates an Objective-C header file with macros for design tokens
    *
@@ -902,11 +903,13 @@ declare const ${moduleName}: ${JSON.stringify(treeWalker(dictionary.tokens), nul
   },
 
   /**
-   * Creates a Swift implementation file of a class with values
+   * Creates a Swift implementation file of a class with values. It adds default `class` object type, `public` access control and `UIKit` import.
    *
    * @memberof Formats
    * @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 {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
@@ -916,12 +919,13 @@ declare const ${moduleName}: ${JSON.stringify(treeWalker(dictionary.tokens), nul
    * }
    * ```
    */
-  'ios-swift/class.swift': function({dictionary, options, file}) {
+  'ios-swift/class.swift': function({dictionary, options, file, platform}) {
     const template = _template(
-      fs.readFileSync(__dirname + '/templates/ios-swift/class.swift.template')
+      fs.readFileSync(__dirname + '/templates/ios-swift/any.swift.template')
     );
     let allTokens;
     const { outputReferences } = options;
+    options = setSwiftFileProperties(options, 'class', platform.transformGroup);
     const formatProperty = createPropertyFormatter({
       outputReferences,
       dictionary,
@@ -940,18 +944,29 @@ declare const ${moduleName}: ${JSON.stringify(treeWalker(dictionary.tokens), nul
   },
 
   /**
-   * Creates a Swift implementation file of an enum with values
+   * Creates a Swift implementation file of an enum with values. It adds default `enum` object type, `public` access control and `UIKit` import.
    *
    * @memberof Formats
    * @kind member
-   * @todo Add example and usage
+   * @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 {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
+   * ```swift
+   * public enum StyleDictionary {
+   *   public static let colorBackgroundDanger = UIColor(red: 1.000, green: 0.918, blue: 0.914, alpha: 1)
+   * }
+   * ```
    */
-  'ios-swift/enum.swift': function({dictionary, options, file}) {
+  'ios-swift/enum.swift': function({dictionary, options, file, platform}) {
     const template = _template(
-      fs.readFileSync(__dirname + '/templates/ios-swift/enum.swift.template')
+      fs.readFileSync(__dirname + '/templates/ios-swift/any.swift.template')
     );
     let allTokens;
     const { outputReferences } = options;
+    options = setSwiftFileProperties(options, 'enum', platform.transformGroup);
     const formatProperty = createPropertyFormatter({
       outputReferences,
       dictionary,
@@ -963,10 +978,62 @@ declare const ${moduleName}: ${JSON.stringify(treeWalker(dictionary.tokens), nul
     if (outputReferences) {
       allTokens = [...dictionary.allTokens].sort(sortByReference(dictionary));
     } else {
-      allTokens = [...dictionary.allTokens].sort(sortByName)
+      allTokens = [...dictionary.allTokens].sort(sortByName);
     }
     return template({allTokens, file, options, formatProperty, fileHeader});
   },
+
+  /**
+   * Creates a Swift implementation file of any given type with values. It has by default `class` object type, `public` access control and `UIKit` import.
+   *
+   * ```javascript
+   * format: 'ios-swift/any.swift',
+   * import: ['UIKit', 'AnotherModule'],
+   * objectType: 'struct',
+   * accessControl: 'internal',
+   * ```
+   *
+   * @memberof Formats
+   * @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 strings
+   * @param {String} [options.objectType=class] - The type of the generated Swift object
+   * @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
+   * ```swift
+   * import UIKit
+   * import AnotherModule
+   *
+   * internal struct StyleDictionary {
+   *   internal static let colorBackgroundDanger = UIColor(red: 1.000, green: 0.918, blue: 0.914, alpha: 1)
+   * }
+   * ```
+   */
+   'ios-swift/any.swift': function({ dictionary, options, file, platform }) {
+    const template = _template(
+      fs.readFileSync(__dirname + '/templates/ios-swift/any.swift.template')
+    );
+    let allTokens;
+    const { outputReferences } = options;
+    options = setSwiftFileProperties(options, options.objectType, platform.transformGroup);
+    const formatProperty = createPropertyFormatter({
+      outputReferences,
+      dictionary,
+      formatting: {
+        suffix: ''
+      }
+    });
+
+    if (outputReferences) {
+      allTokens = [...dictionary.allTokens].sort(sortByReference(dictionary));
+    } else {
+      allTokens = [...dictionary.allTokens].sort(sortByName);
+    }
+    return template({allTokens, file, options, formatProperty, fileHeader});
+  },
+
   // Css templates
 
   /**

package/lib/common/templates/ios-swift/{class.swift.template → any.swift.template}

@@ -17,10 +17,13 @@
 // <%= file.destination %>
 //
 <%= fileHeader({file, commentStyle: 'short'}) %>
-import UIKit
+<%= options.import.map(function(item) {
+    return 'import ' + item
+  }).join('\n')
+%>
 
-public class <%= file.className %> {
+<%= options.accessControl %><%= options.objectType %> <%= file.className %> {
     <%= allTokens.map(function(prop) {
-      return 'public static let ' + formatProperty(prop);
+      return options.accessControl + 'static let ' + formatProperty(prop);
     }).join('\n    ') %>
 }

package/lib/common/transforms.js

@@ -629,7 +629,7 @@ module.exports = {
   },
 
   /**
-   * Transforms the value from a REM size on web into a scale-independent pixel (sp) value for font sizes on Android. It WILL scale the number by a factor of 16 (common base font size on web).
+   * Transforms the value from a REM size on web into a scale-independent pixel (sp) value for font sizes on Android. It WILL scale the number by a factor of 16 (or the value of 'basePxFontSize' on the platform in your config).
    *
    * ```js
    * // Matches: token.attributes.category === 'size' && token.attributes.type === 'font'
@@ -739,7 +739,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 (common base font size on web).
+   * 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'

package/lib/utils/references/getReferences.js

@@ -28,16 +28,13 @@ const GroupMessages = require('../groupMessages');
  *
  * @memberof Dictionary
  * @param {string} value the value that contains a reference
+ * @param {object[]} references array of token's references because a token's value can contain multiple references due to string interpolation
  * @returns {any}
  */
-function getReferences(value) {
+function getReferences(value, references=[]) {
   // `this` is the dictionary object passed to formats and actions
   const self = this;
   const regex = createReferenceRegex({});
-  // because a token's value can contain multiple references due to string interpolation
-  // "{size.padding.base.value} {color.border.primary.value}"
-  // references is an array of 0 or more references
-  const references = [];
 
   // this will update the references array with the referenced tokens it finds.
   function findReference(match, variable) {
@@ -70,6 +67,10 @@ function getReferences(value) {
       if (value.hasOwnProperty(key) && typeof value[key] === 'string') {
         value[key].replace(regex, findReference);
       }
+      // if it is an object, we go further down the rabbit hole
+      if (value.hasOwnProperty(key) && typeof value[key] === 'object') {
+        self.getReferences(value[key], references);
+      }
     }
   }
 

package/lib/utils/resolveObject.js

@@ -85,16 +85,20 @@ function compile_value(value, stack) {
   // references can be part of the value such as "1px solid {color.border.light}"
   value.replace(regex, function(match, variable) {
     variable = variable.trim();
-    if (options.ignorePaths.indexOf(variable) !== -1) {
-      return value;
-    }
-
-    stack.push(variable);
 
     // Find what the value is referencing
     const pathName = getPath(variable, options);
     const context = getName(current_context, options);
     const refHasValue = pathName[pathName.length-1] === 'value';
+
+    if (refHasValue && options.ignorePaths.indexOf(variable) !== -1) {
+      return value;
+    } else if (!refHasValue && options.ignorePaths.indexOf(`${variable}.value`) !== -1) {
+      return value;
+    }
+
+    stack.push(variable);
+
     ref = resolveReference(pathName, updated_object);
 
     // If the reference doesn't end in 'value'
@@ -108,7 +112,7 @@ function compile_value(value, stack) {
     }
 
     if (typeof ref !== 'undefined') {
-      if (typeof ref === 'string') {
+      if (typeof ref === 'string' || typeof ref === 'number') {
         to_ret = value.replace(match, ref);
 
         // Recursive, therefore we can compute multi-layer variables like a = b, b = c, eventually a = c
@@ -145,8 +149,12 @@ function compile_value(value, stack) {
             to_ret = compile_value( to_ret, stack );
           }
         }
+        // if evaluated value is a number and equal to the reference, we want to keep the type
+        if (typeof ref === 'number' && ref.toString() === to_ret) {
+          to_ret = ref;
+        }
       } else {
-        // if evaluated value is not a string, we want to keep the type
+        // if evaluated value is not a string or number, we want to keep the type
         to_ret = ref;
       }
     } else {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "style-dictionary",
-  "version": "3.1.0",
+  "version": "3.7.1",
   "description": "Style once, use everywhere. A build system for creating cross-platform styles.",
   "keywords": [
     "style dictionary",
@@ -44,7 +44,8 @@
     "generate-docs": "node ./scripts/generateDocs.js",
     "serve-docs": "docsify serve docs -p 3000 -P 12345",
     "install-cli": "npm install -g $(npm pack)",
-    "release": "git add . && standard-version -a"
+    "release": "git add . && standard-version -a",
+    "prepare": "husky install"
   },
   "standard-version": {
     "scripts": {
@@ -119,36 +120,36 @@
   "dependencies": {
     "chalk": "^4.0.0",
     "change-case": "^4.1.2",
-    "commander": "^5.1.0",
-    "fs-extra": "^8.1.0",
-    "glob": "^7.1.6",
-    "json5": "^2.1.3",
+    "commander": "^8.3.0",
+    "fs-extra": "^10.0.0",
+    "glob": "^7.2.0",
+    "json5": "^2.2.0",
+    "jsonc-parser": "^3.0.0",
     "lodash": "^4.17.15",
     "tinycolor2": "^1.4.1"
   },
   "devDependencies": {
-    "@babel/preset-env": "^7.10.2",
-    "@commitlint/cli": "^11.0.0",
-    "@commitlint/config-conventional": "^11.0.0",
-    "babel-jest": "^26.0.1",
+    "@babel/preset-env": "^7.16.11",
+    "@commitlint/cli": "^16.1.0",
+    "@commitlint/config-conventional": "^16.0.0",
+    "babel-jest": "^27.4.6",
     "babel-preset-env": "^1.7.0",
-    "docsify": "^4.12.1",
+    "docsify": "^4.12.2",
     "docsify-cli": "^4.4.3",
-    "eslint": "^6.8.0",
-    "eslint-plugin-jest": "^24.1.3",
-    "husky": "^4.2.5",
+    "eslint": "^8.7.0",
+    "eslint-plugin-jest": "^26.0.0",
+    "husky": "^7.0.0",
     "istanbul": "^0.4.5",
-    "jest": "^26.6.3",
+    "jest": "^27.4.7",
     "jsdoc-escape-at": "^1.0.1",
-    "jsdoc-to-markdown": "^7.0.1",
+    "jsdoc-to-markdown": "^7.1.0",
     "json5-jest": "^1.0.1",
-    "jsonc-parser": "^3.0.0",
-    "less": "^3.11.2",
-    "lint-staged": "^10.2.7",
-    "node-sass": "^6.0.1",
-    "standard-version": "^9.0.0",
-    "stylus": "^0.54.8",
-    "tsd": "^0.15.1",
-    "yaml": "^1.10.0"
+    "less": "^4.1.2",
+    "lint-staged": "^12.3.1",
+    "node-sass": "^7.0.1",
+    "standard-version": "^9.3.2",
+    "stylus": "^0.56.0",
+    "tsd": "^0.19.1",
+    "yaml": "^1.10.2"
   }
 }

package/types/index.d.ts

@@ -20,7 +20,7 @@ import {Dictionary as _Dictionary} from './Dictionary';
 import {File as _File} from './File';
 import {FileHeader as _FileHeader} from './FileHeader';
 import {Filter as _Filter} from './Filter';
-import {Format as _Format} from './Format';
+import {Format as _Format, Formatter as _Formatter } from './Format';
 import {FormatHelpers as _FormatHelpers} from './FormatHelpers';
 import {Options as _Options} from './Options';
 import {Parser as _Parser} from './Parser';
@@ -44,6 +44,7 @@ declare namespace StyleDictionary {
   type Filter = _Filter;
   type Format = _Format;
   type FormatHelpers = _FormatHelpers;
+  type Formatter = _Formatter;
   type Options = _Options;
   type Parser = _Parser;
   type Platform = _Platform;
@@ -63,7 +64,7 @@ declare namespace StyleDictionary {
 
     transform: Record<string, Transform>;
     transformGroup: Record<string, TransformGroup['transforms']>;
-    format: Record<string, Format>;
+    format: Record<string, Formatter>;
     action: Record<string, Action>;
     filter: Record<string, Filter>;
     fileHeader: Record<string, FileHeader>;

package/lib/common/templates/ios-swift/enum.swift.template

@@ -1,26 +0,0 @@
-<%
-//
-// Copyright 2019 Alaska Air Group 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.
-%>
-//
-// <%= file.destination %>
-//
-<%= fileHeader({file, commentStyle: 'short'}) %>
-import UIKit
-
-public enum <%= file.className %> {
-    <%= allTokens.map(function(prop) {
-      return 'public static let ' + formatProperty(prop);
-    }).join('\n    ') %>
-}