Function for creating theme functions out of a theme file for styled components

createThemeFunctions.ts

import optionalChain from 'utils/helperFunctions/optionalChain';

const recursivelyCreateThemeFunctions = (
  themeObject: ThemeObject,
  steps: (string | number)[] = [],
): ThemeFunction | ThemeObjectReturn => {
  if (Array.isArray(themeObject)) {
    // @ts-ignore
    return themeObject.map((value, index) =>
      recursivelyCreateThemeFunctions(value, [...steps, index]),
    );
  }
  if (typeof themeObject === 'object' && themeObject !== null) {
    return {
      ...Object.keys(themeObject)
        .map(key => ({
          [key]: recursivelyCreateThemeFunctions(themeObject[key], [
            ...steps,
            key,
          ]),
        }))
        .reduce((a, b) => ({ ...a, ...b }), {}),
    };
  }

  return ({ theme }) => optionalChain(theme, ...steps);
};

type ThemeObject = { [index: string]: ThemeObject } | string | number | any[];

type ThemeObjectReturn =
  | { [index: string]: ThemeFunction | ThemeObjectReturn }
  | ({ [index: string]: ThemeFunction | ThemeObjectReturn } | ThemeFunction)[];

type ThemeFunction = (param: { theme: any }) => any;

const createThemeFunctions = <Theme>(
  themeObject: ThemeObject,
): { [K in keyof Theme]: ThemeFunction } => {
  // @ts-ignore
  return recursivelyCreateThemeFunctions(themeObject);
};

export default createThemeFunctions;

usage.ts

import { variables } from 'cssSettings';
import createThemeFunctions from 'createThemeFunctions';

const theme = createThemeFunctions<typeof variables>(variables);

export default theme;