feat(processor): support theme references in mapping

eva-design · Mar 13, 2020 · 58cd411 · 58cd411
1 parent 4f38696
commit 58cd411
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 5 deletions.
diff --git a/packages/processor/js/src/processor/meta/metaProcessor.ts b/packages/processor/js/src/processor/meta/metaProcessor.ts
@@ -29,10 +29,12 @@ export class MetaProcessor implements Processor<MappingProcessorParamsType, Them
   public process(params: MappingProcessorParamsType): ThemeStyleType {
     const { mapping, meta, theme } = params;
 
+    const strictTheme: ThemedStyleType = this.processStrictTheme(theme);
+
     const entries = meta.reduce((acc: ThemeStyleType, controlMeta: MappingMetaType) => {
       const { name, appearance, variants, states } = controlMeta;
 
-      const nextAppearanceEntries = createAllStyles(mapping, name, appearance, variants, states, theme);
+      const nextAppearanceEntries = createAllStyles(mapping, name, appearance, variants, states, strictTheme);
       const prevAppearanceStyles = acc[name];
       const nextAppearanceStyles = toObject(nextAppearanceEntries);
 
@@ -42,6 +44,41 @@ export class MetaProcessor implements Processor<MappingProcessorParamsType, Them
     return this.withControlMeta(mapping, entries);
   }
 
+  private processStrictTheme(theme: StrictTheme): ThemedStyleType {
+    return Object.keys(theme).reduce((acc: ThemedStyleType, key: string): ThemedStyleType => {
+      return { ...acc, [key]: this.getStrictThemeValue(key, theme, key) };
+    }, {});
+  }
+
+  private getStrictThemeValue(name: string, theme: StrictTheme, fallback?: any) {
+
+    if (this.isReference(name)) {
+      const themeKey: string = this.createKeyFromReference(name);
+      return this.findValue(themeKey, theme) || fallback;
+    }
+
+    return this.findValue(name, theme) || fallback;
+  }
+
+  private findValue(name: string, theme: StrictTheme): string {
+    const value: any = theme[name];
+
+    if (this.isReference(value)) {
+      const themeKey: string = this.createKeyFromReference(value);
+      return this.findValue(themeKey, theme);
+    }
+
+    return value;
+  }
+
+  private isReference(value: string): boolean {
+    return `${value}`.startsWith('$');
+  }
+
+  private createKeyFromReference(value: string): string {
+    return `${value}`.substring(1);
+  }
+
   private withControlMeta(mapping: ThemeMappingType, style: NoMetaThemeStyleType): ThemeStyleType {
     return Object.keys(style).reduce((acc: ThemeStyleType, control: string) => {
       const controlEntry: ControlThemedStyleType = {

diff --git a/packages/processor/js/src/service/style/style.service.ts b/packages/processor/js/src/service/style/style.service.ts
@@ -77,7 +77,7 @@ export function createStyle(mapping: ThemeMappingType,
                             appearance: string,
                             variants: string[] = [],
                             states: string[] = [],
-                            theme: StrictTheme = {}): ThemedStyleType {
+                            theme: ThemedStyleType = {}): ThemedStyleType {
 
   const normalizedAppearance: string[] = normalizeAppearance(mapping, component, appearance);
   const normalizedVariants: string[] = normalizeVariants(mapping, component, variants);
@@ -123,7 +123,7 @@ export function createAllStyles(mapping: ThemeMappingType,
                                 appearance: string,
                                 variants: string[],
                                 states: string[],
-                                theme: StrictTheme): [string, ThemedStyleType][] {
+                                theme: ThemedStyleType): [string, ThemedStyleType][] {
 
   const stateless = createStyleEntry(mapping,
     component,
@@ -289,7 +289,7 @@ function createStateVariations(states: string[], separator: string, result: stri
   return createStateVariations(states, separator, [...result, ...next]);
 }
 
-function withStrictTokens(mapping: StatelessMappingType, theme: StrictTheme): StatelessMappingType {
+function withStrictTokens(mapping: StatelessMappingType, theme: ThemedStyleType): StatelessMappingType {
   return Object.keys(mapping).reduce((acc: StatelessMappingType, next: string): StatelessMappingType => {
     const currentToken: ParameterType = mapping[next];
     const nextToken: ParameterType = theme[currentToken] || currentToken;
@@ -344,7 +344,7 @@ function createStyleEntry(mapping: ThemeMappingType,
                           appearance: string,
                           variant: string = '',
                           state: string = '',
-                          theme: StrictTheme = {}): [string, ThemedStyleType] {
+                          theme: ThemedStyleType = {}): [string, ThemedStyleType] {
 
   const value = createStyle(
     mapping,