support CSS modules

react18-tools · Feb 27, 2024 · 8dca406 · 8dca406
1 parent 83576e3
commit 8dca406
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 12 deletions.
diff --git a/lib/nextjs-themes/src/client/theme-switcher/theme-switcher.tsx b/lib/nextjs-themes/src/client/theme-switcher/theme-switcher.tsx
@@ -10,6 +10,8 @@ export interface ThemeSwitcherProps {
   forcedColorScheme?: ColorSchemeType;
   targetSelector?: string;
   themeTransition?: string;
+  /** provide styles object imported from CSS/SCSS modules, if you are using CSS/SCSS modules. */
+  styles?: Record<string, string>;
 }
 
 function useMediaQuery(setThemeState: SetStateAction<ThemeStoreType>) {
@@ -63,14 +65,16 @@ export interface UpdateProps {
 
 const updateDOM = (
   { resolvedTheme, resolvedColorScheme, resolvedColorSchemePref, th }: UpdateProps,
-  targetSelector?: string,
+  props: ThemeSwitcherProps,
 ) => {
+  const { targetSelector, styles } = props;
   const target = document.querySelector(targetSelector || `#${DEFAULT_ID}`);
+  let classes = [resolvedColorScheme, `theme-${resolvedTheme}`, `th-${th}`, `csp-${resolvedColorSchemePref}`];
+  if (styles) classes = classes.map(cls => styles[cls] ?? cls);
   /** don't apply theme to documentElement for localized targets */
   [target, targetSelector && target ? null : document.documentElement].forEach(target => {
     /** ensuring that class 'dark' is always present when dark color scheme is applied to support Tailwind  */
-    if (target)
-      target.className = `${resolvedColorScheme} theme-${resolvedTheme} th-${th} csp-${resolvedColorSchemePref}`;
+    if (target) target.className = classes.join(" ");
     target?.setAttribute("data-th", th);
     target?.setAttribute("data-theme", resolvedTheme);
     target?.setAttribute("data-color-scheme", resolvedColorScheme);
@@ -112,7 +116,7 @@ export function useThemeSwitcher(props: ThemeSwitcherProps) {
     const restoreTransitions = disableAnimation(props.themeTransition);
 
     const resolvedData = resolveTheme(themeState, props);
-    const shouldCreateCookie = updateDOM(resolvedData, props.targetSelector);
+    const shouldCreateCookie = updateDOM(resolvedData, props);
     if (tInit < Date.now() - 300) {
       const stateStr = encodeState(themeState);
       const key = props.targetSelector || DEFAULT_ID;

diff --git a/lib/nextjs-themes/src/server/nextjs/server-side-wrapper/server-side-wrapper.tsx b/lib/nextjs-themes/src/server/nextjs/server-side-wrapper/server-side-wrapper.tsx
@@ -16,10 +16,12 @@ export interface NextJsSSRThemeSwitcherProps extends HTMLProps<HTMLElement> {
   forcedPages?: ForcedPage[];
   /** id of target element to apply classes to. This is useful when you want to apply theme only to specific container. */
   targetId?: string;
+  /** provide styles object imported from CSS/SCSS modules, if you are using CSS/SCSS modules. */
+  styles?: Record<string, string>;
 }
 
 function sharedServerComponentRenderer(
-  { children, tag, forcedPages, targetId, ...props }: NextJsSSRThemeSwitcherProps,
+  { children, tag, forcedPages, targetId, styles, ...props }: NextJsSSRThemeSwitcherProps,
   defaultTag: "div" | "html",
 ) {
   const Tag: keyof JSX.IntrinsicElements = tag || defaultTag;
@@ -35,8 +37,8 @@ function sharedServerComponentRenderer(
     : forcedPage?.props;
   const themeState = state ? (parseState(state) as ThemeStoreType) : undefined;
   const resolvedData = resolveTheme(themeState, forcedPageProps);
-  const dataProps = getDataProps(resolvedData);
-  if (targetId) dataProps.className += " nth-scoped";
+  const dataProps = getDataProps(resolvedData, styles);
+  if (targetId) dataProps.className += styles?.[" nth-scoped"] ?? " nth-scoped";
 
   return (
     // @ts-expect-error -> svg props and html element props conflict
@@ -46,24 +48,27 @@ function sharedServerComponentRenderer(
   );
 }
 
-function getDataProps(resolvedData: UpdateProps) {
+function getDataProps(resolvedData: UpdateProps, styles?: Record<string, string>) {
   const dataProps: DataProps = { className: "" };
+  let classeNames = [];
   if (resolvedData.resolvedColorScheme !== undefined) {
     dataProps["data-color-scheme"] = resolvedData.resolvedColorScheme;
-    dataProps.className = resolvedData.resolvedColorScheme;
+    classeNames.push(resolvedData.resolvedColorScheme);
   }
   if (resolvedData.resolvedTheme !== undefined) {
     dataProps["data-theme"] = resolvedData.resolvedTheme;
-    dataProps.className += `theme-${resolvedData.resolvedTheme}`;
+    classeNames.push(`theme-${resolvedData.resolvedTheme}`);
   }
   if (resolvedData.th) {
     dataProps["data-th"] = resolvedData.th;
-    dataProps.className += ` th-${resolvedData.th}`;
+    classeNames.push(`th-${resolvedData.th}`);
   }
   if (resolvedData.resolvedColorSchemePref !== undefined) {
     dataProps["data-csp"] = resolvedData.resolvedColorSchemePref;
-    dataProps.className += ` csp-${resolvedData.resolvedColorSchemePref}`;
+    classeNames.push(`csp-${resolvedData.resolvedColorSchemePref}`);
   }
+  if (styles) classeNames = classeNames.map(cls => styles[cls] ?? cls);
+  dataProps.className = classeNames.join(" ");
   return dataProps;
 }