Serialize CSS with reduce

src/Theme.ts

@@ -104,39 +104,52 @@ export class Theme<T extends ThemeProps = ThemeProps> {
   }
 
   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,
     };
   }
 

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,
     };
   }
 

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<FlatThemePropertyConfig>(
+    (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;
 }