style-dictionary 4.0.0-prerelease.1 → 4.0.0-prerelease.2

package/lib/buildFile.js

@@ -13,14 +13,14 @@
 
 import path from '@bundled-es-modules/path-browserify';
 import chalk from 'chalk';
-import { fs } from '../fs.js';
-import filterProperties from './filterProperties.js';
+import { fs } from 'style-dictionary/fs';
+import filterTokens from './filterTokens.js';
 import GroupMessages from './utils/groupMessages.js';
 
 import createFormatArgs from './utils/createFormatArgs.js';
 
 /**
- * Takes the style property object and a format and returns a
+ * Takes the style token object and a format and returns a
  * string that can be written to a file.
  * @memberOf StyleDictionary
  * @param {Object} file
@@ -50,60 +50,58 @@ export default function buildFile(file = {}, platform = {}, dictionary = {}) {
   const dirname = path.dirname(fullDestination);
   if (!fs.existsSync(dirname)) fs.mkdirSync(dirname, { recursive: true });
 
-  const filteredProperties = filterProperties(dictionary, filter);
+  const filteredTokens = filterTokens(dictionary, filter);
   const filteredDictionary = Object.assign({}, dictionary, {
-    properties: filteredProperties.properties,
-    allProperties: filteredProperties.allProperties,
-    tokens: filteredProperties.properties,
-    allTokens: filteredProperties.allProperties,
-    // keep the unfiltered properties object for reference resolution
-    _properties: dictionary.properties,
+    tokens: filteredTokens.tokens,
+    allTokens: filteredTokens.allTokens,
+    // keep the unfiltered tokens object for reference resolution
+    _tokens: dictionary.tokens,
   });
 
-  // if properties object is empty, return without creating a file
+  // if tokens object is empty, return without creating a file
   if (
-    filteredProperties.hasOwnProperty('properties') &&
-    Object.keys(filteredProperties.properties).length === 0 &&
-    filteredProperties.properties.constructor === Object
+    filteredTokens.hasOwnProperty('tokens') &&
+    Object.keys(filteredTokens.tokens).length === 0 &&
+    filteredTokens.tokens.constructor === Object
   ) {
-    let warnNoFile = `No properties for ${destination}. File not created.`;
+    let warnNoFile = `No tokens for ${destination}. File not created.`;
     console.log(chalk.rgb(255, 140, 0)(warnNoFile));
     return null;
   }
 
-  // Check for property name Collisions
+  // Check for token name Collisions
   const nameCollisionObj = {};
-  filteredProperties.allTokens &&
-    filteredProperties.allTokens.forEach((propertyData) => {
-      let propertyName = propertyData.name;
-      if (!nameCollisionObj[propertyName]) {
-        nameCollisionObj[propertyName] = [];
+  filteredTokens.allTokens &&
+    filteredTokens.allTokens.forEach((tokenData) => {
+      let tokenName = tokenData.name;
+      if (!nameCollisionObj[tokenName]) {
+        nameCollisionObj[tokenName] = [];
       }
-      nameCollisionObj[propertyName].push(propertyData);
+      nameCollisionObj[tokenName].push(tokenData);
     });
 
   const PROPERTY_NAME_COLLISION_WARNINGS =
     GroupMessages.GROUP.PropertyNameCollisionWarnings + ':' + destination;
   GroupMessages.clear(PROPERTY_NAME_COLLISION_WARNINGS);
-  Object.keys(nameCollisionObj).forEach((propertyName) => {
-    if (nameCollisionObj[propertyName].length > 1) {
-      let collisions = nameCollisionObj[propertyName]
-        .map((properties) => {
-          let propertyPathText = chalk.rgb(255, 69, 0)(properties.path.join('.'));
-          let valueText = chalk.rgb(255, 140, 0)(properties.value);
-          return propertyPathText + '   ' + valueText;
+  Object.keys(nameCollisionObj).forEach((tokenName) => {
+    if (nameCollisionObj[tokenName].length > 1) {
+      let collisions = nameCollisionObj[tokenName]
+        .map((tokens) => {
+          let tokenPathText = chalk.rgb(255, 69, 0)(tokens.path.join('.'));
+          let valueText = chalk.rgb(255, 140, 0)(tokens.value);
+          return tokenPathText + '   ' + valueText;
         })
         .join('\n        ');
       GroupMessages.add(
         PROPERTY_NAME_COLLISION_WARNINGS,
         `Output name ${chalk
           .rgb(255, 69, 0)
-          .bold(propertyName)} was generated by:\n        ${collisions}`,
+          .bold(tokenName)} was generated by:\n        ${collisions}`,
       );
     }
   });
 
-  let propertyNamesCollisionCount = GroupMessages.count(PROPERTY_NAME_COLLISION_WARNINGS);
+  let tokenNamesCollisionCount = GroupMessages.count(PROPERTY_NAME_COLLISION_WARNINGS);
   fs.writeFileSync(
     fullDestination,
     format(
@@ -121,12 +119,12 @@ export default function buildFile(file = {}, platform = {}, dictionary = {}) {
 
   // don't show name collision warnings for nested type formats
   // because they are not relevant.
-  if ((nested || propertyNamesCollisionCount === 0) && filteredReferencesCount === 0) {
+  if ((nested || tokenNamesCollisionCount === 0) && filteredReferencesCount === 0) {
     console.log(chalk.bold.green(`✔︎ ${fullDestination}`));
   } else {
-    console.log(`⚠️ ${fullDestination}`);
-    if (propertyNamesCollisionCount > 0) {
-      let propertyNamesCollisionWarnings = GroupMessages.fetchMessages(
+    const warnHeader = `⚠️ ${fullDestination}`;
+    if (tokenNamesCollisionCount > 0) {
+      let tokenNamesCollisionWarnings = GroupMessages.fetchMessages(
         PROPERTY_NAME_COLLISION_WARNINGS,
       ).join('\n    ');
       let title = `While building ${chalk
@@ -139,13 +137,17 @@ export default function buildFile(file = {}, platform = {}, dictionary = {}) {
       )(
         [
           'This many-to-one issue is usually caused by some combination of:',
-          '* conflicting or similar paths/names in property definitions',
+          '* conflicting or similar paths/names in token definitions',
           '* platform transforms/transformGroups affecting names, especially when removing specificity',
           '* overly inclusive file filters',
         ].join('\n    '),
       );
-      let warn = `${title}\n    ${propertyNamesCollisionWarnings}\n${help}`;
-      console.log(chalk.rgb(255, 140, 0).bold(warn));
+      let warn = `${warnHeader}\n${title}\n    ${tokenNamesCollisionWarnings}\n${help}`;
+      if (platform?.log === 'error') {
+        throw new Error(warn);
+      } else {
+        console.log(chalk.rgb(255, 140, 0).bold(warn));
+      }
     }
 
     if (filteredReferencesCount > 0) {
@@ -162,8 +164,12 @@ export default function buildFile(file = {}, platform = {}, dictionary = {}) {
         165,
         0,
       )(['This is caused when combining a filter and `outputReferences`.'].join('\n    '));
-      let warn = `${title}\n    ${filteredReferencesWarnings}\n${help}`;
-      console.log(chalk.rgb(255, 140, 0).bold(warn));
+      let warn = `${warnHeader}\n${title}\n    ${filteredReferencesWarnings}\n${help}`;
+      if (platform?.log === 'error') {
+        throw new Error(warn);
+      } else {
+        console.log(chalk.rgb(255, 140, 0).bold(warn));
+      }
     }
   }
 }

package/lib/cleanDir.js

@@ -13,7 +13,7 @@
 
 import chalk from 'chalk';
 import path from '@bundled-es-modules/path-browserify';
-import { fs } from '../fs.js';
+import { fs } from 'style-dictionary/fs';
 
 /**
  * Takes the style property object and a format and returns a

package/lib/cleanDirs.js

@@ -14,8 +14,8 @@
 import cleanDir from './cleanDir.js';
 
 /**
- * Takes a platform config object and a properties
- * object and cleans all the files. Properties object
+ * Takes a platform config object and a tokens
+ * object and cleans all the files. Tokens object
  * should have been transformed and resolved before this
  * point.
  * @memberOf StyleDictionary

package/lib/cleanFile.js

@@ -12,7 +12,7 @@
  */
 
 import chalk from 'chalk';
