More robust style tag

Author: pomber

packages/mdx/src/remark/transform.ts

@@ -96,20 +96,47 @@ function getUsedCodeHikeComponentNames(
   return usage
 }
 
+const styleCache = new Map<string, string>()
+
+async function getStyle(
+  theme: CodeHikeConfig["theme"],
+  themeName: string
+) {
+  if (styleCache.has(themeName)) {
+    return styleCache.get(themeName)
+  }
+  const rules = await getCSSVariables(theme)
+  const style = `[data-ch-theme="${themeName}"] \{  ${rules} \}`
+  styleCache.set(themeName, style)
+  return style
+}
+
 async function getCSSVariables(
   theme: CodeHikeConfig["theme"]
 ) {
   const themeColors = await getThemeColors(theme)
+
+  if (!themeColors || typeof themeColors !== "object") {
+    throw new Error(
+      "[Code Hike error] Unknown theme format"
+    )
+  }
   let rules = ""
   for (const [first, value] of Object.entries(
     themeColors
   )) {
+    if (!value) {
+      continue
+    }
     if (typeof value === "string") {
       rules += `--ch-t-${first}: ${value};`
     } else {
       for (const [second, svalue] of Object.entries(
         value
       )) {
+        if (!svalue) {
+          continue
+        }
         rules += `--ch-t-${first}-${second}: ${svalue};`
       }
     }
@@ -128,10 +155,9 @@ async function addConfig(
   config: CodeHikeConfig
 ) {
   const { theme } = config
-  const rules = await getCSSVariables(theme)
   const themeName =
     typeof theme === "string" ? theme : theme.name
-  const style = `[data-ch-theme="${themeName}"] \{  ${rules} \}`
+  const style = await getStyle(theme, themeName)
 
   const codeConfig = {
     staticMediaQuery: config.staticMediaQuery,