diff --git a/src/Theme.ts b/src/Theme.ts index 49f6aa5..22c98e4 100644 --- a/src/Theme.ts +++ b/src/Theme.ts @@ -104,39 +104,52 @@ export class Theme { } getCSS(theme: T, userPrefix?: string) { - let allCssVariables: CssVariables = {}; - let allCssProperties: T = {} as T; - - Object.keys(theme).forEach((propertyKey) => { - const propertyValue = theme[propertyKey]; - if (!propertyValue) return; + const keys = Object.keys(theme); + + const { cssVariables, cssProperties } = keys.reduce<{ + cssVariables: CssVariables; + cssProperties: T; + }>( + (acc, propertyKey) => { + const propertyValue = theme[propertyKey as keyof T]; + if (!propertyValue) return acc; + + let prefix: string = camelToKebab(propertyKey); + let Property = ThemeProperty; + + if (propertyKey in themePropertiesConfig) { + const config = + themePropertiesConfig[ + propertyKey as keyof typeof themePropertiesConfig + ]; + prefix = config?.prefix ?? prefix; + Property = config?.type ?? Property; + } + + prefix = userPrefix ? `${userPrefix}-${prefix}` : prefix; + + const { variables, properties } = new Property(propertyValue, { + prefix, + }).getCSS(); + + acc.cssVariables = { + ...acc.cssVariables, + ...variables, + }; - let prefix: string = camelToKebab(propertyKey); - let Property = ThemeProperty; + acc.cssProperties[propertyKey as keyof T] = properties as any; - if (propertyKey in themePropertiesConfig) { - const config = themePropertiesConfig[propertyKey]; - prefix = config.prefix ?? prefix; - Property = config.type ?? Property; + return acc; + }, + { + cssVariables: {}, + cssProperties: {} as T, } - - prefix = userPrefix ? `${userPrefix}-${prefix}` : prefix; - - const { cssVariables, cssProperties } = new Property(propertyValue, { - prefix, - }).getCSS(); - - allCssVariables = { - ...allCssVariables, - ...cssVariables, - }; - - allCssProperties[propertyKey as keyof T] = cssProperties as any; - }); + ); return { - cssVariables: allCssVariables, - cssProperties: allCssProperties, + cssVariables, + cssProperties, }; } diff --git a/src/ThemeProperty.ts b/src/ThemeProperty.ts index f4f9071..d6a218d 100644 --- a/src/ThemeProperty.ts +++ b/src/ThemeProperty.ts @@ -20,27 +20,35 @@ export class ThemeProperty { } getCSS() { - let cssVariables: CssVariables = {}; - let cssProperties: FlatThemePropertyConfig = {}; + const keys = Object.keys(this.themeConfig); - Object.keys(this.themeConfig).forEach((key) => { - const value = this.themeConfig[key]; - if (!value) return; + const { variables, properties } = keys.reduce<{ + variables: CssVariables; + properties: FlatThemePropertyConfig; + }>( + (acc, key) => { + const value = this.themeConfig[key]; + if (!value) return acc; - cssVariables[this.getCssVariableName(key)] = this.filterCssVariableValue({ - themePropertyKey: key, - themePropertyValue: value, - }); + acc.variables[this.getCssVariableName(key)] = + this.filterCssVariableValue({ + themePropertyKey: key, + themePropertyValue: value, + }); - cssProperties[key] = this.filterCssPropertyValue({ - themePropertyKey: key, - themePropertyValue: value, - }); - }); + acc.properties[key] = this.filterCssPropertyValue({ + themePropertyKey: key, + themePropertyValue: value, + }); + + return acc; + }, + { variables: {}, properties: {} } + ); return { - cssVariables, - cssProperties, + variables, + properties, }; } diff --git a/src/utils/flattenThemeConfig.ts b/src/utils/flattenThemeConfig.ts index c44bd83..2324306 100644 --- a/src/utils/flattenThemeConfig.ts +++ b/src/utils/flattenThemeConfig.ts @@ -4,26 +4,32 @@ export function flattenThemeConfig( config: ThemePropertyConfig, keyPrefix: string = "" ): FlatThemePropertyConfig { - let flattenedThemeConfig: FlatThemePropertyConfig = {}; - - Object.keys(config).forEach((_key) => { - const key = keyPrefix ? `${keyPrefix}-${_key}` : _key; - const value = config[_key]; - if (!value) return; - - if (typeof value === "string") { - flattenedThemeConfig[key] = value; - return; - } - - const { DEFAULT, ...rest } = value; - if (DEFAULT) { - flattenedThemeConfig[key] = DEFAULT; - } - - const nestedThemeProperty = flattenThemeConfig(rest, key); - flattenedThemeConfig = { ...flattenedThemeConfig, ...nestedThemeProperty }; - }); + const keys = Object.keys(config); + + const flattenedThemeConfig = keys.reduce( + (acc, _key) => { + const key = keyPrefix ? `${keyPrefix}-${_key}` : _key; + const value = config[_key]; + if (!value) return acc; + + if (typeof value === "string") { + acc[key] = value; + return acc; + } + + const { DEFAULT, ...rest } = value; + if (DEFAULT) { + acc[key] = DEFAULT; + } + + const nestedThemeProperty = flattenThemeConfig(rest, key); + + acc = { ...acc, ...nestedThemeProperty }; + + return acc; + }, + {} + ); return flattenedThemeConfig; }