@pyreon/unistyle 0.14.0 → 0.16.0

package/lib/index.d.ts

@@ -106,6 +106,20 @@ type MakeItResponsive = ({
   theme?: Theme$1;
   [prop: 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),
+ *    deltas the per-breakpoint output against the mobile-first cascade
+ *    (drops re-emitted unchanged declarations), and wraps each non-empty
+ *    breakpoint's deltas in the appropriate `@media` query. Falls back to
+ *    the unoptimized path if any breakpoint's render result can't be
+ *    cleanly stringified.
+ */
 declare const makeItResponsive: MakeItResponsive;
 //#endregion
 //#region src/responsive/normalizeTheme.d.ts

package/lib/index.js

@@ -1,4 +1,4 @@
-import { provide } from "@pyreon/core";
+import { nativeCompat, provide } from "@pyreon/core";
 import { ThemeContext } from "@pyreon/styler";
 import { Provider as Provider$1, config, context, isEmpty, set } from "@pyreon/ui-core";
 
@@ -70,6 +70,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) => {
@@ -141,7 +262,39 @@ 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. styled-components / Emotion 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;
+	if (typeof result === "object" && "strings" in result && "values" in result) return String(result);
+	const text = String(result);
+	return text.includes("[object ") ? null : text;
+};
 const themeCache = /* @__PURE__ */ new WeakMap();
+/**
+* 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),
+*    deltas the per-breakpoint output against the mobile-first cascade
+*    (drops re-emitted unchanged declarations), and wraps each non-empty
+*    breakpoint's deltas in the appropriate `@media` query. Falls back to
+*    the unoptimized path if any breakpoint's render result can't be
+*    cleanly stringified.
+*/
 const makeItResponsive = ({ theme: customTheme, key = "", css, styles, normalize = true }) => ({ theme = {}, ...props }) => {
 	const internalTheme = customTheme || props[key];
 	if (isEmpty(internalTheme)) return "";
@@ -157,34 +310,61 @@ const makeItResponsive = ({ theme: customTheme, key = "", css, styles, normalize
       `;
 	const { media, sortedBreakpoints } = __PYREON__;
 	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({
 			theme: internalTheme,
-			breakpoints: sortedBreakpoints
+			breakpoints: sortedBreakpoints ?? []
 		});
 		optimizedTheme = optimizeTheme({
 			theme: transformTheme({
 				theme: helperTheme,
-				breakpoints: sortedBreakpoints
+				breakpoints: sortedBreakpoints ?? []
 			}),
-			breakpoints: sortedBreakpoints
+			breakpoints: sortedBreakpoints ?? []
 		});
 		themeCache.set(internalTheme, {
 			breakpoints: sortedBreakpoints,
-			optimized: optimizedTheme
+			optimized: optimizedTheme,
+			rendered: entry?.rendered
 		});
 	}
-	return sortedBreakpoints.map((item) => {
+	const bps = sortedBreakpoints ?? [];
+	const renderedTexts = bps.map((item) => {
+		const breakpointTheme = optimizedTheme[item];
+		if (!breakpointTheme || !media) return "";
+		return stringifyResult(renderStyles(breakpointTheme));
+	});
+	const canOptimize = renderedTexts.every((t) => t !== null);
+	let result;
+	if (canOptimize) {
+		const deltas = optimizeBreakpointDeltas(renderedTexts);
+		result = bps.map((item, i) => {
+			const cssText = deltas[i];
+			if (!cssText || !media) return "";
+			return media[item]`${cssText}`;
+		});
+	} else result = bps.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) {
+		if (!cacheEntry.rendered) cacheEntry.rendered = /* @__PURE__ */ new WeakMap();
+		cacheEntry.rendered.set(theme, result);
+	}
+	return result;
 };
 
 //#endregion
@@ -245,6 +425,7 @@ function Provider(props) {
 		children
 	});
 }
+nativeCompat(Provider);
 
 //#endregion
 //#region src/styles/alignContent.ts
@@ -1911,13 +2092,20 @@ for (let i = 0; i < propertyMap.length; i++) {
 	};
 	if (d.key) addKey(d.key);
 	if (d.keys) if (Array.isArray(d.keys)) for (const k of d.keys) addKey(k);
-	else for (const k of Object.values(d.keys)) addKey(k);
+	else for (const inner of Object.values(d.keys)) addKey(inner);
+	if (d.id) addKey(d.id);
 }
 /**
-* Data-driven style processor. Uses the pre-built key→index lookup to
-* iterate ONLY the descriptors whose theme keys are present in the
-* incoming theme object. Falls back to full scan only if the lookup
-* produces zero matches (defensive — shouldn't happen in practice).
+* Convert a normalized theme object (Record<key, value>) into a CSS template
+* by walking the property map. Each entry in propertyMap describes a single
+* CSS property — its kind (simple / convert / convert_fallback / edge /
+* border_radius), the input theme key(s) to read, and the output CSS name.
+*
+* Returns a `css` tagged template literal so makeItResponsive can embed the
+* result inside the responsive breakpoint structure. Each call returns a
+* FRESH array — the result CSSResult holds onto that array by reference,
+* and reusing one module-level array across calls would clobber an earlier
+* CSSResult's data when the next styles() call clears the shared array.
 *
 * IMPORTANT: the return MUST be wrapped in `css\`...\`` — NOT a plain
 * string join. makeItResponsive embeds this result in another template
@@ -1926,36 +2114,33 @@ for (let i = 0; i < propertyMap.length; i++) {
 * pseudo-selectors, and @layer wrapping.
 */
 const _seen = /* @__PURE__ */ new Set();
-const _fragments = [];
 const styles = ({ theme: t, css, rootSize }) => {
-	if (import.meta.env?.DEV === true) _countSink.__pyreon_count__?.("unistyle.styles");
+	if (process.env.NODE_ENV !== "production") _countSink.__pyreon_count__?.("unistyle.styles");
 	const calc = (...params) => values(params, rootSize);
 	const shorthand = edge(rootSize);
 	const borderRadiusFn = borderRadius(rootSize);
+	const fragments = [];
 	_seen.clear();
-	_fragments.length = 0;
 	for (const key of Object.keys(t)) {
 		const indices = keyToIndices.get(key);
 		if (!indices) continue;
 		for (const idx of indices) {
 			if (_seen.has(idx)) continue;
 			_seen.add(idx);
-			if (import.meta.env?.DEV === true) _countSink.__pyreon_count__?.("unistyle.descriptor");
-			_fragments.push(processDescriptor(propertyMap[idx], t, css, calc, shorthand, borderRadiusFn));
+			if (process.env.NODE_ENV !== "production") _countSink.__pyreon_count__?.("unistyle.descriptor");
+			fragments.push(processDescriptor(propertyMap[idx], t, css, calc, shorthand, borderRadiusFn));
 		}
 	}
-	if (_fragments.length === 0 && Object.keys(t).length > 0) {
-		if (import.meta.env?.DEV === true) _countSink.__pyreon_count__?.("unistyle.descriptor.fallback-scan");
+	if (fragments.length === 0 && Object.keys(t).length > 0) {
+		if (process.env.NODE_ENV !== "production") _countSink.__pyreon_count__?.("unistyle.descriptor.fallback-scan");
 		for (const d of propertyMap) {
-			if (import.meta.env?.DEV === true) _countSink.__pyreon_count__?.("unistyle.descriptor");
-			_fragments.push(processDescriptor(d, t, css, calc, shorthand, borderRadiusFn));
+			if (process.env.NODE_ENV !== "production") _countSink.__pyreon_count__?.("unistyle.descriptor");
+			fragments.push(processDescriptor(d, t, css, calc, shorthand, borderRadiusFn));
 		}
 	}
-	const result = css`
-    ${_fragments}
+	return css`
+    ${fragments}
   `;
-	_fragments.length = 0;
-	return result;
 };
 
 //#endregion

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pyreon/unistyle",
-  "version": "0.14.0",
+  "version": "0.16.0",
   "description": "Responsive theming and breakpoint utilities for Pyreon",
   "license": "MIT",
   "repository": {
@@ -10,6 +10,7 @@
   },
   "files": [
     "lib",
+    "!lib/**/*.map",
     "!lib/analysis",
     "README.md",
     "LICENSE",
@@ -42,18 +43,18 @@
   },
   "devDependencies": {
     "@pyreon/manifest": "0.13.1",
-    "@pyreon/test-utils": "^0.13.2",
-    "@pyreon/typescript": "^0.14.0",
+    "@pyreon/test-utils": "^0.13.3",
+    "@pyreon/typescript": "^0.16.0",
     "@vitest/browser-playwright": "^4.1.4",
-    "@vitus-labs/tools-rolldown": "^1.15.3"
-  },
-  "peerDependencies": {
-    "@pyreon/core": "^0.14.0",
-    "@pyreon/reactivity": "^0.14.0",
-    "@pyreon/styler": "^0.14.0",
-    "@pyreon/ui-core": "^0.14.0"
+    "@vitus-labs/tools-rolldown": "^2.3.0"
   },
   "engines": {
     "node": ">= 22"
+  },
+  "dependencies": {
+    "@pyreon/core": "^0.16.0",
+    "@pyreon/reactivity": "^0.16.0",
+    "@pyreon/styler": "^0.16.0",
+    "@pyreon/ui-core": "^0.16.0"
   }
 }

package/src/__tests__/makeItResponsive.test.ts

@@ -168,4 +168,264 @@ describe('makeItResponsive', () => {
 
     expect(Array.isArray(result)).toBe(true)
   })
+
+  describe('delta optimization (mirrors vitus-labs)', () => {
+    it('strips re-emitted unchanged declarations across breakpoints', () => {
+      // mockStyles emits `color: red; padding: 0;` at xs and the same color
+      // with a different padding at sm. The delta optimizer should drop
+      // `color: red` from sm because it's already cascaded from xs via
+      // `@media (min-width: …)`.
+      const sortedBreakpoints = ['xs', 'sm']
+      const captured: Record<string, string> = {}
+      const media: Record<string, (s: TemplateStringsArray, ...v: any[]) => string> = {
+        xs: (s, ...vals) => {
+          let out = ''
+          for (let i = 0; i < s.length; i++) {
+            out += s[i]
+            if (i < vals.length) out += String(vals[i])
+          }
+          captured.xs = out
+          return out
+        },
+        sm: (s, ...vals) => {
+          let out = ''
+          for (let i = 0; i < s.length; i++) {
+            out += s[i]
+            if (i < vals.length) out += String(vals[i])
+          }
+          captured.sm = out
+          return out
+        },
+      }
+
+      const responsive = makeItResponsive({
+        theme: { color: { xs: 'red', sm: 'red' }, padding: { xs: '0', sm: '1rem' } },
+        css: mockCss,
+        styles: mockStyles,
+        normalize: true,
+      })
+
+      responsive({
+        theme: {
+          breakpoints: { xs: 0, sm: 576 },
+          __PYREON__: { sortedBreakpoints, media },
+        },
+      })
+
+      // xs sees full output
+      expect(captured.xs).toContain('color: red;')
+      expect(captured.xs).toContain('padding: 0;')
+      // sm sees only the delta — color is in cascade already
+      expect(captured.sm).toContain('padding: 1rem;')
+      expect(captured.sm).not.toContain('color:')
+    })
+
+    it('skips the media-template call entirely when a breakpoint has no deltas', () => {
+      const sortedBreakpoints = ['xs', 'sm']
+      let xsCalls = 0
+      let smCalls = 0
+      const media: Record<string, (s: TemplateStringsArray, ...v: any[]) => string> = {
+        xs: (s, ...vals) => {
+          xsCalls++
+          let out = ''
+          for (let i = 0; i < s.length; i++) {
+            out += s[i]
+            if (i < vals.length) out += String(vals[i])
+          }
+          return out
+        },
+        sm: (s, ...vals) => {
+          smCalls++
+          let out = ''
+          for (let i = 0; i < s.length; i++) {
+            out += s[i]
+            if (i < vals.length) out += String(vals[i])
+          }
+          return out
+        },
+      }
+
+      const responsive = makeItResponsive({
+        // Identical values at both breakpoints — sm produces zero deltas.
+        theme: { color: { xs: 'red', sm: 'red' } },
+        css: mockCss,
+        styles: mockStyles,
+      })
+
+      const result = responsive({
+        theme: {
+          breakpoints: { xs: 0, sm: 576 },
+          __PYREON__: { sortedBreakpoints, media },
+        },
+      })
+
+      // xs renders (has content); sm produces no @media wrapper at all
+      expect(xsCalls).toBe(1)
+      expect(smCalls).toBe(0)
+      // sm slot is the empty-string sentinel
+      expect((result as unknown[])[1]).toBe('')
+    })
+  })
+
+  describe('stringify fallback (mirrors vitus-labs)', () => {
+    // Where the two paths diverge observably: `styles` is invoked
+    // ONCE per breakpoint in the optimized path (for stringification),
+    // and TWICE per breakpoint in the fallback path (once for
+    // stringify which returns null, then again to re-render against
+    // the engine for the @media wrapper). With 2 breakpoints that's
+    // 2 calls vs 4 calls — clean observable distinction.
+
+    it('takes the unoptimized path when styles result has [object Foo] toString', () => {
+      // Foreign-engine result whose default toString is `[object ForeignResult]`.
+      // stringifyResult returns null → canOptimize=false → fallback path.
+      class ForeignResult {
+        constructor(public payload: string) {}
+        // Default toString → "[object ForeignResult]"
+      }
+
+      const sortedBreakpoints = ['xs', 'sm']
+      const media: Record<string, (s: TemplateStringsArray, ...v: any[]) => string> = {
+        xs: mockCss,
+        sm: mockCss,
+      }
+
+      let stylesCalls = 0
+      const stylesReturningForeign = ({ theme }: { theme: Record<string, unknown> }) => {
+        stylesCalls++
+        return new ForeignResult(JSON.stringify(theme))
+      }
+
+      // Distinct values per breakpoint so optimizeTheme keeps both keys
+      // (identical values get deduplicated upstream and never reach the
+      // optimization-vs-fallback split).
+      const responsive = makeItResponsive({
+        theme: { color: { xs: 'red', sm: 'blue' } },
+        css: mockCss,
+        styles: stylesReturningForeign as any,
+      })
+
+      responsive({
+        theme: {
+          breakpoints: { xs: 0, sm: 576 },
+          __PYREON__: { sortedBreakpoints, media },
+        },
+      })
+
+      // Fallback signature: stringify pass + re-render pass = 2 calls per bp
+      expect(stylesCalls).toBe(4)
+    })
+
+    it('takes the optimized path for plain-string styles results', () => {
+      const sortedBreakpoints = ['xs', 'sm']
+      const media: Record<string, (s: TemplateStringsArray, ...v: any[]) => string> = {
+        xs: mockCss,
+        sm: mockCss,
+      }
+
+      let stylesCalls = 0
+      const stylesCountingMock = (args: { theme: Record<string, unknown> }) => {
+        stylesCalls++
+        return mockStyles(args)
+      }
+
+      const responsive = makeItResponsive({
+        theme: { color: { xs: 'red', sm: 'blue' } },
+        css: mockCss,
+        styles: stylesCountingMock,
+      })
+
+      responsive({
+        theme: {
+          breakpoints: { xs: 0, sm: 576 },
+          __PYREON__: { sortedBreakpoints, media },
+        },
+      })
+
+      // Optimized signature: stringify pass only = 1 call per bp
+      expect(stylesCalls).toBe(2)
+    })
+  })
+
+  describe('render-output cache (mirrors vitus-labs)', () => {
+    it('returns the same rendered output by reference when called twice with stable theme + internal-theme refs', () => {
+      const sortedBreakpoints = ['xs', 'sm']
+      let xsCalls = 0
+      const media: Record<string, (s: TemplateStringsArray, ...v: any[]) => string> = {
+        xs: (s, ...vals) => {
+          xsCalls++
+          let out = ''
+          for (let i = 0; i < s.length; i++) {
+            out += s[i]
+            if (i < vals.length) out += String(vals[i])
+          }
+          return out
+        },
+        sm: mockCss,
+      }
+
+      const themeObj = { color: { xs: 'red', sm: 'blue' } }
+      const globalTheme = {
+        breakpoints: { xs: 0, sm: 576 },
+        __PYREON__: { sortedBreakpoints, media },
+      }
+
+      const responsive = makeItResponsive({
+        theme: themeObj,
+        css: mockCss,
+        styles: mockStyles,
+      })
+
+      const result1 = responsive({ theme: globalTheme })
+      const xsCallsAfterFirst = xsCalls
+      const result2 = responsive({ theme: globalTheme })
+
+      // Same identity means the rendered cache hit (no re-rendering)
+      expect(result2).toBe(result1)
+      // Render cache hit means the media template was NOT called again
+      expect(xsCalls).toBe(xsCallsAfterFirst)
+    })
+
+    it('re-renders when the outer theme reference changes (e.g. provider value swap)', () => {
+      const sortedBreakpoints = ['xs', 'sm']
+      let xsCalls = 0
+      const media: Record<string, (s: TemplateStringsArray, ...v: any[]) => string> = {
+        xs: (s, ...vals) => {
+          xsCalls++
+          let out = ''
+          for (let i = 0; i < s.length; i++) {
+            out += s[i]
+            if (i < vals.length) out += String(vals[i])
+          }
+          return out
+        },
+        sm: mockCss,
+      }
+
+      const themeObj = { color: { xs: 'red', sm: 'blue' } }
+
+      const responsive = makeItResponsive({
+        theme: themeObj,
+        css: mockCss,
+        styles: mockStyles,
+      })
+
+      // Two distinct outer-theme objects with the same content
+      const globalA = {
+        breakpoints: { xs: 0, sm: 576 },
+        __PYREON__: { sortedBreakpoints, media },
+      }
+      const globalB = {
+        breakpoints: { xs: 0, sm: 576 },
+        __PYREON__: { sortedBreakpoints, media },
+      }
+
+      responsive({ theme: globalA })
+      const callsAfterA = xsCalls
+      responsive({ theme: globalB })
+
+      // New outer theme object → no render cache hit → media template re-runs
+      expect(xsCalls).toBeGreaterThan(callsAfterA)
+    })
+
+  })
 })

package/src/__tests__/native-marker.test.ts

@@ -0,0 +1,9 @@
+import { isNativeCompat } from '@pyreon/core'
+import { describe, expect, it } from 'vitest'
+import UnistyleProvider from '../context'
+
+describe('native-compat marker — @pyreon/unistyle', () => {
+  it('Provider is marked native', () => {
+    expect(isNativeCompat(UnistyleProvider)).toBe(true)
+  })
+})