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

package/lib/utils/resolveObject.js

@@ -11,7 +11,6 @@
  * and limitations under the License.
  */
 
-import { cloneDeep } from './es6_.js';
 import GroupMessages from './groupMessages.js';
 import usesReference from './references/usesReference.js';
 import getName from './references/getName.js';
@@ -31,7 +30,7 @@ let updated_object, regex, options;
 export default function resolveObject(object, opts) {
   options = Object.assign({}, defaults, opts);
 
-  updated_object = cloneDeep(object); // This object will be edited
+  updated_object = structuredClone(object); // This object will be edited
 
   regex = createReferenceRegex(options);
 
@@ -113,7 +112,7 @@ function compile_value(value, stack) {
 
         // Recursive, therefore we can compute multi-layer variables like a = b, b = c, eventually a = c
         if (usesReference(to_ret, regex)) {
-          var reference = to_ret.slice(1, -1);
+          const reference = to_ret.slice(1, -1);
 
           // Compare to found circular references
           if (foundCirc.hasOwnProperty(reference)) {
@@ -123,10 +122,10 @@ function compile_value(value, stack) {
             // chop down only the circular part, save it to our circular reference info, and spit out an error
 
             // Get the position of the existing reference in the stack
-            var stackIndexReference = stack.indexOf(reference);
+            const stackIndexReference = stack.indexOf(reference);
 
             // Get the portion of the stack that starts at the circular reference and brings you through until the end
-            var circStack = stack.slice(stackIndexReference);
+            const circStack = stack.slice(stackIndexReference);
 
             // For all the references in this list, add them to the list of references that end up in a circular reference
             circStack.forEach(function (key) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "style-dictionary",
-  "version": "4.0.0-prerelease.1",
+  "version": "4.0.0-prerelease.2",
   "description": "Style once, use everywhere. A build system for creating cross-platform styles.",
   "keywords": [
     "style dictionary",
@@ -9,7 +9,6 @@
     "amazon",
     "css",
     "design",
-    "properties",
     "tokens",
     "sass",
     "scss",
@@ -23,10 +22,12 @@
   "exports": {
     ".": {
       "types": "./types/index.d.ts",
-      "node": "./index-node.js",
-      "default": "./index.js"
+      "default": "./lib/StyleDictionary.js"
     },
-    "./fs": "./fs.js"
+    "./fs": {
+      "node": "./fs-node.js",
+      "default": "./fs.js"
+    }
   },
   "bin": {
     "style-dictionary": "./bin/style-dictionary"
@@ -47,19 +48,23 @@
   ],
   "scripts": {
     "format": "run-p format:*",
-    "format:eslint": "eslint --fix index.js \"lib/**/*.js\" \"__tests__/**/*.js\"",
+    "format:eslint": "eslint --fix \"**/*.js\"",
     "format:prettier": "prettier \"**/*.{js,md}\" \"package.json\" --write",
     "lint": "run-p lint:*",
-    "lint:eslint": "eslint index.js \"lib/**/*.js\" \"__tests__/**/*.js\"",
+    "lint:eslint": "eslint \"**/*.js\"",
     "lint:prettier": "prettier \"**/*.{js,md}\" \"package.json\" --list-different || (echo '↑↑ these files are not prettier formatted ↑↑' && exit 1)",
-    "test": "run-p test:*",
-    "test:unit": "jest --runInBand --silent --coverage",
-    "test:types": "tsd",
+    "test": "npm run test:browser && npm run test:node",
+    "test:browser": "web-test-runner --coverage",
+    "test:browser:coverage": "cd coverage/lcov-report && npx http-server -o -c-1",
+    "test:browser:watch": "web-test-runner --watch",
+    "test:browser:update-snapshots": "web-test-runner --update-snapshots",
+    "test:node": "mocha -r mocha-hooks.mjs './__integration__/**/*.test.js' './__tests__/**/*.test.js' './__node_tests__/**/*.test.js'",
     "generate-docs": "node ./scripts/generateDocs.js",
     "serve-docs": "docsify serve docs -p 3000 -P 12345",
     "install-cli": "npm install -g $(npm pack)",
     "release": "node scripts/inject-version.js && changeset publish",
-    "prepare": "husky install"
+    "prepare": "husky install",
+    "postinstall": "patch-package"
   },
   "standard-version": {
     "scripts": {
@@ -88,7 +93,7 @@
       "/__tests__/__assets/",
       "/__tests__/__configs/",
       "/__tests__/__json_files/",
-      "/__tests__/__properties/",
+      "/__tests__/__tokens/",
       "/__tests__/__output/",
       "/__tests__/formats/__constants.js"
     ],
@@ -134,6 +139,7 @@
   ],
   "homepage": "https://github.com/amzn/style-dictionary",
   "dependencies": {
+    "@bundled-es-modules/deepmerge": "^4.3.1",
     "@bundled-es-modules/glob": "^10.3.5",
     "@bundled-es-modules/memfs": "^4.2.3",
     "@bundled-es-modules/path-browserify": "^1.0.2",
@@ -141,6 +147,7 @@
     "change-case": "^4.1.2",
     "commander": "^8.3.0",
     "fs-extra": "^10.0.0",
+    "is-plain-object": "^5.0.0",
     "json5": "^2.2.2",
     "jsonc-parser": "^3.0.0",
     "lodash": "^4.17.15",
@@ -149,30 +156,36 @@
     "url": "^0.11.1"
   },
   "devDependencies": {
-    "@babel/preset-env": "^7.16.11",
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@changesets/cli": "^2.26.2",
     "@commitlint/cli": "^16.1.0",
     "@commitlint/config-conventional": "^16.0.0",
-    "babel-jest": "^27.4.6",
-    "babel-preset-env": "^1.7.0",
+    "@esm-bundle/chai-as-promised": "^7.1.1",
+    "@types/chai": "^4.3.9",
+    "@web/test-runner": "^0.18.0",
+    "@web/test-runner-commands": "^0.9.0",
+    "@web/test-runner-playwright": "^0.11.0",
+    "chai": "^5.0.0-alpha.2",
+    "chai-as-promised": "npm:@esm-bundle/chai-as-promised@^7.1.1",
     "docsify": "^4.12.2",
     "docsify-cli": "^4.4.3",
     "eslint": "^8.7.0",
+    "eslint-config-react-app": "^7.0.1",
     "eslint-plugin-jest": "^26.0.0",
+    "hanbi": "^1.0.1",
     "husky": "^8.0.3",
-    "istanbul": "^0.4.5",
-    "jest": "^27.4.7",
     "jsdoc-escape-at": "^1.0.1",
     "jsdoc-to-markdown": "^7.1.0",
     "json5-jest": "^1.0.1",
     "less": "^4.1.2",
     "lint-staged": "^12.3.1",
-    "node-sass": "^9.0.0",
+    "mocha": "^10.2.0",
     "npm-run-all": "^4.1.5",
+    "patch-package": "^8.0.0",
     "prettier": "^3.0.3",
+    "sass": "^1.69.5",
     "standard-version": "^9.3.2",
     "stylus": "^0.56.0",
-    "tsd": "^0.19.1",
-    "yaml": "^1.10.2"
+    "yaml": "^2.3.4"
   }
 }

package/types/Config.d.ts

@@ -12,6 +12,7 @@
  */
 
 import { Parser } from './Parser';
+import { Preprocessor } from './Preprocessor';
 import { Transform } from './Transform';
 import { TransformGroup } from './TransformGroup';
 import { Filter } from './Filter';
@@ -23,6 +24,7 @@ import { DesignTokens } from './DesignToken';
 
 export interface Config {
   parsers?: Parser[];
+  preprocessors?: Record<string, Preprocessor>;
   transform?: Record<string, Transform>;
   transformGroup?: Record<string, TransformGroup['transforms']>;
   format?: Record<string, Formatter>;
@@ -32,6 +34,5 @@ export interface Config {
   include?: string[];
   source?: string[];
   tokens?: DesignTokens;
-  properties?: DesignTokens;
   platforms: Record<string, Platform>;
-}
+}

package/types/Dictionary.d.ts

@@ -16,8 +16,6 @@ import { TransformedToken, TransformedTokens } from './TransformedToken';
 export interface Dictionary {
   allTokens: TransformedToken[];
   tokens: TransformedTokens;
-  allProperties: TransformedToken[];
-  properties: TransformedTokens;
   usesReference: (value: any) => boolean;
   getReferences: (value: any) => TransformedToken[];
 }

package/types/FormatHelpers.d.ts

@@ -11,14 +11,15 @@
  * and limitations under the License.
  */
 
-import { Dictionary } from "./Dictionary";
-import { DesignToken } from "./DesignToken";
-import { TransformedToken } from "./TransformedToken";
-import { File } from "./File";
+import { Dictionary } from './Dictionary';
+import { DesignToken } from './DesignToken';
+import { TransformedToken } from './TransformedToken';
+import { File } from './File';
 
 export interface LineFormatting {
   prefix?: string;
-  commentStyle?: "short" | "long" | "none";
+  commentStyle?: 'short' | 'long' | 'none';
+  commentPosition?: 'inline' | 'above';
   indentation?: string;
   separator?: string;
   suffix?: string;
@@ -27,7 +28,7 @@ export interface LineFormatting {
 export type TokenFormatterArgs = {
   outputReferences?: boolean;
   dictionary: Dictionary;
-  format?: "css" | "sass" | "less" | "stylus";
+  format?: 'css' | 'sass' | 'less' | 'stylus';
   formatting?: LineFormatting;
 };
 
@@ -45,32 +46,20 @@ export interface FileHeaderArgs {
 }
 
 export interface FormattedVariablesArgs {
-  format: "css" | "sass";
+  format: 'css' | 'sass';
   dictionary: Dictionary;
   outputReferences?: boolean;
   formatting?: LineFormatting;
 }
 
 export interface FormatHelpers {
-  createPropertyFormatter: (
-    args: TokenFormatterArgs
-  ) => (token: TransformedToken) => string;
+  createPropertyFormatter: (args: TokenFormatterArgs) => (token: TransformedToken) => string;
   fileHeader: (args: FileHeaderArgs) => string;
   formattedVariables: (args: FormattedVariablesArgs) => string;
   minifyDictionary: (dictionary: object) => object;
   getTypeScriptType: (value: unknown) => string;
-  iconsWithPrefix: (
-    prefix: string,
-    allTokens: DesignToken[],
-    options: object
-  ) => string;
-  sortByReference: (
-    dictionary: Dictionary
-  ) => (a: TransformedToken, b: TransformedToken) => number;
+  iconsWithPrefix: (prefix: string, allTokens: DesignToken[], options: object) => string;
+  sortByReference: (dictionary: Dictionary) => (a: TransformedToken, b: TransformedToken) => number;
   sortByName: (a: DesignToken, b: DesignToken) => number;
-  setSwiftFileProperties: (
-    options: object,
-    objectType: string,
-    transformGroup: string
-  ) => string;
+  setSwiftFileProperties: (options: object, objectType: string, transformGroup: string) => string;
 }

package/{lib/cleanAllPlatforms.js → types/Preprocessor.d.ts}

@@ -11,22 +11,11 @@
  * and limitations under the License.
  */
 
-/**
- * Does the reverse of [buildAllPlatforms](#buildAllPlatforms) by
- * performing a clean on each platform. This removes all the files
- * defined in the platform and calls the undo method on any actions.
- *
- * @static
- * @memberof module:style-dictionary
- * @returns {module:style-dictionary}
- */
-export default function cleanAllPlatforms() {
-  const self = this;
+import { DesignTokens } from './DesignToken';
 
-  Object.keys(this.options.platforms).forEach(function (key) {
-    self.cleanPlatform(key);
-  });
+export type Preprocessor = {
+  name: string;
+  preprocessor: preprocessor;
+};
 
-  // For chaining
-  return this;
-}
+export type preprocessor = (dictionary: DesignTokens) => DesignTokens | Promise<DesignTokens>;

package/types/index.d.ts

@@ -25,6 +25,7 @@ import { FormatHelpers as _FormatHelpers } from './FormatHelpers';
 import { Matcher as _Matcher } from './Matcher';
 import { Options as _Options } from './Options';
 import { Parser as _Parser } from './Parser';
+import { Preprocessor as _Preprocessor, preprocessor as _preprocessor } from './Preprocessor';
 import { Platform as _Platform } from './Platform';
 import { Transform as _Transform } from './Transform';
 import {
@@ -52,6 +53,8 @@ declare namespace StyleDictionary {
   type Matcher = _Matcher;
   type Options = _Options;
   type Parser = _Parser;
+  type Preprocessor = _Preprocessor;
+  type preprocessor = _preprocessor;
   type Platform<PlatformType = Record<string, any>> = _Platform<PlatformType>;
   type Transform<PlatformType = Record<string, any>> = _Transform<PlatformType>;
   type TransformedToken = _TransformedToken;
@@ -63,8 +66,6 @@ declare namespace StyleDictionary {
     VERSION: string;
     tokens: DesignTokens | TransformedTokens;
     allTokens: TransformedTokens[];
-    properties: DesignTokens | TransformedTokens;
-    allProperties: TransformedTokens[];
     options: Config;
 
     transform: Record<string, Transform>;
@@ -74,6 +75,7 @@ declare namespace StyleDictionary {
     filter: Record<string, Filter['matcher']>;
     fileHeader: Record<string, FileHeader>;
     parsers: Parser[];
+    preprocessors: Record<string, Preprocessor>;
 
     formatHelpers: FormatHelpers;
 
@@ -208,6 +210,25 @@ declare namespace StyleDictionary {
      */
     registerParser(parser: Parser): this;
 
+    /**
+     * Adds a custom preprocessor to preprocess dictionary object.
+     *
+     * @param {Preprocessor} Preprocessor
+     * @param {string} Preprocessor.name - name of the preprocessor
+     * @param {preprocessor} Preprocessor.preprocessor - Function to preprocess the dictionary. The function should return a plain Javascript object.
+     * @example
+     * ```js
+     * StyleDictionary.registerPreprocessor({
+     *   name: 'strip-third-party-meta',
+     *   preprocessor: (dictionary) => {
+     *     delete dictionary.thirdPartyMetadata;
+     *     return dictionary;
+     *   },
+     * });
+     * ```
+     */
+    registerPreprocessor(preprocessor: Preprocessor): this;
+
     /**
      * Adds a custom action to Style Dictionary. Actions
      * are functions that can do whatever you need, such as: copying files,

package/types/index.test-d.ts

@@ -136,6 +136,13 @@ expectType<StyleDictionary.Core>(
   }),
 );
 
+expectType<StyleDictionary.Core>(
+  StyleDictionary.registerPreprocessor({
+    name: 'foo',
+    preprocessor: (dictionary) => dictionary,
+  }),
+);
+
 const file: StyleDictionary.File = {
   destination: `somePath.json`,
   format: `css/variables`,

package/index-node.js

@@ -1,7 +0,0 @@
-import fs from 'node:fs';
-import StyleDictionary from './index.js';
-import { setFs } from './fs.js';
-
-setFs(fs);
-
-export default StyleDictionary;

package/index.js

@@ -1,84 +0,0 @@
-/*
- * 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 extend from './lib/extend.js';
-import transform from './lib/common/transforms.js';
-import transformGroup from './lib/common/transformGroups.js';
-import format from './lib/common/formats.js';
-import action from './lib/common/actions.js';
-import * as formatHelpers from './lib/common/formatHelpers/index.js';
-import filter from './lib/common/filters.js';
-import registerTransform from './lib/register/transform.js';
-import registerTransformGroup from './lib/register/transformGroup.js';
-import registerFormat from './lib/register/format.js';
-import registerAction from './lib/register/action.js';
-import registerFilter from './lib/register/filter.js';
-import registerParser from './lib/register/parser.js';
-import registerFileHeader from './lib/register/fileHeader.js';
-import exportPlatform from './lib/exportPlatform.js';
-import buildPlatform from './lib/buildPlatform.js';
-import buildAllPlatforms from './lib/buildAllPlatforms.js';
-import cleanPlatform from './lib/cleanPlatform.js';
-import cleanAllPlatforms from './lib/cleanAllPlatforms.js';
-
-// const TEMPLATE_DEPRECATION_WARNINGS = GroupMessages.GROUP.TemplateDeprecationWarnings;
-// const REGISTER_TEMPLATE_DEPRECATION_WARNINGS = GroupMessages.GROUP.RegisterTemplateDeprecationWarnings;
-// const SASS_MAP_FORMAT_DEPRECATION_WARNINGS = GroupMessages.GROUP.SassMapFormatDeprecationWarnings;
-
-/**
- * Style Dictionary module
- *
- * @module style-dictionary
- * @typicalname StyleDictionary
- * @example
- * ```js
- * import StyleDictionary from 'style-dictionary';
- * (await StyleDictionary.extend('config.json')).buildAllPlatforms();
- * ```
- */
-
-export default {
-  // Placeholder is transformed on prepublish -> see scripts/inject-version.js
-  // Another option might be import pkg from './package.json' with { "type": "json" } which would work in both browser and node, but support is not there yet.
-  // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#browser_compatibility
-  VERSION: '4.0.0-prerelease.1',
-  tokens: {},
-  allTokens: [],
-  options: {},
-
-  transform,
-  transformGroup,
-  format,
-  action,
-  formatHelpers,
-  filter,
-  parsers: [], // we need to initialise the array, since we don't have built-in parsers
-  fileHeader: {},
-
-  registerTransform,
-  registerTransformGroup,
-  registerFormat,
-  registerAction,
-  registerFilter,
-  registerParser,
-  registerFileHeader,
-
-  exportPlatform,
-  buildPlatform,
-  buildAllPlatforms,
-
-  cleanPlatform,
-  cleanAllPlatforms,
-
-  extend,
-};

package/lib/buildAllPlatforms.js

@@ -1,37 +0,0 @@
-/*
- * 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.
- */
-
-/**
- * The only top-level method that needs to be called
- * to build the Style Dictionary.
- *
- * @static
- * @memberof module:style-dictionary
- * @returns {module:style-dictionary}
- * @example
- * ```js
- * import StyleDictionary from 'style-dictionary';
- * const StyleDictionary = await StyleDictionary.extend('config.json');
- * StyleDictionary.buildAllPlatforms();
- * ```
- */
-export default function buildAllPlatforms() {
-  var self = this;
-
-  Object.keys(this.options.platforms).forEach(function (key) {
-    self.buildPlatform(key);
-  });
-
-  // For chaining
-  return this;
-}

package/lib/buildPlatform.js

@@ -1,67 +0,0 @@
-/*
- * 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 transformConfig from './transform/config.js';
-import buildFiles from './buildFiles.js';
-import performActions from './performActions.js';
-import createDictionary from './utils/createDictionary.js';
-
-/**
- * Takes a platform and performs all transforms to
- * the tokens object (non-mutative) then
- * builds all the files and performs any actions. This is useful if you only want to
- * build the artifacts of one platform to speed up the build process.
- *
- * This method is also used internally in [buildAllPlatforms](#buildAllPlatforms) to
- * build each platform defined in the config.
- *
- * @static
- * @memberof module:style-dictionary
- * @param {String} platform - Name of the platform you want to build.
- * @returns {module:style-dictionary}
- * @example
- * ```js
- * StyleDictionary.buildPlatform('web');
- * ```
- * ```bash
- * $ style-dictionary build --platform web
- * ```
- */
-export default function buildPlatform(platform) {
-  console.log('\n' + platform);
-
-  if (!this.options || !(platform in (this.options.platforms || {}))) {
-    throw new Error(`Platform "${platform}" does not exist`);
-  }
-
-  let properties;
-  // We don't want to mutate the original object
-  const platformConfig = transformConfig(this.options.platforms[platform], this, platform);
-
-  // We need to transform the object before we resolve the
-  // variable names because if a value contains concatenated
-  // values like "1px solid {color.border.base}" we want to
-  // transform the original value (color.border.base) before
-  // replacing that value in the string.
-  properties = this.exportPlatform(platform);
-
-  // This is the dictionary object we pass to the file
-  // building and action methods.
-  const dictionary = createDictionary({ properties });
-
-  buildFiles(dictionary, platformConfig);
-  performActions(dictionary, platformConfig);
-
-  // For chaining
-  return this;
-}

package/lib/cleanPlatform.js

@@ -1,59 +0,0 @@
-/*
- * 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 createDictionary from './utils/createDictionary.js';
-import transformConfig from './transform/config.js';
-import cleanFiles from './cleanFiles.js';
-import cleanDirs from './cleanDirs.js';
-import cleanActions from './cleanActions.js';
-
-/**
- * Takes a platform and performs all transforms to
- * the tokens object (non-mutative) then
- * cleans all the files and performs the undo method of any [actions](actions.md).
- *
- * @static
- * @memberof module:style-dictionary
- * @param {String} platform
- * @returns {module:style-dictionary}
- */
-export default function cleanPlatform(platform) {
-  console.log('\n' + platform);
-
-  if (!this.options || !(platform in (this.options.platforms || {}))) {
-    throw new Error('Platform ' + platform + " doesn't exist");
-  }
-
-  let properties;
-  // We don't want to mutate the original object
-  const platformConfig = transformConfig(this.options.platforms[platform], this, platform);
-
-  // We need to transform the object before we resolve the
-  // variable names because if a value contains concatenated
-  // values like "1px solid {color.border.base}" we want to
-  // transform the original value (color.border.base) before
-  // replacing that value in the string.
-  properties = this.exportPlatform(platform);
-
-  // This is the dictionary object we pass to the file
-  // cleaning and action methods.
-  const dictionary = createDictionary({ properties });
-
-  // We clean files first, then actions, ...and then directories?
-  cleanFiles(dictionary, platformConfig);
-  cleanActions(dictionary, platformConfig);
-  cleanDirs(dictionary, platformConfig);
-
-  // For chaining
-  return this;
-}