refactor: reusable css modula compatible logic

components/JsonToHtml/utils.tsx

@@ -1,5 +1,7 @@
 import { renderOptions } from "./renderOptions"
 
+import styles from "./jsontohtml.module.css"
+
 import type { Node } from "@/types/requests/utils/edges"
 import type { EmbedByUid } from "@/types/transitionTypes/jsontohtml"
 import {
@@ -136,3 +138,19 @@ export function nodesToHtml(
   const fullRenderOptions = { ...renderOptions, ...overrideRenderOptions }
   return nodes.map((node) => nodeToHtml(node, embeds, fullRenderOptions))
 }
+
+export function makeCssModuleCompatibleClassName(
+  className: string | undefined,
+  formatType: "ul"
+): string {
+  if (!className) return ""
+
+  if (formatType === "ul" && hasAvailableULFormat(className)) {
+    // @ts-ignore: We want to set css modules classNames even if it does not correspond
+    // to an existing class in the module style sheet. Due to our css modules plugin for
+    // typescript, we cannot do this without the ts-ignore
+    return styles[className] || className
+  }
+
+  return className
+}