style-dictionary 4.0.0-prerelease.13 → 4.0.0-prerelease.15

package/lib/cleanFile.d.ts

@@ -9,6 +9,6 @@
  * @param {File} file
  * @param {PlatformConfig} [platform]
  */
-export default function cleanFile(file: File, platform?: import("../types/Config.d.ts").PlatformConfig | undefined): void;
+export default function cleanFile(file: File, platform?: import("../types/Config.d.ts").PlatformConfig | undefined): Promise<void>;
 export type File = import('../types/File.d.ts').File;
 export type PlatformConfig = import('../types/Config.d.ts').PlatformConfig;

package/lib/cleanFile.js

@@ -26,7 +26,7 @@ import { fs } from 'style-dictionary/fs';
  * @param {File} file
  * @param {PlatformConfig} [platform]
  */
-export default function cleanFile(file, platform = {}) {
+export default async function cleanFile(file, platform = {}) {
   let { destination } = file;
 
   if (typeof destination !== 'string') throw new Error('Please enter a valid destination');

package/lib/cleanFiles.d.ts

@@ -9,5 +9,5 @@
  * @memberOf StyleDictionary
  * @param {PlatformConfig} platform
  */
-export default function cleanFiles(platform: PlatformConfig): void;
+export default function cleanFiles(platform: PlatformConfig): Promise<void[] | undefined>;
 export type PlatformConfig = import('../types/Config.d.ts').PlatformConfig;

package/lib/cleanFiles.js

@@ -25,17 +25,20 @@ import cleanFile from './cleanFile.js';
  * @memberOf StyleDictionary
  * @param {PlatformConfig} platform
  */
-export default function cleanFiles(platform) {
+export default async function cleanFiles(platform) {
   if (platform.buildPath && platform.buildPath.slice(-1) !== '/') {
     throw new Error('Build path must end in a trailing slash or you will get weird file names.');
   }
 
-  // while neither the format or dictionary are used by clean file I'm passing them in for symmetry to buildFile
-  platform.files?.forEach((file) => {
-    if (file.format) {
-      cleanFile(file, platform);
-    } else {
-      throw new Error('Please supply a template or formatter');
-    }
-  });
+  if (platform.files) {
+    return Promise.all(
+      platform.files.map((file) => {
+        if (file.format) {
+          return cleanFile(file, platform);
+        } else {
+          throw new Error('Please supply a template or formatter');
+        }
+      }),
+    );
+  }
 }

package/lib/common/actions.js

@@ -31,34 +31,39 @@ export default {
    * @memberof Actions
    */
   'android/copyImages': {
-    do: function (dictionary, config) {
+    do: async function (dictionary, config, options) {
       const imagesDir = `${config.buildPath}android/main/res/drawable-`;
       /**
        * @param {Token} token
        */
-      dictionary.allTokens.forEach((token) => {
-        if (token.attributes?.category === 'asset' && token.attributes.type === 'image') {
-          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 ?? token.value, path);
-        }
-      });
+      await Promise.all(
+        dictionary.allTokens.map((token) => {
+          if (token.attributes?.category === 'asset' && token.attributes.type === 'image') {
+            const name = token.path.slice(2, 4).join('_');
+            const dir = `${imagesDir}${token.attributes.state}`;
+            const path = `${dir}/${name}.png`;
+            return fs.promises.mkdir(dir, { recursive: true }).then(() => {
+              return fs.promises.copyFile(options.usesDtcg ? token.$value : token.value, path);
+            });
+          }
+        }),
+      );
     },
-    undo: function (dictionary, config) {
+    undo: async function (dictionary, config) {
       const imagesDir = `${config.buildPath}android/main/res/drawable-`;
       /**
        * @param {Token} token
        */
-      dictionary.allTokens.forEach((token) => {
-        if (token.attributes?.category === 'asset' && token.attributes.type === 'image') {
-          const name = token.path.slice(2, 4).join('_');
-          const dir = `${imagesDir}${token.attributes.state}`;
-          const path = `${dir}/${name}.png`;
-          fs.unlinkSync(path);
-        }
-      });
+      await Promise.all(
+        dictionary.allTokens.map((token) => {
+          if (token.attributes?.category === 'asset' && token.attributes.type === 'image') {
+            const name = token.path.slice(2, 4).join('_');
+            const dir = `${imagesDir}${token.attributes.state}`;
+            const path = `${dir}/${name}.png`;
+            return fs.promises.unlink(path);
+          }
+        }),
+      );
     },
   },
 
@@ -68,15 +73,15 @@ export default {
    * @memberof Actions
    */
   copy_assets: {
-    do: function (dictionary, config) {
+    do: async function (_, config) {
       // eslint-disable-next-line no-console
       console.log('Copying assets directory to ' + config.buildPath + 'assets');
-      fs.copyFileSync('assets', config.buildPath + 'assets');
+      return fs.promises.copyFile('assets', config.buildPath + 'assets');
     },
-    undo: function (dictionary, config) {
+    undo: async function (_, config) {
       // eslint-disable-next-line no-console
       console.log('Removing assets directory from ' + config.buildPath + 'assets');
-      fs.unlinkSync(config.buildPath + 'assets');
+      return fs.promises.unlink(config.buildPath + 'assets');
     },
   },
 };

package/lib/common/formatHelpers/createPropertyFormatter.d.ts

@@ -27,15 +27,17 @@
  * @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 {Formatting} [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}${token.name}${separator} ${token.value}${suffix}`
  * @param {boolean} [options.themeable] [false] - Whether tokens should default to being themeable.
+ * @param {boolean} [options.usesDtcg] [false] - Whether DTCG token syntax should be uses.
  * @returns {(token: import('../../../types/DesignToken.d.ts').TransformedToken) => string}
  */
-export default function createPropertyFormatter({ outputReferences, outputReferenceFallbacks, dictionary, format, formatting, themeable, }: {
+export default function createPropertyFormatter({ outputReferences, outputReferenceFallbacks, dictionary, format, formatting, themeable, usesDtcg, }: {
     outputReferences?: boolean | undefined;
     outputReferenceFallbacks?: boolean | undefined;
     dictionary: Dictionary;
     format?: string | undefined;
     formatting?: import("../../../types/File.d.ts").FormattingOptions | undefined;
     themeable?: boolean | undefined;
+    usesDtcg?: boolean | undefined;
 }): (token: import('../../../types/DesignToken.d.ts').TransformedToken) => string;
 export type Dictionary = import('../../../types/DesignToken.d.ts').Dictionary;
 export type Formatting = import('../../../types/File.d.ts').FormattingOptions;

package/lib/common/formatHelpers/createPropertyFormatter.js

@@ -10,7 +10,7 @@
  * CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions
  * and limitations under the License.
  */
-import getReferences from '../../utils/references/getReferences.js';
+import { _getReferences } from '../../utils/references/getReferences.js';
 import usesReferences from '../../utils/references/usesReferences.js';
 
 /**
@@ -113,6 +113,7 @@ function addComment(to_ret_token, comment, options) {
  * @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 {Formatting} [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}${token.name}${separator} ${token.value}${suffix}`
  * @param {boolean} [options.themeable] [false] - Whether tokens should default to being themeable.
+ * @param {boolean} [options.usesDtcg] [false] - Whether DTCG token syntax should be uses.
  * @returns {(token: import('../../../types/DesignToken.d.ts').TransformedToken) => string}
  */
 export default function createPropertyFormatter({
@@ -122,6 +123,7 @@ export default function createPropertyFormatter({
   format,
   formatting = {},
   themeable = false,
+  usesDtcg = false,
 }) {
   /** @type {Formatting} */
   const formatDefaults = {};
@@ -159,7 +161,7 @@ export default function createPropertyFormatter({
   const { tokens, unfilteredTokens } = dictionary;
   return function (token) {
     let to_ret_token = `${indentation}${prefix}${token.name}${separator} `;
-    let value = token.$value ?? token.value;
+    let value = usesDtcg ? token.$value : token.value;
 
     /**
      * A single value can have multiple references either by interpolation:
@@ -176,7 +178,7 @@ export default function createPropertyFormatter({
     if (outputReferences && usesReferences(token.original.value)) {
       // Formats that use this function expect `value` to be a string
       // or else you will get '[object Object]' in the output
-      const refs = getReferences(token.original.value, tokens, { unfilteredTokens }, []);
+      const refs = _getReferences(token.original.value, tokens, { unfilteredTokens }, []);
 
       // original can either be an object value, which requires transitive value transformation in web CSS formats
       // or a different (primitive) type, meaning it can be stringified.
@@ -198,11 +200,8 @@ export default function createPropertyFormatter({
         // because Style Dictionary resolved this in the resolution step.
         // Here we are undoing that by replacing the value with
         // the reference's name
-        if (
-          (Object.hasOwn(ref, 'value') || Object.hasOwn(ref, '$value')) &&
-          Object.hasOwn(ref, 'name')
-        ) {
-          const refVal = ref.$value ?? ref.value;
+        if (Object.hasOwn(ref, `${usesDtcg ? '$' : ''}value`) && Object.hasOwn(ref, 'name')) {
+          const refVal = usesDtcg ? ref.$value : ref.value;
           const replaceFunc = function () {
             if (format === 'css') {
               if (outputReferenceFallbacks) {

package/lib/common/formatHelpers/fileHeader.d.ts

@@ -9,7 +9,7 @@
  * @param {File} [options.file] - The file object that is passed to the formatter.
  * @param {'short' | 'xml' | 'long'} [options.commentStyle] - The only options are 'short', 'xml' and 'long', which will use the // or \<!-- --> or \/\* style comments respectively. Default fallback is 'long'.
  * @param {Formatting} [options.formatting] - Custom formatting properties that define parts of a comment in code. The configurable strings are: prefix, lineSeparator, header, and footer.
- * @returns {String}
+ * @returns {Promise<string>}
  * @example
  * ```js
  * StyleDictionary.registerFormat({
@@ -26,7 +26,7 @@ export default function fileHeader({ file, commentStyle, formatting }: {
     file?: import("../../../types/File.d.ts").File | undefined;
     commentStyle?: "long" | "short" | "xml" | undefined;
     formatting?: import("../../../types/File.d.ts").FormattingOptions | undefined;
-}): string;
+}): Promise<string>;
 export type File = import('../../../types/File.d.ts').File;
 export type FileHeader = import('../../../types/File.d.ts').FileHeader;
 export type Formatting = import('../../../types/File.d.ts').FormattingOptions;

package/lib/common/formatHelpers/fileHeader.js

@@ -37,7 +37,7 @@ const defaultFormatting = {
  * @param {File} [options.file] - The file object that is passed to the formatter.
  * @param {'short' | 'xml' | 'long'} [options.commentStyle] - The only options are 'short', 'xml' and 'long', which will use the // or \<!-- --> or \/\* style comments respectively. Default fallback is 'long'.
  * @param {Formatting} [options.formatting] - Custom formatting properties that define parts of a comment in code. The configurable strings are: prefix, lineSeparator, header, and footer.
- * @returns {String}
+ * @returns {Promise<string>}
  * @example
  * ```js
  * StyleDictionary.registerFormat({
@@ -50,7 +50,7 @@ const defaultFormatting = {
  * });
  * ```
  */
-export default function fileHeader({ file, commentStyle, formatting = {} }) {
+export default async function fileHeader({ file, commentStyle, formatting = {} }) {
   // showFileHeader is true by default
   let showFileHeader = true;
   if (typeof file?.options?.showFileHeader !== 'undefined') {
@@ -83,7 +83,9 @@ export default function fileHeader({ file, commentStyle, formatting = {} }) {
     footer = `${lineSeparator}-->`;
   }
 
-  return `${header}${fn(defaultHeader)
+  const headerContent = await fn(defaultHeader);
+
+  return `${header}${headerContent
     .map(/** @param {string} line */ (line) => `${prefix}${line}`)
     .join(lineSeparator)}${footer}`;
 }

package/lib/common/formatHelpers/formattedVariables.d.ts

@@ -9,6 +9,7 @@
  * @param {Boolean} [options.outputReferences] - Whether or not to output references
  * @param {Formatting} [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.
+ * @param {boolean} [options.usesDtcg] [false] - Whether DTCG token syntax should be uses.
  * @returns {String}
  * @example
  * ```js
@@ -24,12 +25,13 @@
  * });
  * ```
  */
-export default function formattedVariables({ format, dictionary, outputReferences, formatting, themeable, }: {
+export default function formattedVariables({ format, dictionary, outputReferences, formatting, themeable, usesDtcg, }: {
     format: string;
     dictionary: Dictionary;
     outputReferences?: boolean | undefined;
     formatting?: import("../../../types/File.d.ts").FormattingOptions | undefined;
     themeable?: boolean | undefined;
+    usesDtcg?: boolean | undefined;
 }): string;
 export type Token = import('../../../types/DesignToken.d.ts').TransformedToken;
 export type Tokens = import('../../../types/DesignToken.d.ts').TransformedTokens;

package/lib/common/formatHelpers/formattedVariables.js

@@ -36,6 +36,7 @@ const defaultFormatting = {
  * @param {Boolean} [options.outputReferences] - Whether or not to output references
  * @param {Formatting} [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.
+ * @param {boolean} [options.usesDtcg] [false] - Whether DTCG token syntax should be uses.
  * @returns {String}
  * @example
  * ```js
@@ -57,6 +58,7 @@ export default function formattedVariables({
   outputReferences = false,
   formatting = {},
   themeable = false,
+  usesDtcg = false,
 }) {
   // typecast, we know that by know the tokens have been transformed
   let allTokens = /** @type {Token[]} */ (dictionary.allTokens);
@@ -87,6 +89,7 @@ export default function formattedVariables({
         format,
         formatting,
         themeable,
+        usesDtcg,
       }),
     )
     .filter(function (strVal) {

package/lib/common/formatHelpers/getTypeScriptType.d.ts

@@ -1,5 +1,6 @@
 /**
  * @typedef {import('../../../types/Config.d.ts').LocalOptions} Options
+ * @typedef {import('../../../types/Config.d.ts').Config} Config
  */
 /**
  * Given some value, returns a basic valid TypeScript type for that value.
@@ -22,11 +23,12 @@
  * });
  *```
  * @param {any} value A value to check the type of.
- * @param {Options & {outputStringLiterals?: boolean}} [options]
+ * @param {Options & Config & {outputStringLiterals?: boolean}} [options]
  * @return {String} A valid name for a TypeScript type.
  *
  */
-export default function getTypeScriptType(value: any, options?: (import("../../../types/Config.d.ts").LocalOptions & {
+export default function getTypeScriptType(value: any, options?: (import("../../../types/Config.d.ts").LocalOptions & import("../../../types/Config.d.ts").Config & {
     outputStringLiterals?: boolean | undefined;
 }) | undefined): string;
 export type Options = import('../../../types/Config.d.ts').LocalOptions;
+export type Config = import('../../../types/Config.d.ts').Config;

package/lib/common/formatHelpers/getTypeScriptType.js

@@ -13,6 +13,7 @@
 
 /**
  * @typedef {import('../../../types/Config.d.ts').LocalOptions} Options
+ * @typedef {import('../../../types/Config.d.ts').Config} Config
  */
 
 /**
@@ -36,7 +37,7 @@
  * });
  *```
  * @param {any} value A value to check the type of.
- * @param {Options & {outputStringLiterals?: boolean}} [options]
+ * @param {Options & Config & {outputStringLiterals?: boolean}} [options]
  * @return {String} A valid name for a TypeScript type.
  *
  */
@@ -45,7 +46,7 @@ export default function getTypeScriptType(value, options = {}) {
 
   if (Array.isArray(value)) return getArrayType(value);
   if (typeof value === 'object') return getObjectType(value);
-  if (outputStringLiterals && typeof value === 'string') return `"${value}"`;
+  if (outputStringLiterals && typeof value === 'string') return `"${value.replace(/"/g, '\\"')}"`;
   if (['string', 'number', 'boolean'].includes(typeof value)) return typeof value;
 
   return 'any';

package/lib/common/formatHelpers/iconsWithPrefix.d.ts

@@ -1,6 +1,7 @@
 /**
  * @typedef {import('../../../types/DesignToken.d.ts').TransformedToken} Token
  * @typedef {import('../../../types/Config.d.ts').LocalOptions} Options
+ * @typedef {import('../../../types/Config.d.ts').PlatformConfig} PlatformConfig
  */
 /**
  *
@@ -13,6 +14,7 @@
  * @param {String} prefix - Character to prefix variable names, like '$' for Sass
  * @param {Token[]} allTokens - allTokens array on the dictionary object passed to the formatter function.
  * @param {Options} options - options object passed to the formatter function.
+ * @param {PlatformConfig} platform - platform specific options
  * @returns {String}
  * @example
  * ```js
@@ -24,6 +26,7 @@
  * });
  * ```
  */
-export default function iconsWithPrefix(prefix: string, allTokens: Token[], options: Options): string;
+export default function iconsWithPrefix(prefix: string, allTokens: Token[], options: Options, platform: PlatformConfig): string;
 export type Token = import('../../../types/DesignToken.d.ts').TransformedToken;
 export type Options = import('../../../types/Config.d.ts').LocalOptions;
+export type PlatformConfig = import('../../../types/Config.d.ts').PlatformConfig;

package/lib/common/formatHelpers/iconsWithPrefix.js

@@ -14,6 +14,7 @@
 /**
  * @typedef {import('../../../types/DesignToken.d.ts').TransformedToken} Token
  * @typedef {import('../../../types/Config.d.ts').LocalOptions} Options
+ * @typedef {import('../../../types/Config.d.ts').PlatformConfig} PlatformConfig
  */
 
 /**
@@ -27,6 +28,7 @@
  * @param {String} prefix - Character to prefix variable names, like '$' for Sass
  * @param {Token[]} allTokens - allTokens array on the dictionary object passed to the formatter function.
  * @param {Options} options - options object passed to the formatter function.
+ * @param {PlatformConfig} platform - platform specific options
  * @returns {String}
  * @example
  * ```js
@@ -38,14 +40,15 @@
  * });
  * ```
  */
-export default function iconsWithPrefix(prefix, allTokens, options) {
+export default function iconsWithPrefix(prefix, allTokens, options, platform) {
   return allTokens
     .filter(function (token) {
       return token.attributes?.category === 'content' && token.attributes.type === 'icon';
     })
     .map(function (token) {
-      const varName = prefix + token.name + ': ' + (token.$value ?? token.value) + ';';
-      const className = '.' + options.prefix + '-icon.' + token.attributes?.item + ':before ';
+      const varName =
+        prefix + token.name + ': ' + (options.usesDtcg ? token.$value : token.value) + ';';
+      const className = '.' + platform.prefix + '-icon.' + token.attributes?.item + ':before ';
       const declaration = '{ content: ' + prefix + token.name + '; }';
       return varName + '\n' + className + declaration;
     })

package/lib/common/formatHelpers/minifyDictionary.d.ts

@@ -6,6 +6,7 @@
  * @memberof module:formatHelpers
  * @name minifyDictionary
  * @param {Tokens} obj - The object to minify. You will most likely pass `dictionary.tokens` to it.
+ * @param {boolean} [usesDtcg] - Whether or not tokens are using DTCG syntax.
  * @returns {Tokens}
  * @example
  * ```js
@@ -17,5 +18,5 @@
  * });
  * ```
  */
-export default function minifyDictionary(obj: Tokens): Tokens;
+export default function minifyDictionary(obj: Tokens, usesDtcg?: boolean | undefined): Tokens;
 export type Tokens = import('../../../types/DesignToken.d.ts').TransformedTokens;

package/lib/common/formatHelpers/minifyDictionary.js

@@ -20,6 +20,7 @@
  * @memberof module:formatHelpers
  * @name minifyDictionary
  * @param {Tokens} obj - The object to minify. You will most likely pass `dictionary.tokens` to it.
+ * @param {boolean} [usesDtcg] - Whether or not tokens are using DTCG syntax.
  * @returns {Tokens}
  * @example
  * ```js
@@ -31,7 +32,7 @@
  * });
  * ```
  */
-export default function minifyDictionary(obj) {
+export default function minifyDictionary(obj, usesDtcg = false) {
   if (typeof obj !== 'object' || Array.isArray(obj)) {
     return obj;
   }
@@ -39,12 +40,12 @@ export default function minifyDictionary(obj) {
   /** @type {Tokens} */
   const toRet = {};
 
-  if (Object.hasOwn(obj, '$value') || Object.hasOwn(obj, 'value')) {
-    return obj.$value ?? obj.value;
+  if (Object.hasOwn(obj, `${usesDtcg ? '$' : ''}value`)) {
+    return usesDtcg ? obj.$value : obj.value;
   } else {
     for (const name in obj) {
       if (Object.hasOwn(obj, name)) {
-        toRet[name] = minifyDictionary(obj[name]);
+        toRet[name] = minifyDictionary(obj[name], usesDtcg);
       }
     }
   }

package/lib/common/formatHelpers/sortByReference.js

@@ -12,7 +12,7 @@
  */
 
 import usesReferences from '../../utils/references/usesReferences.js';
-import getReferences from '../../utils/references/getReferences.js';
+import { _getReferences } from '../../utils/references/getReferences.js';
 
 /**
  * @typedef {import('../../../types/DesignToken.d.ts').TransformedTokens} Tokens
@@ -57,10 +57,10 @@ export default function sortByReference(tokens, opts) {
     if (a.original && usesReferences(a.original.value)) {
       // Both a and b have references, we need to see if they reference each other
       if (b.original && usesReferences(b.original.value)) {
-        const aRefs = getReferences(a.original.value, tokens, {
+        const aRefs = _getReferences(a.original.value, tokens, {
           unfilteredTokens: opts?.unfilteredTokens,
         });
-        const bRefs = getReferences(b.original.value, tokens, {
+        const bRefs = _getReferences(b.original.value, tokens, {
           unfilteredTokens: opts?.unfilteredTokens,
         });