Merge pull request #19 from react18-tools/enhance-tailwind

Enhance-tailwind

.github/workflows/docs.yml

@@ -0,0 +1,45 @@
+name: Update dependencies and Docs
+
+on:
+  push:
+    branches: [main]
+  schedule:
+    - cron: "0 0 */2 * *"
+jobs:
+  publish:
+    if: github.repository_owner.login == 'react18-tools'
+    runs-on: ubuntu-latest
+    permissions:
+      packages: write
+      contents: write
+    steps:
+      - uses: actions/checkout@v3
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+
+      - uses: actions/setup-node@v3
+        with:
+          registry-url: https://registry.npmjs.org
+          node-version: 20
+      - run: npm i -g pnpm && pnpm i
+        name: Install dependencies
+      - name: Test
+        run: npm test
+      - run: git status && git clean -f -d && git status
+        name: clean up working directory
+      - run: npx @turbo/codemod update . && pnpm update --latest -w
+        name: Update dependencies
+      - run: pnpm build
+        name: Build all apps to make sure it is not broken due to dependency upgrades
+      - name: Run unit tests
+        run: pnpm test
+      - name: Generate/update docs
+        run: pnpm doc
+      - name: Setup Git
+        run: |
+          git config --global user.name "mayank1513"
+          git config --global user.email "[email protected]"
+          git fetch
+          git checkout main
+      - name: Save upgraded packages back to repo
+        run: git add . && git commit -m "upgrade deps && docs" && git push origin main

.github/workflows/publish.yml

@@ -8,6 +8,7 @@ on:
 
 jobs:
   publish:
+    if: github.repository_owner.login == 'react18-tools'
     runs-on: ubuntu-latest
     permissions:
       packages: write

.github/workflows/test.yml

@@ -1,6 +1,10 @@
 name: test
 
-on: [push, pull_request]
+on:
+  push:
+  pull_request:
+  schedule:
+    - cron: "0 */8 * * *"
 
 jobs:
   test:

README.md

