style-dictionary 4.1.3 → 4.2.0

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

@@ -37,18 +37,18 @@ export function addComment(to_ret_token: string, comment: string, options: Forma
  * @param {Formatting} [options.formatting] - Custom formatting properties that define parts of a declaration line in code. The configurable strings are: `prefix`, `indentation`, `separator`, `suffix`, `lineSeparator`, `fileHeaderTimestamp`, `header`, `footer`, `commentStyle` and `commentPosition`. Those are used to generate a line like this: `${indentation}${prefix}${token.name}${separator} ${prop.value}${suffix}`. The remaining formatting options are used for the fileHeader helper.
  * @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.ts').TransformedToken) => string}
+ * @returns {(token: import('../../../types/DesignToken.d.ts').TransformedToken) => string}
  */
 export default function createPropertyFormatter({ outputReferences, outputReferenceFallbacks, dictionary, format, formatting, themeable, usesDtcg, }: {
-    outputReferences?: import("../../../types/Format.ts").OutputReferences | undefined;
+    outputReferences?: import("../../../types/Format.d.ts").OutputReferences | undefined;
     outputReferenceFallbacks?: boolean | undefined;
     dictionary: Dictionary;
     format?: string | undefined;
-    formatting?: import("../../../types/File.ts").FormattingOptions | undefined;
+    formatting?: import("../../../types/File.d.ts").FormattingOptions | undefined;
     themeable?: boolean | undefined;
     usesDtcg?: boolean | undefined;
-}): (token: import("../../../types/DesignToken.ts").TransformedToken) => string;
-export type TransformedToken = import("../../../types/DesignToken.ts").TransformedToken;
-export type Dictionary = import("../../../types/DesignToken.ts").Dictionary;
-export type Formatting = import("../../../types/File.ts").FormattingOptions;
-export type OutputReferences = import("../../../types/Format.ts").OutputReferences;
+}): (token: import("../../../types/DesignToken.d.ts").TransformedToken) => string;
+export type TransformedToken = import("../../../types/DesignToken.d.ts").TransformedToken;
+export type Dictionary = import("../../../types/DesignToken.d.ts").Dictionary;
+export type Formatting = import("../../../types/File.d.ts").FormattingOptions;
+export type OutputReferences = import("../../../types/Format.d.ts").OutputReferences;

package/lib/common/formatHelpers/createPropertyFormatter.js

