@vitus-labs/unistyle 2.0.0-beta.4 → 2.1.0

package/lib/index.js

@@ -279,19 +279,10 @@ const transformTheme = ({ theme, breakpoints }) => {
 const stringifyResult = (result) => {
 	if (result == null) return "";
 	if (typeof result === "string") return result;
+	if (typeof result === "object" && "strings" in result && "values" in result) return String(result);
 	const text = String(result);
 	return text.includes("[object ") ? null : text;
 };
-/**
-* 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.
-*/
 const themeCache = /* @__PURE__ */ new WeakMap();
 const makeItResponsive = ({ theme: customTheme, key = "", css, styles, normalize = true }) => ({ theme = {}, ...props }) => {
 	const internalTheme = customTheme || props[key];
@@ -308,8 +299,13 @@ const makeItResponsive = ({ theme: customTheme, key = "", css, styles, normalize
       `;
 	const { media, sortedBreakpoints } = __VITUS_LABS__;
 	let optimizedTheme;
-	const cached = themeCache.get(internalTheme);
-	if (cached && cached.breakpoints === sortedBreakpoints) optimizedTheme = cached.optimized;
+	const entry = themeCache.get(internalTheme);
+	const breakpointsMatch = entry?.breakpoints === sortedBreakpoints;
+	if (entry && breakpointsMatch && entry.rendered) {
+		const memoized = entry.rendered.get(theme);
+		if (memoized) return memoized;
+	}
+	if (entry && breakpointsMatch) optimizedTheme = entry.optimized;
 	else {
 		let helperTheme = internalTheme;
 		if (normalize) helperTheme = normalizeTheme({
@@ -325,7 +321,8 @@ const makeItResponsive = ({ theme: customTheme, key = "", css, styles, normalize
 		});
 		themeCache.set(internalTheme, {
 			breakpoints: sortedBreakpoints,
-			optimized: optimizedTheme
+			optimized: optimizedTheme,
+			rendered: entry?.rendered
 		});
 	}
 	const renderedTexts = sortedBreakpoints.map((item) => {
@@ -333,22 +330,27 @@ const makeItResponsive = ({ theme: customTheme, key = "", css, styles, normalize
 		if (!breakpointTheme || !media) return "";
 		return stringifyResult(renderStyles(breakpointTheme));
 	});
-	if (renderedTexts.every((t) => t !== null)) {
+	const canOptimize = renderedTexts.every((t) => t !== null);
+	let result;
+	if (canOptimize) {
 		const deltas = optimizeBreakpointDeltas(renderedTexts);
-		return sortedBreakpoints.map((item, i) => {
+		result = sortedBreakpoints.map((item, i) => {
 			const css = deltas[i];
 			if (!css || !media) return "";
 			return media[item]`${css}`;
 		});
-	}
-	return sortedBreakpoints.map((item) => {
+	} else result = sortedBreakpoints.map((item) => {
 		const breakpointTheme = optimizedTheme[item];
 		if (!breakpointTheme || !media) return "";
-		const result = renderStyles(breakpointTheme);
+		const r = renderStyles(breakpointTheme);
 		return media[item]`
-        ${result};
-      `;
+          ${r};
+        `;
 	});
+	const cacheEntry = themeCache.get(internalTheme);
+	if (!cacheEntry.rendered) cacheEntry.rendered = /* @__PURE__ */ new WeakMap();
+	cacheEntry.rendered.set(theme, result);
+	return result;
 };
 
 //#endregion

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

@@ -279,19 +279,10 @@ const transformTheme = ({ theme, breakpoints }) => {
 const stringifyResult = (result) => {
 	if (result == null) return "";
 	if (typeof result === "string") return result;
+	if (typeof result === "object" && "strings" in result && "values" in result) return String(result);
 	const text = String(result);
 	return text.includes("[object ") ? null : text;
 };
-/**
-* 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.
-*/
 const themeCache = /* @__PURE__ */ new WeakMap();
 const makeItResponsive = ({ theme: customTheme, key = "", css, styles, normalize = true }) => ({ theme = {}, ...props }) => {
 	const internalTheme = customTheme || props[key];
@@ -308,8 +299,13 @@ const makeItResponsive = ({ theme: customTheme, key = "", css, styles, normalize
       `;
 	const { media, sortedBreakpoints } = __VITUS_LABS__;
 	let optimizedTheme;
-	const cached = themeCache.get(internalTheme);
-	if (cached && cached.breakpoints === sortedBreakpoints) optimizedTheme = cached.optimized;
+	const entry = themeCache.get(internalTheme);
+	const breakpointsMatch = entry?.breakpoints === sortedBreakpoints;
+	if (entry && breakpointsMatch && entry.rendered) {
+		const memoized = entry.rendered.get(theme);
+		if (memoized) return memoized;
+	}
+	if (entry && breakpointsMatch) optimizedTheme = entry.optimized;
 	else {
 		let helperTheme = internalTheme;
 		if (normalize) helperTheme = normalizeTheme({
@@ -325,7 +321,8 @@ const makeItResponsive = ({ theme: customTheme, key = "", css, styles, normalize
 		});
 		themeCache.set(internalTheme, {
 			breakpoints: sortedBreakpoints,
-			optimized: optimizedTheme
+			optimized: optimizedTheme,
+			rendered: entry?.rendered
 		});
 	}
 	const renderedTexts = sortedBreakpoints.map((item) => {
@@ -333,22 +330,27 @@ const makeItResponsive = ({ theme: customTheme, key = "", css, styles, normalize
 		if (!breakpointTheme || !media) return "";
 		return stringifyResult(renderStyles(breakpointTheme));
 	});
-	if (renderedTexts.every((t) => t !== null)) {
+	const canOptimize = renderedTexts.every((t) => t !== null);
+	let result;
+	if (canOptimize) {
 		const deltas = optimizeBreakpointDeltas(renderedTexts);
-		return sortedBreakpoints.map((item, i) => {
+		result = sortedBreakpoints.map((item, i) => {
 			const css = deltas[i];
 			if (!css || !media) return "";
 			return media[item]`${css}`;
 		});
-	}
-	return sortedBreakpoints.map((item) => {
+	} else result = sortedBreakpoints.map((item) => {
 		const breakpointTheme = optimizedTheme[item];
 		if (!breakpointTheme || !media) return "";
-		const result = renderStyles(breakpointTheme);
+		const r = renderStyles(breakpointTheme);
 		return media[item]`
-        ${result};
-      `;
+          ${r};
+        `;
 	});
+	const cacheEntry = themeCache.get(internalTheme);
+	if (!cacheEntry.rendered) cacheEntry.rendered = /* @__PURE__ */ new WeakMap();
+	cacheEntry.rendered.set(theme, result);
+	return result;
 };
 
 //#endregion

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vitus-labs/unistyle",
-  "version": "2.0.0-beta.4",
+  "version": "2.1.0",
   "license": "MIT",
   "author": "Vit Bokisch <vit@bokisch.cz>",
   "maintainers": [
@@ -51,7 +51,7 @@
     "node": ">= 18"
   },
   "peerDependencies": {
-    "@vitus-labs/core": "2.0.0-beta.4",
+    "@vitus-labs/core": "2.1.0",
     "react": ">= 19",
     "react-native": ">= 0.76"
   },
@@ -62,7 +62,7 @@
   },
   "devDependencies": {
     "@vitus-labs/core": "workspace:*",
-    "@vitus-labs/tools-rolldown": "2.2.0",
-    "@vitus-labs/tools-typescript": "2.1.0"
+    "@vitus-labs/tools-rolldown": "2.3.0",
+    "@vitus-labs/tools-typescript": "2.3.0"
   }
 }