Merge pull request #25 from react18-tools/scoped-css

Add support for Scoped CSS or CSS modules
react18-tools · Feb 27, 2024 · 49e18b0 · 49e18b0
2 parents 2da0d4f + 6bc0dfd
commit 49e18b0
Show file tree

Hide file tree

Showing 17 changed files with 93 additions and 39 deletions.
diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml
@@ -45,6 +45,7 @@ jobs:
       - run: node lite.js && pnpm build && pnpm publish-package && node scope.js && pnpm publish-package
         env:
           NODE_AUTH_TOKEN: ${{ secrets.NPM_AUTH_TOKEN }}
+          OWNER: ${{ github.event.repository.owner.login }}
 
       - name: Mark scoped package as deprecated
         run: |

diff --git a/examples/app-router/CHANGELOG.md b/examples/app-router/CHANGELOG.md
@@ -1,5 +1,13 @@
 # app-router
 
+## 0.0.20
+
+### Patch Changes
+
+- Updated dependencies
+  - [email protected]
+  - [email protected]
+
 ## 0.0.19
 
 ### Patch Changes

diff --git a/examples/app-router/package.json b/examples/app-router/package.json
@@ -1,6 +1,6 @@
 {
   "name": "app-router",
-  "version": "0.0.19",
+  "version": "0.0.20",
   "private": true,
   "scripts": {
     "dev": "next dev --port 3002",

diff --git a/examples/pages-router/CHANGELOG.md b/examples/pages-router/CHANGELOG.md
@@ -1,5 +1,13 @@
 # nextjs-pages-router
 
+## 1.0.15
+
+### Patch Changes
+
+- Updated dependencies
+  - [email protected]
+  - [email protected]
+
 ## 1.0.14
 
 ### Patch Changes

diff --git a/examples/pages-router/package.json b/examples/pages-router/package.json
@@ -1,6 +1,6 @@
 {
   "name": "pages-router",
-  "version": "1.0.14",
+  "version": "1.0.15",
   "private": true,
   "scripts": {
     "dev": "next dev --port 3003",

diff --git a/examples/simple-multi-theme/CHANGELOG.md b/examples/simple-multi-theme/CHANGELOG.md
@@ -1,5 +1,13 @@
 # simple-multi-theme
 
+## 1.0.15
+
+### Patch Changes
+
+- Updated dependencies
+  - [email protected]
+  - [email protected]
+
 ## 1.0.14
 
 ### Patch Changes

diff --git a/examples/simple-multi-theme/package.json b/examples/simple-multi-theme/package.json
@@ -1,6 +1,6 @@
 {
   "name": "simple-multi-theme",
-  "version": "1.0.14",
+  "version": "1.0.15",
   "private": true,
   "scripts": {
     "dev": "next dev --port 3001",

diff --git a/examples/tailwind/CHANGELOG.md b/examples/tailwind/CHANGELOG.md
@@ -1,5 +1,12 @@
 # tailwind
 
+## 0.1.9
+
+### Patch Changes
+
+- Updated dependencies
+  - [email protected]
+
 ## 0.1.8
 
 ### Patch Changes

diff --git a/examples/tailwind/package.json b/examples/tailwind/package.json
@@ -1,6 +1,6 @@
 {
   "name": "tailwind",
-  "version": "0.1.8",
+  "version": "0.1.9",
   "private": true,
   "scripts": {
     "dev": "next dev",

diff --git a/examples/vite/CHANGELOG.md b/examples/vite/CHANGELOG.md
@@ -1,5 +1,13 @@
 # vite-example
 
+## 0.0.20
+
+### Patch Changes
+
+- Updated dependencies
+  - [email protected]
+  - [email protected]
+
 ## 0.0.19
 
 ### Patch Changes

diff --git a/examples/vite/package.json b/examples/vite/package.json
@@ -1,7 +1,7 @@
 {
   "name": "vite-example",
   "private": true,
-  "version": "0.0.19",
+  "version": "0.0.20",
   "type": "module",
   "scripts": {
     "dev": "vite --port 3001",

diff --git a/lib/nextjs-themes/CHANGELOG.md b/lib/nextjs-themes/CHANGELOG.md
@@ -1,5 +1,11 @@
 # nextjs-themes
 
+## 3.1.0
+
+### Minor Changes
+
+- Add support for CSS modules and minor fixes.
+
 ## 3.0.0
 
 ### Major Changes

diff --git a/lib/nextjs-themes/package.json b/lib/nextjs-themes/package.json
@@ -2,7 +2,7 @@
   "name": "nextjs-themes",
   "author": "Mayank Kumar Chaudhari <https://mayank-chaudhari.vercel.app>",
   "private": false,
-  "version": "3.0.0",
+  "version": "3.1.0",
   "description": "Unleash the Power of React Server Components! Use multiple themes on your site with confidence, without losing any advantages of React Server Components.",
   "main": "./index.ts",
   "types": "./index.ts",

diff --git a/lib/nextjs-themes/src/client/color-switch/color-switch.test.tsx b/lib/nextjs-themes/src/client/color-switch/color-switch.test.tsx
@@ -1,6 +1,7 @@
 import { act, cleanup, fireEvent, render, renderHook, screen } from "@testing-library/react";
 import { ColorSwitch } from "./color-switch";
 import { useTheme } from "../../hooks";
+import { afterEach, describe, test } from "vitest";
 
 describe("color-switch", () => {
   afterEach(cleanup);

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,14 +16,41 @@ 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 getDataProps(resolvedData: UpdateProps, styles?: Record<string, string>) {
+  const dataProps: DataProps = { className: "" };
+  let classeNames = [];
+  if (resolvedData.resolvedColorScheme !== undefined) {
+    dataProps["data-color-scheme"] = resolvedData.resolvedColorScheme;
+    classeNames.push(resolvedData.resolvedColorScheme);
+  }
+  if (resolvedData.resolvedTheme !== undefined) {
+    dataProps["data-theme"] = resolvedData.resolvedTheme;
+    classeNames.push(`theme-${resolvedData.resolvedTheme}`);
+  }
+  if (resolvedData.th) {
+    dataProps["data-th"] = resolvedData.th;
+    classeNames.push(`th-${resolvedData.th}`);
+  }
+  if (resolvedData.resolvedColorSchemePref !== undefined) {
+    dataProps["data-csp"] = resolvedData.resolvedColorSchemePref;
+    classeNames.push(`csp-${resolvedData.resolvedColorSchemePref}`);
+  }
+  if (styles) classeNames = classeNames.map(cls => styles[cls] ?? cls);
+  dataProps.className = classeNames.join(" ");
+  return dataProps;
 }
 
 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;
-  const state = cookies().get(DEFAULT_ID)?.value;
+  const key = targetId ? `#${targetId}` : DEFAULT_ID;
+  const state = cookies().get(key)?.value;
 
   const path = headers().get("referer");
   const forcedPage = forcedPages?.find(forcedPage =>
@@ -34,8 +61,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
@@ -45,27 +72,6 @@ function sharedServerComponentRenderer(
   );
 }
 
-function getDataProps(resolvedData: UpdateProps) {
-  const dataProps: DataProps = { className: "" };
-  if (resolvedData.resolvedColorScheme !== undefined) {
-    dataProps["data-color-scheme"] = resolvedData.resolvedColorScheme;
-    dataProps.className = resolvedData.resolvedColorScheme;
-  }
-  if (resolvedData.resolvedTheme !== undefined) {
-    dataProps["data-theme"] = resolvedData.resolvedTheme;
-    dataProps.className += `theme-${resolvedData.resolvedTheme}`;
-  }
-  if (resolvedData.th) {
-    dataProps["data-th"] = resolvedData.th;
-    dataProps.className += ` th-${resolvedData.th}`;
-  }
-  if (resolvedData.resolvedColorSchemePref !== undefined) {
-    dataProps["data-csp"] = resolvedData.resolvedColorSchemePref;
-    dataProps.className += ` csp-${resolvedData.resolvedColorSchemePref}`;
-  }
-  return dataProps;
-}
-
 /**
  * @example
  * ```tsx

diff --git a/lib/nextjs-themes/vitest.setup.ts b/lib/nextjs-themes/vitest.setup.ts
@@ -1,7 +1,4 @@
-import useRGS from "r18gs";
-import { vi, beforeEach } from "vitest";
-import { DEFAULT_ID, initialState } from "./src/constants";
-import { act, renderHook } from "@testing-library/react";
+import { vi } from "vitest";
 
 // mock matchMedia
 Object.defineProperty(window, "matchMedia", {