@@ -14,10 +14,10 @@ import { getReferences } from '../../utils/references/getReferences.js';
 import usesReferences from '../../utils/references/usesReferences.js';
 
 /**
- * @typedef {import('../../../types/DesignToken.ts').TransformedToken} TransformedToken
- * @typedef {import('../../../types/DesignToken.ts').Dictionary} Dictionary
- * @typedef {import('../../../types/File.ts').FormattingOptions} Formatting
- * @typedef {import('../../../types/Format.ts').OutputReferences} OutputReferences
+ * @typedef {import('../../../types/DesignToken.d.ts').TransformedToken} TransformedToken
+ * @typedef {import('../../../types/DesignToken.d.ts').Dictionary} Dictionary
+ * @typedef {import('../../../types/File.d.ts').FormattingOptions} Formatting
+ * @typedef {import('../../../types/Format.d.ts').OutputReferences} OutputReferences
  */
 
 /**
@@ -116,7 +116,7 @@ export function addComment(to_ret_token, comment, options) {
  * @param {Formatting} [options.formatting] - Custom formatting properties that define parts of a declaration line in code. The configurable strings are: `prefix`, `indentation`, `separator`, `suffix`, `lineSeparator`, `fileHeaderTimestamp`, `header`, `footer`, `commentStyle` and `commentPosition`. Those are used to generate a line like this: `${indentation}${prefix}${token.name}${separator} ${prop.value}${suffix}`. The remaining formatting options are used for the fileHeader helper.
  * @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.ts').TransformedToken) => string}
+ * @returns {(token: import('../../../types/DesignToken.d.ts').TransformedToken) => string}
  */
 export default function createPropertyFormatter({
   outputReferences = false,

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

@@ -24,12 +24,12 @@
  * ```
  */
 export default function fileHeader({ file, commentStyle, formatting, options }: {
-    file?: import("../../../types/File.ts").File | undefined;
+    file?: import("../../../types/File.d.ts").File | undefined;
     commentStyle?: "short" | "long" | "xml" | undefined;
-    formatting?: import("../../../types/File.ts").FormattingOptions | undefined;
-    options?: import("../../../types/Config.ts").Config | undefined;
+    formatting?: import("../../../types/File.d.ts").FormattingOptions | undefined;
+    options?: import("../../../types/Config.d.ts").Config | undefined;
 }): Promise<string>;
-export type File = import("../../../types/File.ts").File;
-export type FileHeader = import("../../../types/File.ts").FileHeader;
-export type Formatting = import("../../../types/File.ts").FormattingOptions;
-export type Config = import("../../../types/Config.ts").Config;
+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;
+export type Config = import("../../../types/Config.d.ts").Config;

package/lib/common/formatHelpers/fileHeader.js

@@ -13,10 +13,10 @@
 
 /**
  *
- * @typedef {import('../../../types/File.ts').File} File
- * @typedef {import('../../../types/File.ts').FileHeader} FileHeader
- * @typedef {import('../../../types/File.ts').FormattingOptions} Formatting
- * @typedef {import('../../../types/Config.ts').Config} Config
+ * @typedef {import('../../../types/File.d.ts').File} File
+ * @typedef {import('../../../types/File.d.ts').FileHeader} FileHeader
+ * @typedef {import('../../../types/File.d.ts').FormattingOptions} Formatting
+ * @typedef {import('../../../types/Config.d.ts').Config} Config
  */
 
 const lineSeparator = `\n`;

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

@@ -29,14 +29,14 @@
 export default function formattedVariables({ format, dictionary, outputReferences, outputReferenceFallbacks, formatting, themeable, usesDtcg, }: {
     format: string;
     dictionary: Dictionary;
-    outputReferences?: import("../../../types/Format").OutputReferences | undefined;
+    outputReferences?: import("../../../types/Format.d.ts").OutputReferences | undefined;
     outputReferenceFallbacks?: boolean | undefined;
-    formatting?: import("../../../types/File.ts").FormattingOptions | undefined;
+    formatting?: import("../../../types/File.d.ts").FormattingOptions | undefined;
     themeable?: boolean | undefined;
     usesDtcg?: boolean | undefined;
 }): string;
-export type Token = import("../../../types/DesignToken.ts").TransformedToken;
-export type Tokens = import("../../../types/DesignToken.ts").TransformedTokens;
-export type Formatting = import("../../../types/File.ts").FormattingOptions;
-export type OutputReferences = import("../../../types/Format").OutputReferences;
-export type Dictionary = import("../../../types/DesignToken.ts").Dictionary;
+export type Token = import("../../../types/DesignToken.d.ts").TransformedToken;
+export type Tokens = import("../../../types/DesignToken.d.ts").TransformedTokens;
+export type Formatting = import("../../../types/File.d.ts").FormattingOptions;
+export type OutputReferences = import("../../../types/Format.d.ts").OutputReferences;
+export type Dictionary = import("../../../types/DesignToken.d.ts").Dictionary;

package/lib/common/formatHelpers/formattedVariables.js

@@ -15,11 +15,11 @@ import createPropertyFormatter from './createPropertyFormatter.js';
 import sortByReference from './sortByReference.js';
 
 /**
- * @typedef {import('../../../types/DesignToken.ts').TransformedToken} Token
- * @typedef {import('../../../types/DesignToken.ts').TransformedTokens} Tokens
- * @typedef {import('../../../types/File.ts').FormattingOptions} Formatting
- * @typedef {import('../../../types/Format').OutputReferences} OutputReferences
- * @typedef {import('../../../types/DesignToken.ts').Dictionary} Dictionary
+ * @typedef {import('../../../types/DesignToken.d.ts').TransformedToken} Token
+ * @typedef {import('../../../types/DesignToken.d.ts').TransformedTokens} Tokens
+ * @typedef {import('../../../types/File.d.ts').FormattingOptions} Formatting
+ * @typedef {import('../../../types/Format.d.ts').OutputReferences} OutputReferences
+ * @typedef {import('../../../types/DesignToken.d.ts').Dictionary} Dictionary
  */
 
 const defaultFormatting = {

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

@@ -1,6 +1,6 @@
 /**
- * @typedef {import('../../../types/Config.ts').LocalOptions} Options
- * @typedef {import('../../../types/Config.ts').Config} Config
+ * @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.
@@ -27,8 +27,8 @@
  * @return {String} A valid name for a TypeScript type.
  *
  */
-export default function getTypeScriptType(value: any, options?: (import("../../../types/Config.ts").Config & {
+export default function getTypeScriptType(value: any, options?: (import("../../../types/Config.d.ts").Config & {
     outputStringLiterals?: boolean;
 }) | undefined): string;
-export type Options = import("../../../types/Config.ts").LocalOptions;
-export type Config = import("../../../types/Config.ts").Config;
+export type Options = import("../../../types/Config.d.ts").LocalOptions;
+export type Config = import("../../../types/Config.d.ts").Config;

package/lib/common/formatHelpers/getTypeScriptType.js

@@ -12,8 +12,8 @@
  */
 
 /**
- * @typedef {import('../../../types/Config.ts').LocalOptions} Options
- * @typedef {import('../../../types/Config.ts').Config} Config
+ * @typedef {import('../../../types/Config.d.ts').LocalOptions} Options
+ * @typedef {import('../../../types/Config.d.ts').Config} Config
  */
 
 /**

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

@@ -1,7 +1,7 @@
 /**
- * @typedef {import('../../../types/DesignToken.ts').TransformedToken} Token
- * @typedef {import('../../../types/Config.ts').Config} Options
- * @typedef {import('../../../types/Config.ts').PlatformConfig} PlatformConfig
+ * @typedef {import('../../../types/DesignToken.d.ts').TransformedToken} Token
+ * @typedef {import('../../../types/Config.d.ts').Config} Options
+ * @typedef {import('../../../types/Config.d.ts').PlatformConfig} PlatformConfig
  */
 /**
  *
@@ -27,6 +27,6 @@
  * ```
  */
 export default function iconsWithPrefix(prefix: string, allTokens: Token[], options: Options, platform: PlatformConfig): string;
-export type Token = import("../../../types/DesignToken.ts").TransformedToken;
-export type Options = import("../../../types/Config.ts").Config;
-export type PlatformConfig = import("../../../types/Config.ts").PlatformConfig;
+export type Token = import("../../../types/DesignToken.d.ts").TransformedToken;
+export type Options = import("../../../types/Config.d.ts").Config;
+export type PlatformConfig = import("../../../types/Config.d.ts").PlatformConfig;

package/lib/common/formatHelpers/iconsWithPrefix.js

@@ -12,9 +12,9 @@
  */
 
 /**
- * @typedef {import('../../../types/DesignToken.ts').TransformedToken} Token
- * @typedef {import('../../../types/Config.ts').Config} Options
- * @typedef {import('../../../types/Config.ts').PlatformConfig} PlatformConfig
+ * @typedef {import('../../../types/DesignToken.d.ts').TransformedToken} Token
+ * @typedef {import('../../../types/Config.d.ts').Config} Options
+ * @typedef {import('../../../types/Config.d.ts').PlatformConfig} PlatformConfig
  */
 
 /**

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

@@ -1,5 +1,5 @@
 /**
- * @typedef {import('../../../types/DesignToken.ts').TransformedTokens} Tokens
+ * @typedef {import('../../../types/DesignToken.d.ts').TransformedTokens} Tokens
  */
 /**
  * Outputs an object stripping out everything except values
@@ -19,4 +19,4 @@
  * ```
  */
 export default function minifyDictionary(obj: Tokens, usesDtcg?: boolean | undefined): Tokens;
-export type Tokens = import("../../../types/DesignToken.ts").TransformedTokens;
+export type Tokens = import("../../../types/DesignToken.d.ts").TransformedTokens;

package/lib/common/formatHelpers/minifyDictionary.js

@@ -12,7 +12,7 @@
  */
 
 /**
- * @typedef {import('../../../types/DesignToken.ts').TransformedTokens} Tokens
+ * @typedef {import('../../../types/DesignToken.d.ts').TransformedTokens} Tokens
  */
 
 /**

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

@@ -1,5 +1,5 @@
 /**
- * @typedef {import('../../../types/Config.ts').LocalOptions} Options
+ * @typedef {import('../../../types/Config.d.ts').LocalOptions} Options
  */
 /**
  * Outputs an object for compose format configurations. Sets import.
@@ -11,4 +11,4 @@
 export default function setComposeObjectProperties(options?: {
     import?: string[];
 } | undefined): Object;
-export type Options = import("../../../types/Config.ts").LocalOptions;
+export type Options = import("../../../types/Config.d.ts").LocalOptions;

package/lib/common/formatHelpers/setComposeObjectProperties.js

@@ -12,7 +12,7 @@
  */
 
 /**
- * @typedef {import('../../../types/Config.ts').LocalOptions} Options
+ * @typedef {import('../../../types/Config.d.ts').LocalOptions} Options
  */
 
 /**

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

@@ -1,5 +1,5 @@
 /**
- * @typedef {import('../../../types/Config.ts').LocalOptions} Options
+ * @typedef {import('../../../types/Config.d.ts').LocalOptions} Options
  */
 /**
  * Outputs an object with swift format configurations. Sets import, object type and access control.
@@ -18,4 +18,4 @@ export default function setSwiftFileProperties(options: {
     import?: string[];
     accessControl?: string;
 };
-export type Options = import("../../../types/Config.ts").LocalOptions;
+export type Options = import("../../../types/Config.d.ts").LocalOptions;

package/lib/common/formatHelpers/setSwiftFileProperties.js

@@ -12,7 +12,7 @@
  */
 
 /**
- * @typedef {import('../../../types/Config.ts').LocalOptions} Options
+ * @typedef {import('../../../types/Config.d.ts').LocalOptions} Options
  */
 
 /**

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

@@ -17,5 +17,5 @@ export default function sortByReference(tokens: Tokens, { unfilteredTokens, uses
     unfilteredTokens?: Tokens;
     usesDtcg?: boolean;
 } | undefined): (a: Token, b: Token) => number;
-export type Tokens = import("../../../types/DesignToken.ts").TransformedTokens;
-export type Token = import("../../../types/DesignToken.ts").TransformedToken;
+export type Tokens = import("../../../types/DesignToken.d.ts").TransformedTokens;
+export type Token = import("../../../types/DesignToken.d.ts").TransformedToken;

package/lib/common/formatHelpers/sortByReference.js

@@ -15,8 +15,8 @@ import usesReferences from '../../utils/references/usesReferences.js';
 import { getReferences } from '../../utils/references/getReferences.js';
 
 /**
- * @typedef {import('../../../types/DesignToken.ts').TransformedTokens} Tokens
- * @typedef {import('../../../types/DesignToken.ts').TransformedToken} Token
+ * @typedef {import('../../../types/DesignToken.d.ts').TransformedTokens} Tokens
+ * @typedef {import('../../../types/DesignToken.d.ts').TransformedToken} Token
  */
 
 const A_COMES_FIRST = -1;
@@ -88,8 +88,13 @@ export default function sortByReference(tokens, { unfilteredTokens, usesDtcg } =
       return B_COMES_FIRST;
     }
 
-    // 'a' doesn't reference. It should come first regardless of 'b'
-    return A_COMES_FIRST;
+    // 'b' references, 'a' doesn't -> 'a' should come first
+    if (bUsesRefs) {
+      return A_COMES_FIRST;
+    }
+
+    // no references, keep existing order
+    return 0;
   }
 
   return sorter;

package/lib/common/formats.d.ts

@@ -1,10 +1,13 @@
 export default formats;
-export type Format = import("../../types/Format.ts").Format;
-export type FormatArgs = import("../../types/Format.ts").FormatFnArguments;
-export type FormattingOverrides = import("../../types/File").FormattingOverrides;
-export type OutputReferences = import("../../types/Format.ts").OutputReferences;
-export type Token = import("../../types/DesignToken.ts").TransformedToken;
-export type Tokens = import("../../types/DesignToken.ts").TransformedTokens;
+export type Format = import("../../types/Format.d.ts").Format;
+export type FormatArgs = import("../../types/Format.d.ts").FormatFnArguments;
+export type FormattingOverrides = import("../../types/File.d.ts").FormattingOverrides;
+export type OutputReferences = import("../../types/Format.d.ts").OutputReferences;
+export type Token = import("../../types/DesignToken.d.ts").TransformedToken;
+export type Tokens = import("../../types/DesignToken.d.ts").TransformedTokens;
+export type Config = import("../../types/Config.d.ts").Config;
+export type LocalOptions = import("../../types/Config.d.ts").LocalOptions;
+export type StripMetaOptions = import("../utils/stripMeta.js").StripMetaOptions;
 /**
  * @type {Record<string, Format['format']>}
  */

package/lib/common/formats.js

@@ -10,6 +10,11 @@
  * CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions
  * and limitations under the License.
  */
+import * as prettier from 'prettier/standalone';
+import prettierPluginBabel from 'prettier/plugins/babel';
+import prettierPluginEstree from 'prettier/plugins/estree';
+import prettierPluginTypescript from 'prettier/plugins/typescript';
+
 import {
   fileHeader,
   formattedVariables,
@@ -23,6 +28,8 @@ import {
   setComposeObjectProperties,
 } from './formatHelpers/index.js';
 
+import { stripMeta as stripMetaUtil } from '../utils/stripMeta.js';
+
 import androidColors from './templates/android/colors.template.js';
 import androidDimens from './templates/android/dimens.template.js';
 import androidFontDimens from './templates/android/fontDimens.template.js';
@@ -47,18 +54,58 @@ import macrosTemplate from './templates/ios/macros.template.js';
 import plistTemplate from './templates/ios/plist.template.js';
 
 /**
- * @typedef {import('../../types/Format.ts').Format} Format
- * @typedef {import('../../types/Format.ts').FormatFnArguments} FormatArgs
- * @typedef {import('../../types/File').FormattingOverrides} FormattingOverrides
- * @typedef {import('../../types/Format.ts').OutputReferences} OutputReferences
- * @typedef {import('../../types/DesignToken.ts').TransformedToken} Token
- * @typedef {import('../../types/DesignToken.ts').TransformedTokens} Tokens
+ * @typedef {import('../../types/Format.d.ts').Format} Format
+ * @typedef {import('../../types/Format.d.ts').FormatFnArguments} FormatArgs
+ * @typedef {import('../../types/File.d.ts').FormattingOverrides} FormattingOverrides
+ * @typedef {import('../../types/Format.d.ts').OutputReferences} OutputReferences
+ * @typedef {import('../../types/DesignToken.d.ts').TransformedToken} Token
+ * @typedef {import('../../types/DesignToken.d.ts').TransformedTokens} Tokens
+ * @typedef {import('../../types/Config.d.ts').Config} Config
+ * @typedef {import('../../types/Config.d.ts').LocalOptions} LocalOptions
+ * @typedef {import('../utils/stripMeta.js').StripMetaOptions} StripMetaOptions
  */
 
 /**
  * @namespace Formats
  */
 
+/**
+ * Strip meta properties from tokens object
+ *
+ * @param {Tokens} tokens
+ * @param {Config & LocalOptions & { stripMeta: boolean | StripMetaOptions}} options
+ */
+function stripMetaProps(tokens, options) {
+  const sdMetaProps = ['attributes', 'filePath', 'name', 'path', 'comment'];
+  const { stripMeta, usesDtcg } = options;
+  let opts = /** @type {StripMetaOptions} */ ({ usesDtcg });
+
+  if (stripMeta) {
+    if (stripMeta === true) {
+      opts.strip = sdMetaProps;
+    } else {
+      opts = {
+        usesDtcg: usesDtcg ?? false,
+        ...stripMeta,
+      };
+    }
+    tokens = stripMetaUtil(tokens, opts);
+  }
+  return tokens;
+}
+
+/**
+ * Prettier format JS contents
+ * @param {string} content
+ * @param {boolean} [ts] whether or not to use typescript
+ */
+async function formatJS(content, ts = false) {
+  return prettier.format(content, {
+    parser: ts ? `typescript` : `babel`,
+    plugins: [prettierPluginBabel, prettierPluginEstree, prettierPluginTypescript],
+  });
+}
+
 /**
  * Remove prefix because the prefix option for createPropertyFormatter
  * is not the same as the prefix inside header comment
@@ -343,7 +390,9 @@ const formats = {
       formatting: getFormattingCloneWithoutPrefix(formatting),
       options,
     });
-    return header + 'module.exports = ' + JSON.stringify(dictionary.tokens, null, 2) + ';\n';
+    const content =
+      header + 'module.exports = ' + JSON.stringify(dictionary.tokens, null, 2) + ';\n';
+    return formatJS(content);
   },
 
   /**
@@ -365,7 +414,7 @@ const formats = {
       formatting: getFormattingCloneWithoutPrefix(formatting),
       options,
     });
-    return (
+    const content =
       header +
       'module.exports = ' +
       '{\n' +
@@ -377,8 +426,8 @@ const formats = {
         })
         .join(',\n') +
       '\n}' +
-      ';\n'
-    );
+      ';\n';
+    return formatJS(content);
   },
 
   /**
@@ -407,14 +456,14 @@ const formats = {
       formatting: getFormattingCloneWithoutPrefix(formatting),
       options,
     });
-    return (
+    const content =
       header +
       'var ' +
       (file.options?.name || '_styleDictionary') +
       ' = ' +
       JSON.stringify(dictionary.tokens, null, 2) +
-      ';\n'
-    );
+      ';\n';
+    return formatJS(content);
   },
 
   /**
@@ -455,7 +504,7 @@ const formats = {
       formatting: getFormattingCloneWithoutPrefix(formatting),
       options,
     });
-    return (
+    const content =
       header +
       '(function(root, factory) {\n' +
       '  if (typeof module === "object" && module.exports) {\n' +
@@ -475,8 +524,8 @@ const formats = {
       '  return ' +
       JSON.stringify(dictionary.tokens, null, 2) +
       ';\n' +
-      '}))\n'
-    );
+      '}))\n';
+    return formatJS(content);
   },
 
   /**
@@ -516,7 +565,7 @@ const formats = {
       formatting: getFormattingCloneWithoutPrefix(formatting),
       options,
     });
-    return (
+    const content =
       header +
       dictionary.allTokens
         .map(function (token) {
@@ -530,8 +579,48 @@ const formats = {
           return to_ret;
         })
         .join('\n') +
-      '\n'
+      '\n';
+    return formatJS(content);
+  },
+
+  /**
+   * Creates a ES6 module with the whole style dictionary
+   *
+   * @memberof Formats
+   * @kind member
+   * @example
+   * ```js
+   * export default {
+   *   "color": {
+   *     "base": {
+   *        "red": "#ff0000"
+   *     }
+   *   }
+   * }
+   * ```
+   */
+  'javascript/esm': async function ({ dictionary, file, options }) {
+    const { formatting, minify = false } = options;
+    let { tokens } = dictionary;
+    tokens = stripMetaProps(
+      tokens,
+      /** @type {LocalOptions & Config & { stripMeta: boolean | StripMetaOptions}} */ (options),
+    );
+
+    const header = await fileHeader({
+      file,
+      formatting: getFormattingCloneWithoutPrefix(formatting),
+      options,
+    });
+
+    const dictionaryString = JSON.stringify(
+      minify ? minifyDictionary(tokens, options.usesDtcg) : tokens,
+      null,
+      2,
     );
+
+    const content = `${header}export default ${dictionaryString};\n`;
+    return formatJS(content);
   },
 
   // TypeScript declarations
@@ -573,7 +662,7 @@ const formats = {
       formatting: getFormattingCloneWithoutPrefix(formatting),
       options,
     });
-    return (
+    const content =
       header +
       dictionary.allTokens
         .map(function (token) {
@@ -588,8 +677,8 @@ const formats = {
           return to_ret_token;
         })
         .join('\n') +
-      '\n'
-    );
+      '\n';
+    return formatJS(content, true);
   },
 
   /**
@@ -668,7 +757,7 @@ const formats = {
       return type;
     }
 
-    // TODO: find a browser+node compatible way to read from '../../types/DesignToken.ts'
+    // TODO: find a browser+node compatible way to read from '../../types/DesignToken.d.ts'
     const designTokenInterface = `interface DesignToken {
   ${options.usesDtcg ? '$' : ''}value?: any;
   ${options.usesDtcg ? '$' : ''}type?: string;
@@ -695,7 +784,8 @@ declare const ${moduleName}: ${JSON.stringify(treeWalker(dictionary.tokens), nul
 
     // JSON stringify will quote strings, because this is a type we need
     // it unquoted.
-    return output.replace(/"DesignToken"/g, 'DesignToken') + '\n';
+    const content = output.replace(/"DesignToken"/g, 'DesignToken') + '\n';
+    return formatJS(content, true);
   },
 
   // Android templates
@@ -1341,8 +1431,13 @@ declare const ${moduleName}: ${JSON.stringify(treeWalker(dictionary.tokens), nul
    * }
    * ```
    */
-  json: function ({ dictionary }) {
-    return JSON.stringify(dictionary.tokens, null, 2) + '\n';
+  json: function ({ dictionary, options }) {
+    let { tokens } = dictionary;
+    tokens = stripMetaProps(
+      tokens,
+      /** @type {LocalOptions & Config & { stripMeta: boolean | StripMetaOptions}} */ (options),
+    );
+    return JSON.stringify(tokens, null, 2) + '\n';
   },
 
   /**
@@ -1369,7 +1464,6 @@ declare const ${moduleName}: ${JSON.stringify(treeWalker(dictionary.tokens), nul
 
   /**
    * Creates a JSON nested file of the style dictionary.
-   *
    * @memberof Formats
    * @kind member
    * @example
@@ -1538,5 +1632,6 @@ declare const ${moduleName}: ${JSON.stringify(treeWalker(dictionary.tokens), nul
 formats['json/nested'].nested = true;
 formats['javascript/module'].nested = true;
 formats['javascript/object'].nested = true;
+formats['javascript/esm'].nested = true;
 
 export default formats;

package/lib/common/templates/android/colors.template.d.ts

@@ -4,6 +4,6 @@ declare function _default({ dictionary, options, header }: {
     header: string;
 }): string;
 export default _default;
-export type Dictionary = import("../../../../types/DesignToken.ts").Dictionary;
-export type Config = import("../../../../types/Config.ts").Config;
-export type LocalOptions = import("../../../../types/Config.ts").LocalOptions;
+export type Dictionary = import("../../../../types/DesignToken.d.ts").Dictionary;
+export type Config = import("../../../../types/Config.d.ts").Config;
+export type LocalOptions = import("../../../../types/Config.d.ts").LocalOptions;

package/lib/common/templates/android/colors.template.js

@@ -1,7 +1,7 @@
 /**
- * @typedef {import('../../../../types/DesignToken.ts').Dictionary} Dictionary
- * @typedef {import('../../../../types/Config.ts').Config} Config
- * @typedef {import('../../../../types/Config.ts').LocalOptions} LocalOptions
+ * @typedef {import('../../../../types/DesignToken.d.ts').Dictionary} Dictionary
+ * @typedef {import('../../../../types/Config.d.ts').Config} Config
+ * @typedef {import('../../../../types/Config.d.ts').LocalOptions} LocalOptions
  */
 
 /**

package/lib/common/templates/android/dimens.template.d.ts

@@ -4,6 +4,6 @@ declare function _default({ dictionary, options, header }: {
     header: string;
 }): string;
 export default _default;
-export type Dictionary = import("../../../../types/DesignToken.ts").Dictionary;
-export type Config = import("../../../../types/Config.ts").Config;
-export type LocalOptions = import("../../../../types/Config.ts").LocalOptions;
+export type Dictionary = import("../../../../types/DesignToken.d.ts").Dictionary;
+export type Config = import("../../../../types/Config.d.ts").Config;
+export type LocalOptions = import("../../../../types/Config.d.ts").LocalOptions;