react-native-web-tailwind-compat 1.0.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

@@ -0,0 +1,57 @@
+# react-native-web-tailwind-compat
+Tailwind 4 uses CSS layers to organise styles, but react-native-web does not yet support CSS layers, resulting in  react-native-web styles overriding tailwind styles. This package fixes this by wrapping react-native-web reset styles in a `@layer rnw {}` block.
+
+## Installation
+
+```bash
+npm install react-native-web-tailwind-compat
+```
+
+Import the package at the top of your js entry point:
+
+```ts
+// src/index.tsx
+import 'react-native-web-tailwind-compat';
+// Other imports...
+```
+
+Define the layer *before* importing tailwind styles:
+
+```css
+/* src/global.css */
+@layer rnw;
+@import 'tailwindcss';
+```
+
+## Server rendering
+If you want to include react-native-web styles in SSR, use the provided `getServerStyleSheet` function, for example with Next.js:
+
+```tsx
+//ReactNativeWebStyleSheet.tsx
+"use client";
+import { useRef } from "react";
+import { useServerInsertedHTML } from "next/navigation";
+import { getServerStylesheet } from "react-native-web-tailwind-compat";
+
+export function ReactNativeWebLayeredStyleSheet() {
+    const hasInserted = useRef(false);
+    useServerInsertedHTML(() => {
+        if (hasInserted.current) return;
+        hasInserted.current = true;
+        
+        const sheet = getServerStylesheet();
+
+        return (
+            <style
+                id={sheet.id}
+                dangerouslySetInnerHTML={{
+                    __html: sheet.textContent,
+                }}
+                
+            />
+        );
+    });
+    return null;
+}
+
+```

package/dist/ReactNativeWebTailwindCompat.cjs

@@ -0,0 +1,41 @@
+const require_utils = require('./utils.cjs');
+
+//#region src/ReactNativeWebTailwindCompat.ts
+if (typeof window !== "undefined") {
+	let elemProxy;
+	const _getElementById = document.getElementById;
+	document.getElementById = function(id) {
+		return id !== "react-native-stylesheet" ? _getElementById.call(document, id) : elemProxy ??= { sheet: buildRNWProxy() };
+	};
+	function buildRNWProxy() {
+		const flattenedSheet = new CSSStyleSheet();
+		let layeredSheet = document.getElementById(require_utils.NEW_SHEET_ID)?.sheet;
+		if (!layeredSheet) {
+			const styleElem = document.createElement("style");
+			styleElem.id = require_utils.NEW_SHEET_ID;
+			document.head.prepend(styleElem);
+			layeredSheet = styleElem.sheet;
+		}
+		if (!layeredSheet) return flattenedSheet;
+		if (!(layeredSheet.cssRules[0] instanceof CSSLayerBlockRule)) layeredSheet.insertRule("@layer rnw {}", 0);
+		flattenRules(layeredSheet.cssRules, flattenedSheet);
+		return new Proxy(flattenedSheet, { get(target, prop) {
+			if (prop === "insertRule") return function insertRule(text, index) {
+				flattenedSheet.insertRule(text, index);
+				const cutoffIndex = [...flattenedSheet.cssRules].findIndex((rule) => require_utils.layerBoundaryRegex.exec(rule.cssText));
+				if (cutoffIndex === -1 || index <= cutoffIndex) {
+					const layerRule = layeredSheet.cssRules[0];
+					layerRule.insertRule(text, layerRule.cssRules.length);
+				} else layeredSheet.insertRule(text, layeredSheet.cssRules.length);
+			};
+			const value = target[prop];
+			return typeof value === "function" ? value.bind(target) : value;
+		} });
+	}
+	function flattenRules(rules, targetSheet) {
+		for (const rule of rules) if (rule instanceof CSSLayerBlockRule) flattenRules(rule.cssRules, targetSheet);
+		else targetSheet.insertRule(rule.cssText, targetSheet.cssRules.length);
+	}
+}
+
+//#endregion

package/dist/ReactNativeWebTailwindCompat.mjs

