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

package/examples/advanced/assets-base64-embed/package.json

@@ -11,6 +11,6 @@
   "author": "",
   "license": "Apache-2.0",
   "devDependencies": {
-    "style-dictionary": "4.0.0-prerelease.13"
+    "style-dictionary": "4.0.0-prerelease.14"
   }
 }

package/examples/advanced/auto-rebuild-watcher/package.json

@@ -17,6 +17,6 @@
   "license": "Apache-2.0",
   "devDependencies": {
     "chokidar-cli": "^1.2.0",
-    "style-dictionary": "4.0.0-prerelease.13"
+    "style-dictionary": "4.0.0-prerelease.14"
   }
 }

package/examples/advanced/component-cti/package.json

@@ -15,6 +15,6 @@
   "author": "",
   "license": "Apache-2.0",
   "devDependencies": {
-    "style-dictionary": "4.0.0-prerelease.13"
+    "style-dictionary": "4.0.0-prerelease.14"
   }
 }

package/examples/advanced/create-react-app/package.json

@@ -11,7 +11,7 @@
   },
   "devDependencies": {
     "eslint-config-react-app": "^7.0.1",
-    "style-dictionary": "4.0.0-prerelease.13"
+    "style-dictionary": "4.0.0-prerelease.14"
   },
   "resolutions": {
     "immer": "8.0.1",

package/examples/advanced/create-react-native-app/package.json

@@ -28,7 +28,7 @@
     "eslint-config-react-app": "^7.0.1",
     "jest": "~25.2.6",
     "react-test-renderer": "~16.13.1",
-    "style-dictionary": "4.0.0-prerelease.13"
+    "style-dictionary": "4.0.0-prerelease.14"
   },
   "jest": {
     "preset": "react-native"

package/examples/advanced/custom-file-header/package.json

@@ -10,6 +10,6 @@
   "author": "",
   "license": "ISC",
   "devDependencies": {
-    "style-dictionary": "4.0.0-prerelease.13"
+    "style-dictionary": "4.0.0-prerelease.14"
   }
 }

package/examples/advanced/custom-filters/package.json

@@ -15,6 +15,6 @@
   "author": "",
   "license": "Apache-2.0",
   "devDependencies": {
-    "style-dictionary": "4.0.0-prerelease.13"
+    "style-dictionary": "4.0.0-prerelease.14"
   }
 }

package/examples/advanced/custom-formats-with-templates/package.json

@@ -18,6 +18,6 @@
     "handlebars": "^4.7.7",
     "lodash": "^4.17.21",
     "pug": "^3.0.2",
-    "style-dictionary": "4.0.0-prerelease.13"
+    "style-dictionary": "4.0.0-prerelease.14"
   }
 }

package/examples/advanced/custom-parser/package.json

@@ -9,6 +9,6 @@
   "author": "",
   "license": "Apache-2.0",
   "devDependencies": {
-    "style-dictionary": "4.0.0-prerelease.13"
+    "style-dictionary": "4.0.0-prerelease.14"
   }
 }

package/examples/advanced/custom-transforms/package.json

@@ -15,6 +15,6 @@
   "author": "",
   "license": "Apache-2.0",
   "devDependencies": {
-    "style-dictionary": "4.0.0-prerelease.13"
+    "style-dictionary": "4.0.0-prerelease.14"
   }
 }

package/examples/advanced/font-face-rules/package.json

@@ -8,6 +8,6 @@
   },
   "license": "Apache-2.0",
   "devDependencies": {
-    "style-dictionary": "4.0.0-prerelease.13"
+    "style-dictionary": "4.0.0-prerelease.14"
   }
 }

package/examples/advanced/format-helpers/package.json

@@ -10,6 +10,6 @@
   "author": "",
   "license": "Apache-2.0",
   "devDependencies": {
-    "style-dictionary": "4.0.0-prerelease.13"
+    "style-dictionary": "4.0.0-prerelease.14"
   }
 }

package/examples/advanced/matching-build-files/package.json

@@ -16,6 +16,6 @@
   "author": "Kelly Harrop <kn.harrop@gmail.com>",
   "license": "Apache-2.0",
   "devDependencies": {
-    "style-dictionary": "4.0.0-prerelease.13"
+    "style-dictionary": "4.0.0-prerelease.14"
   }
 }

package/examples/advanced/multi-brand-multi-platform/package.json

@@ -15,6 +15,6 @@
   "author": "",
   "license": "Apache-2.0",
   "devDependencies": {
-    "style-dictionary": "4.0.0-prerelease.13"
+    "style-dictionary": "4.0.0-prerelease.14"
   }
 }

