@vitus-labs/unistyle 2.6.2 → 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,
@@ -1579,6 +1602,11 @@ const propertyMap = [
 		css: "border-spacing",
 		key: "borderSpacing"
 	},
+	{
+		kind: "simple",
+		css: "border-collapse",
+		key: "borderCollapse"
+	},
 	{
 		kind: "simple",
 		css: "border-inline",
@@ -2079,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);
@@ -2095,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,
@@ -1565,6 +1588,11 @@ const propertyMap = [
 		css: "border-spacing",
 		key: "borderSpacing"
 	},
+	{
+		kind: "simple",
+		css: "border-collapse",
+		key: "borderCollapse"
+	},
 	{
 		kind: "simple",
 		css: "border-inline",
@@ -2065,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);
@@ -2081,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.2",
+  "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.2",
-    "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"
   }
 }