@@ -0,0 +1,43 @@
+import { NEW_SHEET_ID, layerBoundaryRegex } from "./utils.mjs";
+
+//#region src/ReactNativeWebTailwindCompat.ts
+if (typeof window !== "undefined") {
+	let elemProxy;
+	const _getElementById = document.getElementById;
+	document.getElementById = function(id) {
+		return id !== "react-native-stylesheet" ? _getElementById.call(document, id) : elemProxy ??= { sheet: buildRNWProxy() };
+	};
+	function buildRNWProxy() {
+		const flattenedSheet = new CSSStyleSheet();
+		let layeredSheet = document.getElementById(NEW_SHEET_ID)?.sheet;
+		if (!layeredSheet) {
+			const styleElem = document.createElement("style");
+			styleElem.id = NEW_SHEET_ID;
+			document.head.prepend(styleElem);
+			layeredSheet = styleElem.sheet;
+		}
+		if (!layeredSheet) return flattenedSheet;
+		if (!(layeredSheet.cssRules[0] instanceof CSSLayerBlockRule)) layeredSheet.insertRule("@layer rnw {}", 0);
+		flattenRules(layeredSheet.cssRules, flattenedSheet);
+		return new Proxy(flattenedSheet, { get(target, prop) {
+			if (prop === "insertRule") return function insertRule(text, index) {
+				flattenedSheet.insertRule(text, index);
+				const cutoffIndex = [...flattenedSheet.cssRules].findIndex((rule) => layerBoundaryRegex.exec(rule.cssText));
+				if (cutoffIndex === -1 || index <= cutoffIndex) {
+					const layerRule = layeredSheet.cssRules[0];
+					layerRule.insertRule(text, layerRule.cssRules.length);
+				} else layeredSheet.insertRule(text, layeredSheet.cssRules.length);
+			};
+			const value = target[prop];
+			return typeof value === "function" ? value.bind(target) : value;
+		} });
+	}
+	function flattenRules(rules, targetSheet) {
+		for (const rule of rules) if (rule instanceof CSSLayerBlockRule) flattenRules(rule.cssRules, targetSheet);
+		else targetSheet.insertRule(rule.cssText, targetSheet.cssRules.length);
+	}
+}
+
+//#endregion
+export {  };
+//# sourceMappingURL=ReactNativeWebTailwindCompat.mjs.map

package/dist/ReactNativeWebTailwindCompat.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReactNativeWebTailwindCompat.mjs","names":["elemProxy: HTMLStyleElement"],"sources":["../src/ReactNativeWebTailwindCompat.ts"],"sourcesContent":["import { layerBoundaryRegex, NEW_SHEET_ID } from \"./utils\";\n\nif (typeof window !== \"undefined\") {\n  let elemProxy: HTMLStyleElement;\n  const _getElementById = document.getElementById;\n  document.getElementById = function (id: string) {\n    return id !== \"react-native-stylesheet\"\n      ? _getElementById.call(document, id)\n      : (elemProxy ??= { sheet: buildRNWProxy() } as HTMLStyleElement);\n  };\n\n  function buildRNWProxy() {\n    const flattenedSheet = new CSSStyleSheet();\n    let layeredSheet = (\n      document.getElementById(NEW_SHEET_ID) as HTMLStyleElement\n    )?.sheet;\n\n    if (!layeredSheet) {\n      const styleElem = document.createElement(\"style\");\n      styleElem.id = NEW_SHEET_ID;\n      document.head.prepend(styleElem);\n      layeredSheet = styleElem.sheet;\n    }\n    if (!layeredSheet) return flattenedSheet;\n    // ensure that the first rule in the layered sheet is a layer\n    if (!(layeredSheet.cssRules[0] instanceof CSSLayerBlockRule)) {\n      layeredSheet.insertRule(\"@layer rnw {}\", 0);\n    }\n    // Traverse the layered sheet to build the flattened sheet\n    flattenRules(layeredSheet.cssRules, flattenedSheet);\n\n    return new Proxy(flattenedSheet, {\n      get(target, prop) {\n        if (prop === \"insertRule\") {\n          return function insertRule(text: string, index: number) {\n            flattenedSheet.insertRule(text, index);\n            // find the index of the groups\n            const cutoffIndex = [...flattenedSheet.cssRules].findIndex((rule) =>\n              layerBoundaryRegex.exec(rule.cssText),\n            );\n            if (cutoffIndex === -1 || index <= cutoffIndex) {\n              // insert into the layer\n              const layerRule = layeredSheet.cssRules[0] as CSSLayerBlockRule;\n              layerRule.insertRule(text, layerRule.cssRules.length);\n            } else {\n              // insert into the sheet normally\n              layeredSheet.insertRule(text, layeredSheet.cssRules.length);\n            }\n          };\n        }\n        const value = (target as any)[prop];\n        return typeof value === \"function\" ? value.bind(target) : value;\n      },\n    });\n  }\n\n  function flattenRules(\n    rules: CSSRuleList | CSSRule[],\n    targetSheet: CSSStyleSheet,\n  ) {\n    for (const rule of rules) {\n      if (rule instanceof CSSLayerBlockRule) {\n        flattenRules(rule.cssRules, targetSheet);\n      } else {\n        targetSheet.insertRule(rule.cssText, targetSheet.cssRules.length);\n      }\n    }\n  }\n}\n"],"mappings":";;;AAEA,IAAI,OAAO,WAAW,aAAa;CACjC,IAAIA;CACJ,MAAM,kBAAkB,SAAS;AACjC,UAAS,iBAAiB,SAAU,IAAY;AAC9C,SAAO,OAAO,4BACV,gBAAgB,KAAK,UAAU,GAAG,GACjC,cAAc,EAAE,OAAO,eAAe,EAAE;;CAG/C,SAAS,gBAAgB;EACvB,MAAM,iBAAiB,IAAI,eAAe;EAC1C,IAAI,eACF,SAAS,eAAe,aAAa,EACpC;AAEH,MAAI,CAAC,cAAc;GACjB,MAAM,YAAY,SAAS,cAAc,QAAQ;AACjD,aAAU,KAAK;AACf,YAAS,KAAK,QAAQ,UAAU;AAChC,kBAAe,UAAU;;AAE3B,MAAI,CAAC,aAAc,QAAO;AAE1B,MAAI,EAAE,aAAa,SAAS,cAAc,mBACxC,cAAa,WAAW,iBAAiB,EAAE;AAG7C,eAAa,aAAa,UAAU,eAAe;AAEnD,SAAO,IAAI,MAAM,gBAAgB,EAC/B,IAAI,QAAQ,MAAM;AAChB,OAAI,SAAS,aACX,QAAO,SAAS,WAAW,MAAc,OAAe;AACtD,mBAAe,WAAW,MAAM,MAAM;IAEtC,MAAM,cAAc,CAAC,GAAG,eAAe,SAAS,CAAC,WAAW,SAC1D,mBAAmB,KAAK,KAAK,QAAQ,CACtC;AACD,QAAI,gBAAgB,MAAM,SAAS,aAAa;KAE9C,MAAM,YAAY,aAAa,SAAS;AACxC,eAAU,WAAW,MAAM,UAAU,SAAS,OAAO;UAGrD,cAAa,WAAW,MAAM,aAAa,SAAS,OAAO;;GAIjE,MAAM,QAAS,OAAe;AAC9B,UAAO,OAAO,UAAU,aAAa,MAAM,KAAK,OAAO,GAAG;KAE7D,CAAC;;CAGJ,SAAS,aACP,OACA,aACA;AACA,OAAK,MAAM,QAAQ,MACjB,KAAI,gBAAgB,kBAClB,cAAa,KAAK,UAAU,YAAY;MAExC,aAAY,WAAW,KAAK,SAAS,YAAY,SAAS,OAAO"}

