step 1: add custom variable formatter

Author: lukasoppermann

.changeset/violet-lemons-greet.md

@@ -0,0 +1,5 @@
+---
+'@primer/primitives': minor
+---
+
+Enable token references in composite tokens

eslint.config.mjs

@@ -25,6 +25,7 @@ export default tseslint.config([
       ...eslintPluginReactHooks.configs.recommended.rules,
       ...eslintPluginReact.configs['jsx-runtime'].rules,
       ...eslintPluginGithub.getFlatConfigs().rules,
+      'eslint-comments/no-use': 'off',
     },
   },
   eslintPluginPrettierRecommended,
@@ -70,6 +71,7 @@ export default tseslint.config([
     },
     // rules which apply to JS, TS, etc.
     rules: {
+      'eslint-comments/no-use': 'off',
       'i18n-text/no-en': 0,
       'importPlugin/no-nodejs-modules': 'off',
       'importPlugin/extensions': [
@@ -111,7 +113,7 @@ export default tseslint.config([
   {
     files: ['**/*.{js,jsx}'],
     rules: {
-      'eslint-comments/no-use': 0,
+      'eslint-comments/no-use': 'off',
       'import/no-namespace': 0,
       'no-shadow': 0,
       'import/no-commonjs': 0,
@@ -138,6 +140,7 @@ export default tseslint.config([
     },
     files: ['**/*.{ts,tsx}'],
     rules: {
+      'eslint-comments/no-use': 'off',
       'no-shadow': 'off',
       '@typescript-eslint/no-shadow': 'error',
       '@typescript-eslint/no-explicit-any': 2,
@@ -157,6 +160,7 @@ export default tseslint.config([
   {
     files: ['**/*.test.{ts,tsx,js,jsx}'],
     rules: {
+      'eslint-comments/no-use': 'off',
       'i18n-text/no-en': 0,
     },
   },

package.json

@@ -62,10 +62,10 @@
     "console-table-printer": "^2.12.1",
     "eslint": "9.16",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-react": "7.37",
     "eslint-import-resolver-typescript": "3.6",
     "eslint-plugin-github": "^5.1.3",
     "eslint-plugin-jsx-a11y": "6.10",
+    "eslint-plugin-react": "7.37",
     "eslint-plugin-react-hooks": "^5.0.0",
     "json5": "^2.2.1",
     "markdown-table-ts": "^1.0.3",

scripts/buildTokens.ts

@@ -1,4 +1,4 @@
-import type {Config} from 'style-dictionary/types'
+import type {Config, LogConfig} from 'style-dictionary/types'
 import {PrimerStyleDictionary} from '../src/primerStyleDictionary.js'
 import {copyFromDir} from '../src/utilities/index.js'
 import {deprecatedJson, css, docJson, fallbacks, styleLint} from '../src/platforms/index.js'
@@ -12,6 +12,14 @@ import {themes} from './themes.config.js'
 import fs from 'fs'
 import {getFallbackTheme} from './utilities/getFallbackTheme.js'
 
+const log: LogConfig = {
+  warnings: 'disabled', // 'warn' | 'error' | 'disabled'
+  verbosity: 'silent', // 'default' | 'silent' | 'verbose'
+  errors: {
+    brokenReferences: 'throw', // 'throw' | 'console'
+  },
+}
+
 /**
  * getStyleDictionaryConfig
  * @param filename output file name without extension
@@ -29,21 +37,15 @@ const getStyleDictionaryConfig: StyleDictionaryConfigGenerator = (
 ): Config => ({
   source, // build the special formats
   include,
-  log: {
-    warnings: 'disabled', // 'warn' | 'error' | 'disabled'
-    verbosity: 'silent', // 'default' | 'silent' | 'verbose'
-    errors: {
-      brokenReferences: 'throw', // 'throw' | 'console'
-    },
-  },
+  log,
   platforms: Object.fromEntries(
     Object.entries({
       css: css(`css/${filename}.css`, options.prefix, options.buildPath, {
         themed: options.themed,
-        theme: options.theme,
+        theme: [options.theme, getFallbackTheme(options.theme)],
       }),
       docJson: docJson(`docs/${filename}.json`, options.prefix, options.buildPath, {
-        theme: options.theme,
+        theme: [options.theme, getFallbackTheme(options.theme)],
       }),
       styleLint: styleLint(`styleLint/${filename}.json`, options.prefix, options.buildPath, {
         theme: options.theme,
@@ -58,25 +60,26 @@ export const buildDesignTokens = async (buildOptions: ConfigGeneratorOptions): P
   /** -----------------------------------
    * Internal Colors
    * ----------------------------------- */
-  try {
-    for (const {filename, source, include, theme} of themes) {
-      // build functional scales
-      const extendedSD = await PrimerStyleDictionary.extend({
-        source: [...source, ...include], // build the special formats
-        include,
-        platforms: {
-          css: css(`internalCss/${filename}.css`, buildOptions.prefix, buildOptions.buildPath, {
-            themed: true,
-            theme: [theme, getFallbackTheme(theme)],
-          }),
-        },
-      })
-      await extendedSD.buildAllPlatforms()
-    }
-  } catch (e) {
-    // eslint-disable-next-line no-console
-    console.error('🛑 Error trying to build internal css colors for code output:', e)
-  }
+  // try {
+  //   for (const {filename, source, include, theme} of themes) {
+  //     // build functional scales
+  //     const extendedSD = await PrimerStyleDictionary.extend({
+  //       source: [...source, ...include], // build the special formats
+  //       include,
+  //       log,
+  //       platforms: {
+  //         css: css(`internalCss/${filename}.css`, buildOptions.prefix, buildOptions.buildPath, {
+  //           themed: true,
+  //           theme: [theme, getFallbackTheme(theme)],
+  //         }),
+  //       },
+  //     })
+  //     await extendedSD.buildAllPlatforms()
+  //   }
+  // } catch (e) {
+  //   // eslint-disable-next-line no-console
+  //   console.error('🛑 Error trying to build internal css colors for code output:', e)
+  // }
 
   /** -----------------------------------
    * Colors, shadows & borders

src/formats/cssAdvanced.ts

@@ -1,6 +1,7 @@
 import type {TransformedToken, FormatFn, FormatFnArguments, FormattingOptions} from 'style-dictionary/types'
 import {format} from 'prettier'
-import {fileHeader, formattedVariables, sortByName} from 'style-dictionary/utils'
+import {fileHeader, sortByName} from 'style-dictionary/utils'
+import getFormattedVariables from './utilities/getFormattedVariables.js'
 
 const wrapWithSelector = (css: string, selector: string | false): string => {
   // return without selector
@@ -74,7 +75,7 @@ export const cssAdvanced: FormatFn = async ({
     // early abort if no matches
     if (!filteredDictionary.allTokens.length) continue
     // add tokens into root
-    const css = formattedVariables({
+    const css = getFormattedVariables({
       format: 'css',
       dictionary: filteredDictionary,
       outputReferences,