@vitus-labs/unistyle 2.6.1 → 2.7.0

package/README.md

@@ -13,7 +13,7 @@ Transforms property-centric theme objects into breakpoint-centric CSS with media
 - **px-to-rem conversion** — configurable rootSize, zero-effort unit handling
 - **Breakpoint deduplication** — identical breakpoints are collapsed, no redundant CSS
 - **Three input formats** — scalar, mobile-first array, or breakpoint object per property
-- **Data-driven styles** — 100+ CSS properties processed from a theme object
+- **Data-driven styles** — 170+ CSS properties processed from a theme object
 - **Alignment helpers** — flex alignment constants for X and Y axes
 
 ## Installation

package/lib/index.d.ts

@@ -18,6 +18,24 @@ type TProvider = {
  */
 declare const Provider: FC<TProvider>;
 //#endregion
+//#region src/responsive/between.d.ts
+/**
+ * Build a closed-range `@media` query string from two breakpoint values.
+ *
+ * Accepts any flat breakpoint map (`Record<string, number | string>`).
+ * Numeric values render as `${n}px`, string values pass through as-is
+ * so consumers can use rem/em units (`'36em'` → as-is). The upper
+ * bound is decremented by `0.02px` so adjacent ranges don't overlap on
+ * Safari's sub-pixel matching.
+ *
+ * @example
+ * ```ts
+ * const onlyMobile = between({ xs: 0, sm: 576 }, 'xs', 'sm')
+ * // → '@media (min-width: 0px) and (max-width: 575.98px)'
+ * ```
+ */
+declare const between: <B extends Record<string, number | string>>(breakpoints: B, minKey: keyof B, maxKey: keyof B) => string;
+//#endregion
 //#region src/responsive/breakpoints.d.ts
 declare const breakpoints$1: {
   readonly rootSize: 16;
@@ -516,6 +534,9 @@ type Styles = ({
  * and delegates each to `processDescriptor`, which maps theme values
  * to CSS strings. The result is a single `css` tagged-template literal
  * containing all non-null property outputs.
+ *
+ * In development, warns once per unknown theme key — the typo class of
+ * silent failure (e.g. `paddng: 8`) that used to render empty CSS.
  */
 declare const styles$1: Styles;
 //#endregion
@@ -551,5 +572,5 @@ type Values = (values: unknown[], rootSize?: number, outputUnit?: Units) => stri
  */
 declare const values: Values;
 //#endregion
-export { ALIGN_CONTENT_DIRECTION, ALIGN_CONTENT_MAP_X, ALIGN_CONTENT_MAP_Y, type AlignContent, type AlignContentAlignXKeys, type AlignContentAlignYKeys, type AlignContentDirectionKeys, type Breakpoints, type BrowserColors, type Color, type CreateMediaQueries, type Defaults, type ExtendCss, type MakeItResponsive, type MakeItResponsiveStyles, type NormalizeTheme, type PropertyValue, Provider, type SortBreakpoints, type StripUnit, type Styles, type Theme as StylesTheme, type TProvider, type TransformTheme, type UnitValue, type Value, type Values, alignContent, breakpoints$1 as breakpoints, context, createMediaQueries, extendCss, makeItResponsive, normalizeTheme, sortBreakpoints, stripUnit, styles$1 as styles, transformTheme, value, values };
+export { ALIGN_CONTENT_DIRECTION, ALIGN_CONTENT_MAP_X, ALIGN_CONTENT_MAP_Y, type AlignContent, type AlignContentAlignXKeys, type AlignContentAlignYKeys, type AlignContentDirectionKeys, type Breakpoints, type BrowserColors, type Color, type CreateMediaQueries, type Defaults, type ExtendCss, type MakeItResponsive, type MakeItResponsiveStyles, type NormalizeTheme, type PropertyValue, Provider, type SortBreakpoints, type StripUnit, type Styles, type Theme as StylesTheme, type TProvider, type TransformTheme, type UnitValue, type Value, type Values, alignContent, between, breakpoints$1 as breakpoints, context, createMediaQueries, extendCss, makeItResponsive, normalizeTheme, sortBreakpoints, stripUnit, styles$1 as styles, transformTheme, value, values };
 //# sourceMappingURL=index2.d.ts.map

package/lib/index.js

@@ -2,6 +2,29 @@ import { Provider as Provider$1, config, context, isEmpty, set } from "@vitus-la
 import { useMemo } from "react";
 import { jsx } from "react/jsx-runtime";
 
+//#region src/responsive/between.ts
+/**
+* Build a closed-range `@media` query string from two breakpoint values.
+*
+* Accepts any flat breakpoint map (`Record<string, number | string>`).
+* Numeric values render as `${n}px`, string values pass through as-is
+* so consumers can use rem/em units (`'36em'` → as-is). The upper
+* bound is decremented by `0.02px` so adjacent ranges don't overlap on
+* Safari's sub-pixel matching.
+*
+* @example
+* ```ts
+* const onlyMobile = between({ xs: 0, sm: 576 }, 'xs', 'sm')
+* // → '@media (min-width: 0px) and (max-width: 575.98px)'
+* ```
+*/
+const between = (breakpoints, minKey, maxKey) => {
+	const min = breakpoints[minKey];
+	const max = breakpoints[maxKey];
+	return `@media (min-width: ${typeof min === "number" ? `${min}px` : String(min)}) and (max-width: ${typeof max === "number" ? `${Math.max(0, max - .02)}px` : String(max)})`;
+};
+
+//#endregion
 //#region src/responsive/breakpoints.ts
 const breakpoints = {
 	rootSize: 16,
@@ -23,19 +46,22 @@ const breakpoints = {
 * Others are wrapped in `@media (min-width: <em>)` — em units
 * ensure correct behaviour when users change browser font size.
 */
-const createMediaQueries = ({ breakpoints, rootSize, css }) => Object.keys(breakpoints).reduce((acc, key) => {
-	const breakpointValue = breakpoints[key];
-	if (breakpointValue === 0) acc[key] = (...args) => css(...args);
-	else if (breakpointValue != null) {
-		const emSize = breakpointValue / rootSize;
-		acc[key] = (...args) => css`
+const createMediaQueries = ({ breakpoints, rootSize, css }) => {
+	const acc = {};
+	for (const key in breakpoints) {
+		const breakpointValue = breakpoints[key];
+		if (breakpointValue === 0) acc[key] = (...args) => css(...args);
+		else if (breakpointValue != null) {
+			const emSize = breakpointValue / rootSize;
+			acc[key] = (...args) => css`
           @media only screen and (min-width: ${emSize}em) {
             ${css(...args)};
           }
         `;
+		}
 	}
 	return acc;
-}, {});
+};
 
 //#endregion
 //#region src/responsive/normalizeTheme.ts
@@ -59,7 +85,13 @@ const handleObjectCb = (obj) => (bp, i, bps, res) => {
 	return previousValue;
 };
 const handleValueCb = (value) => () => value;
-const shouldNormalize = (props) => Object.values(props).some((item) => typeof item === "object" || Array.isArray(item));
+const shouldNormalize = (props) => {
+	for (const key in props) {
+		const item = props[key];
+		if (typeof item === "object" || Array.isArray(item)) return true;
+	}
+	return false;
+};
 /**
 * Expands each theme property into a full breakpoint map so every
 * breakpoint has a value. Arrays fill by index (last value carries forward),
@@ -70,12 +102,13 @@ const normalizeTheme = ({ theme, breakpoints }) => {
 	if (!shouldNormalize(theme)) return theme;
 	const getBpValues = assignToBreakpointKey(breakpoints);
 	const result = {};
-	Object.entries(theme).forEach(([key, value]) => {
-		if (value == null) return;
+	for (const key in theme) {
+		const value = theme[key];
+		if (value == null) continue;
 		if (Array.isArray(value)) result[key] = getBpValues(handleArrayCb(value));
 		else if (typeof value === "object") result[key] = getBpValues(handleObjectCb(value));
 		else result[key] = getBpValues(handleValueCb(value));
-	});
+	}
 	return result;
 };
 
@@ -205,11 +238,14 @@ const optimizeBreakpointDeltas = (cssStrings) => {
 const shallowEqual = (a, b) => {
 	if (a === b) return true;
 	if (!a || !b) return false;
-	const keysA = Object.keys(a);
-	const keysB = Object.keys(b);
-	if (keysA.length !== keysB.length) return false;
-	for (const key of keysA) if (a[key] !== b[key]) return false;
-	return true;
+	let aCount = 0;
+	for (const key in a) {
+		aCount++;
+		if (a[key] !== b[key]) return false;
+	}
+	let bCount = 0;
+	for (const _ in b) bCount++;
+	return aCount === bCount;
 };
 /**
 * Removes breakpoints whose styles are identical to the previous one.
@@ -247,19 +283,20 @@ const removeUnexpectedKeys = (obj, keys) => {
 const transformTheme = ({ theme, breakpoints }) => {
 	const result = {};
 	if (isEmpty(theme) || isEmpty(breakpoints)) return result;
-	Object.entries(theme).forEach(([key, value]) => {
-		if (Array.isArray(value) && value.length > 0) value.forEach((child, i) => {
+	for (const key in theme) {
+		const value = theme[key];
+		if (Array.isArray(value) && value.length > 0) for (let i = 0; i < value.length; i++) {
 			const indexBreakpoint = breakpoints[i];
-			set(result, [indexBreakpoint, key], child);
-		});
-		else if (typeof value === "object" && value !== null) Object.entries(value).forEach(([childKey, childValue]) => {
-			set(result, [childKey, key], childValue);
-		});
-		else if (value != null) {
+			set(result, [indexBreakpoint, key], value[i]);
+		}
+		else if (typeof value === "object" && value !== null) {
+			const obj = value;
+			for (const childKey in obj) set(result, [childKey, key], obj[childKey]);
+		} else if (value != null) {
 			const firstBreakpoint = breakpoints[0];
 			set(result, [firstBreakpoint, key], value);
 		}
-	});
+	}
 	return removeUnexpectedKeys(result, breakpoints);
 };
 
@@ -424,7 +461,7 @@ const ALIGN_CONTENT_DIRECTION = {
 const alignContent = (attrs) => {
 	const { direction, alignX, alignY } = attrs;
 	if (isEmpty(attrs) || !direction || !alignX || !alignY) return null;
-	const isReverted = ["inline", "reverseInline"].includes(direction);
+	const isReverted = direction === "inline" || direction === "reverseInline";
 	const dir = ALIGN_CONTENT_DIRECTION[direction];
 	const x = ALIGN_CONTENT_MAP_X[alignX];
 	const y = ALIGN_CONTENT_MAP_Y[alignY];
@@ -1565,6 +1602,11 @@ const propertyMap = [
 		css: "border-spacing",
 		key: "borderSpacing"
 	},
+	{
+		kind: "simple",
+		css: "border-collapse",
+		key: "borderCollapse"
+	},
 	{
 		kind: "simple",
 		css: "border-inline",
@@ -2065,13 +2107,40 @@ const propertyMap = [
 
 //#endregion
 //#region src/styles/styles/index.ts
+let knownKeysCache = null;
+const buildKnownKeys = () => {
+	const out = /* @__PURE__ */ new Set();
+	for (const d of propertyMap) {
+		if ("key" in d) out.add(d.key);
+		if ("id" in d) out.add(d.id);
+		if ("keys" in d) {
+			const keys = d.keys;
+			if (keys && typeof keys === "object") {
+				for (const k of Object.values(keys)) if (typeof k === "string") out.add(k);
+			}
+		}
+	}
+	out.add("keyframe");
+	return out;
+};
+const warnedKeys = /* @__PURE__ */ new Set();
 /**
 * Data-driven style processor. Iterates the `propertyMap` descriptors
 * and delegates each to `processDescriptor`, which maps theme values
 * to CSS strings. The result is a single `css` tagged-template literal
 * containing all non-null property outputs.
+*
+* In development, warns once per unknown theme key — the typo class of
+* silent failure (e.g. `paddng: 8`) that used to render empty CSS.
 */
 const styles = ({ theme: t, css, rootSize }) => {
+	if (process.env.NODE_ENV !== "production" && t) {
+		if (!knownKeysCache) knownKeysCache = buildKnownKeys();
+		for (const k in t) if (!knownKeysCache.has(k) && !warnedKeys.has(k)) {
+			warnedKeys.add(k);
+			console.warn(`[@vitus-labs/unistyle] unknown theme key "${k}" — no propertyMap descriptor exists. Possible typo? It will be silently ignored.`);
+		}
+	}
 	const calc = (...params) => values(params, rootSize);
 	const shorthand = edge(rootSize);
 	const borderRadiusFn = borderRadius(rootSize);
@@ -2081,5 +2150,5 @@ const styles = ({ theme: t, css, rootSize }) => {
 };
 
 //#endregion
-export { ALIGN_CONTENT_DIRECTION, ALIGN_CONTENT_MAP_X, ALIGN_CONTENT_MAP_Y, Provider, alignContent, breakpoints, context, createMediaQueries, extendCss, makeItResponsive, normalizeTheme, sortBreakpoints, stripUnit, styles, transformTheme, value, values };
+export { ALIGN_CONTENT_DIRECTION, ALIGN_CONTENT_MAP_X, ALIGN_CONTENT_MAP_Y, Provider, alignContent, between, breakpoints, context, createMediaQueries, extendCss, makeItResponsive, normalizeTheme, sortBreakpoints, stripUnit, styles, transformTheme, value, values };
 //# sourceMappingURL=index.js.map

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

@@ -2,6 +2,29 @@ import { Provider as Provider$1, config, context, isEmpty, set } from "@vitus-la
 import { useMemo } from "react";
 import { jsx } from "react/jsx-runtime";
 
+//#region src/responsive/between.ts
+/**
+* Build a closed-range `@media` query string from two breakpoint values.
+*
+* Accepts any flat breakpoint map (`Record<string, number | string>`).
+* Numeric values render as `${n}px`, string values pass through as-is
+* so consumers can use rem/em units (`'36em'` → as-is). The upper
+* bound is decremented by `0.02px` so adjacent ranges don't overlap on
+* Safari's sub-pixel matching.
+*
+* @example
+* ```ts
+* const onlyMobile = between({ xs: 0, sm: 576 }, 'xs', 'sm')
+* // → '@media (min-width: 0px) and (max-width: 575.98px)'
+* ```
+*/
+const between = (breakpoints, minKey, maxKey) => {
+	const min = breakpoints[minKey];
+	const max = breakpoints[maxKey];
+	return `@media (min-width: ${typeof min === "number" ? `${min}px` : String(min)}) and (max-width: ${typeof max === "number" ? `${Math.max(0, max - .02)}px` : String(max)})`;
+};
+
+//#endregion
 //#region src/responsive/breakpoints.ts
 const breakpoints = {
 	rootSize: 16,
@@ -23,19 +46,22 @@ const breakpoints = {
 * Others are wrapped in `@media (min-width: <em>)` — em units
 * ensure correct behaviour when users change browser font size.
 */
-const createMediaQueries = ({ breakpoints, rootSize, css }) => Object.keys(breakpoints).reduce((acc, key) => {
-	const breakpointValue = breakpoints[key];
-	if (breakpointValue === 0) acc[key] = (...args) => css(...args);
-	else if (breakpointValue != null) {
-		const emSize = breakpointValue / rootSize;
-		acc[key] = (...args) => css`
+const createMediaQueries = ({ breakpoints, rootSize, css }) => {
+	const acc = {};
+	for (const key in breakpoints) {
+		const breakpointValue = breakpoints[key];
+		if (breakpointValue === 0) acc[key] = (...args) => css(...args);
+		else if (breakpointValue != null) {
+			const emSize = breakpointValue / rootSize;
+			acc[key] = (...args) => css`
           @media only screen and (min-width: ${emSize}em) {
             ${css(...args)};
           }
         `;
+		}
 	}
 	return acc;
-}, {});
+};
 
 //#endregion
 //#region src/responsive/normalizeTheme.ts
@@ -59,7 +85,13 @@ const handleObjectCb = (obj) => (bp, i, bps, res) => {
 	return previousValue;
 };
 const handleValueCb = (value) => () => value;
-const shouldNormalize = (props) => Object.values(props).some((item) => typeof item === "object" || Array.isArray(item));
+const shouldNormalize = (props) => {
+	for (const key in props) {
+		const item = props[key];
+		if (typeof item === "object" || Array.isArray(item)) return true;
+	}
+	return false;
+};
 /**
 * Expands each theme property into a full breakpoint map so every
 * breakpoint has a value. Arrays fill by index (last value carries forward),
@@ -70,12 +102,13 @@ const normalizeTheme = ({ theme, breakpoints }) => {
 	if (!shouldNormalize(theme)) return theme;
 	const getBpValues = assignToBreakpointKey(breakpoints);
 	const result = {};
-	Object.entries(theme).forEach(([key, value]) => {
-		if (value == null) return;
+	for (const key in theme) {
+		const value = theme[key];
+		if (value == null) continue;
 		if (Array.isArray(value)) result[key] = getBpValues(handleArrayCb(value));
 		else if (typeof value === "object") result[key] = getBpValues(handleObjectCb(value));
 		else result[key] = getBpValues(handleValueCb(value));
-	});
+	}
 	return result;
 };
 
@@ -205,11 +238,14 @@ const optimizeBreakpointDeltas = (cssStrings) => {
 const shallowEqual = (a, b) => {
 	if (a === b) return true;
 	if (!a || !b) return false;
-	const keysA = Object.keys(a);
-	const keysB = Object.keys(b);
-	if (keysA.length !== keysB.length) return false;
-	for (const key of keysA) if (a[key] !== b[key]) return false;
-	return true;
+	let aCount = 0;
+	for (const key in a) {
+		aCount++;
+		if (a[key] !== b[key]) return false;
+	}
+	let bCount = 0;
+	for (const _ in b) bCount++;
+	return aCount === bCount;
 };
 /**
 * Removes breakpoints whose styles are identical to the previous one.
@@ -247,19 +283,20 @@ const removeUnexpectedKeys = (obj, keys) => {
 const transformTheme = ({ theme, breakpoints }) => {
 	const result = {};
 	if (isEmpty(theme) || isEmpty(breakpoints)) return result;
-	Object.entries(theme).forEach(([key, value]) => {
-		if (Array.isArray(value) && value.length > 0) value.forEach((child, i) => {
+	for (const key in theme) {
+		const value = theme[key];
+		if (Array.isArray(value) && value.length > 0) for (let i = 0; i < value.length; i++) {
 			const indexBreakpoint = breakpoints[i];
-			set(result, [indexBreakpoint, key], child);
-		});
-		else if (typeof value === "object" && value !== null) Object.entries(value).forEach(([childKey, childValue]) => {
-			set(result, [childKey, key], childValue);
-		});
-		else if (value != null) {
+			set(result, [indexBreakpoint, key], value[i]);
+		}
+		else if (typeof value === "object" && value !== null) {
+			const obj = value;
+			for (const childKey in obj) set(result, [childKey, key], obj[childKey]);
+		} else if (value != null) {
 			const firstBreakpoint = breakpoints[0];
 			set(result, [firstBreakpoint, key], value);
 		}
-	});
+	}
 	return removeUnexpectedKeys(result, breakpoints);
 };
 
@@ -424,7 +461,7 @@ const ALIGN_CONTENT_DIRECTION = {
 const alignContent = (attrs) => {
 	const { direction, alignX, alignY } = attrs;
 	if (isEmpty(attrs) || !direction || !alignX || !alignY) return null;
-	const isReverted = ["inline", "reverseInline"].includes(direction);
+	const isReverted = direction === "inline" || direction === "reverseInline";
 	const dir = ALIGN_CONTENT_DIRECTION[direction];
 	const x = ALIGN_CONTENT_MAP_X[alignX];
 	const y = ALIGN_CONTENT_MAP_Y[alignY];
@@ -1551,6 +1588,11 @@ const propertyMap = [
 		css: "border-spacing",
 		key: "borderSpacing"
 	},
+	{
+		kind: "simple",
+		css: "border-collapse",
+		key: "borderCollapse"
+	},
 	{
 		kind: "simple",
 		css: "border-inline",
@@ -2051,13 +2093,40 @@ const propertyMap = [
 
 //#endregion
 //#region src/styles/styles/index.ts
+let knownKeysCache = null;
+const buildKnownKeys = () => {
+	const out = /* @__PURE__ */ new Set();
+	for (const d of propertyMap) {
+		if ("key" in d) out.add(d.key);
+		if ("id" in d) out.add(d.id);
+		if ("keys" in d) {
+			const keys = d.keys;
+			if (keys && typeof keys === "object") {
+				for (const k of Object.values(keys)) if (typeof k === "string") out.add(k);
+			}
+		}
+	}
+	out.add("keyframe");
+	return out;
+};
+const warnedKeys = /* @__PURE__ */ new Set();
 /**
 * Data-driven style processor. Iterates the `propertyMap` descriptors
 * and delegates each to `processDescriptor`, which maps theme values
 * to CSS strings. The result is a single `css` tagged-template literal
 * containing all non-null property outputs.
+*
+* In development, warns once per unknown theme key — the typo class of
+* silent failure (e.g. `paddng: 8`) that used to render empty CSS.
 */
 const styles = ({ theme: t, css, rootSize }) => {
+	if (process.env.NODE_ENV !== "production" && t) {
+		if (!knownKeysCache) knownKeysCache = buildKnownKeys();
+		for (const k in t) if (!knownKeysCache.has(k) && !warnedKeys.has(k)) {
+			warnedKeys.add(k);
+			console.warn(`[@vitus-labs/unistyle] unknown theme key "${k}" — no propertyMap descriptor exists. Possible typo? It will be silently ignored.`);
+		}
+	}
 	const calc = (...params) => values(params, rootSize);
 	const shorthand = edge(rootSize);
 	const borderRadiusFn = borderRadius(rootSize);
@@ -2067,5 +2136,5 @@ const styles = ({ theme: t, css, rootSize }) => {
 };
 
 //#endregion
-export { ALIGN_CONTENT_DIRECTION, ALIGN_CONTENT_MAP_X, ALIGN_CONTENT_MAP_Y, Provider, alignContent, breakpoints, context, createMediaQueries, extendCss, makeItResponsive, normalizeTheme, sortBreakpoints, stripUnit, styles, transformTheme, value, values };
+export { ALIGN_CONTENT_DIRECTION, ALIGN_CONTENT_MAP_X, ALIGN_CONTENT_MAP_Y, Provider, alignContent, between, breakpoints, context, createMediaQueries, extendCss, makeItResponsive, normalizeTheme, sortBreakpoints, stripUnit, styles, transformTheme, value, values };
 //# sourceMappingURL=vitus-labs-unistyle.native.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vitus-labs/unistyle",
-  "version": "2.6.1",
+  "version": "2.7.0",
   "license": "MIT",
   "author": "Vit Bokisch <vit@bokisch.cz>",
   "maintainers": [
@@ -50,18 +50,12 @@
     "node": ">= 18"
   },
   "peerDependencies": {
-    "@vitus-labs/core": "^2.6.1",
-    "react": ">= 19",
-    "react-native": ">= 0.76"
-  },
-  "peerDependenciesMeta": {
-    "react-native": {
-      "optional": true
-    }
+    "@vitus-labs/core": "^2.7.0",
+    "react": ">= 19"
   },
   "devDependencies": {
     "@vitus-labs/core": "workspace:*",
-    "@vitus-labs/tools-rolldown": "2.3.1",
-    "@vitus-labs/tools-typescript": "2.3.1"
+    "@vitus-labs/tools-rolldown": "2.5.0",
+    "@vitus-labs/tools-typescript": "2.5.0"
   }
 }