Merge pull request #28 from react18-tools/css-modules

mayank1513 · web-flow · commit 48a7ebede5b8 · 2024-02-28T08:57:54.000+05:30
Css modules
diff --git a/.tkb b/.tkb
@@ -0,0 +1,29 @@
+{
+  "scope": "Workspace",
+  "tasks": {
+    "task-EX1RcYGqdrQ7qjJhKjiPE": {
+      "id": "task-EX1RcYGqdrQ7qjJhKjiPE",
+      "description": "Add css modules support",
+      "columnId": "column-todo"
+    }
+  },
+  "columns": [
+    {
+      "id": "column-todo",
+      "title": "To do",
+      "tasksIds": [
+        "task-EX1RcYGqdrQ7qjJhKjiPE"
+      ]
+    },
+    {
+      "id": "column-doing",
+      "title": "Doing",
+      "tasksIds": []
+    },
+    {
+      "id": "column-done",
+      "title": "Done",
+      "tasksIds": []
+    }
+  ]
+}
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,31 +1,32 @@
 {
-	// Formatting using Prettier by default for all languages
-	"editor.defaultFormatter": "esbenp.prettier-vscode",
-	// Formatting using Prettier for JavaScript, overrides VSCode default.
-	"[javascript]": {
-		"editor.defaultFormatter": "esbenp.prettier-vscode"
-	},
+  // Formatting using Prettier by default for all languages
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  // Formatting using Prettier for JavaScript, overrides VSCode default.
+  "[javascript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
 
-	// Ensure enough terminal history is preserved when running tests.
-	"terminal.integrated.scrollback": 10000,
+  // Ensure enough terminal history is preserved when running tests.
+  "terminal.integrated.scrollback": 10000,
 
-	// Configure todo-tree to exclude node_modules, dist, and compiled.
-	"todo-tree.filtering.excludeGlobs": ["**/node_modules", "**/dist", "**/compiled"],
-	// Match TODO-APP in addition to other TODOs.
-	"todo-tree.general.tags": ["BUG", "HACK", "FIXME", "TODO", "XXX", "[ ]", "[x]", "TODO-APP"],
+  // Configure todo-tree to exclude node_modules, dist, and compiled.
+  "todo-tree.filtering.excludeGlobs": ["**/node_modules", "**/dist", "**/compiled"],
+  // Match TODO-APP in addition to other TODOs.
+  "todo-tree.general.tags": ["BUG", "HACK", "FIXME", "TODO", "XXX", "[ ]", "[x]", "TODO-APP"],
 
-	// Disable TypeScript surveys.
-	"typescript.surveys.enabled": false,
+  // Disable TypeScript surveys.
+  "typescript.surveys.enabled": false,
 
-	"grammarly.selectors": [
-		{
-			"language": "markdown",
-			"scheme": "file"
-		}
-	],
-	"editor.tabSize": 2,
-	"editor.wordWrap": "on",
-	"editor.formatOnSave": true,
-	"editor.formatOnPaste": true,
-	"editor.formatOnSaveMode": "file"
+  "grammarly.selectors": [
+    {
+      "language": "markdown",
+      "scheme": "file"
+    }
+  ],
+  "editor.tabSize": 2,
+  "editor.wordWrap": "on",
+  "editor.formatOnSave": true,
+  "editor.formatOnPaste": true,
+  "editor.formatOnSaveMode": "file",
+  "mayank1513.trello-kanban.Workspace.filePath": ".tkb"
 }
diff --git a/examples/nextjs/CHANGELOG.md b/examples/nextjs/CHANGELOG.md
@@ -1,5 +1,13 @@
 # nextjs-example
 
+## 0.0.16
+
+### Patch Changes
+
+- Updated dependencies
+  - react18-themes@3.1.0
+  - shared-ui@1.0.1
+
 ## 0.0.15
 
 ### Patch Changes