package/examples/advanced/node-modules-as-config-and-properties/package.json

@@ -19,7 +19,7 @@
   },
   "homepage": "https://github.com/dbanksdesign/style-dictionary-node#readme",
   "devDependencies": {
-    "style-dictionary": "4.0.0-prerelease.13",
+    "style-dictionary": "4.0.0-prerelease.14",
     "tinycolor2": "^1.4.1"
   }
 }

package/examples/advanced/npm-module/package.json

@@ -16,6 +16,6 @@
   "author": "",
   "license": "Apache-2.0",
   "devDependencies": {
-    "style-dictionary": "4.0.0-prerelease.13"
+    "style-dictionary": "4.0.0-prerelease.14"
   }
 }

package/examples/advanced/referencing_aliasing/package.json

@@ -15,6 +15,6 @@
   "author": "",
   "license": "Apache-2.0",
   "devDependencies": {
-    "style-dictionary": "4.0.0-prerelease.13"
+    "style-dictionary": "4.0.0-prerelease.14"
   }
 }

package/examples/advanced/s3/package.json

@@ -15,6 +15,6 @@
   "devDependencies": {
     "aws-sdk": "^2.7.21",
     "fs-extra": "^1.0.0",
-    "style-dictionary": "4.0.0-prerelease.13"
+    "style-dictionary": "4.0.0-prerelease.14"
   }
 }

package/examples/advanced/tokens-deprecation/package.json

@@ -16,6 +16,6 @@
   "license": "Apache-2.0",
   "devDependencies": {
     "lodash": "^4.17.11",
-    "style-dictionary": "4.0.0-prerelease.13"
+    "style-dictionary": "4.0.0-prerelease.14"
   }
 }

package/examples/advanced/transitive-transforms/package.json

@@ -11,6 +11,6 @@
   "license": "ISC",
   "devDependencies": {
     "chroma-js": "^2.1.0",
-    "style-dictionary": "4.0.0-prerelease.13"
+    "style-dictionary": "4.0.0-prerelease.14"
   }
 }

package/examples/advanced/variables-in-outputs/package.json

@@ -10,6 +10,6 @@
   "author": "",
   "license": "MIT",
   "devDependencies": {
-    "style-dictionary": "4.0.0-prerelease.13"
+    "style-dictionary": "4.0.0-prerelease.14"
   }
 }

package/examples/advanced/yaml-tokens/package.json

@@ -9,7 +9,7 @@
   "author": "",
   "license": "Apache-2.0",
   "devDependencies": {
-    "style-dictionary": "4.0.0-prerelease.13",
+    "style-dictionary": "4.0.0-prerelease.14",
     "yaml": "^1.10.0"
   }
 }

package/lib/StyleDictionary.js

@@ -25,6 +25,8 @@ import deepExtend from './utils/deepExtend.js';
 import resolveObject from './utils/resolveObject.js';
 import getName from './utils/references/getName.js';
 import GroupMessages from './utils/groupMessages.js';
+import flattenTokens from './utils/flattenTokens.js';
+import { detectDtcgSyntax } from './utils/detectDtcgSyntax.js';
 import { preprocess } from './utils/preprocess.js';
 
 import transformObject from './transform/object.js';
@@ -34,7 +36,6 @@ import buildFiles from './buildFiles.js';
 import cleanFiles from './cleanFiles.js';
 import cleanDirs from './cleanDirs.js';
 import cleanActions from './cleanActions.js';
-import flattenTokens from './utils/flattenTokens.js';
 
 /**
  * @typedef {import('../types/Config.d.ts').Config} Config
@@ -65,7 +66,7 @@ export default class StyleDictionary extends Register {
   // 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
-  static VERSION = '4.0.0-prerelease.13';
+  static VERSION = '4.0.0-prerelease.14';
   static formatHelpers = formatHelpers;
 
   /** @returns {Config} */
