feat: add mapper for token names

src/core-v2/build.ts

@@ -3,6 +3,7 @@ import StyleDictionaryApi from 'style-dictionary'
 import { createWhitepaperConfig } from './whitepaper-config'
 import { variablesWithPrefix } from './variable-with-prefix'
 import { getCssModifierWithPlatform } from './utils'
+import { loadMappers } from './mappers'
 
 const store = new Map()
 
@@ -16,15 +17,26 @@ StyleDictionaryApi.registerFormat({
   },
 })
 
-export function build(config: any): any {
+StyleDictionaryApi.registerTransform({
+  name: 'name/mapper',
+  type: 'name',
+  transformer: (prop) => {
+    const mapper = store.get('mapper') || {}
+    return mapper[prop.name] || prop.name
+  },
+})
+
+export async function build(config: any): Promise<any> {
   const normalizedConfig = Array.isArray(config) ? config : [config]
 
   for (const themeConfig of normalizedConfig) {
+    store.set('mapper', await loadMappers(themeConfig.mappers))
     for (const themeFileConfig of themeConfig.files) {
       let styleDictionaryConfig: any = {}
       if (themeFileConfig.format === 'css/whitepaper') {
         store.set('theme', getCssModifierWithPlatform(themeConfig.name))
         styleDictionaryConfig = createWhitepaperConfig({
+          // TODO: Add sort by platform for all sources.
           source: themeConfig.source,
           theme: themeConfig.name,
           outDir: themeConfig.outDir,

src/core-v2/mappers.ts

@@ -0,0 +1,10 @@
+import glob from 'fast-glob'
+import { readJSON } from 'fs-extra'
+
+export async function loadMappers(path: string): Promise<any> {
+  const result = {}
+  for (const file of await glob(path)) {
+    Object.assign(result, await readJSON(file))
+  }
+  return result
+}

src/core-v2/whitepaper-config.ts

@@ -14,7 +14,14 @@ export function createWhitepaperConfig({ source, theme, outDir }: any): any {
     platforms: {
       css: {
         buildPath: outDir.endsWith('/') ? outDir : `${outDir}/`,
-        transformGroup: 'css',
+        transforms: [
+          'attribute/cti',
+          'name/cti/kebab',
+          'time/seconds',
+          'size/rem',
+          'color/css',
+          'name/mapper',
+        ],
         files: Object.keys(whitepaper).map((file: any) => ({
           destination: `${getFolderWithPlatform(theme)}/${file}.css`,
           format: 'css/whitepaper',