fix: use transforms for vars with mapping

bem · Aug 4, 2020 · b8709d7 · b8709d7
1 parent ca43cc4
commit b8709d7
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 5 deletions.
diff --git a/src/core/build.ts b/src/core/build.ts
@@ -30,7 +30,7 @@ StyleDictionaryApi.registerFormat({
     const transformers = config.transforms.filter((transform) => transform.type === 'name')
 
     const props = options.useAliasVariables
-      ? replaceAliasToVariable(dictionary.allProperties, transformers[0].transformer)
+      ? replaceAliasToVariable(dictionary.allProperties, transformers)
       : dictionary.allProperties
 
     return `${selector} {\n${variablesWithPrefix('    --', props)}\n}\n`
@@ -47,7 +47,7 @@ StyleDictionaryApi.registerFormat({
     const transformers = config.transforms.filter((transform) => transform.type === 'name')
 
     const props = options.useAliasVariables
-      ? replaceAliasToVariable(dictionary.allProperties, transformers[0].transformer)
+      ? replaceAliasToVariable(dictionary.allProperties, transformers)
       : dictionary.allProperties
 
     return `${options.selector} {\n${variablesWithPrefix('    --', props)}\n}\n`

diff --git a/src/core/replace-alias-to-variable.ts b/src/core/replace-alias-to-variable.ts
@@ -1,17 +1,27 @@
 import merge from 'deepmerge'
+import { InjectedTransformer } from 'style-dictionary'
+
 import { isAlias } from './utils'
 
 /**
  * Returns props with replaced alias with css-variables.
  * @param props Props list
  * @param transformer Name transformer
  */
-export function replaceAliasToVariable<T extends Array<any>>(props: T, transformer: any): T {
+export function replaceAliasToVariable<T extends Array<any>>(
+  props: T,
+  transformers: InjectedTransformer[],
+): T {
   const nextProps = merge([], props)
   for (const prop of nextProps) {
     if (isAlias(prop.original.value)) {
-      const variableName = transformer({ path: prop.original.value.replace(/value/, '') }, {})
-      prop.value = `var(--${variableName})`
+      const nextProp = transformers.reduce(
+        (prevProp, value) => {
+          return { path: prevProp.path, name: value.transformer(prevProp, {}) }
+        },
+        { ...prop, path: prop.original.value.replace(/value/, '') },
+      )
+      prop.value = `var(--${nextProp.name})`
     }
   }
   return nextProps as T