uniwind-plugin-next 1.1.1 → 1.2.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Alexander Nicholson
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -2,9 +2,11 @@
 
 > This is an unofficial plugin, and is not affiliated with Uniwind or Next.js.
 
-[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. 
+[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.
+
+## Example
+See a fully working example project here: [Demo](http://uniwind-next.a16n.dev/) ([Source](https://github.com/a16n-dev/uniwind-plugin-next/tree/main/examples/next-16))
 
-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.
@@ -13,7 +15,8 @@ Tested on Next `16.1`, but other versions will likely work fine.
 
 | uniwind-plugin-next | Uniwind |
 |---------------------|---------|
-| `1.0.0`             | `1.2.2` |
+| `1.1.x`             | `1.2.2` |
+| `1.2.x`             | `1.2.2` |
 
 ## Installation & setup
 This setup guide assumes you already have a next.js project setup with Tailwind v4
@@ -47,8 +50,8 @@ export default withUniwind(withExpo(nextConfig), {
 ```js
 const config = {
   plugins: {
-    '@tailwindcss/postcss': {},
     'uniwind-plugin-next/postcss': {}, // Add this line
+    '@tailwindcss/postcss': {},
   },
 };
 
@@ -80,8 +83,4 @@ return (
 
 - 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.
+- Additional code is required to avoid a flash of unstyled content (FOUC). See the example project for reference.

package/dist/_virtual/rolldown_runtime.cjs

@@ -0,0 +1,29 @@
+//#region rolldown:runtime
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+	if (from && typeof from === "object" || typeof from === "function") {
+		for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
+			key = keys[i];
+			if (!__hasOwnProp.call(to, key) && key !== except) {
+				__defProp(to, key, {
+					get: ((k) => from[k]).bind(null, key),
+					enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+				});
+			}
+		}
+	}
+	return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+	value: mod,
+	enumerable: true
+}) : target, mod));
+
+//#endregion
+
+exports.__toESM = __toESM;

package/dist/index.cjs

@@ -1,369 +1,3 @@
-//#region rolldown:runtime
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __copyProps = (to, from, except, desc) => {
-	if (from && typeof from === "object" || typeof from === "function") {
-		for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
-			key = keys[i];
-			if (!__hasOwnProp.call(to, key) && key !== except) {
-				__defProp(to, key, {
-					get: ((k) => from[k]).bind(null, key),
-					enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
-				});
-			}
-		}
-	}
-	return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
-	value: mod,
-	enumerable: true
-}) : target, mod));
+const require_withUniwind = require('./webpack/withUniwind.cjs');
 
-//#endregion
-let webpack = require("webpack");
-webpack = __toESM(webpack);
-let path = require("path");
-path = __toESM(path);
-let fs = require("fs");
-fs = __toESM(fs);
-let _tailwindcss_node = require("@tailwindcss/node");
-let lightningcss = require("lightningcss");
-
-//#region src/webpack/uniwind/src/utils/common.ts
-const uniq = (arr) => Array.from(new Set(arr));
-
-//#endregion
-//#region src/webpack/patchFsForWritingUniwindCSSFile.ts
-const uniwindDir = path.default.dirname(require.resolve("uniwind/package.json"));
-/**
-* The contents of the `css` directory is copied direct from the uniwind source code. This makes it easier to keep it in
-* sync with the upstream uniwind package, so we purposefully avoid modifying any code in `css`.
-*
-* However, we do need to patch `buildCSS()` to output the generated `uniwind.css` file into the `uniwind` package directory
-* within node_modules. To do this we temporarily patch `fs.writeFileSync` to redirect all writes of `uniwind.css` to the
-* correct location.
-*
-* Usage:
-* ```ts
-* const unpatchFs = patchFs();
-* await buildCSS(themes, cssEntryFile);
-* unpatchFs();
-*/
-function patchFsForWritingUniwindCSSFile() {
-	const originalWriteFileSync = fs.default.writeFileSync;
-	fs.default.writeFileSync = function(_path, data, options) {
-		let newPath = _path;
-		if (typeof newPath === "string" && newPath.endsWith("uniwind.css")) newPath = path.default.join(uniwindDir, "uniwind.css");
-		return originalWriteFileSync.call(fs.default, newPath, data, options);
-	};
-	return function unpatchFs() {
-		fs.default.writeFileSync = originalWriteFileSync;
-	};
-}
-
-//#endregion
-//#region src/webpack/uniwind/src/css/insets.ts
-const types = ["m", "p"];
-const sides = [
-	"",
-	"x",
-	"y",
-	"t",
-	"b",
-	"l",
-	"r"
-];
-const spacing = "--spacing(--value(integer))";
-const length = "--value([length])";
-const generateCSSForInsets = () => {
-	let css = `@utility h-screen-safe {
-    height: calc(100vh - (env(safe-area-inset-top) + env(safe-area-inset-bottom)));
-}\n`;
-	const getInsetsForSide = (side) => {
-		switch (side) {
-			case "t": return ["top"];
-			case "b": return ["bottom"];
-			case "l": return ["left"];
-			case "r": return ["right"];
-			case "x": return ["left", "right"];
-			case "y": return ["top", "bottom"];
-			default: return [
-				"top",
-				"bottom",
-				"left",
-				"right"
-			];
-		}
-	};
-	types.forEach((type) => {
-		sides.forEach((side) => {
-			const styleName = type === "m" ? "margin" : "padding";
-			const styles = getInsetsForSide(side).map((inset) => `${styleName}-${inset}: env(safe-area-inset-${inset});`);
-			const safeStyles = styles.flatMap((style) => {
-				const styleWithoutSemicolon = style.replace(";", "");
-				return [styleWithoutSemicolon.replace(/: (env.*)/, (_, env) => `: max(${env}, ${spacing});`), styleWithoutSemicolon.replace(/: (env.*)/, (_, env) => `: max(${env}, ${length});`)];
-			});
-			const safeOffsetStyles = styles.flatMap((style) => {
-				const styleWithoutSemicolon = style.replace(";", "");
-				return [styleWithoutSemicolon.replace(/: (env.*)/, (_, env) => `: calc(${env} + ${spacing});`), styleWithoutSemicolon.replace(/: (env.*)/, (_, env) => `: calc(${env} + ${length});`)];
-			});
-			css += `
-                @utility ${type}${side}-safe {
-                    ${styles.join("\n    ")}
-                }
-                
-                @utility ${type}${side}-safe-or-* {
-                    ${safeStyles.join("\n    ")}
-                }
-                
-                @utility ${type}${side}-safe-offset-* {
-                    ${safeOffsetStyles.join("\n    ")}
-                }
-            `;
-		});
-	});
-	return css.replaceAll("        ", "").trim() + "\n";
-};
-
-//#endregion
-//#region src/webpack/uniwind/src/metro/logger.ts
-const red = "\x1B[91m";
-const yellow = "\x1B[33m";
-const blue = "\x1B[36m";
-const reset = "\x1B[0m";
-var Logger = class Logger {
-	static {
-		this.debug = false;
-	}
-	constructor(name$1) {
-		this.name = name$1;
-	}
-	static log(message, meta = "") {
-		if (!Logger.debug) return;
-		console.log(`${blue}Uniwind ${meta}- ${message}${reset}`);
-	}
-	static error(message, meta = "") {
-		console.log(`${red}Uniwind Error ${meta}- ${message}${reset}`);
-	}
-	static warn(message, meta = "") {
-		if (!Logger.debug) return;
-		console.log(`${yellow}Uniwind Warning ${meta}- ${message}${reset}`);
-	}
-	log(message) {
-		Logger.log(message, `[${this.name} Processor] `);
-	}
-	error(message) {
-		Logger.error(message, `[${this.name} Processor] `);
-	}
-	warn(message) {
-		Logger.warn(message, `[${this.name} Processor] `);
-	}
-};
-
-//#endregion
-//#region src/webpack/uniwind/src/css/themes.ts
-const readFileSafe = (filePath) => {
-	try {
-		return fs.default.readFileSync(filePath, "utf-8");
-	} catch {
-		return null;
-	}
-};
-const isExcludedDependency = (url) => [
-	url.includes("node_modules/tailwindcss"),
-	url.includes("node_modules/@tailwindcss"),
-	url.includes("node_modules/uniwind")
-].some(Boolean);
-const generateCSSForThemes = async (themes, input) => {
-	const themesVariables = Object.fromEntries(themes.map((theme) => [theme, /* @__PURE__ */ new Set()]));
-	const findVariantsRec = async (cssPath) => {
-		const css = readFileSafe(cssPath);
-		if (css === null) return;
-		const { dependencies } = (0, lightningcss.transform)({
-			code: Buffer.from(css),
-			filename: "uniwind.css",
-			analyzeDependencies: true,
-			visitor: { Rule: (rule) => {
-				if (rule.type === "unknown" && rule.value.name === "variant") {
-					const [firstPrelude] = rule.value.prelude;
-					if (firstPrelude?.type !== "token" || firstPrelude.value.type !== "ident" || !themes.includes(firstPrelude.value.value)) return;
-					const theme = firstPrelude.value.value;
-					rule.value.block?.forEach((block) => {
-						if (block.type === "dashed-ident") themesVariables[theme]?.add(block.value);
-					});
-				}
-			} }
-		});
-		if (!Array.isArray(dependencies)) return;
-		const importUrls = /* @__PURE__ */ new Set();
-		await (0, _tailwindcss_node.compile)(dependencies.filter((dependency) => {
-			if (dependency.url.startsWith(".")) {
-				importUrls.add(path.default.resolve(path.default.dirname(cssPath), dependency.url));
-				return false;
-			}
-			return !isExcludedDependency(dependency.url);
-		}).map((dependency) => `@import "${dependency.url}";`).join("\n"), {
-			base: path.default.resolve(path.default.dirname(cssPath)),
-			onDependency: (dependency) => {
-				if (isExcludedDependency(dependency)) return;
-				importUrls.add(dependency);
-			}
-		});
-		for (const filePath of importUrls) await findVariantsRec(filePath);
-	};
-	await findVariantsRec(input);
-	let hasErrors = false;
-	const hasVariables = Object.values(themesVariables).some((variables) => variables.size > 0);
-	Object.values(themesVariables).forEach((variables) => {
-		Object.entries(themesVariables).forEach(([checkedTheme, checkedVariables]) => {
-			variables.forEach((variable) => {
-				if (!checkedVariables.has(variable)) {
-					Logger.error(`Theme ${checkedTheme} is missing variable ${variable}`);
-					hasErrors = true;
-				}
-			});
-		});
-	});
-	if (hasErrors) Logger.error("All themes must have the same variables");
-	const variablesCSS = hasVariables ? [
-		"",
-		"@theme {",
-		...Array.from(Object.values(themesVariables).at(0) ?? []).map((variable) => `    ${variable}: unset;`),
-		"}"
-	] : [];
-	return [...themes.map((theme) => `@custom-variant ${theme} (&:where(.${theme}, .${theme} *));`), ...variablesCSS].join("\n");
-};
-
-//#endregion
-//#region src/webpack/uniwind/src/css/variants.ts
-const variants = [
-	"ios",
-	"android",
-	"web",
-	"native"
-];
-const generateCSSForVariants = () => {
-	let css = "";
-	variants.forEach((variant) => {
-		css += `@custom-variant ${variant} (${variant === "web" ? "html &" : `@media ${variant}`});\n`;
-	});
-	return css;
-};
-
-//#endregion
-//#region src/webpack/uniwind/src/css/index.ts
-const dirname = typeof __dirname !== "undefined" ? __dirname : __dirname;
-const buildCSS = async (themes, input) => {
-	const variants$1 = generateCSSForVariants();
-	const insets = generateCSSForInsets();
-	const themesCSS = await generateCSSForThemes(themes, input);
-	const cssFile = path.default.join(dirname, "../../uniwind.css");
-	if ((fs.default.existsSync(cssFile) ? fs.default.readFileSync(cssFile, "utf-8") : "") === cssFile) return;
-	fs.default.writeFileSync(cssFile, [
-		variants$1,
-		insets,
-		themesCSS
-	].join("\n"));
-};
-
-//#endregion
-//#region src/webpack/uniwind/package.json
-var name = "uniwind";
-
-//#endregion
-//#region src/webpack/uniwind/src/utils/buildDtsFile.ts
-const buildDtsFile = (dtsPath, stringifiedThemes) => {
-	const oldDtsContent = fs.default.existsSync(dtsPath) ? fs.default.readFileSync(dtsPath, "utf-8") : "";
-	const dtsContent = [
-		`// NOTE: This file is generated by ${name} and it should not be edited manually.`,
-		`/// <reference types="${name}/types" />`,
-		"",
-		`declare module '${name}' {`,
-		`    export interface UniwindConfig {`,
-		`        themes: readonly ${stringifiedThemes}`,
-		`    }`,
-		`}`,
-		"",
-		`export {}`,
-		""
-	].join("\n");
-	if (oldDtsContent === dtsContent) return;
-	fs.default.writeFileSync(dtsPath, dtsContent);
-};
-
-//#endregion
-//#region src/webpack/uniwind/src/utils/stringifyThemes.ts
-const stringifyThemes = (themes = []) => `[${themes.map((theme) => `'${theme}'`).join(", ")}]`;
-
-//#endregion
-//#region src/webpack/UniwindWebpackPlugin.ts
-var UniwindWebpackPlugin = class {
-	constructor({ cssEntryFile, extraThemes = [], dtsFile = "uniwind-types.d.ts" }) {
-		this.hasRun = false;
-		this.themes = uniq([
-			"light",
-			"dark",
-			...extraThemes ?? []
-		]);
-		this.dtsFile = dtsFile;
-		this.cssEntryFile = cssEntryFile;
-	}
-	apply(compiler) {
-		compiler.hooks.beforeCompile.tapPromise("UniwindWebpackPlugin", async () => {
-			if (this.hasRun) return;
-			this.hasRun = true;
-			const removePatch = patchFsForWritingUniwindCSSFile();
-			await buildCSS(this.themes, this.cssEntryFile);
-			removePatch();
-			buildDtsFile(this.dtsFile, stringifyThemes(this.themes));
-		});
-		compiler.options.module = compiler.options.module || { rules: [] };
-		compiler.options.module.rules.push({
-			test: /config\.c?js$/,
-			include: /uniwind[\/\\]dist/,
-			use: [{
-				loader: path.default.resolve(__dirname, "configInjectionLoader.js"),
-				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,
-		transpilePackages: uniq([
-			...nextConfig.transpilePackages || [],
-			"uniwind",
-			"react-native",
-			"react-native-web"
-		]),
-		webpack(config, options) {
-			if (!config.plugins) config.plugins = [];
-			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";
-			}));
-			config.plugins.push(new UniwindWebpackPlugin(uniwindConfig));
-			if (typeof nextConfig.webpack === "function") return nextConfig.webpack(config, options);
-			return config;
-		}
-	};
-}
-
-//#endregion
-exports.withUniwind = withUniwind;
+exports.withUniwind = require_withUniwind.withUniwind;

package/dist/index.d.cts

@@ -1,11 +1,2 @@
-//#region src/webpack/types.d.ts
-type UniwindConfig = {
-  cssEntryFile: string;
-  extraThemes?: Array<string>;
-  dtsFile?: string;
-};
-//#endregion
-//#region src/webpack/withUniwind.d.ts
-declare function withUniwind(nextConfig: any | undefined, uniwindConfig: UniwindConfig): any;
-//#endregion
+import { withUniwind } from "./webpack/withUniwind.cjs";
 export { withUniwind };

package/dist/index.d.mts

@@ -1,11 +1,2 @@
-//#region src/webpack/types.d.ts
-type UniwindConfig = {
-  cssEntryFile: string;
-  extraThemes?: Array<string>;
-  dtsFile?: string;
-};
-//#endregion
-//#region src/webpack/withUniwind.d.ts
-declare function withUniwind(nextConfig: any | undefined, uniwindConfig: UniwindConfig): any;
-//#endregion
+import { withUniwind } from "./webpack/withUniwind.mjs";
 export { withUniwind };