style-dictionary 3.0.3 → 3.7.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.3"
+    "style-dictionary": "3.7.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.3"
+    "style-dictionary": "3.7.0"
   }
 }

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

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

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

@@ -3,14 +3,14 @@
   "description": "",
   "version": "1.0.0",
   "dependencies": {
-    "node-sass": "^6.0.1",
+    "node-sass": "^7.0.0",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-scripts": "^4.0.3",
     "styled-components": "^5.3.0"
   },
   "devDependencies": {
-    "style-dictionary": "3.0.3"
+    "style-dictionary": "3.7.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.3"
+    "style-dictionary": "3.7.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.3"
+    "style-dictionary": "3.7.0"
   }
 }

package/examples/advanced/custom-filters/README.md

@@ -0,0 +1,99 @@
+## Filters
+
+This example shows how to use built-in and custom filters to the design tokens.
+
+Filters are functions that might remove according to some conditions a design token from the output distribution.
+
+#### Running the example
+
+First of all, set up the required dependencies running the command `npm install` in your local CLI environment (if you prefer to use *yarn* update the commands accordingly).
+
+At this point, if you want to build the tokens you can run `npm run build`. This command will generate the files in the `build` folder.
+
+#### How does it work a built-in filter?
+
+Currently StyleDictionary supports just the following built-in filters:
+
+- removePrivate
+
+You have to apply it in the `config.json` file:
+
+```
+"scss": {
+  "buildPath": "build/web/",
+  "files": [{
+    "destination": "colors.scss",
+    "filter": "removePrivate",
+    "format": "scss/variables"
+  }]
+}
+```
+
+The StyleDictionary will take care of filtering out proper design tokens from the source of truth:
+
+```
+{
+  "color": {
+    "gray": {
+      "light" : {
+        "value": "#CCCCCC",
+        "group": "color",
+        "private": true
+      },
+      "medium": {
+        "value": "#999999",
+        "group": "color"
+      },
+      "dark"  : {
+        "value": "#111111",
+        "group": "color"
+      }
+    },
+  }
+}
+```
+
+#### How does it work a custom filter?
+
+To declare a custom **filter**, you have to call the `registerFilter` method:
+
+```
+StyleDictionary.registerFilter({
+  name: 'isTextTransform',
+  matcher: function(token) {
+    return token.attributes.category === 'font' && token.value.includes['lowercase', 'uppercase]
+  }
+});
+```
+
+You have to apply it in the `config.json` file:
+
+```
+"scss": {
+  "buildPath": "build/web/",
+  "files": [{
+    "destination": "fonts.scss",
+    "filter": "isTextTransform",
+    "format": "scss/variables"
+  }]
+}
+```
+
+The StyleDictionary will take care of filtering out proper design tokens from the source of truth:
+
+```
+{
+  "fonts": {
+    "title-transform": {
+      "value": "uppercase", // included
+      "group": "font"
+    },
+    "title-size": {
+      "value": "36px", // excluded
+      "group": "font"
+    }
+  }
+}
+```
+
+More information can be found on the [documentation](https://amzn.github.io/style-dictionary/#/api?id=registerfilter).

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

@@ -0,0 +1,27 @@
+const StyleDictionary = require('../../../index');
+
+console.log('Build started...');
+console.log('\n==============================================');
+
+
+// REGISTER THE CUSTOM FILTERS
+
+StyleDictionary.registerFilter({
+  name: 'removeBigSpacing',
+  matcher: function(token) {
+    return token.group === 'spacing' && token.value < 0.5
+  }
+});
+
+// APPLY THE CONFIGURATION
+// IMPORTANT: the registration of custom transforms
+// needs to be done _before_ applying the configuration
+const StyleDictionaryExtended = StyleDictionary.extend(__dirname + '/config.json');
+
+
+// FINALLY, BUILD ALL THE PLATFORMS
+StyleDictionaryExtended.buildAllPlatforms();
+
+
+console.log('\n==============================================');
+console.log('\nBuild completed!');

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

@@ -0,0 +1,21 @@
+{
+  "source": ["tokens/**/*.json"],
+  "platforms": {
+    "web": {
+      "buildPath": "build/web/",
+      "files": [{
+        "destination": "tokens.js",
+        "filter": "removeBigSpacing",
+        "format": "javascript/es6"
+      }]
+    },
+    "scss": {
+      "buildPath": "build/web/",
+      "files": [{
+        "destination": "tokens.scss",
+        "filter": "removeBigSpacing",
+        "format": "scss/variables"
+      }]
+    }
+  }
+}

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

@@ -0,0 +1,20 @@
+{
+  "name": "style-dictionary-filters",
+  "version": "1.0.0",
+  "description": "",
+  "main": "build/index.js",
+  "files": [
+    "build",
+    "properties"
+  ],
+  "scripts": {
+    "build": "node ./build.js",
+    "clean": "rm -rf build",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "Apache-2.0",
+  "devDependencies": {
+    "style-dictionary": "3.7.0"
+  }
+}

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

@@ -0,0 +1,20 @@
+{
+  "margin": {
+    "small" : {
+      "value": "0.15",
+      "group": "spacing"
+    },
+    "medium": {
+      "value": "0.25",
+      "group": "spacing"
+    },
+    "large" : {
+      "value": "0.6",
+      "group": "spacing"
+    },
+    "extralarge" : {
+      "value": "1",
+      "group": "spacing"
+    }
+  }
+}

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.3"
+    "style-dictionary": "3.7.0"
   }
 }

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

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

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

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

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