diff --git a/examples/nextjs/package.json b/examples/nextjs/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "nextjs-example",
-	"version": "0.0.15",
+	"version": "0.0.16",
 	"private": true,
 	"scripts": {
 		"dev": "next dev --port 3002",
@@ -18,8 +18,8 @@
 	},
 	"devDependencies": {
 		"@next/eslint-plugin-next": "^14.1.0",
-		"@types/node": "^20.11.20",
-		"@types/react": "^18.2.58",
+		"@types/node": "^20.11.21",
+		"@types/react": "^18.2.60",
 		"@types/react-dom": "^18.2.19",
 		"eslint-config-custom": "workspace:*",
 		"tsconfig": "workspace:*",
diff --git a/examples/remix/CHANGELOG.md b/examples/remix/CHANGELOG.md
@@ -4,6 +4,14 @@
 
 ### Patch Changes
 
+- Updated dependencies
+  - react18-themes@3.1.0
+  - shared-ui@1.0.1
+
+## null
+
+### Patch Changes
+
 - Updated dependencies
   - react18-themes@3.0.0
   - shared-ui@1.0.1
diff --git a/examples/remix/package.json b/examples/remix/package.json
@@ -15,7 +15,7 @@
 		"@remix-run/node": "^2.7.2",
 		"@remix-run/react": "^2.7.2",
 		"@remix-run/serve": "^2.7.2",
-		"isbot": "5.1.0",
+		"isbot": "5.1.1",
 		"persist-and-sync": "^1.2.1",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
@@ -26,7 +26,7 @@
 	"devDependencies": {
 		"@remix-run/dev": "^2.7.2",
 		"@remix-run/eslint-config": "^2.7.2",
-		"@types/react": "^18.2.58",
+		"@types/react": "^18.2.60",
 		"@types/react-dom": "^18.2.19",
 		"eslint": "^8.57.0",
 		"typescript": "^5.3.3"
diff --git a/examples/vite/CHANGELOG.md b/examples/vite/CHANGELOG.md
@@ -1,5 +1,13 @@
 # vite-example
 
+## 0.0.16
+
+### Patch Changes
+
+- Updated dependencies
+  - react18-themes@3.1.0
+  - shared-ui@1.0.1
+
 ## 0.0.15
 
 ### 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.15",
+	"version": "0.0.16",
 	"type": "module",
 	"scripts": {
 		"dev": "vite --port 3001",
@@ -18,10 +18,10 @@
 		"shared-ui": "workspace:*"
 	},
 	"devDependencies": {
-		"@types/react": "^18.2.58",
+		"@types/react": "^18.2.60",
 		"@types/react-dom": "^18.2.19",
-		"@typescript-eslint/eslint-plugin": "^7.0.2",
-		"@typescript-eslint/parser": "^7.0.2",
+		"@typescript-eslint/eslint-plugin": "^7.1.0",
+		"@typescript-eslint/parser": "^7.1.0",
 		"@vitejs/plugin-react-swc": "^3.6.0",
 		"eslint": "^8.57.0",
 		"eslint-plugin-react-hooks": "^4.6.0",
diff --git a/lib/react18-themes/CHANGELOG.md b/lib/react18-themes/CHANGELOG.md
@@ -1,5 +1,11 @@
 # react18-themes
 
+## 3.1.0
+
+### Minor Changes
+
+- Add support fot CSS modules.
+
 ## 3.0.0
 
 ### Major Changes
diff --git a/lib/react18-themes/lite.js b/lib/react18-themes/lite.js
@@ -14,10 +14,10 @@ fs.writeFileSync(path.resolve(__dirname, "package.json"), JSON.stringify(package
 
 const readMePath = path.resolve(__dirname, "..", "..", "README.md");
 let readMe = fs.readFileSync(readMePath, { encoding: "utf8" });
-const tmp = "!--|--!";
-const owner = process.env.OWNER;
-readMe = readMe.replace(new RegExp(`$${owner}/${ref}`, "g"), tmp);
+const tmp = "!---!";
+const owner = "react18-tools";
+readMe = readMe.replace(new RegExp(`${owner}/${ref}`, "g"), tmp);
 readMe = readMe.replace(new RegExp(ref, "g"), packageJson.name);
-readMe = readMe.replace(new RegExp(tmp, "g"), `$${owner}/${ref}`);
+readMe = readMe.replace(new RegExp(tmp, "g"), `${owner}/${ref}`);
 readMe = readMe.replace(/## Want Lite Version(?:.|\n|\r)* as a peer-dependency/m, "");
 fs.writeFileSync(readMePath, readMe);
diff --git a/lib/react18-themes/package.json b/lib/react18-themes/package.json
@@ -2,7 +2,7 @@
   "name": "react18-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",
@@ -30,8 +30,8 @@
     "@remix-run/testing": "^2.7.2",
     "@testing-library/react": "^14.2.1",
     "@turbo/gen": "^1.12.4",
-    "@types/node": "^20.11.20",
-    "@types/react": "^18.2.58",
+    "@types/node": "^20.11.21",
+    "@types/react": "^18.2.60",
     "@types/react-dom": "^18.2.19",
     "@vitejs/plugin-react": "^4.2.1",
     "@vitest/coverage-v8": "^1.3.1",
@@ -45,13 +45,13 @@
     "tsconfig": "workspace:*",
     "tsup": "^8.0.2",
     "turbo": "^1.12.4",
-    "typedoc": "^0.25.8",
+    "typedoc": "^0.25.9",
     "typescript": "5.3.3",
     "vite-tsconfig-paths": "^4.3.1",
     "vitest": "^1.3.1"
   },
   "dependencies": {
-    "r18gs": "^0.0.5"
+    "r18gs": "^0.1.0"
   },
   "peerDependencies": {
     "@remix-run/node": "^2.3.1",
diff --git a/lib/react18-themes/src/client/color-switch/color-switch.test.tsx b/lib/react18-themes/src/client/color-switch/color-switch.test.tsx
@@ -1,4 +1,5 @@
 import { act, cleanup, fireEvent, render, renderHook, screen } from "@testing-library/react";
+import { afterEach, describe, test } from "vitest";
 import { useTheme } from "../../hooks";
 import { ColorSwitch } from "./color-switch";
 
diff --git a/lib/react18-themes/src/client/theme-switcher/theme-switcher.tsx b/lib/react18-themes/src/client/theme-switcher/theme-switcher.tsx
@@ -11,6 +11,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>) {
@@ -44,7 +46,7 @@ function useLoadSyncedState(setThemeState: SetStateAction<ThemeStoreType>, targe
     return () => {
       window.removeEventListener("storage", storageListener);
     };
-  }, [targetSelector]);
+  }, [setThemeState, targetSelector]);
 }
 
 export interface DataProps {
@@ -64,13 +66,17 @@ export interface UpdateProps {
 
 function updateDOM(
   { resolvedTheme, resolvedColorScheme, resolvedColorSchemePref, th }: UpdateProps,
-  targetSelector?: string,
+  props: ThemeSwitcherProps,
 ) {
+  const { targetSelector, styles } = props;
   const target = document.querySelector(targetSelector || `#${DEFAULT_ID}`);
+
+  let classNames = [resolvedColorScheme, `theme-${resolvedTheme}`, `th-${th}`, `csp-${resolvedColorSchemePref}`];
+  if (styles) classNames = classNames.map(cls => styles[cls] ?? cls);
   /** don't apply theme to documentElement for localized targets */
   [target, targetSelector && target ? null : document.documentElement].forEach(t => {
     /** ensuring that class 'dark' is always present when dark color scheme is applied to support Tailwind  */
-    if (t) t.className = `${resolvedColorScheme} theme-${resolvedTheme} th-${th} csp-${resolvedColorSchemePref}`;
+    if (t) t.className = classNames.join(" ");
     t?.setAttribute("data-th", th);
     t?.setAttribute("data-theme", resolvedTheme);
     t?.setAttribute("data-color-scheme", resolvedColorScheme);
@@ -115,7 +121,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/react18-themes/src/hooks/use-theme.ts b/lib/react18-themes/src/hooks/use-theme.ts
@@ -21,10 +21,10 @@ function createSetterWithFirstTimeDelay(setThemeState: SetStateAction<ThemeStore
   };
 }
 
-export function useTheme(targetId?: string) {
-  const [themeState, setThemeState] = useRGS<ThemeStoreType>(targetId ?? DEFAULT_ID, initialState);
+export function useTheme(targetSelector?: string) {
+  const [themeState, setThemeState] = useRGS<ThemeStoreType>(targetSelector ?? DEFAULT_ID, initialState);
   const { resolvedColorScheme, resolvedTheme } = resolveTheme(themeState);
-  const setterWithFirstTimeDelay = useMemo(() => createSetterWithFirstTimeDelay(setThemeState), []);
+  const setterWithFirstTimeDelay = useMemo(() => createSetterWithFirstTimeDelay(setThemeState), [setThemeState]);
   return {
     ...themeState,
     resolvedColorScheme,
@@ -34,7 +34,7 @@ export function useTheme(targetId?: string) {
     setLightTheme: setterWithFirstTimeDelay<string>("lightTheme"),
     setThemeSet: useCallback(
       (themeSet: { darkTheme: string; lightTheme: string }) => setThemeState(state => ({ ...state, ...themeSet })),
-      [],
+      [setThemeState],
     ),
     setColorSchemePref: setterWithFirstTimeDelay<ColorSchemeType>("colorSchemePref"),
     setForcedTheme: setterWithFirstTimeDelay<string | undefined>("forcedTheme"),
diff --git a/lib/react18-themes/src/server/nextjs/nextjs-ssg-theme-switcher/nextjs-ssg-theme-switcher.tsx b/lib/react18-themes/src/server/nextjs/nextjs-ssg-theme-switcher/nextjs-ssg-theme-switcher.tsx
@@ -14,10 +14,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;
@@ -29,7 +31,7 @@ function sharedServerComponentRenderer(
 
   const themeState = state ? parseState(state) : undefined;
   const resolvedData = resolveTheme(themeState, forcedPageProps);
-  const dataProps = getDataProps(resolvedData);
+  const dataProps = getDataProps(resolvedData, styles);
   if (targetId) dataProps.className += " nth-scoped";
 
   return (
diff --git a/lib/react18-themes/src/server/remix/remix-server-target/remix-server-target.tsx b/lib/react18-themes/src/server/remix/remix-server-target/remix-server-target.tsx
@@ -3,6 +3,7 @@ import { json, type LoaderFunctionArgs } from "@remix-run/node";
 import { useLoaderData } from "@remix-run/react";
 import { DEFAULT_ID, type ColorSchemeType, type ThemeStoreType } from "../../../constants";
 import { getDataProps, parseState, resolveTheme } from "../../../utils";
+import { UpdateProps } from "../../../client";
 
 interface ForcedPage {
   pathMatcher: RegExp | string;
@@ -15,6 +16,8 @@ interface RemixServerTargetProps extends React.HTMLProps<HTMLElement> {
   tag?: keyof JSX.IntrinsicElements;
   /** not implemented yet */
   forcedPages?: ForcedPage[];
+  /** provide styles object imported from CSS/SCSS modules, if you are using CSS/SCSS modules. */
+  styles?: Record<string, string>;
 }
 
 /**
@@ -26,19 +29,19 @@ export function loader({ request }: LoaderFunctionArgs) {
   const state = parseCookie(cookieHeader, DEFAULT_ID);
   const themeState = state ? parseState(state) : undefined;
   const resolvedData = resolveTheme(themeState);
-  const dataProps = getDataProps(resolvedData);
-  return json(dataProps);
+  return json(resolvedData);
 }
 
 /**
  *
  * @example
  * <RemixServerTarget />
  */
-export function RemixServerTarget({ children, tag, forcedPages, ...props }: RemixServerTargetProps) {
+export function RemixServerTarget({ children, tag, forcedPages, styles, ...props }: RemixServerTargetProps) {
   const Tag: keyof JSX.IntrinsicElements = tag || "div";
 
-  const dataProps = useLoaderData<typeof loader>();
+  const resolvedData = useLoaderData<typeof loader>() as UpdateProps;
+  const dataProps = getDataProps(resolvedData, styles);
 
   return (
     // @ts-expect-error -> svg props and html element props conflict
diff --git a/lib/react18-themes/src/utils.ts b/lib/react18-themes/src/utils.ts
diff --git a/packages/shared-ui/package.json b/packages/shared-ui/package.json

-Original file line number
+Diff line change
 ### Patch Changes
 +- Updated dependencies
 +  - [email protected]
 +  - [email protected]
++
 +## null
++
 +### Patch Changes
++
 - Updated dependencies
   - [email protected]
   - [email protected]