@@ -4,7 +4,7 @@
 
 > This is a sister package of [react18-themes](https://github.com/react18-tools/react18-themes/). Initially we targeted only Next.js and thus this package was named `nextjs-themes`. However, we have expanded support for `Vite` and `Remix` as well. And thus published a package with more generic name, `react18-themes`.
 
-> We recommend using [react18-themes](https://github.com/react18-tools/react18-themes/) for latest updates. Though this package is also maintained with specific focus on Next.js, all the functionality of this package along with extended support for other build tools is available in [react18-themes](https://github.com/react18-tools/react18-themes/)
+> We recommend using [react18-themes](https://github.com/react18-tools/react18-themes/) for Remix. This package is maintained with specific focus on Next.js and Vite. Most of the functionality of this package along with extended support for other build tools is available in [react18-themes](https://github.com/react18-tools/react18-themes/)
 
 🤟 👉 [Unleash the Power of React Server Components](https://medium.com/javascript-in-plain-english/unleash-the-power-of-react-server-components-eb3fe7201231)
 
@@ -27,7 +27,9 @@ This project was originally inspired by next-themes. Next-themes is an awesome p
 - ✅ Force pages to specific themes
 - ✅ Class and data attribute selector
 - ✅ Manipulate theme via `useTheme` hook
-- ✅ Doccumented with [Typedoc](https://react18-tools.github.io/nextjs-themes) ([Docs](https://react18-tools.github.io/nextjs-themes))
+- ✅ Documented with [Typedoc](https://react18-tools.github.io/nextjs-themes) ([Docs](https://react18-tools.github.io/nextjs-themes))
+- ✅ Use combinations of [data-th=""] and [data-color-scheme=""] for dark/light varients of themes
+- ✅ Use [data-csp=""] to style based on colorSchemePreference.
 
 Check out the [live example](https://nextjs-themes.vercel.app/).
 
@@ -55,7 +57,7 @@ $ yarn add nextjs-themes-lite
 
 ## To do
 
-- [ ] Update examples
+- [ ] Update examples, docs and Readme
 
 ## Usage
 
@@ -310,6 +312,25 @@ That's it! Now you can use dark-mode specific classes:
 
 ## Migrating from v1 to v2
 
+## 2.0.0
+
+### Major Changes
+
+- 6f17cce: # Additonal CSS Combinations + Ensure seamless support for Tailwind
+
+  - No changes required for client side code as `[data-theme=]` selectors work as before.
+  - If you are using `ServerSideWrapper` or `NextJsServerTarget` or `NextJsSSGThemeSwitcher`, you need to convert `forcedPages` elements to objects of the shape `{ pathMatcher: RegExp | string; props: ThemeSwitcherProps }`.
+  - Use `resolvedColorScheme` for more sturdy dark/light/system modes
+  - Use combinations of `[data-th=""]` and `[data-color-scheme=""]` for dark/light varients of themes
+  - Use `[data-csp=""]` to style based on colorSchemePreference.
+
+### Minor Changes
+
+- # Support custom themeTransition
+
+  - Provide `themeTransition` prop to `ThemeSwitcher` component to apply smooth transition while changing theme.
+  - Use `setThemeSet` to set `lightTheme` and `darkTheme` together.
+
 #### Motivation:
 
 For server side syncing, we need to use cookies and headers. This means that this component and its children can not be static. They will be rendered server side for each request. Thus, we are avoiding the wrapper. Now, only the `NextJsSSGThemeSwitcher` will be rendered server side for each request and rest of your app can be server statically.

examples/app-router/CHANGELOG.md

@@ -1,5 +1,14 @@
 # app-router
 
+## 0.0.14
+
+### Patch Changes
+
+- Updated dependencies
+- Updated dependencies [6f17cce]
+  - [email protected]
+  - [email protected]
+
 ## 0.0.13
 
 ### Patch Changes

examples/app-router/app/layout.tsx

@@ -6,9 +6,11 @@ import Link from "next/link";
 
 const inter = Inter({ subsets: ["latin"] });
 const forcedPages: ForcedPage[] = [
-  [/forced-color-scheme\/dark/, { colorScheme: "dark" }],
-  [/forced-color-scheme\/light/, { colorScheme: "light" }],
-  ...[...darkThemes, ...lightThemes].map(th => [new RegExp(`themed-page/${th}`), { theme: "light" }] as ForcedPage),
+  { pathMatcher: /forced-color-scheme\/dark/, props: { forcedColorScheme: "dark" } },
+  { pathMatcher: /forced-color-scheme\/light/, props: { forcedColorScheme: "light" } },
+  ...[...darkThemes, ...lightThemes].map(
+    theme => ({ pathMatcher: new RegExp(`themed-page/${theme}`), props: { forcedTheme: theme } }) as ForcedPage,
+  ),
 ];
 
 export default function RootLayout({ children }: { children: React.ReactNode }): JSX.Element {

examples/app-router/package.json

@@ -1,6 +1,6 @@
 {
   "name": "app-router",
-  "version": "0.0.13",
+  "version": "0.0.14",
   "private": true,
   "scripts": {
     "dev": "next dev --port 3002",

examples/pages-router/CHANGELOG.md

@@ -1,5 +1,14 @@
 # nextjs-pages-router
 
+## 1.0.9
+
+### Patch Changes
+
+- Updated dependencies
+- Updated dependencies [6f17cce]
+  - [email protected]
+  - [email protected]
+
 ## 1.0.8
 
 ### Patch Changes

examples/pages-router/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pages-router",
-  "version": "1.0.8",
+  "version": "1.0.9",
   "private": true,
   "scripts": {
     "dev": "next dev --port 3003",

examples/simple-multi-theme/CHANGELOG.md

@@ -1,5 +1,14 @@
 # simple-multi-theme
 
+## 1.0.9
+
+### Patch Changes
+
+- Updated dependencies
+- Updated dependencies [6f17cce]
+  - [email protected]
+  - [email protected]
+
 ## 1.0.8
 
 ### Patch Changes

examples/simple-multi-theme/package.json

@@ -1,6 +1,6 @@
 {
   "name": "simple-multi-theme",
-  "version": "1.0.8",
+  "version": "1.0.9",
   "private": true,
   "scripts": {
     "dev": "next dev --port 3001",

examples/tailwind/CHANGELOG.md

@@ -1,5 +1,13 @@
 # tailwind
 
+## 0.1.3
+
+### Patch Changes
+
+- Updated dependencies
+- Updated dependencies [6f17cce]
+  - [email protected]
+
 ## 0.1.2
 
 ### Patch Changes

examples/tailwind/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tailwind",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "private": true,
   "scripts": {
     "dev": "next dev",

examples/vite/CHANGELOG.md

@@ -1,5 +1,14 @@
 # vite-example
 
+## 0.0.14
+
+### Patch Changes
+
+- Updated dependencies
+- Updated dependencies [6f17cce]
+  - [email protected]
+  - [email protected]
+
 ## 0.0.13
 
 ### Patch Changes

examples/vite/package.json

@@ -1,7 +1,7 @@
 {
   "name": "vite-example",
   "private": true,
-  "version": "0.0.13",
+  "version": "0.0.14",
   "type": "module",
   "scripts": {
     "dev": "vite --port 3001",

lib/nextjs-themes/CHANGELOG.md

@@ -1,5 +1,24 @@
 # nextjs-themes
 
+## 2.0.0
+
+### Major Changes
+
+- 6f17cce: # Additonal CSS Combinations + Ensure seamless support for Tailwind
+
+  - No changes required for client side code as `[data-theme=]` selectors work as before.
+  - If you are using `ServerSideWrapper` or `NextJsServerTarget` or `NextJsSSGThemeSwitcher`, you need to convert `forcedPages` elements to objects of the shape `{ pathMatcher: RegExp | string; props: ThemeSwitcherProps }`.
+  - Use `resolvedColorScheme` for more sturdy dark/light/system modes
+  - Use combinations of `[data-th=""]` and `[data-color-scheme=""]` for dark/light varients of themes
+  - Use `[data-csp=""]` to style based on colorSchemePreference.
+
+### Minor Changes
+
+- # Support custom themeTransition
+
+  - Provide `themeTransition` prop to `ThemeSwitcher` component to apply smooth transition while changing theme.
+  - Use `setThemeSet` to set `lightTheme` and `darkTheme` together.
+
 ## 1.2.1
 
 ### Patch Changes

lib/nextjs-themes/package.json

@@ -2,7 +2,7 @@
   "name": "nextjs-themes",
   "author": "Mayank Kumar Chaudhari <https://mayank-chaudhari.vercel.app>",
   "private": false,
-  "version": "1.2.1",
+  "version": "2.0.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",

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

@@ -20,7 +20,7 @@ describe("theme-switcher", () => {
     window.media = "light";
     await act(() => render(<ThemeSwitcher />));
     expect(getResolvedTheme()).toBe("light1");
-    expect(getResolvedColorScheme()).toBe("system");
+    expect(getResolvedColorScheme()).toBe("light");
   });
 
   // colorScheme has higher preference