-import { fs } from '../fs.js';
+import { fs } from 'style-dictionary/fs';
 
 /**
  * Takes the style property object and a format and returns a

package/lib/common/actions.js

@@ -11,7 +11,7 @@
  * and limitations under the License.
  */
 
-import { fs } from '../../fs.js';
+import { fs } from 'style-dictionary/fs';
 
 /**
  * @namespace Actions
@@ -25,20 +25,25 @@ export default {
    */
   'android/copyImages': {
     do: function (dictionary, config) {
-      var imagesDir = config.buildPath + 'android/main/res/drawable-';
+      const imagesDir = `${config.buildPath}android/main/res/drawable-`;
       dictionary.allTokens.forEach(function (token) {
         if (token.attributes.category === 'asset' && token.attributes.type === 'image') {
-          var name = token.path.slice(2, 4).join('_');
-          fs.copyFileSync(token.value, imagesDir + token.attributes.state + '/' + name + '.png');
+          const name = token.path.slice(2, 4).join('_');
+          const dir = `${imagesDir}${token.attributes.state}`;
+          const path = `${dir}/${name}.png`;
+          fs.mkdirSync(dir, { recursive: true });
+          fs.copyFileSync(token.value, path);
         }
       });
     },
     undo: function (dictionary, config) {
-      var imagesDir = config.buildPath + 'android/main/res/drawable-';
+      const imagesDir = `${config.buildPath}android/main/res/drawable-`;
       dictionary.allTokens.forEach(function (token) {
         if (token.attributes.category === 'asset' && token.attributes.type === 'image') {
-          var name = token.path.slice(2, 4).join('_');
-          fs.unlinkSync(imagesDir + token.attributes.state + '/' + name + '.png');
+          const name = token.path.slice(2, 4).join('_');
+          const dir = `${imagesDir}${token.attributes.state}`;
+          const path = `${dir}/${name}.png`;
+          fs.unlinkSync(path);
         }
       });
     },

package/lib/common/formatHelpers/getTypeScriptType.js

@@ -10,7 +10,6 @@
  * CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions
  * and limitations under the License.
  */
-import { unique } from '../../utils/es6_.js';
 
 /**
  * Given some value, returns a basic valid TypeScript type for that value.
@@ -22,7 +21,7 @@ import { unique } from '../../utils/es6_.js';
  * StyleDictionary.registerFormat({
  *   name: 'myCustomFormat',
  *   formatter: function({ dictionary, options }) {
- *    return dictionary.allProperties.map(function(prop) {
+ *    return dictionary.allTokens.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);
@@ -72,11 +71,13 @@ function getArrayType(passedArray) {
     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 ? ' | ' : ''}`;
-        }),
+      return `(${Array.from(
+        new Set(
+          passedArray.map((item, index) => {
+            const isLast = passedArray.length === index + 1;
+            return `${getTypeScriptType(item)}${!isLast ? ' | ' : ''}`;
+          }),
+        ),
       ).join('')})[]`;
     }
   }

package/lib/common/formats.js

@@ -468,7 +468,7 @@ const formats = {
   'typescript/es6-declarations': function ({ dictionary, file, options }) {
     return (
       fileHeader({ file }) +
-      dictionary.allProperties
+      dictionary.allTokens
         .map(function (prop) {
           let to_ret_prop = '';
           if (prop.comment) to_ret_prop += '/** ' + prop.comment + ' */\n';
@@ -529,7 +529,7 @@ const formats = {
    *   formatter: function({ dictionary }) {
    *     return 'declare const root: RootObject\n' +
    *     'export default root\n' +
-   *     JsonToTS(dictionary.properties).join('\n');
+   *     JsonToTS(dictionary.tokens).join('\n');
    *   },
    * });
    * ```
@@ -788,7 +788,7 @@ declare const ${moduleName}: ${JSON.stringify(treeWalker(dictionary.tokens), nul
    */
   'compose/object': function ({ dictionary, options, file }) {
     const template = _template(composeObject);
-    let allProperties;
+    let allTokens;
     const { outputReferences } = options;
     const formatProperty = createPropertyFormatter({
       outputReferences,
@@ -800,14 +800,14 @@ declare const ${moduleName}: ${JSON.stringify(treeWalker(dictionary.tokens), nul
     });
 
     if (outputReferences) {
-      allProperties = [...dictionary.allProperties].sort(sortByReference(dictionary));
+      allTokens = [...dictionary.allTokens].sort(sortByReference(dictionary));
     } else {
-      allProperties = [...dictionary.allProperties].sort(sortByName);
+      allTokens = [...dictionary.allTokens].sort(sortByName);
     }
 
     options = setComposeObjectProperties(options);
 
-    return template({ allProperties, file, options, formatProperty, fileHeader });
+    return template({ allTokens, file, options, formatProperty, fileHeader });
   },
 
   // iOS templates

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

@@ -23,7 +23,7 @@ package <%= file.packageName %>;
 %>
 
 object <%= file.className %> {
-  <%= allProperties.map(function(prop) {
+  <%= allTokens.map(function(prop) {
     let comment = "";
     if (prop.comment) {
       comment = \`/** \${prop.comment} */\\n  \`

package/lib/common/templates/css/fonts.css.template.js

@@ -1,4 +1,4 @@
-export default `<% Object.values(properties && properties.asset && properties.asset.font || {}).forEach(function(font) {
+export default `<% Object.values(tokens && tokens.asset && tokens.asset.font || {}).forEach(function(font) {
   var fileFormatArr = [];
   if (font.eot) {
   	fileFormatArr.push("url('../" + font.eot.value + "');\\n\\tsrc: url('../" + font.eot.value + "?#iefix') format('embedded-opentype')");

package/lib/common/templates/ios/singleton.m.template.js

@@ -34,7 +34,7 @@ export default `<%
   static dispatch_once_t onceToken;
 
   dispatch_once(&onceToken, ^{
-    dictionary = <%= buildDictionary(dictionary.properties) %>;
+    dictionary = <%= buildDictionary(dictionary.tokens) %>;
   });
 
   return dictionary;
@@ -42,25 +42,25 @@ export default `<%
 
 @end
 
-<% function buildDictionary(props, indent) {
+<% function buildDictionary(tokens, indent) {
   indent = indent || '  ';
   var to_ret = '@{\\n';
-  if (props.hasOwnProperty('value')) {
-    var value = props.attributes.category === 'size' || props.attributes.category === 'time' ? '@' + props.value : props.value;
+  if (tokens.hasOwnProperty('value')) {
+    var value = tokens.attributes.category === 'size' || tokens.attributes.category === 'time' ? '@' + tokens.value : tokens.value;
     to_ret += indent + '@"value": ' + value + ',\\n';
-    to_ret += indent + '@"name": @"' + props.name + '",\\n';
+    to_ret += indent + '@"name": @"' + tokens.name + '",\\n';
 
-    for(var name in props.attributes) {
-      if (props.attributes[name]) {
-        to_ret += indent + '@"' + name + '": @"' + props.attributes[name] + '",\\n';
+    for(var name in tokens.attributes) {
+      if (tokens.attributes[name]) {
+        to_ret += indent + '@"' + name + '": @"' + tokens.attributes[name] + '",\\n';
       }
     }
 
     // remove last comma
     return to_ret.slice(0, -2) + '\\n' + indent + '}';
   } else {
-    for(var name in props) {
-      to_ret += indent + '@"' + name + '": ' + buildDictionary(props[name], indent + '  ') + ',\\n';
+    for(var name in tokens) {
+      to_ret += indent + '@"' + name + '": ' + buildDictionary(tokens[name], indent + '  ') + ',\\n';
     }
     // remove last comma
     return to_ret.slice(0, -2) + '\\n' + indent + '}';

package/lib/common/templates/scss/map-deep.template.js

@@ -17,9 +17,9 @@ export default `<%
     // output the list of tokens as a Sass nested map
     // (the values are pointing to the variables)
     //
-    print(\`$\${file.mapName||'tokens'}: \${processJsonNode(dictionary.properties, 0)};\\n\`);
+    print(\`$\${file.mapName||'tokens'}: \${processJsonNode(dictionary.tokens, 0)};\\n\`);
 
-    // recursive function to process a properties JSON node
+    // recursive function to process a tokens JSON node
     //
     function processJsonNode(obj, depth) {
         var output = '';
@@ -31,7 +31,7 @@ export default `<%
             // if we have found a leaf (a property with a value) append the value
             output += \`$\${obj.name}\`;
         } else {
-            // if we have found a group of properties, use the Sass group "(...)" syntax and loop -recursively- on the children
+            // if we have found a group of tokens, use the Sass group "(...)" syntax and loop -recursively- on the children
             output += '(\\n'
             output += Object.keys(obj).map(function(newKey) {
             var newProp = obj[newKey];

package/lib/common/transforms.js

@@ -13,9 +13,16 @@
 
 import Color from 'tinycolor2';
 import path from '@bundled-es-modules/path-browserify';
-import { kebabCase, camelCase, snakeCase, upperFirst } from '../utils/es6_.js';
+import {
+  camelCaseTransformMerge,
+  snakeCase,
+  paramCase as kebabCase,
+  camelCase as _camelCase,
+} from 'change-case';
 import convertToBase64 from '../utils/convertToBase64.js';
 
+const camelCase = (str) => _camelCase(str, { transform: camelCaseTransformMerge });
+
 const UNICODE_PATTERN = /&#x([^;]+);/g;
 
 function isColor(token) {
@@ -281,6 +288,9 @@ export default {
   'name/cti/pascal': {
     type: 'name',
     transformer: function (token, options) {
+      const upperFirst = function (str) {
+        return str ? str[0].toUpperCase() + str.substr(1) : '';
+      };
       return upperFirst(camelCase([options.prefix].concat(token.path).join(' ')));
     },
   },

package/lib/filterTokens.js

@@ -0,0 +1,76 @@
+/*
+ * 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.
+ */
+import { isPlainObject } from 'is-plain-object';
+
+/**
+ * Takes a nested object of tokens and filters them using the provided
+ * function.
+ *
+ * @param {Object|undefined|null} tokens
+ * @param {Function} filter - A function that receives a property object and
+ *   returns `true` if the property should be included in the output or `false`
+ *   if the property should be excluded from the output.
+ * @returns {Object[]} tokens - A new object containing only the tokens
+ *   that matched the filter.
+ */
+function filterTokenObject(tokens, filter) {
+  // Use reduce to generate a new object with the unwanted tokens filtered
+  // out
+  return Object.entries(tokens ?? []).reduce((acc, [key, value]) => {
+    // If the value is not an object, we don't know what it is. We return it as-is.
+    if (!isPlainObject(value)) {
+      return acc;
+      // If the value has a `value` member we know it's a property, pass it to
+      // the filter function and either include it in the final `acc` object or
+      // exclude it (by returning the `acc` object without it added).
+    } else if (typeof value.value !== 'undefined') {
+      return filter(value) ? { ...acc, [key]: value } : acc;
+      // If we got here we have an object that is not a property. We'll assume
+      // it's an object containing multiple tokens and recursively filter it
+      // using the `filterTokenObject` function.
+    } else {
+      const filtered = filterTokenObject(value, filter);
+      // If the filtered object is not empty then add it to the final `acc`
+      // object. If it is empty then every property inside of it was filtered
+      // out, then exclude it entirely from the final `acc` object.
+      return Object.entries(filtered || {}).length < 1 ? acc : { ...acc, [key]: filtered };
+    }
+  }, {});
+}
+
+/**
+ * Takes a dictionary and filters the `allTokens` array and the `tokens`
+ * object using a function provided by the user.
+ *
+ * @param {Object} dictionary
+ * @param {Function} filter - A function that receives a token object
+ *   and returns `true` if the token should be included in the output
+ *   or `false` if the token should be excluded from the output
+ * @returns {Object} dictionary - A new dictionary containing only the
+ *   tokens that matched the filter (or the original dictionary if no filter
+ *   function was provided).
+ */
+export default function filterTokens(dictionary, filter) {
+  if (!filter) {
+    return dictionary;
+  } else {
+    if (typeof filter !== 'function') {
+      throw new Error('filter is not a function');
+    } else {
+      return {
+        allTokens: (dictionary.allTokens ?? []).filter(filter),
+        tokens: filterTokenObject(dictionary.tokens, filter),
+      };
+    }
+  }
+}

package/lib/register/preprocessor.js

@@ -0,0 +1,39 @@
+/*
+ * 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.
+ */
+
+/**
+ * @typedef {import('../../types/Preprocessor').Preprocessor} Preprocessor
+ * Adds a custom preprocessor to preprocess the parsed dictionary, before transforming individual tokens.
+ * @static
+ * @memberof module:style-dictionary
+ * @param {Object} Preprocessor - Preprocessor object
+ * @param {String} Preprocessor.name - Name of the format to be referenced in your config.json
+ * @param {function} Preprocessor.preprocessor - Function to preprocess the dictionary. The function should return a plain Javascript object.
+ * @returns {module:style-dictionary}
+ * @example
+ * ```js
+ * StyleDictionary.registerPreprocessor((dictionary) => {
+ *   return dictionary;
+ * });
+ * ```
+ */
+export default function registerPreprocessor(cfg) {
+  const errorPrefix = 'Cannot register preprocessor;';
+  if (typeof cfg.name !== 'string')
+    throw new Error(`${errorPrefix} Preprocessor.name must be a string`);
+  if (!(cfg.preprocessor instanceof Function)) {
+    throw new Error(`${errorPrefix} Preprocessor.preprocessor must be a function`);
+  }
+  this.preprocessors[cfg.name] = cfg.preprocessor;
+  return this;
+}

package/lib/register/transform.js

@@ -54,12 +54,13 @@ export default function registerTransform(options) {
     throw new Error('matcher must be a function');
   if (typeof options.transformer !== 'function') throw new Error('transformer must be a function');
 
-  this.transform[options.name] = {
+  const transform = {
     type: options.type,
     matcher: options.matcher,
     transitive: !!options.transitive,
     transformer: options.transformer,
   };
 
+  this.transform[options.name] = transform;
   return this;
 }

package/lib/register/transformGroup.js

@@ -11,8 +11,6 @@
  * and limitations under the License.
  */
 
-import { isArray } from '../utils/es6_.js';
-
 /**
  * Add a custom transformGroup to the Style Dictionary, which is a
  * group of transforms.
@@ -36,7 +34,7 @@ import { isArray } from '../utils/es6_.js';
  */
 export default function registerTransformGroup(options) {
   if (typeof options.name !== 'string') throw new Error('transform name must be a string');
-  if (!isArray(options.transforms))
+  if (!Array.isArray(options.transforms))
     throw new Error('transforms must be an array of registered value transforms');
 
   options.transforms.forEach(