@vitus-labs/unistyle 2.0.0-alpha.8 → 2.0.0-beta.0

package/README.md

@@ -1,6 +1,6 @@
 # @vitus-labs/unistyle
 
-Responsive CSS engine for React and styled-components.
+Responsive CSS engine for React.
 
 [![npm](https://img.shields.io/npm/v/@vitus-labs/unistyle)](https://www.npmjs.com/package/@vitus-labs/unistyle)
 [![license](https://img.shields.io/npm/l/@vitus-labs/unistyle)](https://github.com/vitus-labs/ui-system/blob/main/LICENSE)
@@ -186,12 +186,17 @@ Every property in the theme object supports three formats:
 
 When using `normalize: true` (default), missing breakpoints inherit from the previous one.
 
+## React Native
+
+On React Native, CSS `@media` queries are not available. When initialized with `@vitus-labs/connector-native`, unistyle uses `Dimensions.get('window').width` to evaluate breakpoints at render time (mobile-first). This is handled automatically via `createMediaQueries` passed to `init()`.
+
 ## Peer Dependencies
 
 | Package | Version |
 | ------- | ------- |
 | react | >= 19 |
 | @vitus-labs/core | * |
+| react-native | >= 0.76 (optional) |
 
 ## License
 

package/lib/index.d.ts

@@ -98,16 +98,6 @@ type MakeItResponsive = ({
   theme?: Theme$1;
   [key: string]: any;
 }) => any;
-/**
- * Core responsive engine used by every styled component in the system.
- *
- * Returns a styled-components interpolation function that:
- * 1. Reads the component's theme prop (via `key` or direct `theme`)
- * 2. Without breakpoints → renders plain CSS
- * 3. With breakpoints → normalizes, transforms (property-per-breakpoint →
- *    breakpoint-per-property), optimizes (deduplicates identical breakpoints),
- *    and wraps each breakpoint's styles in the appropriate `@media` query.
- */
 declare const makeItResponsive: MakeItResponsive;
 //#endregion
 //#region src/responsive/normalizeTheme.d.ts

package/lib/index.js

@@ -154,6 +154,7 @@ const transformTheme = ({ theme, breakpoints }) => {
 *    breakpoint-per-property), optimizes (deduplicates identical breakpoints),
 *    and wraps each breakpoint's styles in the appropriate `@media` query.
 */
+const themeCache = /* @__PURE__ */ new WeakMap();
 const makeItResponsive = ({ theme: customTheme, key = "", css, styles, normalize = true }) => ({ theme = {}, ...props }) => {
 	const internalTheme = customTheme || props[key];
 	if (isEmpty(internalTheme)) return "";
@@ -168,18 +169,27 @@ const makeItResponsive = ({ theme: customTheme, key = "", css, styles, normalize
         ${renderStyles(internalTheme)}
       `;
 	const { media, sortedBreakpoints } = __VITUS_LABS__;
-	let helperTheme = internalTheme;
-	if (normalize) helperTheme = normalizeTheme({
-		theme: internalTheme,
-		breakpoints: sortedBreakpoints
-	});
-	const optimizedTheme = optimizeTheme({
-		theme: transformTheme({
-			theme: helperTheme,
+	let optimizedTheme;
+	const cached = themeCache.get(internalTheme);
+	if (cached && cached.breakpoints === sortedBreakpoints) optimizedTheme = cached.optimized;
+	else {
+		let helperTheme = internalTheme;
+		if (normalize) helperTheme = normalizeTheme({
+			theme: internalTheme,
 			breakpoints: sortedBreakpoints
-		}),
-		breakpoints: sortedBreakpoints
-	});
+		});
+		optimizedTheme = optimizeTheme({
+			theme: transformTheme({
+				theme: helperTheme,
+				breakpoints: sortedBreakpoints
+			}),
+			breakpoints: sortedBreakpoints
+		});
+		themeCache.set(internalTheme, {
+			breakpoints: sortedBreakpoints,
+			optimized: optimizedTheme
+		});
+	}
 	return sortedBreakpoints.map((item) => {
 		const breakpointTheme = optimizedTheme[item];
 		if (!breakpointTheme || !media) return "";
@@ -210,7 +220,7 @@ const Provider = ({ theme, children, ...props }) => {
 		if (breakpoints && !isEmpty(breakpoints)) return sortBreakpoints(breakpoints);
 	}, [breakpoints]);
 	const media = useMemo(() => {
-		if (breakpoints && !isEmpty(breakpoints)) return createMediaQueries({
+		if (breakpoints && !isEmpty(breakpoints)) return (config.createMediaQueries ?? createMediaQueries)({
 			breakpoints,
 			css: config.css,
 			rootSize

package/lib/vitus-labs-unistyle.native.js

@@ -154,6 +154,7 @@ const transformTheme = ({ theme, breakpoints }) => {
 *    breakpoint-per-property), optimizes (deduplicates identical breakpoints),
 *    and wraps each breakpoint's styles in the appropriate `@media` query.
 */
+const themeCache = /* @__PURE__ */ new WeakMap();
 const makeItResponsive = ({ theme: customTheme, key = "", css, styles, normalize = true }) => ({ theme = {}, ...props }) => {
 	const internalTheme = customTheme || props[key];
 	if (isEmpty(internalTheme)) return "";
@@ -168,18 +169,27 @@ const makeItResponsive = ({ theme: customTheme, key = "", css, styles, normalize
         ${renderStyles(internalTheme)}
       `;
 	const { media, sortedBreakpoints } = __VITUS_LABS__;
-	let helperTheme = internalTheme;
-	if (normalize) helperTheme = normalizeTheme({
-		theme: internalTheme,
-		breakpoints: sortedBreakpoints
-	});
-	const optimizedTheme = optimizeTheme({
-		theme: transformTheme({
-			theme: helperTheme,
+	let optimizedTheme;
+	const cached = themeCache.get(internalTheme);
+	if (cached && cached.breakpoints === sortedBreakpoints) optimizedTheme = cached.optimized;
+	else {
+		let helperTheme = internalTheme;
+		if (normalize) helperTheme = normalizeTheme({
+			theme: internalTheme,
 			breakpoints: sortedBreakpoints
-		}),
-		breakpoints: sortedBreakpoints
-	});
+		});
+		optimizedTheme = optimizeTheme({
+			theme: transformTheme({
+				theme: helperTheme,
+				breakpoints: sortedBreakpoints
+			}),
+			breakpoints: sortedBreakpoints
+		});
+		themeCache.set(internalTheme, {
+			breakpoints: sortedBreakpoints,
+			optimized: optimizedTheme
+		});
+	}
 	return sortedBreakpoints.map((item) => {
 		const breakpointTheme = optimizedTheme[item];
 		if (!breakpointTheme || !media) return "";
@@ -210,7 +220,7 @@ const Provider = ({ theme, children, ...props }) => {
 		if (breakpoints && !isEmpty(breakpoints)) return sortBreakpoints(breakpoints);
 	}, [breakpoints]);
 	const media = useMemo(() => {
-		if (breakpoints && !isEmpty(breakpoints)) return createMediaQueries({
+		if (breakpoints && !isEmpty(breakpoints)) return (config.createMediaQueries ?? createMediaQueries)({
 			breakpoints,
 			css: config.css,
 			rootSize

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vitus-labs/unistyle",
-  "version": "2.0.0-alpha.8+e1d1ee5",
+  "version": "2.0.0-beta.0",
   "license": "MIT",
   "author": "Vit Bokisch <vit@bokisch.cz>",
   "maintainers": [
@@ -10,11 +10,13 @@
   "sideEffects": false,
   "exports": {
     "source": "./src/index.ts",
+    "react-native": "./lib/vitus-labs-unistyle.native.js",
     "import": "./lib/index.js",
     "types": "./lib/index.d.ts"
   },
   "types": "./lib/index.d.ts",
-  "react-native": "lib/vitus-labs-unistyle.native.js",
+  "react-native": "./lib/vitus-labs-unistyle.native.js",
+  "main": "./lib/index.js",
   "files": [
     "lib",
     "!lib/**/*.map",
@@ -31,7 +33,8 @@
     "test:coverage": "vitest run --coverage",
     "test:watch": "vitest",
     "cover": "coveralls < .coverage/lcov.info",
-    "typecheck": "tsc --noEmit"
+    "typecheck": "tsc --noEmit",
+    "version": "node ../../scripts/sync-peer-deps.mjs"
   },
   "publishConfig": {
     "access": "public"
@@ -48,13 +51,19 @@
     "node": ">= 18"
   },
   "peerDependencies": {
-    "@vitus-labs/core": "^1.4.0",
-    "react": ">= 19"
+    "@vitus-labs/core": "2.0.0-alpha.27",
+    "react": ">= 19",
+    "react-native": ">= 0.76"
+  },
+  "peerDependenciesMeta": {
+    "react-native": {
+      "optional": true
+    }
   },
   "devDependencies": {
-    "@vitus-labs/core": "2.0.0-alpha.8+e1d1ee5",
-    "@vitus-labs/tools-rolldown": "^1.6.0",
-    "@vitus-labs/tools-typescript": "^1.6.0"
+    "@vitus-labs/core": "2.0.0-beta.0",
+    "@vitus-labs/tools-rolldown": "1.10.0",
+    "@vitus-labs/tools-typescript": "1.10.0"
   },
-  "gitHead": "e1d1ee532fb024b6274ae33a3e42389f4e9858ab"
+  "gitHead": "dd8b9f356086ecd8bfb69c87fcad1e8bfa9ab1f4"
 }