package/dist/getServerStyleSheet.cjs

@@ -0,0 +1,19 @@
+"use client";
+
+const require_utils = require('./utils.cjs');
+let react_native = require("react-native");
+
+//#region src/getServerStyleSheet.ts
+function getServerStyleSheet() {
+	return {
+		id: require_utils.NEW_SHEET_ID,
+		textContent: processSheetText(react_native.StyleSheet.getSheet().textContent)
+	};
+}
+function processSheetText(text) {
+	const endIndex = require_utils.layerBoundaryRegex.exec(text)?.index ?? 0;
+	return `@layer rnw {\n${text.substring(0, endIndex)}}\n${text.substring(endIndex)}`;
+}
+
+//#endregion
+exports.getServerStyleSheet = getServerStyleSheet;

package/dist/getServerStyleSheet.d.cts

@@ -0,0 +1,8 @@
+//#region src/getServerStyleSheet.d.ts
+declare function getServerStyleSheet(): {
+  id: string;
+  textContent: string;
+};
+//#endregion
+export { getServerStyleSheet };
+//# sourceMappingURL=getServerStyleSheet.d.cts.map

package/dist/getServerStyleSheet.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"getServerStyleSheet.d.cts","names":[],"sources":["../src/getServerStyleSheet.ts"],"sourcesContent":[],"mappings":";iBAIgB,mBAAA,CAAA;EAAA,EAAA,EAAA,MAAA"}

package/dist/getServerStyleSheet.d.mts

@@ -0,0 +1,8 @@
+//#region src/getServerStyleSheet.d.ts
+declare function getServerStyleSheet(): {
+  id: string;
+  textContent: string;
+};
+//#endregion
+export { getServerStyleSheet };
+//# sourceMappingURL=getServerStyleSheet.d.mts.map

package/dist/getServerStyleSheet.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"getServerStyleSheet.d.mts","names":[],"sources":["../src/getServerStyleSheet.ts"],"sourcesContent":[],"mappings":";iBAIgB,mBAAA,CAAA;EAAA,EAAA,EAAA,MAAA"}

package/dist/getServerStyleSheet.mjs

@@ -0,0 +1,20 @@
+"use client";
+
+import { NEW_SHEET_ID, layerBoundaryRegex } from "./utils.mjs";
+import { StyleSheet } from "react-native";
+
+//#region src/getServerStyleSheet.ts
+function getServerStyleSheet() {
+	return {
+		id: NEW_SHEET_ID,
+		textContent: processSheetText(StyleSheet.getSheet().textContent)
+	};
+}
+function processSheetText(text) {
+	const endIndex = layerBoundaryRegex.exec(text)?.index ?? 0;
+	return `@layer rnw {\n${text.substring(0, endIndex)}}\n${text.substring(endIndex)}`;
+}
+
+//#endregion
+export { getServerStyleSheet };
+//# sourceMappingURL=getServerStyleSheet.mjs.map

