uniwind-plugin-next 1.1.2 → 1.3.0

package/README.md

@@ -2,18 +2,21 @@
 
 > 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.
 
 Tested on Next `16.1`, but other versions will likely work fine.
 
-| uniwind-plugin-next | Uniwind |
-|---------------------|---------|
-| `1.0.0`             | `1.2.2` |
+| Uniwind         | uniwind-plugin-next |
+|-----------------|---------------------|
+| `1.2.2`-`1.2.3` | `1.1.0`-`1.2.0`     |
+| `1.2.4`         | `1.3.0`             |
 
 ## Installation & setup
 This setup guide assumes you already have a next.js project setup with Tailwind v4
@@ -42,13 +45,24 @@ export default withUniwind(withExpo(nextConfig), {
     // See https://docs.uniwind.dev/api/metro-config#configuration-options
 });
 ```
+#### Uniwind Pro
+
+If you're using the pro version of Uniwind, use `withUniwindPro()` instead of `withUniwind()`.
+
+```ts
+// next.config.ts
+import { withUniwindPro } from 'uniwind-plugin-next'
+
+export default withUniwindPro(withExpo(nextConfig), { ... });
+```
+
 
 3. Add the postcss plugin
 ```js
 const config = {
   plugins: {
-    '@tailwindcss/postcss': {},
     'uniwind-plugin-next/postcss': {}, // Add this line
+    '@tailwindcss/postcss': {},
   },
 };
 
@@ -80,8 +94,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,370 +1,13 @@
-//#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_withUniwindBase = require('./webpack/withUniwindBase.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$1 = 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$1, "../../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
-const dirname = typeof __dirname !== "undefined" ? __dirname : __dirname;
-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;
+//#region src/index.ts
 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;
-		}
-	};
+	return require_withUniwindBase.withUniwindBase("uniwind", nextConfig, uniwindConfig);
+}
+function withUniwindPro(nextConfig = {}, uniwindConfig) {
+	return require_withUniwindBase.withUniwindBase("uniwind-pro", nextConfig, uniwindConfig);
 }
 
 //#endregion
-exports.withUniwind = withUniwind;
+exports.withUniwind = withUniwind;
+exports.withUniwindPro = withUniwindPro;

package/dist/index.d.cts

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

package/dist/index.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.cts","names":[],"sources":["../src/index.ts"],"sourcesContent":[],"mappings":";;;iBAGgB,WAAA,6CAEC;iBAKD,cAAA,6CAEC"}

package/dist/index.d.mts

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

package/dist/index.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.mts","names":[],"sources":["../src/index.ts"],"sourcesContent":[],"mappings":";;;iBAGgB,WAAA,6CAEC;iBAKD,cAAA,6CAEC"}