@@ -10,6 +10,6 @@
   "author": "",
   "license": "Apache-2.0",
   "devDependencies": {
-    "style-dictionary": "3.0.3"
+    "style-dictionary": "3.7.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.0.3"
+    "style-dictionary": "3.7.0"
   }
 }

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

@@ -15,6 +15,6 @@
   "author": "",
   "license": "Apache-2.0",
   "devDependencies": {
-    "style-dictionary": "3.0.3"
+    "style-dictionary": "3.7.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.0.3",
+    "style-dictionary": "3.7.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.3"
+    "style-dictionary": "3.7.0"
   }
 }

package/examples/advanced/referencing_aliasing/package.json

@@ -15,6 +15,6 @@
   "author": "",
   "license": "Apache-2.0",
   "devDependencies": {
-    "style-dictionary": "3.0.3"
+    "style-dictionary": "3.7.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.3"
+    "style-dictionary": "3.7.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.3"
+    "style-dictionary": "3.7.0"
   }
 }

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

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

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

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

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

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

package/examples/basic/config.json

@@ -95,10 +95,25 @@
       "transformGroup": "ios-swift",
       "buildPath": "build/ios-swift/",
       "files": [{
-        "destination": "StyleDictionary.swift",
+        "destination": "StyleDictionary+Class.swift",
         "format": "ios-swift/class.swift",
-        "className": "StyleDictionary",
+        "className": "StyleDictionaryClass",
         "filter": {}
+      },{
+        "destination": "StyleDictionary+Enum.swift",
+        "format": "ios-swift/enum.swift",
+        "className": "StyleDictionaryEnum",
+        "filter": {}
+      },{
+        "destination": "StyleDictionary+Struct.swift",
+        "format": "ios-swift/any.swift",
+        "className": "StyleDictionaryStruct",
+        "filter": {},
+        "options": {
+          "imports": "SwiftUI",
+          "objectType": "struct",
+          "accessControl": "internal"
+        }
       }]
     },
     "ios-swift-separate-enums": {
@@ -117,7 +132,6 @@
         "destination": "StyleDictionarySize.swift",
         "format": "ios-swift/enum.swift",
         "className": "StyleDictionarySize",
-        "type": "float",
         "filter": {
           "attributes": {
             "category": "size"

package/examples/complete/package.json

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

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,12 +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={}}) {
+function createPropertyFormatter({
+  outputReferences = false,
+  outputReferenceFallbacks = false,
+  dictionary,
+  format,
+  formatting = {},
+  themeable = false
+}) {
   let {prefix, commentStyle, indentation, separator, suffix} = Object.assign({}, defaultFormatting, formatting);
 
   switch(format) {
@@ -105,7 +114,11 @@ function createPropertyFormatter({outputReferences, dictionary, format, formatti
           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}`;
               }
@@ -117,7 +130,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 +149,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;