Alpha

.changeset/late-rivers-kick.md

@@ -0,0 +1,5 @@
+---
+"react18-themes": major
+---
+
+Do not export force-theme and force-color-scheme components from the root.

.changeset/popular-otters-whisper.md

@@ -0,0 +1,5 @@
+---
+"react18-themes": major
+---
+
+Remove support for passing styles object from CSS modules or CSS-in-JS for the theme classes.

.changeset/pre.json

@@ -0,0 +1,18 @@
+{
+  "mode": "exit",
+  "tag": "alpha",
+  "initialVersions": {
+    "@example/app": "0.0.0",
+    "@example/pages": "0.0.0",
+    "@example/vite": "0.0.0",
+    "react18-themes": "4.0.0-alpha.0",
+    "@repo/eslint-config": "0.0.0",
+    "@repo/typescript-config": "0.0.0",
+    "@repo/shared": "0.0.2-alpha.0",
+    "@repo/scripts": "0.0.0"
+  },
+  "changesets": [
+    "late-rivers-kick",
+    "popular-otters-whisper"
+  ]
+}

README.md

@@ -221,7 +221,7 @@ interface UseThemeYield {
 ### Next.js App Router
 
 ```tsx
-import { ForceTheme } from "react18-themes";
+import { ForceTheme } from "react18-themes/force-theme";
 
 function MyPage() {
   return (

examples/app-router/src/app/forced-color-scheme/[colorScheme]/page.tsx

@@ -1,5 +1,5 @@
 import type { ColorSchemeType } from "react18-themes";
-import { ForceColorScheme } from "react18-themes";
+import { ForceColorScheme } from "react18-themes/force-color-scheme";
 
 interface PageWithForcedColorSchemeProps {
   params: { colorScheme: ColorSchemeType };

examples/app-router/src/app/forced-color-scheme/page.tsx

@@ -1,4 +1,4 @@
-import { ForceColorScheme } from "react18-themes";
+import { ForceColorScheme } from "react18-themes/force-color-scheme";
 
 export default function PageWithForcedColorScheme(): JSX.Element {
   return (

examples/app-router/src/app/themed-page/[theme]/page.tsx

@@ -1,4 +1,4 @@
-import { ForceTheme } from "react18-themes";
+import { ForceTheme } from "react18-themes/force-theme";
 
 interface PageProps {
   params: { theme: string };

examples/app-router/src/app/themed-page/page.tsx

@@ -1,4 +1,4 @@
-import { ForceTheme } from "react18-themes";
+import { ForceTheme } from "react18-themes/force-theme";
 
 export default function PageWithForcedTheme(): JSX.Element {
   return (

examples/pages-router/src/pages/forced-color-scheme/[colorScheme].tsx

@@ -1,5 +1,6 @@
 import { useRouter } from "next/router";
-import { ColorSchemeType, ForceColorScheme } from "react18-themes";
+import { ColorSchemeType } from "react18-themes";
+import { ForceColorScheme } from "react18-themes/client/force-color-scheme";
 
 export default function PageWithForcedColorScheme() {
   const router = useRouter();

examples/pages-router/src/pages/themed-page/[theme].tsx

@@ -1,5 +1,5 @@
 import { useRouter } from "next/router";
-import { ForceTheme } from "react18-themes";
+import { ForceTheme } from "react18-themes/force-theme";
 
 export default function PageWithForcedTheme() {
   const router = useRouter();

examples/vite/src/app/forced-color-scheme-page.tsx

@@ -1,7 +1,8 @@
 import React from "react";
-import { ColorSchemeType, ForceColorScheme } from "react18-themes";
+import { ColorSchemeType } from "react18-themes";
 import { Link, useParams } from "react-router-dom";
 import { Header } from "@repo/shared";
+import { ForceColorScheme } from "react18-themes/client/force-color-scheme";
 
 export default function ForcedColorSchemePage() {
   const { colorScheme } = useParams();

examples/vite/src/app/themed-page.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { Link, useParams } from "react-router-dom";
-import { ForceTheme } from "react18-themes";
+import { ForceTheme } from "react18-themes/force-theme";
 import { Header } from "@repo/shared";
 
 export default function ThemedPage() {

lib/CHANGELOG.md

@@ -1,5 +1,12 @@
 # react18-themes
 
+## 4.0.0-alpha.0
+
+### Major Changes
+
+- a4b539b: Do not export force-theme and force-color-scheme components from the root.
+- 88f5f17: Remove support for passing styles object from CSS modules or CSS-in-JS for the theme classes.
+
 ## 3.2.0
 
 ### Minor Changes

lib/README.md

@@ -221,7 +221,7 @@ interface UseThemeYield {
 ### Next.js App Router
 
 ```tsx
-import { ForceTheme } from "react18-themes";
+import { ForceTheme } from "react18-themes/force-theme";
 
 function MyPage() {
   return (

lib/package.json

@@ -2,7 +2,7 @@
   "name": "react18-themes",
   "author": "Mayank Kumar Chaudhari <https://mayank-chaudhari.vercel.app>",
   "private": false,
-  "version": "3.2.0",
+  "version": "4.0.0-alpha.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.",
   "license": "MPL-2.0",
   "main": "./dist/index.js",
@@ -46,6 +46,26 @@
       "import": "./dist/client/theme-switcher/index.mjs",
       "types": "./dist/client/theme-switcher/index.d.ts"
     },
+    "./client/force-color-scheme": {
+      "require": "./dist/client/force-color-scheme/index.js",
+      "import": "./dist/client/force-color-scheme/index.mjs",
+      "types": "./dist/client/force-color-scheme/index.d.ts"
+    },
+    "./force-color-scheme": {
+      "require": "./dist/client/force-color-scheme/index.js",
+      "import": "./dist/client/force-color-scheme/index.mjs",
+      "types": "./dist/client/force-color-scheme/index.d.ts"
+    },
+    "./client/force-theme": {
+      "require": "./dist/client/force-theme/index.js",
+      "import": "./dist/client/force-theme/index.mjs",
+      "types": "./dist/client/force-theme/index.d.ts"
+    },
+    "./force-theme": {
+      "require": "./dist/client/force-theme/index.js",
+      "import": "./dist/client/force-theme/index.mjs",
+      "types": "./dist/client/force-theme/index.d.ts"
+    },
     "./server": {
       "require": "./dist/server/index.js",
       "import": "./dist/server/index.mjs",
@@ -81,9 +101,9 @@
       "import": "./dist/hooks/index.mjs",
       "types": "./dist/hooks/index.d.ts"
     },
-    "./styles.css": "./dist/index.css",
-    "./styles": "./dist/index.css",
-    "./css": "./dist/index.css"
+    "./styles.css": "./dist/client/color-switch/index.css",
+    "./styles": "./dist/client/color-switch/index.css",
+    "./css": "./dist/client/color-switch/index.css"
   },
   "scripts": {
     "build": "tsup && tsc -p tsconfig-build.json",

lib/src/client/color-switch/color-switch.module.scss

@@ -1,51 +1,51 @@
-.color-switch {
+.s {
   all: unset;
   position: relative;
   box-shadow: none;
   color: #aaa;
   border-radius: 50%;
   border: 1px dashed gray;
   cursor: pointer;
-  --size: 25px;
-  height: var(--size);
-  width: var(--size);
+  --s: 25px;
+  height: var(--s);
+  width: var(--s);
   transition: all 0.3s ease-in-out 0s !important;
 }
 
-[data-csp="system"] .color-switch::after,
-[data-csp="system"] ~ .color-switch::after,
-[data-csp="system"] ~ * .color-switch::after {
+[data-csp="system"] .s::after,
+[data-csp="system"] ~ .s::after,
+[data-csp="system"] ~ * .s::after {
   position: absolute;
   height: 100%;
   width: 100%;
   top: 0;
   left: 0;
   font-weight: 600;
-  font-size: calc(1 * var(--size) / 2);
+  font-size: calc(1 * var(--s) / 2);
   display: flex;
   align-items: center;
   justify-content: center;
   content: "A";
 }
 
-[data-csp="dark"] .color-switch,
-[data-csp="dark"] ~ .color-switch,
-[data-csp="dark"] ~ * .color-switch {
-  box-shadow: calc(var(--size) / 4) calc(var(--size) / -4) calc(var(--size) / 8) inset #fff;
+[data-csp="dark"] .s,
+[data-csp="dark"] ~ .s,
+[data-csp="dark"] ~ * .s {
+  box-shadow: calc(var(--s) / 4) calc(var(--s) / -4) calc(var(--s) / 8) inset #fff;
   border: none;
   background: transparent;
-  animation: swing linear 0.5s;
+  animation: a linear 0.5s;
 }
 
-[data-csp="light"] .color-switch,
-[data-csp="light"] ~ .color-switch,
-[data-csp="light"] ~ * .color-switch {
+[data-csp="light"] .s,
+[data-csp="light"] ~ .s,
+[data-csp="light"] ~ * .s {
   box-shadow: 0 0 50px 10px yellow;
   background-color: yellow;
   border: 1px solid orangered;
 }
 
-@keyframes swing {
+@keyframes a {
   40% {
     transform: rotate(-15deg);
   }

lib/src/client/color-switch/color-switch.tsx

@@ -7,7 +7,6 @@ export interface ColorSwitchProps extends HTMLProps<HTMLButtonElement> {
   size?: number;
   /** Skip system colorScheme while toggling */
   skipSystem?: boolean;
-  targetSelector?: string;
 }
 
 /**
@@ -24,24 +23,18 @@ export interface ColorSwitchProps extends HTMLProps<HTMLButtonElement> {
  * <ColorSwitch size={20} skipSystem />
  * ```
  */
-export const ColorSwitch = ({
-  size = 25,
-  skipSystem,
-  targetSelector,
-  className,
-  ...props
-}: ColorSwitchProps) => {
-  const { toggleColorScheme } = useTheme(targetSelector);
+export const ColorSwitch = ({ size = 25, skipSystem, className, ...props }: ColorSwitchProps) => {
+  const { toggleColorScheme } = useTheme();
 
-  const cls = [styles["color-switch"], className].join(" ");
+  const cls = [styles.s, className].join(" ");
   return (
     <button
       className={cls}
       data-testid="color-switch"
       // skipcq: JS-0417
       onClick={() => toggleColorScheme(skipSystem)}
       // @ts-expect-error -- setting custom attribute
-      style={{ "--size": `${size}px` }}
+      style={{ "--s": `${size}px` }}
       {...props}
     />
   );

lib/src/client/index.ts

@@ -6,6 +6,4 @@
 
 // client component exports
 export * from "./color-switch";
-export * from "./force-color-scheme";
-export * from "./force-theme";
 export * from "./theme-switcher";

lib/src/client/theme-switcher/no-fouc.ts

@@ -28,7 +28,6 @@ declare global {
 export const noFOUCScript = (
   key: string,
   initialState: ThemeStoreType,
-  styles?: Record<string, string>,
   forcedTheme_?: string,
   forcedColorScheme_?: ColorSchemeType,
 ) => {
@@ -42,7 +41,6 @@ export const noFOUCScript = (
       el.setAttribute(`data-${key}`, values[index]);
     });
     classes[0] = values[0];
-    if (styles) classes = classes.map(cls => styles[cls] ?? cls);
     el.className = classes.join(" ");
   };
 

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

@@ -15,7 +15,7 @@ import { noFOUCScript } from "./no-fouc";
 import { initialState, ThemeStoreType } from "../../store";
 
 const MEDIA = "(prefers-color-scheme: dark)";
-const storageKey = `#${DEFAULT_ID}`;
+const storageKey = DEFAULT_ID;
 
 /** get dom attribute */
 const getResolvedTheme = () => document.documentElement.getAttribute("data-theme");