Generate Styles for blocks

generateStyles.ts

import { get } from "lodash";
import getPalette from "tailwindcss-palette-generator";
import plugin from "tailwindcss/plugin";
import { createTailwindcss } from "@mhsdesign/jit-browser-tailwindcss";

export const getTailwindConfig = (options: any, plugins: any[] = []) => {
  const primary = get(options, "primaryColor", "#000");
  const secondary = get(options, "secondaryColor", "#ccc");

  const headingFont = get(options, "headingFont", "Inter");
  const bodyFont = get(options, "bodyFont", "Inter");
  const borderRadius = get(options, "roundedCorners", "0");

  const BG_LIGHT_MODE = get(options, "bodyBgLightColor", "#fff");
  const BG_DARK_MODE = get(options, "bodyBgDarkColor", "#000");
  const TEXT_DARK_MODE = get(options, "bodyTextDarkColor", "#000");
  const TEXT_LIGHT_MODE = get(options, "bodyTextLightColor", "#fff");

  const palette = getPalette([
    { color: primary, name: "primary" },
    { color: secondary, name: "secondary" },
  ]);
  const colors: Record<string, string> = {
    bgLightMode: BG_LIGHT_MODE,
    bgDarkMode: BG_DARK_MODE,
    textLightMode: TEXT_LIGHT_MODE,
    textDarkMode: TEXT_DARK_MODE,
  };
  const theme = {
    extend: {
      fontFamily: { heading: [headingFont], body: [bodyFont] },
      borderRadius: { global: `${!borderRadius ? "0" : borderRadius}px` },
      colors: { ...palette, ...colors },
    },
  };
  return {
    darkMode: "class",
    theme: theme,
    plugins: plugins,
  };
};

export const generateCSS = async (str: string, themeConfiguration: any) => {
  const plugins = [
    plugin(function ({ addBase, theme }: any) {
      addBase({
        "h1,h2,h3,h4,h5,h6": {
          fontFamily: theme("fontFamily.heading"),
        },
        body: {
          fontFamily: theme("fontFamily.body"),
          color: theme("colors.textLightMode"),
          backgroundColor: theme("colors.bgLightMode"),
        },
        ".dark body": {
          color: theme("colors.textDarkMode"),
          backgroundColor: theme("colors.bgDarkMode"),
        },
      });
    }),
  ];
  const tailwind = createTailwindcss({
    //@ts-ignore
    tailwindConfig: getTailwindConfig(themeConfiguration, plugins),
  });
  return await tailwind.generateStylesFromContent(
    `
    @tailwind base;
    @tailwind components;
    @tailwind utilities;
`,
    [str],
  );
};