fix CSS modules support

Author: mayank1513

lib/nthul/src/client/theme-switcher/theme-switcher.tsx

@@ -87,16 +87,16 @@ export interface ApplyClassesProps {
 }
 
 function applyClasses({ targets, theme, resolvedColorScheme, styles }: ApplyClassesProps) {
-  let cls = ["dark", "light", theme, resolvedColorScheme];
-  if (styles) cls = cls.map(c => styles[c]);
+  let cls = ["dark", "light", `th-${theme}`, resolvedColorScheme];
+  if (styles) cls = cls.map(c => styles[c] ?? c);
 
   targets.forEach(t => {
     t?.classList.remove(cls[0]); // dark
     t?.classList.remove(cls[1]); // light
     t?.classList.forEach(c => {
       if (/(?:^|_)th-/.exec(c)) t.classList.remove(c);
     });
-    t?.classList.add(`th-${cls[2]}`); // theme
+    t?.classList.add(cls[2]); // theme
     t?.classList.add(cls[3]); // resolvedColorScheme
   });
 }

lib/nthul/src/server/server-target/server-target.tsx

@@ -29,18 +29,13 @@ interface ServerTargetProps {
 export function ServerTarget({ tag, targetId, styles }: ServerTargetProps) {
   const key = targetId || DEFAULT_ID;
   const val = cookies().get(key)?.value ?? ",light";
-  let [theme, cs] = val.split(",") as [string, string];
+  const [theme, cs] = val.split(",") as [string, string];
   /** to increase specificity for scoped targets. */
-  let specificity = targetId ? "nth-scoped" : "";
+  const specificity = targetId ? "nth-scoped" : "";
 
-  if (styles) {
-    theme = styles[theme];
-    cs = styles[cs];
-    specificity = styles[specificity] ?? "";
-  }
-
-  const cls = `th-${theme} ${cs} ${specificity}`;
+  let classNames = [`th-${theme}`, cs, specificity];
+  if (styles) classNames = classNames.map(cls => styles[cls] ?? cls);
 
   const Tag = tag ?? "div";
-  return <Tag className={cls} data-nth="next" data-testid="server-target" id={key} />;
+  return <Tag className={classNames.join(" ")} data-nth="next" data-testid="server-target" id={key} />;
 }