@vitus-labs/unistyle 2.0.0-beta.3 → 2.0.0

package/lib/index.js

@@ -79,6 +79,127 @@ const normalizeTheme = ({ theme, breakpoints }) => {
 	return result;
 };
 
+//#endregion
+//#region src/responsive/optimizeBreakpointDeltas.ts
+/** Parse a CSS string into top-level declarations and opaque blocks. */
+const parse = (css) => {
+	const entries = [];
+	const len = css.length;
+	let depth = 0;
+	let parenDepth = 0;
+	let quote = 0;
+	let segmentStart = 0;
+	const pushSegment = (rawSegment) => {
+		const trimmed = rawSegment.trim();
+		if (!trimmed) return;
+		const text = trimmed.endsWith(";") ? trimmed.slice(0, -1) : trimmed;
+		const colonIdx = text.indexOf(":");
+		if (colonIdx <= 0) {
+			entries.push({
+				kind: "block",
+				raw: `${text};`
+			});
+			return;
+		}
+		const prop = text.slice(0, colonIdx).trim();
+		const value = text.slice(colonIdx + 1).trim();
+		if (!prop || !value) {
+			entries.push({
+				kind: "block",
+				raw: `${text};`
+			});
+			return;
+		}
+		entries.push({
+			kind: "decl",
+			prop,
+			value,
+			raw: `${prop}: ${value};`
+		});
+	};
+	for (let i = 0; i < len; i++) {
+		const code = css.charCodeAt(i);
+		if (quote !== 0) {
+			if (code === 92) i++;
+			else if (code === quote) quote = 0;
+			continue;
+		}
+		if (code === 34 || code === 39) {
+			quote = code;
+			continue;
+		}
+		if (code === 40) {
+			parenDepth++;
+			continue;
+		}
+		if (code === 41) {
+			if (parenDepth > 0) parenDepth--;
+			continue;
+		}
+		if (parenDepth > 0) continue;
+		if (code === 123) {
+			depth++;
+			continue;
+		}
+		if (code === 125) {
+			depth--;
+			if (depth === 0) {
+				const raw = css.slice(segmentStart, i + 1).trim();
+				if (raw) entries.push({
+					kind: "block",
+					raw
+				});
+				segmentStart = i + 1;
+			}
+			continue;
+		}
+		if (depth === 0 && code === 59) {
+			pushSegment(css.slice(segmentStart, i));
+			segmentStart = i + 1;
+		}
+	}
+	if (segmentStart < len) {
+		const trailing = css.slice(segmentStart).trim();
+		if (trailing) if (depth > 0) entries.push({
+			kind: "block",
+			raw: trailing
+		});
+		else pushSegment(trailing);
+	}
+	return entries;
+};
+/**
+* Apply the mobile-first cascade diff. The first entry passes through
+* unchanged; subsequent entries are pruned to the delta vs. the running
+* cascade (declarations by prop, blocks by exact text match).
+*/
+const optimizeBreakpointDeltas = (cssStrings) => {
+	if (cssStrings.length <= 1) return cssStrings;
+	const cascadeDecl = /* @__PURE__ */ new Map();
+	const cascadeBlocks = /* @__PURE__ */ new Set();
+	const out = new Array(cssStrings.length);
+	for (let i = 0; i < cssStrings.length; i++) {
+		const css = cssStrings[i];
+		if (!css) {
+			out[i] = "";
+			continue;
+		}
+		const entries = parse(css);
+		const kept = [];
+		for (const e of entries) if (e.kind === "decl") {
+			if (cascadeDecl.get(e.prop) !== e.value) {
+				kept.push(e.raw);
+				cascadeDecl.set(e.prop, e.value);
+			}
+		} else if (!cascadeBlocks.has(e.raw)) {
+			kept.push(e.raw);
+			cascadeBlocks.add(e.raw);
+		}
+		out[i] = kept.join(" ");
+	}
+	return out;
+};
+
 //#endregion
 //#region src/responsive/optimizeTheme.ts
 const shallowEqual = (a, b) => {
@@ -145,6 +266,23 @@ const transformTheme = ({ theme, breakpoints }) => {
 //#endregion
 //#region src/responsive/makeItResponsive.ts
 /**
+* Coerce a styles-callback result to a CSS string for delta optimization.
+* Returns null when the engine's result type can't be stringified cleanly
+* (e.g. Emotion / styled-components objects whose default toString() yields
+* "[object Object]") — caller falls back to the unoptimized path.
+*
+* Styler's CSSResult provides toString() that resolves with empty props,
+* so any function interpolation that needs render-time props must come from
+* the styles-callback closure (theme is destructured at call time, not
+* resolved later). Verified across the project's styles callbacks.
+*/
+const stringifyResult = (result) => {
+	if (result == null) return "";
+	if (typeof result === "string") return 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:
@@ -190,6 +328,19 @@ const makeItResponsive = ({ theme: customTheme, key = "", css, styles, normalize
 			optimized: optimizedTheme
 		});
 	}
+	const renderedTexts = sortedBreakpoints.map((item) => {
+		const breakpointTheme = optimizedTheme[item];
+		if (!breakpointTheme || !media) return "";
+		return stringifyResult(renderStyles(breakpointTheme));
+	});
+	if (renderedTexts.every((t) => t !== null)) {
+		const deltas = optimizeBreakpointDeltas(renderedTexts);
+		return sortedBreakpoints.map((item, i) => {
+			const css = deltas[i];
+			if (!css || !media) return "";
+			return media[item]`${css}`;
+		});
+	}
 	return sortedBreakpoints.map((item) => {
 		const breakpointTheme = optimizedTheme[item];
 		if (!breakpointTheme || !media) return "";

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

@@ -79,6 +79,127 @@ const normalizeTheme = ({ theme, breakpoints }) => {
 	return result;
 };
 
+//#endregion
+//#region src/responsive/optimizeBreakpointDeltas.ts
+/** Parse a CSS string into top-level declarations and opaque blocks. */
+const parse = (css) => {
+	const entries = [];
+	const len = css.length;
+	let depth = 0;
+	let parenDepth = 0;
+	let quote = 0;
+	let segmentStart = 0;
+	const pushSegment = (rawSegment) => {
+		const trimmed = rawSegment.trim();
+		if (!trimmed) return;
+		const text = trimmed.endsWith(";") ? trimmed.slice(0, -1) : trimmed;
+		const colonIdx = text.indexOf(":");
+		if (colonIdx <= 0) {
+			entries.push({
+				kind: "block",
+				raw: `${text};`
+			});
+			return;
+		}
+		const prop = text.slice(0, colonIdx).trim();
+		const value = text.slice(colonIdx + 1).trim();
+		if (!prop || !value) {
+			entries.push({
+				kind: "block",
+				raw: `${text};`
+			});
+			return;
+		}
+		entries.push({
+			kind: "decl",
+			prop,
+			value,
+			raw: `${prop}: ${value};`
+		});
+	};
+	for (let i = 0; i < len; i++) {
+		const code = css.charCodeAt(i);
+		if (quote !== 0) {
+			if (code === 92) i++;
+			else if (code === quote) quote = 0;
+			continue;
+		}
+		if (code === 34 || code === 39) {
+			quote = code;
+			continue;
+		}
+		if (code === 40) {
+			parenDepth++;
+			continue;
+		}
+		if (code === 41) {
+			if (parenDepth > 0) parenDepth--;
+			continue;
+		}
+		if (parenDepth > 0) continue;
+		if (code === 123) {
+			depth++;
+			continue;
+		}
+		if (code === 125) {
+			depth--;
+			if (depth === 0) {
+				const raw = css.slice(segmentStart, i + 1).trim();
+				if (raw) entries.push({
+					kind: "block",
+					raw
+				});
+				segmentStart = i + 1;
+			}
+			continue;
+		}
+		if (depth === 0 && code === 59) {
+			pushSegment(css.slice(segmentStart, i));
+			segmentStart = i + 1;
+		}
+	}
+	if (segmentStart < len) {
+		const trailing = css.slice(segmentStart).trim();
+		if (trailing) if (depth > 0) entries.push({
+			kind: "block",
+			raw: trailing
+		});
+		else pushSegment(trailing);
+	}
+	return entries;
+};
+/**
+* Apply the mobile-first cascade diff. The first entry passes through
+* unchanged; subsequent entries are pruned to the delta vs. the running
+* cascade (declarations by prop, blocks by exact text match).
+*/
+const optimizeBreakpointDeltas = (cssStrings) => {
+	if (cssStrings.length <= 1) return cssStrings;
+	const cascadeDecl = /* @__PURE__ */ new Map();
+	const cascadeBlocks = /* @__PURE__ */ new Set();
+	const out = new Array(cssStrings.length);
+	for (let i = 0; i < cssStrings.length; i++) {
+		const css = cssStrings[i];
+		if (!css) {
+			out[i] = "";
+			continue;
+		}
+		const entries = parse(css);
+		const kept = [];
+		for (const e of entries) if (e.kind === "decl") {
+			if (cascadeDecl.get(e.prop) !== e.value) {
+				kept.push(e.raw);
+				cascadeDecl.set(e.prop, e.value);
+			}
+		} else if (!cascadeBlocks.has(e.raw)) {
+			kept.push(e.raw);
+			cascadeBlocks.add(e.raw);
+		}
+		out[i] = kept.join(" ");
+	}
+	return out;
+};
+
 //#endregion
 //#region src/responsive/optimizeTheme.ts
 const shallowEqual = (a, b) => {
@@ -145,6 +266,23 @@ const transformTheme = ({ theme, breakpoints }) => {
 //#endregion
 //#region src/responsive/makeItResponsive.ts
 /**
+* Coerce a styles-callback result to a CSS string for delta optimization.
+* Returns null when the engine's result type can't be stringified cleanly
+* (e.g. Emotion / styled-components objects whose default toString() yields
+* "[object Object]") — caller falls back to the unoptimized path.
+*
+* Styler's CSSResult provides toString() that resolves with empty props,
+* so any function interpolation that needs render-time props must come from
+* the styles-callback closure (theme is destructured at call time, not
+* resolved later). Verified across the project's styles callbacks.
+*/
+const stringifyResult = (result) => {
+	if (result == null) return "";
+	if (typeof result === "string") return 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:
@@ -190,6 +328,19 @@ const makeItResponsive = ({ theme: customTheme, key = "", css, styles, normalize
 			optimized: optimizedTheme
 		});
 	}
+	const renderedTexts = sortedBreakpoints.map((item) => {
+		const breakpointTheme = optimizedTheme[item];
+		if (!breakpointTheme || !media) return "";
+		return stringifyResult(renderStyles(breakpointTheme));
+	});
+	if (renderedTexts.every((t) => t !== null)) {
+		const deltas = optimizeBreakpointDeltas(renderedTexts);
+		return sortedBreakpoints.map((item, i) => {
+			const css = deltas[i];
+			if (!css || !media) return "";
+			return media[item]`${css}`;
+		});
+	}
 	return sortedBreakpoints.map((item) => {
 		const breakpointTheme = optimizedTheme[item];
 		if (!breakpointTheme || !media) return "";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vitus-labs/unistyle",
-  "version": "2.0.0-beta.3",
+  "version": "2.0.0",
   "license": "MIT",
   "author": "Vit Bokisch <vit@bokisch.cz>",
   "maintainers": [
@@ -51,7 +51,7 @@
     "node": ">= 18"
   },
   "peerDependencies": {
-    "@vitus-labs/core": "2.0.0-beta.3",
+    "@vitus-labs/core": "2.0.0",
     "react": ">= 19",
     "react-native": ">= 0.76"
   },