@vitus-labs/unistyle 2.0.0-alpha.9 → 2.0.0-beta.1

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
@@ -286,6 +296,7 @@ const extendCss = (styles) => {
 
 //#endregion
 //#region src/units/stripUnit.ts
+const CSS_UNIT_REGEX = /^([+-]?(?:\d+|\d*\.\d+))([a-z]*|%)$/;
 /**
 * Strips the CSS unit suffix from a value.
 * With `unitReturn=true`, returns a `[number, unit]` tuple.
@@ -293,9 +304,8 @@ const extendCss = (styles) => {
 * Non-string inputs are passed through unchanged.
 */
 const stripUnit = (value, unitReturn) => {
-	const cssRegex = /^([+-]?(?:\d+|\d*\.\d+))([a-z]*|%)$/;
 	if (typeof value !== "string") return unitReturn ? [value, void 0] : value;
-	const matchedValue = value.match(cssRegex);
+	const matchedValue = value.match(CSS_UNIT_REGEX);
 	if (unitReturn) {
 		if (matchedValue) return [parseFloat(value), matchedValue[2]];
 		return [value, void 0];

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
@@ -286,6 +296,7 @@ const extendCss = (styles) => {
 
 //#endregion
 //#region src/units/stripUnit.ts
+const CSS_UNIT_REGEX = /^([+-]?(?:\d+|\d*\.\d+))([a-z]*|%)$/;
 /**
 * Strips the CSS unit suffix from a value.
 * With `unitReturn=true`, returns a `[number, unit]` tuple.
@@ -293,9 +304,8 @@ const extendCss = (styles) => {
 * Non-string inputs are passed through unchanged.
 */
 const stripUnit = (value, unitReturn) => {
-	const cssRegex = /^([+-]?(?:\d+|\d*\.\d+))([a-z]*|%)$/;
 	if (typeof value !== "string") return unitReturn ? [value, void 0] : value;
-	const matchedValue = value.match(cssRegex);
+	const matchedValue = value.match(CSS_UNIT_REGEX);
 	if (unitReturn) {
 		if (matchedValue) return [parseFloat(value), matchedValue[2]];
 		return [value, void 0];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vitus-labs/unistyle",
-  "version": "2.0.0-alpha.9+f2f47db",
+  "version": "2.0.0-beta.1",
   "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,18 @@
     "node": ">= 18"
   },
   "peerDependencies": {
-    "@vitus-labs/core": "^1.4.0",
-    "react": ">= 19"
+    "@vitus-labs/core": "2.0.0-beta.1",
+    "react": ">= 19",
+    "react-native": ">= 0.76"
   },
-  "devDependencies": {
-    "@vitus-labs/core": "2.0.0-alpha.9+f2f47db",
-    "@vitus-labs/tools-rolldown": "^1.6.0",
-    "@vitus-labs/tools-typescript": "^1.6.0"
+  "peerDependenciesMeta": {
+    "react-native": {
+      "optional": true
+    }
   },
-  "gitHead": "f2f47db887d6a846ee5f9e96f290c59cdde4772a"
+  "devDependencies": {
+    "@vitus-labs/core": "workspace:*",
+    "@vitus-labs/tools-rolldown": "2.2.0",
+    "@vitus-labs/tools-typescript": "2.1.0"
+  }
 }

package/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2023-present Vit Bokisch
-
-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.