package/dist/getServerStyleSheet.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"getServerStyleSheet.mjs","names":[],"sources":["../src/getServerStyleSheet.ts"],"sourcesContent":["\"use client\";\nimport { StyleSheet } from \"react-native\";\nimport { layerBoundaryRegex, NEW_SHEET_ID } from \"./utils\";\n\nexport function getServerStyleSheet() {\n  const sheet = (StyleSheet as any).getSheet();\n\n  return {\n    id: NEW_SHEET_ID,\n    textContent: processSheetText(sheet.textContent),\n  };\n}\n\nexport function processSheetText(text: string): string {\n  const endIndex = layerBoundaryRegex.exec(text)?.index ?? 0;\n  return `@layer rnw {\\n${text.substring(0, endIndex)}}\\n${text.substring(endIndex)}`;\n}\n"],"mappings":";;;;;;AAIA,SAAgB,sBAAsB;AAGpC,QAAO;EACL,IAAI;EACJ,aAAa,iBAJA,WAAmB,UAAU,CAIN,YAAY;EACjD;;AAGH,SAAgB,iBAAiB,MAAsB;CACrD,MAAM,WAAW,mBAAmB,KAAK,KAAK,EAAE,SAAS;AACzD,QAAO,iBAAiB,KAAK,UAAU,GAAG,SAAS,CAAC,KAAK,KAAK,UAAU,SAAS"}

package/dist/index.cjs

@@ -0,0 +1,4 @@
+require('./ReactNativeWebTailwindCompat.cjs');
+const require_getServerStyleSheet = require('./getServerStyleSheet.cjs');
+
+exports.getServerStyleSheet = require_getServerStyleSheet.getServerStyleSheet;

package/dist/index.d.cts

@@ -0,0 +1,2 @@
+import { getServerStyleSheet } from "./getServerStyleSheet.cjs";
+export { getServerStyleSheet };

package/dist/index.d.mts

@@ -0,0 +1,2 @@
+import { getServerStyleSheet } from "./getServerStyleSheet.mjs";
+export { getServerStyleSheet };

package/dist/index.mjs

@@ -0,0 +1,4 @@
+import "./ReactNativeWebTailwindCompat.mjs";
+import { getServerStyleSheet } from "./getServerStyleSheet.mjs";
+
+export { getServerStyleSheet };

package/dist/utils.cjs

@@ -0,0 +1,8 @@
+
+//#region src/utils.ts
+const NEW_SHEET_ID = "react-native-stylesheet-layered";
+const layerBoundaryRegex = /\[stylesheet-group="[^01]"]/;
+
+//#endregion
+exports.NEW_SHEET_ID = NEW_SHEET_ID;
+exports.layerBoundaryRegex = layerBoundaryRegex;

package/dist/utils.mjs

@@ -0,0 +1,7 @@
+//#region src/utils.ts
+const NEW_SHEET_ID = "react-native-stylesheet-layered";
+const layerBoundaryRegex = /\[stylesheet-group="[^01]"]/;
+
+//#endregion
+export { NEW_SHEET_ID, layerBoundaryRegex };
+//# sourceMappingURL=utils.mjs.map

package/dist/utils.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.mjs","names":[],"sources":["../src/utils.ts"],"sourcesContent":["export const NEW_SHEET_ID = \"react-native-stylesheet-layered\";\n\nexport const layerBoundaryRegex = /\\[stylesheet-group=\"[^01]\"]/;\n"],"mappings":";AAAA,MAAa,eAAe;AAE5B,MAAa,qBAAqB"}

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "react-native-web-tailwind-compat",
+  "version": "1.0.0",
+  "author": "Alexander Nicholson",
+  "description": "Adds CSS layers to react native web styles, allowing it to be used with TailwindCSS v4",
+  "homepage": "https://github.com/a16n-dev/uniwind-plugin-next#readme",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/a16n-dev/uniwind-plugin-next.git"
+  },
+  "devDependencies": {
+    "@vitest/ui": "^4.0.16",
+    "tsdown": "^0.18.2",
+    "vitest": "^4.0.16"
+  },
+  "peerDependencies": {
+    "react-native": "^0.79",
+    "react-native-web": "^0.19"
+  },
+  "exports": {
+    ".": {
+      "require": "./dist/index.cjs",
+      "import": "./dist/index.mjs"
+    },
+    "./package.json": "./package.json"
+  },
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.cts",
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "tsdown",
+    "dev": "tsdown --watch",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run"
+  }
+}