@@ -147,6 +148,7 @@ export default class StyleDictionary extends Register {
     let includeTokens = {};
     /** @type {Tokens} */
     let sourceTokens = {};
+
     // Overloaded method, can accept a string as a path that points to a JS or
     // JSON file or a plain object. Potentially refactor.
     if (typeof config === 'string') {
@@ -176,9 +178,12 @@ export default class StyleDictionary extends Register {
     });
     this.options = options;
 
-    // Creating a new object and copying over the options
-    // Also keeping an options object in case
+    let { usesDtcg } = this.options;
 
+    // Try to detect DTCG if not specified by user in options
+    if (Object.entries(this.tokens).length > 0 && usesDtcg === undefined) {
+      usesDtcg = detectDtcgSyntax(this.tokens);
+    }
     // grab the inline tokens, ones either defined in the configuration object
     // or that already exist from extending another style dictionary instance
     // with `tokens` keys
@@ -188,14 +193,28 @@ export default class StyleDictionary extends Register {
     if (this.options.include) {
       if (!Array.isArray(this.options.include)) throw new Error('include must be an array');
 
-      includeTokens = await combineJSON(this.options.include, true, undefined, false, this.parsers);
+      const result = await combineJSON(
+        this.options.include,
+        true,
+        undefined,
+        false,
+        this.parsers,
+        this.options.usesDtcg,
+      );
+
+      includeTokens = result.tokens;
+      // If it wasn't known yet whether DTCG is used, combineJSON util will have auto-detected it
+      if (usesDtcg === undefined) {
+        usesDtcg = result.usesDtcg;
+      }
     }
 
     // Update tokens with current package's source
     // These highest precedence
     if (this.options.source) {
       if (!Array.isArray(this.options.source)) throw new Error('source must be an array');
-      sourceTokens = await combineJSON(
+
+      const result = await combineJSON(
         this.options.source,
         true,
         /** @param {Token} prop */
@@ -209,8 +228,15 @@ export default class StyleDictionary extends Register {
         },
         true,
         this.parsers,
+        this.options.usesDtcg,
       );
 
+      sourceTokens = result.tokens;
+      // If it wasn't known yet whether DTCG is used, combineJSON util will have auto-detected it
+      if (usesDtcg === undefined) {
+        usesDtcg = result.usesDtcg;
+      }
+
       if (GroupMessages.count(PROPERTY_VALUE_COLLISIONS) > 0) {
         const collisions = GroupMessages.flush(PROPERTY_VALUE_COLLISIONS).join('\n');
         const warn = `\n${PROPERTY_VALUE_COLLISIONS}:\n${collisions}\n\n`;
@@ -226,6 +252,7 @@ export default class StyleDictionary extends Register {
     // Merge inline, include, and source tokens
     const unprocessedTokens = deepExtend([{}, inlineTokens, includeTokens, sourceTokens]);
     this.tokens = await preprocess(unprocessedTokens, this.preprocessors);
+    this.options = { ...this.options, usesDtcg };
     this.hasInitializedResolve(null);
 
     // For chaining
@@ -306,7 +333,12 @@ export default class StyleDictionary extends Register {
       // values like "1px solid {color.border.base}" we want to
       // transform the original value (color.border.base) before
       // replacing that value in the string.
-      const transformed = transformObject(exportableResult, platformConfig, transformationContext);
+      const transformed = transformObject(
+        exportableResult,
+        platformConfig,
+        this.options,
+        transformationContext,
+      );
 
       // referenced values, that have not (yet) been transformed should be excluded from resolving
       const ignorePathsToResolve = deferredPropValueTransforms.map((p) => getName([p, 'value']));
@@ -365,7 +397,9 @@ export default class StyleDictionary extends Register {
     // transform the original value (color.border.base) before
     // replacing that value in the string.
     const tokens = await this.exportPlatform(platform);
-    this.allTokens = /** @type {TransformedToken[]} */ (flattenTokens(tokens));
+    this.allTokens = /** @type {TransformedToken[]} */ (
+      flattenTokens(tokens, this.options.usesDtcg)
+    );
     // This is the dictionary object we pass to the file
     // building and action methods.
     return { dictionary: { tokens, allTokens: this.allTokens }, platformConfig };
@@ -377,8 +411,8 @@ export default class StyleDictionary extends Register {
    */
   async buildPlatform(platform) {
     const { dictionary, platformConfig } = await this.getPlatform(platform);
-    buildFiles(dictionary, platformConfig);
-    performActions(dictionary, platformConfig);
+    buildFiles(dictionary, platformConfig, this.options);
+    performActions(dictionary, platformConfig, this.options);
     // For chaining
     return this;
   }
@@ -400,7 +434,7 @@ export default class StyleDictionary extends Register {
     const { dictionary, platformConfig } = await this.getPlatform(platform);
     // We clean files first, then actions, ...and then directories?
     cleanFiles(platformConfig);
-    cleanActions(dictionary, platformConfig);
+    cleanActions(dictionary, platformConfig, this.options);
     cleanDirs(platformConfig);
     // For chaining
     return this;

package/lib/buildFile.d.ts

@@ -2,6 +2,7 @@
  * @typedef {import('../types/DesignToken.d.ts').Dictionary} Dictionary
  * @typedef {import('../types/DesignToken.d.ts').TransformedToken} TransformedToken
  * @typedef {import('../types/Config.d.ts').PlatformConfig} PlatformConfig
+ * @typedef {import('../types/Config.d.ts').Config} Config
  * @typedef {import('../types/File.d.ts').File} File
  */
 /**
@@ -11,9 +12,11 @@
  * @param {File} file
  * @param {PlatformConfig} platform
  * @param {Dictionary} dictionary
+ * @param {Config} options
  */
-export default function buildFile(file: File, platform: import("../types/Config.d.ts").PlatformConfig | undefined, dictionary: Dictionary): null | undefined;
+export default function buildFile(file: File, platform: import("../types/Config.d.ts").PlatformConfig | undefined, dictionary: Dictionary, options: Config): null | undefined;
 export type Dictionary = import('../types/DesignToken.d.ts').Dictionary;
 export type TransformedToken = import('../types/DesignToken.d.ts').TransformedToken;
 export type PlatformConfig = import('../types/Config.d.ts').PlatformConfig;
+export type Config = import('../types/Config.d.ts').Config;
 export type File = import('../types/File.d.ts').File;

package/lib/buildFile.js

@@ -23,6 +23,7 @@ import createFormatArgs from './utils/createFormatArgs.js';
  * @typedef {import('../types/DesignToken.d.ts').Dictionary} Dictionary
  * @typedef {import('../types/DesignToken.d.ts').TransformedToken} TransformedToken
  * @typedef {import('../types/Config.d.ts').PlatformConfig} PlatformConfig
+ * @typedef {import('../types/Config.d.ts').Config} Config
  * @typedef {import('../types/File.d.ts').File} File
  */
 
@@ -33,8 +34,9 @@ import createFormatArgs from './utils/createFormatArgs.js';
  * @param {File} file
  * @param {PlatformConfig} platform
  * @param {Dictionary} dictionary
+ * @param {Config} options
  */
-export default function buildFile(file, platform = {}, dictionary) {
+export default function buildFile(file, platform = {}, dictionary, options) {
   const { destination, filter } = file || {};
   let { format } = file || {};
 
@@ -56,7 +58,7 @@ export default function buildFile(file, platform = {}, dictionary) {
   const dir = dirname(fullDestination);
   if (!fs.existsSync(dir)) fs.mkdirSync(dir, { recursive: true });
 
-  const filteredTokens = filterTokens(dictionary, filter);
+  const filteredTokens = filterTokens(dictionary, filter, options);
   const filteredDictionary = Object.assign({}, dictionary, {
     tokens: filteredTokens.tokens,
     allTokens: filteredTokens.allTokens,
@@ -98,7 +100,7 @@ export default function buildFile(file, platform = {}, dictionary) {
       let collisions = nameCollisionObj[tokenName]
         .map((token) => {
           let tokenPathText = chalk.rgb(255, 69, 0)(token.path.join('.'));
-          let valueText = chalk.rgb(255, 140, 0)(token.$value ?? token.value);
+          let valueText = chalk.rgb(255, 140, 0)(options.usesDtcg ? token.$value : token.value);
           return tokenPathText + '   ' + valueText;
         })
         .join('\n        ');
@@ -118,6 +120,7 @@ export default function buildFile(file, platform = {}, dictionary) {
       createFormatArgs({
         dictionary: filteredDictionary,
         platform,
+        options,
         file,
       }),
     ),

package/lib/buildFiles.d.ts

@@ -1,6 +1,7 @@
 /**
  * @typedef {import('../types/DesignToken.d.ts').Dictionary} Dictionary
- * @typedef {import('../types/Config.d.ts').PlatformConfig} Config
+ * @typedef {import('../types/Config.d.ts').PlatformConfig} PlatformConfig
+ * @typedef {import('../types/Config.d.ts').Config} Config
  */
 /**
  * Takes a platform config object and a dictionary
@@ -9,8 +10,10 @@
  * point.
  * @memberOf StyleDictionary
  * @param {Dictionary} dictionary
- * @param {Config} platform
+ * @param {PlatformConfig} platform
+ * @param {Config} options
  */
-export default function buildFiles(dictionary: Dictionary, platform: Config): void;
+export default function buildFiles(dictionary: Dictionary, platform: PlatformConfig, options: Config): void;
 export type Dictionary = import('../types/DesignToken.d.ts').Dictionary;
-export type Config = import('../types/Config.d.ts').PlatformConfig;
+export type PlatformConfig = import('../types/Config.d.ts').PlatformConfig;
+export type Config = import('../types/Config.d.ts').Config;

package/lib/buildFiles.js

@@ -15,7 +15,8 @@ import buildFile from './buildFile.js';
 
 /**
  * @typedef {import('../types/DesignToken.d.ts').Dictionary} Dictionary
- * @typedef {import('../types/Config.d.ts').PlatformConfig} Config
+ * @typedef {import('../types/Config.d.ts').PlatformConfig} PlatformConfig
+ * @typedef {import('../types/Config.d.ts').Config} Config
  */
 
 /**
@@ -25,9 +26,10 @@ import buildFile from './buildFile.js';
  * point.
  * @memberOf StyleDictionary
  * @param {Dictionary} dictionary
- * @param {Config} platform
+ * @param {PlatformConfig} platform
+ * @param {Config} options
  */
-export default function buildFiles(dictionary, platform) {
+export default function buildFiles(dictionary, platform, options) {
   if (
     platform.buildPath &&
     platform.buildPath.slice(-1) !== '/' &&
@@ -38,7 +40,7 @@ export default function buildFiles(dictionary, platform) {
 
   platform.files?.forEach(function (file) {
     if (file.format) {
-      buildFile(file, platform, dictionary);
+      buildFile(file, platform, dictionary, options);
     } else {
       throw new Error('Please supply a format');
     }

package/lib/cleanActions.d.ts

@@ -1,6 +1,7 @@
 /**
  * @typedef {import('../types/DesignToken.d.ts').Dictionary} Dictionary
- * @typedef {import('../types/Config.d.ts').PlatformConfig} Config
+ * @typedef {import('../types/Config.d.ts').PlatformConfig} PlatformConfig
+ * @typedef {import('../types/Config.d.ts').Config} Config
  */
 /**
  * Performs the undo of any actions defined in a platform. Pretty
@@ -10,8 +11,10 @@
  * @private
  * @memberof module:style-dictionary
  * @param {Dictionary} dictionary
- * @param {Config} platform
+ * @param {PlatformConfig} platform
+ * @param {Config} options
  */
-export default function cleanActions(dictionary: Dictionary, platform: Config): void;
+export default function cleanActions(dictionary: Dictionary, platform: PlatformConfig, options: Config): void;
 export type Dictionary = import('../types/DesignToken.d.ts').Dictionary;
-export type Config = import('../types/Config.d.ts').PlatformConfig;
+export type PlatformConfig = import('../types/Config.d.ts').PlatformConfig;
+export type Config = import('../types/Config.d.ts').Config;

package/lib/cleanActions.js

@@ -13,7 +13,8 @@
 
 /**
  * @typedef {import('../types/DesignToken.d.ts').Dictionary} Dictionary
- * @typedef {import('../types/Config.d.ts').PlatformConfig} Config
+ * @typedef {import('../types/Config.d.ts').PlatformConfig} PlatformConfig
+ * @typedef {import('../types/Config.d.ts').Config} Config
  */
 
 /**
@@ -24,14 +25,15 @@
  * @private
  * @memberof module:style-dictionary
  * @param {Dictionary} dictionary
- * @param {Config} platform
+ * @param {PlatformConfig} platform
+ * @param {Config} options
  */
-export default function cleanActions(dictionary, platform) {
+export default function cleanActions(dictionary, platform, options) {
   if (platform.actions) {
     platform.actions.forEach(function (action) {
       // ensure we've augmented action with the do/undo functions and that undo exists
       if (typeof action !== 'string' && typeof action.undo === 'function') {
-        action.undo(dictionary, platform);
+        action.undo(dictionary, platform, options);
       }
     });
   }

package/lib/common/actions.js

@@ -31,7 +31,7 @@ export default {
    * @memberof Actions
    */
   'android/copyImages': {
-    do: function (dictionary, config) {
+    do: function (dictionary, config, options) {
       const imagesDir = `${config.buildPath}android/main/res/drawable-`;
       /**
        * @param {Token} token
@@ -42,7 +42,7 @@ export default {
           const dir = `${imagesDir}${token.attributes.state}`;
           const path = `${dir}/${name}.png`;
           fs.mkdirSync(dir, { recursive: true });
-          fs.copyFileSync(token.$value ?? token.value, path);
+          fs.copyFileSync(options.usesDtcg ? token.$value : token.value, path);
         }
       });
     },

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/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;