react-native-web-tailwind-compat 1.0.0 → 1.1.0

package/README.md

@@ -7,12 +7,10 @@ Tailwind 4 uses CSS layers to organise styles, but react-native-web does not yet
 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...
+You will then need to patch `react-native-web` with the following change in `dist/exports/StyleSheet/dom/index.js`
+```diff
+-import createCSSStyleSheet from './createCSSStyleSheet';
++import {createCSSStyleSheet} from 'react-native-web-tailwind-compat';
 ```
 
 Define the layer *before* importing tailwind styles:

package/dist/createCSSStyleSheet.cjs

@@ -0,0 +1,44 @@
+"use client";
+
+const require_utils = require('./utils.cjs');
+
+//#region src/createCSSStyleSheet.ts
+let proxy = null;
+function createCSSStyleSheet(id, rootNode, textContent) {
+	console.log("Hit da proxy");
+	return proxy ??= buildRNWProxy(textContent);
+}
+function buildRNWProxy(initialTextContent) {
+	if (typeof window === "undefined") return null;
+	const flattenedSheet = new CSSStyleSheet();
+	if (initialTextContent) flattenedSheet.replaceSync(initialTextContent);
+	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
+exports.createCSSStyleSheet = createCSSStyleSheet;

package/dist/createCSSStyleSheet.d.cts

@@ -0,0 +1,5 @@
+//#region src/createCSSStyleSheet.d.ts
+declare function createCSSStyleSheet(id: string, rootNode?: any, textContent?: string): CSSStyleSheet | null;
+//#endregion
+export { createCSSStyleSheet };
+//# sourceMappingURL=createCSSStyleSheet.d.cts.map

package/dist/createCSSStyleSheet.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"createCSSStyleSheet.d.cts","names":[],"sources":["../src/createCSSStyleSheet.ts"],"sourcesContent":[],"mappings":";iBAKgB,mBAAA,oDAIb"}

package/dist/createCSSStyleSheet.d.mts

@@ -0,0 +1,5 @@
+//#region src/createCSSStyleSheet.d.ts
+declare function createCSSStyleSheet(id: string, rootNode?: any, textContent?: string): CSSStyleSheet | null;
+//#endregion
+export { createCSSStyleSheet };
+//# sourceMappingURL=createCSSStyleSheet.d.mts.map

package/dist/createCSSStyleSheet.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"createCSSStyleSheet.d.mts","names":[],"sources":["../src/createCSSStyleSheet.ts"],"sourcesContent":[],"mappings":";iBAKgB,mBAAA,oDAIb"}

package/dist/createCSSStyleSheet.mjs

@@ -0,0 +1,45 @@
+"use client";
+
+import { NEW_SHEET_ID, layerBoundaryRegex } from "./utils.mjs";
+
+//#region src/createCSSStyleSheet.ts
+let proxy = null;
+function createCSSStyleSheet(id, rootNode, textContent) {
+	console.log("Hit da proxy");
+	return proxy ??= buildRNWProxy(textContent);
+}
+function buildRNWProxy(initialTextContent) {
+	if (typeof window === "undefined") return null;
+	const flattenedSheet = new CSSStyleSheet();
+	if (initialTextContent) flattenedSheet.replaceSync(initialTextContent);
+	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 { createCSSStyleSheet };
+//# sourceMappingURL=createCSSStyleSheet.mjs.map

package/dist/createCSSStyleSheet.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"createCSSStyleSheet.mjs","names":["proxy: CSSStyleSheet | null"],"sources":["../src/createCSSStyleSheet.ts"],"sourcesContent":["\"use client\";\nimport { layerBoundaryRegex, NEW_SHEET_ID } from \"./utils\";\n\nlet proxy: CSSStyleSheet | null = null;\n\nexport function createCSSStyleSheet(\n  id: string,\n  rootNode?: any,\n  textContent?: string,\n): CSSStyleSheet | null {\n  console.log(\"Hit da proxy\");\n  return (proxy ??= buildRNWProxy(textContent));\n}\n\nfunction buildRNWProxy(initialTextContent?: string) {\n  if (typeof window === \"undefined\") {\n    return null;\n  }\n  const flattenedSheet = new CSSStyleSheet();\n  if (initialTextContent) {\n    flattenedSheet.replaceSync(initialTextContent);\n  }\n  let layeredSheet = (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\nfunction 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"],"mappings":";;;;;AAGA,IAAIA,QAA8B;AAElC,SAAgB,oBACd,IACA,UACA,aACsB;AACtB,SAAQ,IAAI,eAAe;AAC3B,QAAQ,UAAU,cAAc,YAAY;;AAG9C,SAAS,cAAc,oBAA6B;AAClD,KAAI,OAAO,WAAW,YACpB,QAAO;CAET,MAAM,iBAAiB,IAAI,eAAe;AAC1C,KAAI,mBACF,gBAAe,YAAY,mBAAmB;CAEhD,IAAI,eAAgB,SAAS,eAAe,aAAa,EACrD;AAEJ,KAAI,CAAC,cAAc;EACjB,MAAM,YAAY,SAAS,cAAc,QAAQ;AACjD,YAAU,KAAK;AACf,WAAS,KAAK,QAAQ,UAAU;AAChC,iBAAe,UAAU;;AAE3B,KAAI,CAAC,aAAc,QAAO;AAE1B,KAAI,EAAE,aAAa,SAAS,cAAc,mBACxC,cAAa,WAAW,iBAAiB,EAAE;AAG7C,cAAa,aAAa,UAAU,eAAe;AAEnD,QAAO,IAAI,MAAM,gBAAgB,EAC/B,IAAI,QAAQ,MAAM;AAChB,MAAI,SAAS,aACX,QAAO,SAAS,WAAW,MAAc,OAAe;AACtD,kBAAe,WAAW,MAAM,MAAM;GAEtC,MAAM,cAAc,CAAC,GAAG,eAAe,SAAS,CAAC,WAAW,SAC1D,mBAAmB,KAAK,KAAK,QAAQ,CACtC;AACD,OAAI,gBAAgB,MAAM,SAAS,aAAa;IAE9C,MAAM,YAAY,aAAa,SAAS;AACxC,cAAU,WAAW,MAAM,UAAU,SAAS,OAAO;SAGrD,cAAa,WAAW,MAAM,aAAa,SAAS,OAAO;;EAIjE,MAAM,QAAS,OAAe;AAC9B,SAAO,OAAO,UAAU,aAAa,MAAM,KAAK,OAAO,GAAG;IAE7D,CAAC;;AAGJ,SAAS,aACP,OACA,aACA;AACA,MAAK,MAAM,QAAQ,MACjB,KAAI,gBAAgB,kBAClB,cAAa,KAAK,UAAU,YAAY;KAExC,aAAY,WAAW,KAAK,SAAS,YAAY,SAAS,OAAO"}

package/dist/index.cjs

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

package/dist/index.d.cts

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

package/dist/index.d.mts

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

package/dist/index.mjs

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-web-tailwind-compat",
-  "version": "1.0.0",
+  "version": "1.1.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",

package/dist/ReactNativeWebTailwindCompat.cjs

@@ -1,41 +0,0 @@
-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

@@ -1,43 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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"}