feat: use css vars for aliases

src/core/build.ts

@@ -13,16 +13,44 @@ import { loadSources } from './load-sources'
 import { Config } from './config'
 import { isColor } from './utils'
 import { enhanceWhitepaperConfig } from './enhance-whitepaper-config'
+import { replaceAliasToVariable } from './replace-alias-to-variable'
 
 const store = new Map()
 
 StyleDictionaryApi.registerFormat({
   name: 'css/whitepaper',
-  formatter: (dictionary) => {
+  formatter(dictionary, config) {
+    const defaultOptions = { selector: ':root', useAliasVariables: false }
+    const options = Object.assign(defaultOptions, (this as any).options)
+
     const whitepaper = store.get('whitepaper')
     const group = dictionary.allProperties.length ? dictionary.allProperties[0].group : 'unknown'
     const selector = `.Theme_${group}_${whitepaper[group]}`
-    return `${selector} {\n${variablesWithPrefix('    --', dictionary.allProperties)}\n}\n`
+
+    const transformers = config.transforms.filter((transform) => transform.type === 'name')
+
+    const props = options.useAliasVariables
+      ? replaceAliasToVariable(dictionary.allProperties, transformers[0].transformer)
+      : dictionary.allProperties
+
+    return `${selector} {\n${variablesWithPrefix('    --', props)}\n}\n`
+  },
+})
+
+// NOTE: Override default css/variables format.
+StyleDictionaryApi.registerFormat({
+  name: 'css/variables',
+  formatter(dictionary, config) {
+    const defaultOptions = { selector: ':root', useAliasVariables: false }
+    const options = Object.assign(defaultOptions, (this as any).options)
+
+    const transformers = config.transforms.filter((transform) => transform.type === 'name')
+
+    const props = options.useAliasVariables
+      ? replaceAliasToVariable(dictionary.allProperties, transformers[0].transformer)
+      : dictionary.allProperties
+
+    return `${options.selector} {\n${variablesWithPrefix('    --', props)}\n}\n`
   },
 })
 

src/core/replace-alias-to-variable.ts

@@ -0,0 +1,18 @@
+import merge from 'deepmerge'
+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 {
+  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})`
+    }
+  }
+  return nextProps as T
+}

src/core/utils.ts

@@ -15,6 +15,10 @@ export function isColor(value: string | number): boolean {
   return /^(#|rgba?|hsla?|color|transparent)/.test(String(value))
 }
 
+export function isAlias(value: string | number): boolean {
+  return /^{.+}$/.test(String(value))
+}
+
 export function throttle<T extends []>(
   callback: (..._: T) => void,
   delay: number,