uniwind-plugin-next 1.0.1 → 1.1.1

package/README.md

@@ -1,15 +1,15 @@
 # uniwind-plugin-next
 
-> This is an unofficial plugin, and is not affiliated with Uniwind or Next.js in any way.
+> This is an unofficial plugin, and is not affiliated with Uniwind or Next.js.
 
-Next.js plugin for [Uniwind](https://uniwind.dev/) support. Note that only Webpack-based projects are supported, there are no plans to support Turbopack-based projects. 
+[Uniwind](https://uniwind.dev/) config plugin for Next.js. Note that only Webpack-based projects are supported, there are no plans to support Turbopack-based projects. 
 
-The implementation of this plugin is based on the official [Uniwind Vite plugin](https://docs.uniwind.dev/quickstart#vite), and aims to match its functionality as closely as possible. All Uniwind features should work as expected - see the limitations section below for known differences.
+The implementation of this plugin is based on the official [Uniwind Vite plugin](https://docs.uniwind.dev/quickstart#vite), and aims to match its functionality as closely as possible. All Uniwind features should work as expected - see the limitations section below for any documented differences.
 
 ## Compatibility
 See the table below for tested versions of `uniwind-plugin-next` and corresponding versions of `uniwind`. Other versions of `uniwind` may work, but are not guaranteed to.
 
-Tested on `next` version `16.1`, but other versions will likely work fine.
+Tested on Next `16.1`, but other versions will likely work fine.
 
 | uniwind-plugin-next | Uniwind |
 |---------------------|---------|
@@ -18,16 +18,17 @@ Tested on `next` version `16.1`, but other versions will likely work fine.
 ## Installation & setup
 This setup guide assumes you already have a next.js project setup with Tailwind v4
 
-1. Install uniwind and this plugin:
+1. Install uniwind and this plugin. You will probably also need `@expo/next-adapter` if you don't already have it, to handle react-native web support.
 
 ```shell
-pnpm install uniwind uniwind-plugin-next
+pnpm install uniwind uniwind-plugin-next @expo/next-adapter
 ```
 
 2. Wrap next.js config with `withUniwind()`
 ```ts
 // next.config.ts
 import type { NextConfig } from "next";
+import { withExpo } from "@expo/next-adapter";
 import { withUniwind } from 'uniwind-plugin-next'
 
 const nextConfig: NextConfig = {
@@ -35,19 +36,18 @@ const nextConfig: NextConfig = {
 };
 
 // Wrap your config with `withUniwind()`
-export default withUniwind(nextConfig, {
+export default withUniwind(withExpo(nextConfig), {
     cssEntryFile: './app/globals.css',
     // Takes the same options as the vite & metro plugins.
     // See https://docs.uniwind.dev/api/metro-config#configuration-options
 });
 ```
-> Note that you do not need `@expo/next-adapter` if you are using `uniwind-plugin-next`.
 
 3. Add the postcss plugin
 ```js
 const config = {
   plugins: {
-    "@tailwindcss/postcss": {},
+    '@tailwindcss/postcss': {},
     'uniwind-plugin-next/postcss': {}, // Add this line
   },
 };
@@ -75,6 +75,13 @@ return (
 
 6. Start the dev server to generate `uniwind-types.d.ts`. Make sure that it's included in your `tsconfig.json`'s `include` array.
 
+## SSR Considerations
+- This plugin marks all Uniwind web components with `'use client'` automatically, so you do not need to do this manually.
+
+- Be aware that some Uniwind features, such as `withUniwind` and `useResolveClassNames` will not work in a server environment, as they rely on accessing `window` or `document`.
+
+- 
+
 ## Known limitations
 
 - This plugin uses a much more primitive regex-based postcss plugin for transforming Uniwind CSS functions (`pixelRatio()`, `fontScale()`, `hairlineWidth()`) compared to the official Vite plugin (which uses a full AST parser). As a result, some edge cases may not be handled correctly. If you do not use these functions in your CSS, this will not impact you. If you do run into any issues, please open an issue.

package/dist/clientDirectiveLoader.js

@@ -0,0 +1,9 @@
+export default function clientDirectiveLoader(source) {
+    console.log(this.resourcePath);
+    // Don't add the directive if it's already present
+    if (source.startsWith('"use client"') || source.startsWith("'use client'")) {
+        return source;
+    }
+
+    return `"use client";\n${source}`;
+}

package/dist/index.cjs

@@ -26,6 +26,7 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 
 //#endregion
 let webpack = require("webpack");
+webpack = __toESM(webpack);
 let path = require("path");
 path = __toESM(path);
 let fs = require("fs");
@@ -330,11 +331,18 @@ var UniwindWebpackPlugin = class {
 				options: { stringifiedThemes: stringifyThemes(this.themes) }
 			}]
 		});
+		compiler.options.module.rules.push({
+			test: /\.js$/,
+			exclude: /index\.js$/,
+			include: /uniwind[\/\\]dist[\/\\]module[\/\\]components[\/\\]web/,
+			use: [{ loader: path.default.resolve(__dirname, "clientDirectiveLoader.js") }]
+		});
 	}
 };
 
 //#endregion
 //#region src/webpack/withUniwind.ts
+const { NormalModuleReplacementPlugin } = webpack.default;
 function withUniwind(nextConfig = {}, uniwindConfig) {
 	return {
 		...nextConfig,
@@ -345,23 +353,8 @@ function withUniwind(nextConfig = {}, uniwindConfig) {
 			"react-native-web"
 		]),
 		webpack(config, options) {
-			if (!config.resolve) config.resolve = {};
 			if (!config.plugins) config.plugins = [];
-			config.resolve.alias = {
-				...config.resolve.alias || {},
-				"react-native/Libraries/EventEmitter/RCTDeviceEventEmitter$": "react-native-web/dist/vendor/react-native/NativeEventEmitter/RCTDeviceEventEmitter",
-				"react-native/Libraries/vendor/emitter/EventEmitter$": "react-native-web/dist/vendor/react-native/emitter/EventEmitter",
-				"react-native/Libraries/EventEmitter/NativeEventEmitter$": "react-native-web/dist/vendor/react-native/NativeEventEmitter"
-			};
-			config.resolve.extensions = [
-				".web.js",
-				".web.jsx",
-				".web.ts",
-				".web.tsx",
-				...config.resolve?.extensions ?? []
-			];
-			config.plugins.push(new webpack.DefinePlugin({ __DEV__: JSON.stringify(process.env.NODE_ENV !== "production") }));
-			config.plugins.push(new webpack.NormalModuleReplacementPlugin(/^react-native$/, (resource) => {
+			config.plugins.push(new NormalModuleReplacementPlugin(/^react-native$/, (resource) => {
 				if ((resource.context || "").includes(`${path.default.sep}uniwind${path.default.sep}dist${path.default.sep}module${path.default.sep}components${path.default.sep}web`)) resource.request = "react-native-web";
 				else resource.request = "uniwind/components/index";
 			}));

package/dist/index.mjs

@@ -1,5 +1,5 @@
 import { n as __require } from "./chunk-3qlvafw2.mjs";
-import { DefinePlugin, NormalModuleReplacementPlugin } from "webpack";
+import webpack from "webpack";
 import path from "path";
 import fs from "fs";
 import { compile } from "@tailwindcss/node";
@@ -302,11 +302,18 @@ var UniwindWebpackPlugin = class {
 				options: { stringifiedThemes: stringifyThemes(this.themes) }
 			}]
 		});
+		compiler.options.module.rules.push({
+			test: /\.js$/,
+			exclude: /index\.js$/,
+			include: /uniwind[\/\\]dist[\/\\]module[\/\\]components[\/\\]web/,
+			use: [{ loader: path.resolve(__dirname, "clientDirectiveLoader.js") }]
+		});
 	}
 };
 
 //#endregion
 //#region src/webpack/withUniwind.ts
+const { NormalModuleReplacementPlugin } = webpack;
 function withUniwind(nextConfig = {}, uniwindConfig) {
 	return {
 		...nextConfig,
@@ -317,22 +324,7 @@ function withUniwind(nextConfig = {}, uniwindConfig) {
 			"react-native-web"
 		]),
 		webpack(config, options) {
-			if (!config.resolve) config.resolve = {};
 			if (!config.plugins) config.plugins = [];
-			config.resolve.alias = {
-				...config.resolve.alias || {},
-				"react-native/Libraries/EventEmitter/RCTDeviceEventEmitter$": "react-native-web/dist/vendor/react-native/NativeEventEmitter/RCTDeviceEventEmitter",
-				"react-native/Libraries/vendor/emitter/EventEmitter$": "react-native-web/dist/vendor/react-native/emitter/EventEmitter",
-				"react-native/Libraries/EventEmitter/NativeEventEmitter$": "react-native-web/dist/vendor/react-native/NativeEventEmitter"
-			};
-			config.resolve.extensions = [
-				".web.js",
-				".web.jsx",
-				".web.ts",
-				".web.tsx",
-				...config.resolve?.extensions ?? []
-			];
-			config.plugins.push(new DefinePlugin({ __DEV__: JSON.stringify(process.env.NODE_ENV !== "production") }));
 			config.plugins.push(new NormalModuleReplacementPlugin(/^react-native$/, (resource) => {
 				if ((resource.context || "").includes(`${path.sep}uniwind${path.sep}dist${path.sep}module${path.sep}components${path.sep}web`)) resource.request = "react-native-web";
 				else resource.request = "uniwind/components/index";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "uniwind-plugin-next",
-  "version": "1.0.1",
+  "version": "1.1.1",
   "description": "Compatibility plugin for using Uniwind with Next.js",
   "devDependencies": {
     "@types/node": "^25.0.3",