adding tests for preprocessor

src/PrimerStyleDictionary.ts

@@ -37,7 +37,7 @@ import {
   cssAdvanced,
   jsonFigma,
 } from './formats/index.js'
-import {overrideThemeValue} from './preprocessor/overrideThemeValue.js'
+import {themeOverride} from './preprocessor/themeOverride.js'
 
 /**
  * @name {@link PrimerStyleDictionary}
@@ -152,4 +152,4 @@ PrimerStyleDictionary.registerTransform(fontFamilyToCss)
 
 PrimerStyleDictionary.registerTransform(fontFamilyToFigma)
 
-PrimerStyleDictionary.registerPreprocessor(overrideThemeValue)
+PrimerStyleDictionary.registerPreprocessor(themeOverride)

src/platforms/css.ts

@@ -24,7 +24,7 @@ export const css: PlatformInitializer = (outputFile, prefix, buildPath, options)
   return {
     prefix,
     buildPath,
-    preprocessors: ['overrideThemeValue'],
+    preprocessors: ['themeOverride'],
     transforms: [
       'name/pathToKebabCase',
       'color/hex',
@@ -40,7 +40,9 @@ export const css: PlatformInitializer = (outputFile, prefix, buildPath, options)
     ],
     options: {
       basePxFontSize: 16,
-      theme: options?.theme,
+      themeOverrides: {
+        theme: options?.theme,
+      },
     },
     files: [
       {

src/preprocessor/themeOverride.test.ts

@@ -0,0 +1,144 @@
+import {getMockDictionary} from '../test-utilities/getMockDictionary.js'
+import {themeOverride} from './themeOverride.js'
+import {getMockToken} from '../test-utilities/getMockToken.js'
+
+describe('Preprocessor: themeOverride', () => {
+  it('works with default settings', () => {
+    const dictionary = getMockDictionary({
+      valueOverride: getMockToken({
+        name: 'red',
+        description: 'This is a description',
+        $value: 'transformedValue',
+        path: ['tokens', 'subgroup', 'red'],
+        $extensions: {
+          'org.primer.overrides': {
+            dark: 'darkValue',
+          },
+        },
+      }),
+      objectOverride: getMockToken({
+        name: 'red',
+        description: 'This is a description',
+        $value: 'transformedValue',
+        path: ['tokens', 'subgroup', 'red'],
+        $extensions: {
+          'org.primer.overrides': {
+            dark: {
+              $value: 'darkValue',
+              description: 'DarkMode description',
+            },
+          },
+        },
+      }),
+    })
+
+    const resultDictionary = getMockDictionary({
+      valueOverride: getMockToken({
+        name: 'red',
+        description: 'This is a description',
+        $value: 'darkValue',
+        path: ['tokens', 'subgroup', 'red'],
+        $extensions: {
+          'org.primer.overrides': {
+            dark: 'darkValue',
+          },
+        },
+      }),
+      objectOverride: getMockToken({
+        name: 'red',
+        description: 'DarkMode description',
+        $value: 'darkValue',
+        path: ['tokens', 'subgroup', 'red'],
+        $extensions: {
+          'org.primer.overrides': {
+            dark: {
+              $value: 'darkValue',
+              description: 'DarkMode description',
+            },
+          },
+        },
+      }),
+    })
+
+    expect(themeOverride.preprocessor(dictionary.tokens, {})).toStrictEqual(dictionary.tokens)
+    expect(
+      themeOverride.preprocessor(dictionary.tokens, {
+        options: {themeOverrides: {theme: 'dark'}},
+      }),
+    ).toStrictEqual(resultDictionary.tokens)
+  })
+})
+
+describe('Preprocessor: themeOverride', () => {
+  it('works with custom configuration', () => {
+    const dictionary = getMockDictionary({
+      valueOverride: getMockToken({
+        name: 'red',
+        description: 'This is a description',
+        value: 'transformedValue',
+        path: ['tokens', 'subgroup', 'red'],
+        $extensions: {
+          theme: {
+            dark: 'darkValue',
+          },
+        },
+      }),
+      objectOverride: getMockToken({
+        name: 'red',
+        description: 'This is a description',
+        value: 'transformedValue',
+        path: ['tokens', 'subgroup', 'red'],
+        $extensions: {
+          theme: {
+            dark: {
+              value: 'darkValue',
+              description: 'DarkMode description',
+            },
+          },
+        },
+      }),
+    })
+
+    const resultDictionary = getMockDictionary({
+      valueOverride: getMockToken({
+        name: 'red',
+        description: 'This is a description',
+        value: 'darkValue',
+        path: ['tokens', 'subgroup', 'red'],
+        $extensions: {
+          theme: {
+            dark: 'darkValue',
+          },
+        },
+      }),
+      objectOverride: getMockToken({
+        name: 'red',
+        description: 'DarkMode description',
+        value: 'darkValue',
+        path: ['tokens', 'subgroup', 'red'],
+        $extensions: {
+          theme: {
+            dark: {
+              value: 'darkValue',
+              description: 'DarkMode description',
+            },
+          },
+        },
+      }),
+    })
+
+    expect(
+      themeOverride.preprocessor(dictionary.tokens, {
+        themeOverrides: {
+          valueProp: 'value',
+          extensionProp: 'theme',
+        },
+      }),
+    ).toStrictEqual(dictionary.tokens)
+    expect(
+      themeOverride.preprocessor(dictionary.tokens, {
+        options: {themeOverrides: {theme: 'dark', valueProp: 'value', extensionProp: 'theme'}},
+      }),
+    ).toStrictEqual(resultDictionary.tokens)
+  })
+})

src/preprocessor/themeOverride.ts

@@ -0,0 +1,25 @@
+import type {PlatformConfig, PreprocessedTokens, Preprocessor} from 'style-dictionary/types'
+import {transformTokens} from './utilities/transformTokens.js'
+
+export const themeOverride: Preprocessor = {
+  name: 'themeOverride',
+  preprocessor: (dictionary: PreprocessedTokens, config: PlatformConfig): PreprocessedTokens => {
+    const extensionProp = config.options?.themeOverrides?.extensionProp || 'org.primer.overrides'
+    const valueProp = config.options?.themeOverrides?.valueProp || '$value'
+    const currentTheme = config.options?.themeOverrides?.theme
+
+    const tokens = transformTokens(dictionary, token => {
+      // return early if no theme value is set
+      if (!currentTheme || !token.$extensions?.[extensionProp] || !token.$extensions?.[extensionProp][currentTheme])
+        return token
+      // get override
+      const override = token.$extensions?.[extensionProp][currentTheme]
+      // token an theme value exist
+      return {
+        ...token,
+        ...(typeof override === 'object' ? override : {[valueProp]: override}),
+      }
+    })
+    return tokens
+  },
+}

src/test-utilities/getMockDictionary.ts

@@ -1,5 +1,26 @@
-import type StyleDictionary from 'style-dictionary'
 import {getMockToken} from './getMockToken.js'
+import type {Dictionary, TransformedToken, TransformedTokens} from 'style-dictionary/types'
+
+const flattenTokens = (tokenTree: TransformedTokens): TransformedToken[] => {
+  const output: TransformedToken[] = []
+
+  const getToken = (tokens: TransformedTokens, flatTokens: TransformedToken[]) => {
+    for (const token of Object.values(tokens)) {
+      if (
+        Object.prototype.hasOwnProperty.call(token, 'value') ||
+        Object.prototype.hasOwnProperty.call(token, '$value')
+      ) {
+        flatTokens.push(token as TransformedToken)
+        continue
+      }
+      getToken(token, flatTokens)
+    }
+  }
+
+  getToken(tokenTree, output)
+
+  return output
+}
 
 const mockDictionaryDefault = {
   tokens: {
@@ -14,11 +35,7 @@ const mockDictionaryDefault = {
   },
 }
 
-export const getMockDictionary = (tokens?: StyleDictionary.TransformedTokens): StyleDictionary.Dictionary => ({
-  allTokens: Object.values((tokens || mockDictionaryDefault).tokens.subgroup),
+export const getMockDictionary = (tokens?: TransformedTokens): Dictionary => ({
+  allTokens: flattenTokens(tokens || mockDictionaryDefault),
   tokens: tokens || mockDictionaryDefault,
-  allProperties: Object.values((tokens || mockDictionaryDefault).tokens.subgroup),
-  properties: tokens || mockDictionaryDefault,
-  usesReference: _value => false,
-  getReferences: _value => [],
 })

src/tokens/functional/color/components/header.json5 → src/tokens/component/header.json5

@@ -10,20 +10,12 @@
           group: 'component',
           scopes: ['bgColor'],
         },
-        'org.primer.overrides': [
-          {
-            theme: 'light',
-            override: {
-              $value: '{base.color.neutral.13}',
-            },
+        'org.primer.overrides': {
+          light: '{base.color.neutral.13}',
+          dark: {
+            $value: '{base.color.neutral.10}',
           },
-          {
-            theme: 'dark',
-            override: {
-              $value: '{base.color.neutral.10}',
-            },
-          },
-        ],
+        },
       },
     },
     borderColor: {
@@ -36,20 +28,14 @@
           group: 'component',
           scopes: ['borderColor'],
         },
-        'org.primer.overrides': [
-          {
-            theme: 'light',
-            override: {
-              $value: '{base.color.neutral.10}',
-            },
+        'org.primer.overrides': {
+          light: {
+            $value: '{base.color.neutral.10}',
           },
-          {
-            theme: 'dark',
-            override: {
-              $value: '{base.color.neutral.7}',
-            },
+          dark: {
+            $value: '{base.color.neutral.7}',
           },
-        ],
+        },
       },
     },
   },

src/tokens/functional/color/components/topicTag.json5 → src/tokens/component/topicTag.json5

@@ -9,7 +9,7 @@
           group: 'component',
           scopes: ['borderColor'],
         },
-        'org.primer.theme': {
+        'org.primer.overrides': {
           light: '{base.color.transparent}',
           dark: '{base.color.transparent}',
           'dark-high-contrast': '{borderColor.accent.emphasis}',