Add Universal Theming Classes

src/renderer/coremods/utc/index.tsx

@@ -0,0 +1,46 @@
+const UTC_CLASS_PREFIX = "utc_";
+
+const ClassMap = new Map<string, string>();
+
+const utcRegex = new RegExp(`${UTC_CLASS_PREFIX}\\S+\\s*`, "g");
+
+const classNameRegex = /(\w+?)_([\w\d_$]+)/g;
+
+const classSuffixHashRegex = /[_\d$]/;
+
+/**
+ * @internal
+ * @hidden
+ */
+
+function getClassName(input: string): string {
+  const cached = ClassMap.get(input);
+  if (cached) return cached;
+
+  const baseClasses = input.includes(UTC_CLASS_PREFIX)
+    ? input.replaceAll(utcRegex, "").trim()
+    : input;
+
+  const utcSuffixes = [...baseClasses.matchAll(classNameRegex)].reduce(
+    (prefix, [_, name, suffix]) =>
+      classSuffixHashRegex.test(suffix) && !prefix.includes(name)
+        ? `${prefix} utc_${name}`
+        : prefix,
+    "",
+  );
+
+  const unified = `${baseClasses}${utcSuffixes}`;
+  ClassMap.set(input, unified);
+  return unified;
+}
+
+/**
+ * @internal
+ * @hidden
+ */
+
+export function _patchClassName(props: Record<string, string>, type: string): void {
+  if (!props.className || type === "html") return;
+
+  props.className = getClassName(props.className);
+}

src/renderer/coremods/utc/plaintextPatches.ts

@@ -0,0 +1,13 @@
+import { type PlaintextPatch } from "src/types";
+
+export default [
+  {
+    find: `.jsx=`,
+    replacements: [
+      {
+        match: /return{\$\$typeof:\i,type:(\i).+?props:(\i)/,
+        replace: (suffix, type, props) => `$exports?._patchClassName(${props}, ${type});${suffix}`,
+      },
+    ],
+  },
+] as PlaintextPatch[];

src/renderer/managers/coremods.ts

@@ -17,6 +17,7 @@ import rpcPlaintext from "../coremods/rpc/plaintextPatches";
 import settingsPlaintext from "../coremods/settings/plaintextPatches";
 import themeUtilsPlaintext from "../coremods/themeUtils/plaintextPatches";
 import titleBarPlaintext from "../coremods/titleBar/plaintextPatches";
+import utcPlaintext from "../coremods/utc/plaintextPatches";
 
 const logger = Logger.api("Coremods");
 
@@ -39,6 +40,7 @@ export namespace coremods {
   export let reactErrorDecoder: Coremod;
   export let rpc: Coremod;
   export let settings: Coremod;
+  export let utc: Coremod;
   export let themeUtils: Coremod;
   export let watcher: Coremod;
   export let welcome: Coremod;
@@ -66,6 +68,7 @@ export async function startAll(): Promise<void> {
   coremods.reactErrorDecoder = await import("../coremods/reactErrorDecoder");
   coremods.rpc = await import("../coremods/rpc");
   coremods.settings = await import("../coremods/settings");
+  coremods.utc = await import("../coremods/utc");
   coremods.themeUtils = await import("../coremods/themeUtils");
   coremods.watcher = await import("../coremods/watcher");
   coremods.welcome = await import("../coremods/welcome");
@@ -102,5 +105,6 @@ export function runPlaintextPatches(): void {
     { patch: settingsPlaintext, name: "replugged.coremod.settings" },
     { patch: themeUtilsPlaintext, name: "replugged.coremod.themeUtils" },
     { patch: titleBarPlaintext, name: "replugged.coremod.titleBar" },
+    { patch: utcPlaintext, name: "replugged.coremod.utc" },
   ].forEach(({ patch, name }) => patchPlaintext(patch, name));
 }