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

package/lib/transform/config.js

@@ -11,25 +11,25 @@
  * and limitations under the License.
  */
 
-import { clone, matches } from '../utils/es6_.js';
+import { isPlainObject } from 'is-plain-object';
 import deepExtend from '../utils/deepExtend.js';
 import GroupMessages from '../utils/groupMessages.js';
 
-const TEMPLATE_DEPRECATION_WARNINGS = GroupMessages.GROUP.TemplateDeprecationWarnings;
 const MISSING_TRANSFORM_ERRORS = GroupMessages.GROUP.MissingRegisterTransformErrors;
 
 /**
- * Takes a platform config object and returns a new one
+ * Takes a platform platformConfig object and returns a new one
  * that has filters, transforms, formats, and actions
  * mapped properly.
  * @private
- * @param {Object} config
+ * @param {Object} platformConfig
  * @param {Object} dictionary
  * @param {Object} platformName (only used for error messaging)
  * @returns {Object}
  */
-export default function transformConfig(config, dictionary, platformName) {
-  const to_ret = clone(config);
+export default function transformConfig(platformConfig, dictionary, platformName) {
+  const to_ret = { ...platformConfig }; // structuredClone not suitable due to config being able to contain Function() etc.
+  to_ret.log = platformConfig.log ?? dictionary.log;
 
   // The platform can define either a transformGroup or an array
   // of transforms. If given a transformGroup that doesn't exist,
@@ -82,8 +82,8 @@ None of ${transform_warnings} match the name of a registered transform.
   }
 
   // Apply registered fileHeaders onto the platform options
-  if (config.options && config.options.fileHeader) {
-    const fileHeader = config.options.fileHeader;
+  if (platformConfig.options && platformConfig.options.fileHeader) {
+    const fileHeader = platformConfig.options.fileHeader;
     if (typeof fileHeader === 'string') {
       if (dictionary.fileHeader[fileHeader]) {
         to_ret.options.fileHeader = dictionary.fileHeader[fileHeader];
@@ -97,7 +97,7 @@ None of ${transform_warnings} match the name of a registered transform.
     }
   }
 
-  to_ret.files = (config.files || []).map(function (file) {
+  to_ret.files = (platformConfig.files || []).map(function (file) {
     const ext = { options: {} };
     if (file.options && file.options.fileHeader) {
       const fileHeader = file.options.fileHeader;
@@ -122,6 +122,21 @@ None of ${transform_warnings} match the name of a registered transform.
           throw new Error("Can't find filter: " + file.filter);
         }
       } else if (typeof file.filter === 'object') {
+        // Recursively go over the object keys of filter object and
+        // return a filter Function that filters tokens
+        // by the specified object keys.
+        const matchFn = function (inputObj, testObj) {
+          if (isPlainObject(testObj)) {
+            return Object.keys(testObj).every((key) => matchFn(inputObj[key], testObj[key]));
+          } else {
+            return inputObj == testObj;
+          }
+        };
+        const matches = function (matchObj) {
+          let cloneObj = { ...matchObj }; // shallow clone, structuredClone not suitable because obj can contain "Function()"
+          let matchesFn = (inputObj) => matchFn(inputObj, cloneObj);
+          return matchesFn;
+        };
         ext.filter = matches(file.filter);
       } else if (typeof file.filter === 'function') {
         ext.filter = file.filter;
@@ -130,17 +145,7 @@ None of ${transform_warnings} match the name of a registered transform.
       }
     }
 
-    if (file.template) {
-      if (dictionary.format[file.template]) {
-        GroupMessages.add(
-          TEMPLATE_DEPRECATION_WARNINGS,
-          `${file.destination} (template: ${file.template})`,
-        );
-        ext.format = dictionary.format[file.template];
-      } else {
-        throw new Error("Can't find template: " + file.template);
-      }
-    } else if (file.format) {
+    if (file.format) {
       if (dictionary.format[file.format]) {
         ext.format = dictionary.format[file.format];
       } else {
@@ -152,7 +157,7 @@ None of ${transform_warnings} match the name of a registered transform.
     return deepExtend([{}, file, ext]);
   });
 
-  to_ret.actions = (config.actions || []).map(function (action) {
+  to_ret.actions = (platformConfig.actions || []).map(function (action) {
     if (typeof dictionary.action[action].undo !== 'function') {
       console.warn(action + ' action does not have a clean function!');
     }

package/lib/transform/object.js

@@ -11,11 +11,11 @@
  * and limitations under the License.
  */
 
-import { isPlainObject, pull } from '../utils/es6_.js';
+import { isPlainObject } from 'is-plain-object';
 import usesValueReference from '../utils/references/usesReference.js';
 import getName from '../utils/references/getName.js';
-import transformProperty from './property.js';
-import propertySetup from './propertySetup.js';
+import transformToken from './token.js';
+import tokenSetup from './tokenSetup.js';
 
 /**
  * Applies transforms on all tokens. This
@@ -26,7 +26,7 @@ import propertySetup from './propertySetup.js';
  * @private
  * @param {Object} obj
  * @param {Object} options
- * @param {Object} [transformationContext={}]
+ * @param {Object} [ctx={}]
  * @param {Array} [path=[]]
  * @param {Object} [transformedObj={}]
  * @returns {Object}
@@ -34,13 +34,12 @@ import propertySetup from './propertySetup.js';
 export default function transformObject(
   obj,
   options,
-  transformationContext = {},
+  { transformedPropRefs = [], deferredPropValueTransforms = [] } = {},
   path,
   transformedObj,
 ) {
   transformedObj = transformedObj || {};
   path = path || [];
-  const { transformedPropRefs = [], deferredPropValueTransforms = [] } = transformationContext;
 
   for (const name in obj) {
     if (!obj.hasOwnProperty(name)) {
@@ -68,9 +67,9 @@ export default function transformObject(
         continue;
       }
 
-      // Note: propertySetup won't re-run if property has already been setup
+      // Note: tokenSetup won't re-run if property has already been setup
       // it is safe to run this multiple times on the same property.
-      const setupProperty = propertySetup(objProp, name, path);
+      const setupProperty = tokenSetup(objProp, name, path);
 
       // If property has a reference, defer its transformations until later
       if (usesValueReference(setupProperty.value, options)) {
@@ -86,9 +85,16 @@ export default function transformObject(
 
       // If we got here, the property hasn't been transformed yet and
       // does not use a value reference. Transform the property now and assign it.
-      transformedObj[name] = transformProperty(setupProperty, options);
-      // Remove the property path from the deferred transform list
-      pull(deferredPropValueTransforms, pathName);
+      transformedObj[name] = transformToken(setupProperty, options);
+
+      // Remove the property path from the deferred transform list, starting from end of array
+      for (let i = deferredPropValueTransforms.length - 1; i >= 0; i--) {
+        if (deferredPropValueTransforms[i] === pathName) {
+          // Important to use .splice and mutate the original array all the way up
+          deferredPropValueTransforms.splice(i, 1);
+        }
+      }
+
       // Add the property path to the transformed list so we don't transform it again.
       transformedPropRefs.push(pathName);
     } else if (isObj) {
@@ -96,7 +102,7 @@ export default function transformObject(
       transformedObj[name] = transformObject(
         objProp,
         options,
-        transformationContext,
+        { transformedPropRefs, deferredPropValueTransforms },
         path,
         transformedObj[name],
       );

package/lib/transform/{property.js → token.js}

@@ -11,7 +11,6 @@
  * and limitations under the License.
  */
 
-import { clone } from '../utils/es6_.js';
 import usesReference from '../utils/references/usesReference.js';
 
 /**
@@ -23,7 +22,7 @@ import usesReference from '../utils/references/usesReference.js';
  * @returns {Object} - A new property object with transforms applied.
  */
 export default function transformProperty(property, options) {
-  const to_ret = clone(property);
+  const to_ret = structuredClone(property);
   const transforms = options.transforms;
 
   for (let i = 0; i < transforms.length; i++) {

package/lib/transform/{propertySetup.js → tokenSetup.js}

@@ -11,34 +11,34 @@
  * and limitations under the License.
  */
 
+import { isPlainObject } from 'is-plain-object';
 import deepExtend from '../utils/deepExtend.js';
-import { isPlainObject, isString, isArray, clone } from '../utils/es6_.js';
 
 /**
- * Takes a property object, a leaf node in a properties object, and
- * returns a new object that has some properties set. It clones the
+ * Takes a token object, a leaf node in a tokens object, and
+ * returns a new object that has some tokens set. It clones the
  * original object for safekeeping, adds a name, adds an attributes object,
  * and a path array.
  * @private
- * @param {Object} property - the property object to setup
- * @param {String} name - The name of the property, which will should be its key in the object.
- * @param {Array} path - The path of keys to get to the property from the top level of the properties object.
+ * @param {Object} token - the token object to setup
+ * @param {String} name - The name of the token, which will should be its key in the object.
+ * @param {Array} path - The path of keys to get to the token from the top level of the tokens object.
  * @returns {Object} - A new object that is setup and ready to go.
  */
-export default function propertySetup(property, name, path) {
-  if (!property && !isPlainObject(property)) throw new Error('Property object must be an object');
-  if (!name || !isString(name)) throw new Error('Name must be a string');
-  if (!path || !isArray(path)) throw new Error('Path must be an array');
+export default function tokenSetup(token, name, path) {
+  if (!token && !isPlainObject(token)) throw new Error('Property object must be an object');
+  if (!name || !(typeof name === 'string')) throw new Error('Name must be a string');
+  if (!path || !Array.isArray(path)) throw new Error('Path must be an array');
 
-  let to_ret = property;
+  let to_ret = token;
 
   // Only do this once
-  if (!property.original) {
-    // Initial property setup
-    // Keep the original object properties like it was in file (whitout additional data)
+  if (!token.original) {
+    // Initial token setup
+    // Keep the original object tokens like it was in file (whitout additional data)
     // so we can key off them in the transforms
-    to_ret = deepExtend([{}, property]);
-    let to_ret_original = deepExtend([{}, property]);
+    to_ret = deepExtend([{}, token]);
+    let to_ret_original = deepExtend([{}, token]);
     delete to_ret_original.filePath;
     delete to_ret_original.isSource;
 
@@ -49,7 +49,7 @@ export default function propertySetup(property, name, path) {
     to_ret.attributes = to_ret.attributes || {};
     // An array of the path down the object tree; we will use it to build readable names
     // like color_font_base
-    to_ret.path = clone(path);
+    to_ret.path = structuredClone(path);
   }
 
   return to_ret;

package/lib/utils/combineJSON.js

@@ -14,8 +14,8 @@
 import JSON5 from 'json5';
 import glob from '@bundled-es-modules/glob';
 import path from '@bundled-es-modules/path-browserify';
+import { fs } from 'style-dictionary/fs';
 import deepExtend from './deepExtend.js';
-import { fs } from '../../fs.js';
 
 function traverseObj(obj, fn) {
   for (let key in obj) {
@@ -33,41 +33,51 @@ function traverseObj(obj, fn) {
  * @param {String[]} arr - Array of paths to json (or node modules that export objects) files
  * @param {Boolean} [deep=false] - If it should perform a deep merge
  * @param {Function} collision - A function to be called when a name collision happens that isn't a normal deep merge of objects
- * @param {Boolean} [source=true] - If json files are "sources", tag properties
+ * @param {Boolean} [source=true] - If json files are "sources", tag tokens
  * @param {Object[]} [parsers=[]] - Custom file parsers
  * @returns {Object}
  */
-export default function combineJSON(arr, deep, collision, source, parsers = []) {
+export default async function combineJSON(arr, deep, collision, source, parsers = []) {
   const to_ret = {};
   let files = [];
 
   for (let i = 0; i < arr.length; i++) {
-    const new_files = glob.sync(arr[i], { fs });
+    const new_files = glob.sync(arr[i], { fs }).sort();
     files = files.concat(new_files);
   }
 
+  // adjust for browser env glob results have leading slash
+  files = files.map((f) => f.replace(/^\//, ''));
+
   for (let i = 0; i < files.length; i++) {
     const filePath = files[i];
-    const resolvedPath = path.isAbsolute(files[i])
-      ? files[i]
-      : path.resolve(process.cwd(), files[i]);
     let file_content = null;
-
     try {
       // Iterate over custom parsers, if the file path matches the parser's
       // pattern regex, use it's parse function to generate the object
       parsers.forEach(({ pattern, parse }) => {
-        if (resolvedPath.match(pattern)) {
+        if (filePath.match(pattern)) {
           file_content = parse({
-            contents: fs.readFileSync(resolvedPath, { encoding: 'UTF-8' }),
-            filePath: resolvedPath,
+            contents: fs.readFileSync(filePath, { encoding: 'UTF-8' }),
+            filePath,
           });
         }
       });
 
       // If there is no file_content then no custom parser ran on that file
       if (!file_content) {
-        file_content = deepExtend([file_content, JSON5.parse(fs.readFileSync(resolvedPath))]);
+        let parsedFile;
+        if (['.js', '.mjs'].includes(path.extname(filePath))) {
+          const fileToImport = path.resolve(
+            typeof window === 'object' ? '' : process.cwd(),
+            filePath,
+          );
+          parsedFile = (await import(fileToImport)).default;
+        } else {
+          parsedFile = JSON5.parse(fs.readFileSync(filePath));
+        }
+
+        file_content = deepExtend([file_content, parsedFile]);
       }
     } catch (e) {
       e.message = 'Failed to load or parse JSON or JS Object: ' + e.message;

package/lib/utils/convertToBase64.js

@@ -11,7 +11,7 @@
  * and limitations under the License.
  */
 
-import { fs } from '../../fs.js';
+import { fs } from 'style-dictionary/fs';
 
 /**
  * Takes a file and converts it to a base64 string.
@@ -22,6 +22,6 @@ import { fs } from '../../fs.js';
 export default function convertToBase64(filePath) {
   if (typeof filePath !== 'string') throw new Error('filePath name must be a string');
 
-  const body = fs.readFileSync(filePath, 'binary');
-  return Buffer.from(body, 'binary').toString('base64');
+  const body = fs.readFileSync(filePath);
+  return btoa(body);
 }

package/lib/utils/createDictionary.js

@@ -11,15 +11,15 @@
  * and limitations under the License.
  */
 
-import flattenProperties from './flattenProperties.js';
+import flattenTokens from './flattenTokens.js';
 import getReferences from './references/getReferences.js';
 import usesReference from './references/usesReference.js';
 
 /**
  *
  * @typedef Dictionary
- * @property {Object} tokens - Replacement for `properties`
- * @property {Array} allTokens - Replacement for `allProperties`
+ * @property {Object} $tokens
+ * @property {Array} allTokens
  * @property {Dictionary.getReferences} getReferences
  * @property {Dictionary.usesReference} usesReference
  */
@@ -27,19 +27,15 @@ import usesReference from './references/usesReference.js';
 /**
  * Creates the dictionary object that is passed to formats and actions.
  * @param {Object} args
- * @param {Object} args.properties
+ * @param {Object} args.tokens
  * @returns {Dictionary}
  */
-export default function createDictionary({ properties }) {
-  const allProperties = flattenProperties(properties);
+export default function createDictionary({ tokens }) {
+  const allTokens = flattenTokens(tokens);
   return {
-    properties,
-    allProperties,
-    // adding tokens and allTokens as the new way starting in v3,
-    // keeping properties and allProperties around for backwards-compatibility
-    tokens: properties,
-    allTokens: allProperties,
-    getReferences: getReferences,
-    usesReference: usesReference,
+    tokens,
+    allTokens,
+    getReferences,
+    usesReference,
   };
 }

package/lib/utils/createFormatArgs.js

@@ -14,7 +14,7 @@
 import deepExtend from './deepExtend.js';
 
 export default function createFormatArgs({ dictionary, platform, file = {} }) {
-  const { allProperties, properties, allTokens, tokens, usesReference, getReferences } = dictionary;
+  const { allTokens, tokens, usesReference, getReferences } = dictionary;
   // This will merge platform and file-level configuration
   // where the file configuration takes precedence
   const { options } = platform;
@@ -24,10 +24,6 @@ export default function createFormatArgs({ dictionary, platform, file = {} }) {
     dictionary,
     usesReference,
     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,

package/lib/utils/deepExtend.js

@@ -11,9 +11,11 @@
  * and limitations under the License.
  */
 
-import { isPlainObject, isArray } from './es6_.js';
+import { isPlainObject } from 'is-plain-object';
 
 /**
+ * TODO: see if we can use deepmerge instead of maintaining our own utility
+ *
  * Performs an deep extend on the objects, from right to left.
  * @private
  * @param {Object[]} objects - An array of JS objects
@@ -24,15 +26,7 @@ import { isPlainObject, isArray } from './es6_.js';
 export default function deepExtend(objects, collision, path) {
   if (objects == null) return {};
 
-  var src,
-    copyIsArray,
-    copy,
-    name,
-    options,
-    clone,
-    target = objects[0] || {},
-    i = 1,
-    length = objects.length;
+  let target = objects[0] || {};
 
   path = path || [];
 
@@ -41,33 +35,36 @@ export default function deepExtend(objects, collision, path) {
     target = {};
   }
 
-  for (; i < length; i++) {
+  for (let i = 1; i < objects.length; i++) {
+    const options = objects[i];
     // Only deal with non-null/undefined values
-    if ((options = objects[i]) != null) {
+    if (options != null) {
       // Extend the base object
-      for (name in options) {
+      for (const name in options) {
         // Not everything extends from Object in browser context, so bind from Object just in case
         if (!Object.hasOwnProperty.bind(options)(name)) continue;
         if (name === '__proto__') continue;
 
-        src = target[name];
-        copy = options[name];
+        const src = target[name];
+        const copy = options[name];
 
         // Prevent never-ending loop
         if (target === copy) {
           continue;
         }
 
+        let copyIsArray = Array.isArray(copy);
         // Recurse if we're merging plain objects or arrays
-        if (copy && (isPlainObject(copy) || (copyIsArray = isArray(copy)))) {
+        if (copy && (isPlainObject(copy) || copyIsArray)) {
+          let clone;
           if (copyIsArray) {
             copyIsArray = false;
-            clone = src && isArray(src) ? src : [];
+            clone = src && Array.isArray(src) ? src : [];
           } else {
             clone = src && isPlainObject(src) ? src : {};
           }
 
-          var nextPath = path.slice(0);
+          const nextPath = path.slice(0);
           nextPath.push(name);
 
           // Never move original objects, clone them

package/lib/utils/deepmerge.js

@@ -0,0 +1,14 @@
+import _deepmerge from '@bundled-es-modules/deepmerge';
+import { isPlainObject } from 'is-plain-object';
+
+/**
+ * Wrapper around deepmerge that merges only plain objects and arrays
+ * @param {Object} target
+ * @param {Object} source
+ */
+export const deepmerge = (target, source) => {
+  return _deepmerge(target, source, {
+    // Merge if object is array or a plain object (so not merging functions/class instances together)
+    isMergeableObject: (obj) => Array.isArray(obj) || isPlainObject(obj),
+  });
+};

package/lib/utils/{flattenProperties.js → flattenTokens.js}

@@ -11,27 +11,27 @@
  * and limitations under the License.
  */
 
-import { isPlainObject } from './es6_.js';
+import { isPlainObject } from 'is-plain-object';
 
 /**
  * Takes an plain javascript object and will make a flat array of all the leaf nodes.
  * A leaf node in this context has a 'value' property. Potentially refactor this to
  * be more generic.
  * @private
- * @param  {Object} properties - The plain object you want flattened into an array.
- * @param  {Array} [to_ret=[]] - Properties array. This function is recursive therefore this is what gets passed along.
+ * @param  {Object} tokens - The plain object you want flattened into an array.
+ * @param  {Array} [to_ret=[]] - Tokens array. This function is recursive therefore this is what gets passed along.
  * @return {Array}
  */
-export default function flattenProperties(properties, to_ret) {
+export default function flattenTokens(tokens, to_ret) {
   to_ret = to_ret || [];
 
-  for (var name in properties) {
-    if (properties.hasOwnProperty(name)) {
+  for (var name in tokens) {
+    if (tokens.hasOwnProperty(name)) {
       // TODO: this is a bit fragile and arbitrary to stop when we get to a 'value' property.
-      if (isPlainObject(properties[name]) && 'value' in properties[name]) {
-        to_ret.push(properties[name]);
-      } else if (isPlainObject(properties[name])) {
-        flattenProperties(properties[name], to_ret);
+      if (isPlainObject(tokens[name]) && 'value' in tokens[name]) {
+        to_ret.push(tokens[name]);
+      } else if (isPlainObject(tokens[name])) {
+        flattenTokens(tokens[name], to_ret);
       }
     }
   }

package/lib/utils/preprocess.js

@@ -0,0 +1,35 @@
+/*
+ * 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.
+ */
+
+/**
+ * Run all registered preprocessors on the dictionary,
+ * returning the preprocessed dictionary in each step.
+ *
+ * @typedef {import('../../types/DesignToken').DesignTokens} DesignTokens
+ * @typedef {import('../../types/Preprocessor').Preprocessor} Preprocessor
+ *
+ * @param {DesignTokens} tokens
+ * @param {Preprocessor[]} preprocessorObj
+ * @returns {Promise<DesignTokens>}
+ */
+export async function preprocess(tokens, preprocessorObj = {}) {
+  let processedTokens = tokens;
+
+  const preprocessors = Object.values(preprocessorObj);
+  if (preprocessors.length > 0) {
+    for (const preprocessor of preprocessors) {
+      processedTokens = await preprocessor(processedTokens);
+    }
+  }
+  return processedTokens;
+}

package/lib/utils/references/getName.js

@@ -22,8 +22,8 @@ import defaults from './defaults.js';
  * @returns {string} - The paths name
  */
 export default function getName(path, opts = {}) {
-  const options = Object.assign({}, defaults, opts);
-  if (!path || !(path instanceof Array)) {
+  const options = { ...defaults, ...opts };
+  if (!Array.isArray(path)) {
     throw new Error('Getting name for path failed. Path must be an array');
   }
   return path.join(options.separator);

package/lib/utils/references/getReferences.js

@@ -33,7 +33,6 @@ import GroupMessages from '../groupMessages.js';
  */
 export default function getReferences(value, references = []) {
   // `this` is the dictionary object passed to formats and actions
-  const self = this;
   const regex = createReferenceRegex({});
 
   // this will update the references array with the referenced tokens it finds.
@@ -44,10 +43,11 @@ export default function getReferences(value, references = []) {
     // Find what the value is referencing
     const pathName = getPath(variable);
 
-    let ref = resolveReference(pathName, self.properties);
+    let ref = resolveReference(pathName, this.tokens);
+
     if (!ref) {
-      // fall back on _properties as it is unfiltered
-      ref = resolveReference(pathName, self._properties);
+      // fall back on _tokens as it is unfiltered
+      ref = resolveReference(pathName, this._tokens);
       // and warn the user about this
       GroupMessages.add(GroupMessages.GROUP.FilteredOutputReferences, variable);
     }
@@ -56,7 +56,7 @@ export default function getReferences(value, references = []) {
 
   if (typeof value === 'string') {
     // function inside .replace runs multiple times if there are multiple matches
-    value.replace(regex, findReference);
+    value.replace(regex, findReference.bind(this));
   }
 
   // If the token's value is an object, run the replace reference
@@ -65,11 +65,11 @@ export default function getReferences(value, references = []) {
   if (typeof value === 'object') {
     for (const key in value) {
       if (value.hasOwnProperty(key) && typeof value[key] === 'string') {
-        value[key].replace(regex, findReference);
+        value[key].replace(regex, findReference.bind(this));
       }
       // 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);
+        this.getReferences(value[key], references);
       }
     }
   }