@vitus-labs/rocketstyle 2.0.0-alpha.9 → 2.0.0-beta.0

package/README.md

@@ -5,7 +5,7 @@ Multi-dimensional styling system for React.
 [![npm](https://img.shields.io/npm/v/@vitus-labs/rocketstyle)](https://www.npmjs.com/package/@vitus-labs/rocketstyle)
 [![license](https://img.shields.io/npm/l/@vitus-labs/rocketstyle)](https://github.com/vitus-labs/ui-system/blob/main/LICENSE)
 
-Organize component styles by dimensions — states, sizes, variants — instead of flat props. Chain theme values, attach styled-components CSS, and get full TypeScript inference. Built-in pseudo-state handling, light/dark mode, and provider/consumer patterns for parent-child state propagation.
+Organize component styles by dimensions — states, sizes, variants — instead of flat props. Chain theme values, attach CSS via the active connector, and get full TypeScript inference. Built-in pseudo-state handling, light/dark mode, and provider/consumer patterns for parent-child state propagation.
 
 ## Features
 
@@ -21,7 +21,7 @@ Organize component styles by dimensions — states, sizes, variants — instead
 ## Installation
 
 ```bash
-npm install @vitus-labs/rocketstyle @vitus-labs/core styled-components
+npm install @vitus-labs/rocketstyle @vitus-labs/core
 ```
 
 ## Quick Start
@@ -110,7 +110,7 @@ Pseudo-state keys nest directly in the theme object:
 
 ### Styles Function
 
-The `.styles()` method defines the styled-components template that receives the computed theme:
+The `.styles()` method defines the CSS template that receives the computed theme:
 
 ```tsx
 .styles((css) => css`
@@ -200,7 +200,7 @@ Button.states((theme, mode, css) => ({
 
 ### .styles(callback)
 
-Define the styled-components CSS template.
+Define the CSS template using the active connector's `css` tagged template.
 
 ```tsx
 Button.styles((css) => css`

package/lib/index.d.ts

@@ -35,6 +35,11 @@ declare const DEFAULT_DIMENSIONS: {
     readonly propName: "multiple";
     readonly multi: true;
   };
+  readonly modifiers: {
+    readonly propName: "modifier";
+    readonly multi: true;
+    readonly transform: true;
+  };
 };
 type DefaultDimensions = typeof DEFAULT_DIMENSIONS;
 //#endregion
@@ -82,7 +87,7 @@ type ExtractProps<TComponentOrTProps> = TComponentOrTProps extends ComponentType
 //#endregion
 //#region src/types/styles.d.ts
 interface StylesDefault {}
-type Styles<S> = S extends unknown ? StylesDefault : MergeTypes<[StylesDefault, S]>;
+type Styles<S = unknown> = StylesDefault;
 type Css = typeof config.css;
 /**
  * Props available inside `.styles()` interpolation functions.
@@ -129,15 +134,17 @@ type ExtractDimensionMulti<T extends DimensionValue> = T extends DimensionValueO
 type DimensionValuePrimitive = string;
 type DimensionValueObj = {
   propName: string;
-  multi?: boolean;
+  multi?: boolean; /** When true, this dimension is evaluated last and its values receive the accumulated theme as argument. */
+  transform?: boolean;
 };
 type DimensionValue = DimensionValuePrimitive | DimensionValueObj;
 type Dimensions = Record<string, DimensionValue>;
 type MultiKeys<T extends Dimensions = Dimensions> = Partial<Record<ExtractDimensionKey<T[keyof T]>, true>>;
-type DimensionResult<CT> = Record<string, boolean | null | Partial<CT>>;
-type DimensionObj<CT> = DimensionResult<CT>;
-type DimensionCb<T, CT> = (theme: T, mode: ThemeModeCallback, css: Css) => DimensionResult<CT>;
-type DimensionCallbackParam<T, CT> = DimensionObj<CT> | DimensionCb<T, CT>;
+type DeepPartial<T> = { [K in keyof T]?: T[K] extends ((...args: any[]) => any) ? T[K] : NonNullable<T[K]> extends Record<string, any> ? DeepPartial<NonNullable<T[K]>> | Extract<T[K], null> : T[K] };
+type DimensionResult<CT, T = any> = Record<string, boolean | null | DeepPartial<CT> | ((theme: CT, appTheme: T, mode: ThemeModeCallback, css: Css) => DeepPartial<CT>)>;
+type DimensionObj<CT, T = any> = DimensionResult<CT, T>;
+type DimensionCb<T, CT> = (theme: T, mode: ThemeModeCallback, css: Css) => DimensionResult<CT, T>;
+type DimensionCallbackParam<T, CT> = DimensionObj<CT, T> | DimensionCb<T, CT>;
 type TDKP = Record<ExtractDimensionKey<Dimensions[keyof Dimensions]>, Record<string, boolean | never | Record<string, boolean>> | unknown>;
 type DimensionProps<K extends DimensionValue, D extends Dimensions, P extends CallBackParam, DKP extends TDKP> = { [I in ExtractDimensionKey<D[keyof D]>]: I extends ExtractDimensionKey<K> ? ExtractNullableDimensionKeys<Spread<[DKP[I], NullableKeys<ReturnCbParam<P>>]>> : DKP[I] };
 type DimensionTypesHelper<DKP extends TDKP> = { [I in keyof DKP]: keyof DKP[I] };
@@ -180,6 +187,7 @@ type InitConfiguration<C, D> = {
   dimensionKeys: ArrayOfKeys<D>;
   dimensionValues: ArrayOfValues<D>;
   multiKeys: MultiKeys;
+  transformKeys: Partial<Record<string, true>>;
 };
 type Configuration<C = ElementType | unknown, D extends Dimensions = Dimensions> = InitConfiguration<C, D> & {
   provider?: boolean;
@@ -365,7 +373,7 @@ interface IRocketStyleComponent<OA extends TObj = {}, EA extends TObj = {}, T ex
    * }))
    * ```
    */
-  theme: <P extends TObj = {}>(param: Partial<P> | ThemeCb<P, Theme<T>>) => RocketStyleComponent<OA, EA, T, MergeTypes<[CSS, P]>, S, HOC, D, UB, DKP>;
+  theme: <P extends TObj = {}>(param: Partial<P> | Partial<Styles<CSS>> | ThemeCb<P, Theme<T>>) => RocketStyleComponent<OA, EA, T, MergeTypes<[CSS, P]>, S, HOC, D, UB, DKP>;
   /**
    * A chaining method to define default rendered styles
    * @param param  Callback of styled-components `css` function

package/lib/index.js

@@ -85,6 +85,11 @@ const DEFAULT_DIMENSIONS = {
 	multiple: {
 		propName: "multiple",
 		multi: true
+	},
+	modifiers: {
+		propName: "modifier",
+		multi: true,
+		transform: true
 	}
 };
 
@@ -197,12 +202,18 @@ const useThemeAttrs = ({ inversed }) => {
 	const { theme = {}, mode: ctxMode = "light", isDark: ctxDark } = useContext(context) || {};
 	const mode = inversed ? THEME_MODES_INVERSED[ctxMode] : ctxMode;
 	const isDark = inversed ? !ctxDark : ctxDark;
-	return {
+	const isLight = !isDark;
+	return useMemo(() => ({
 		theme,
 		mode,
 		isDark,
-		isLight: !isDark
-	};
+		isLight
+	}), [
+		theme,
+		mode,
+		isDark,
+		isLight
+	]);
 };
 
 //#endregion
@@ -213,13 +224,16 @@ const useThemeAttrs = ({ inversed }) => {
 * to its rocketstyle children.
 */
 const context$1 = createContext({});
+const EMPTY_CTX = { pseudo: {} };
 const useLocalContext = (consumer) => {
 	const ctx = useContext(context$1);
-	if (!consumer) return { pseudo: {} };
-	return {
-		pseudo: {},
-		...consumer((callback) => callback(ctx))
-	};
+	return useMemo(() => {
+		if (!consumer) return EMPTY_CTX;
+		return {
+			pseudo: {},
+			...consumer((callback) => callback(ctx))
+		};
+	}, [consumer, ctx]);
 };
 const LocalProvider = context$1.Provider;
 
@@ -259,14 +273,11 @@ const RocketStyleProviderComponent = (WrappedComponent) => forwardRef(({ onMouse
 
 //#endregion
 //#region src/utils/attrs.ts
-const removeUndefinedProps = (props) => Object.keys(props).reduce((acc, key) => {
-	const currentValue = props[key];
-	if (currentValue !== void 0) return {
-		...acc,
-		[key]: currentValue
-	};
-	return acc;
-}, {});
+const removeUndefinedProps = (props) => {
+	const result = {};
+	for (const key in props) if (props[key] !== void 0) result[key] = props[key];
+	return result;
+};
 const pickStyledAttrs = (props, keywords) => Object.keys(props).reduce((acc, key) => {
 	if (keywords[key] && props[key]) acc[key] = props[key];
 	return acc;
@@ -280,23 +291,26 @@ const calculateStylingAttrs = ({ useBooleans, multiKeys }) => ({ props, dimensio
 	const result = {};
 	Object.keys(dimensions).forEach((item) => {
 		const pickedProp = props[item];
-		const valueTypes = ["number", "string"];
+		const t = typeof pickedProp;
 		if (multiKeys?.[item] && Array.isArray(pickedProp)) result[item] = pickedProp;
-		else if (valueTypes.includes(typeof pickedProp)) result[item] = pickedProp;
+		else if (t === "string" || t === "number") result[item] = pickedProp;
 		else result[item] = void 0;
 	});
 	if (useBooleans) {
-		const propsKeys = Object.keys(props).reverse();
+		const propsKeys = Object.keys(props);
 		Object.entries(result).forEach(([key, value]) => {
 			const isMultiKey = multiKeys[key];
 			if (!value) {
 				let newDimensionValue;
-				const keywords = Object.keys(dimensions[key]);
-				if (isMultiKey) newDimensionValue = propsKeys.filter((key) => keywords.includes(key));
-				else newDimensionValue = propsKeys.find((key) => {
-					if (keywords.includes(key) && props[key]) return key;
-					return false;
-				});
+				const keywordSet = new Set(Object.keys(dimensions[key]));
+				if (isMultiKey) newDimensionValue = propsKeys.filter((key) => keywordSet.has(key));
+				else for (let i = propsKeys.length - 1; i >= 0; i--) {
+					const k = propsKeys[i];
+					if (keywordSet.has(k) && props[k]) {
+						newDimensionValue = k;
+						break;
+					}
+				}
 				result[key] = newDimensionValue;
 			}
 		});
@@ -396,6 +410,12 @@ const getMultipleDimensions = (obj) => getValues(obj).reduce((accumulator, value
 	}
 	return accumulator;
 }, {});
+const getTransformDimensions = (obj) => getValues(obj).reduce((accumulator, value) => {
+	if (typeof value === "object") {
+		if (value.transform === true) accumulator[value.propName] = true;
+	}
+	return accumulator;
+}, {});
 
 //#endregion
 //#region src/utils/statics.ts
@@ -424,12 +444,17 @@ const removeNullableValues = (obj) => Object.entries(obj).filter(([, v]) => v !=
 
 //#endregion
 //#region src/utils/theme.ts
+const MODE_CALLBACK_BRAND = Symbol.for("vl.themeModeCallback");
 /** Creates a mode-switching function that returns the light or dark value based on the active mode. */
-const themeModeCallback = (light, dark) => (mode) => {
-	if (!mode || mode === "light") return light;
-	return dark;
+const themeModeCallback = (light, dark) => {
+	const fn = (mode) => {
+		if (!mode || mode === "light") return light;
+		return dark;
+	};
+	fn.__brand = MODE_CALLBACK_BRAND;
+	return fn;
 };
-const isModeCallback = (value) => typeof value === "function" && value.toString() === themeModeCallback().toString();
+const isModeCallback = (value) => typeof value === "function" && value.__brand === MODE_CALLBACK_BRAND;
 const getThemeFromChain = (options, theme) => {
 	const result = {};
 	if (!options || isEmpty(options)) return result;
@@ -445,15 +470,21 @@ const getDimensionThemes = (theme, options) => {
 		return acc;
 	}, result);
 };
-const getTheme = ({ rocketstate, themes, baseTheme }) => {
+const getTheme = ({ rocketstate, themes, baseTheme, transformKeys, appTheme }) => {
 	let finalTheme = { ...baseTheme };
+	const deferredTransforms = [];
 	Object.entries(rocketstate).forEach(([key, value]) => {
 		const keyTheme = themes[key];
-		if (Array.isArray(value)) value.forEach((item) => {
-			finalTheme = merge({}, finalTheme, keyTheme[item]);
-		});
-		else finalTheme = merge({}, finalTheme, keyTheme[value]);
+		const isTransform = transformKeys?.[key];
+		const mergeValue = (item) => {
+			const val = keyTheme[item];
+			if (isTransform && typeof val === "function") deferredTransforms.push(val);
+			else finalTheme = merge({}, finalTheme, val);
+		};
+		if (Array.isArray(value)) value.forEach(mergeValue);
+		else mergeValue(value);
 	});
+	for (const transform of deferredTransforms) finalTheme = merge({}, finalTheme, transform(finalTheme, appTheme ?? {}, themeModeCallback, config.css));
 	return finalTheme;
 };
 const getThemeByMode = (object, mode) => Object.keys(object).reduce((acc, key) => {
@@ -550,11 +581,24 @@ const rocketComponent = (options) => {
 			...rocketstate,
 			pseudo: pseudoRocketstate
 		};
-		const rocketstyle = getTheme({
+		let rsKey = "";
+		for (const k in rocketstate) {
+			const v = rocketstate[k];
+			rsKey += `${k}=`;
+			rsKey += `${Array.isArray(v) ? v.join(",") : v}|`;
+		}
+		const rocketstyle = useMemo(() => getTheme({
 			rocketstate,
 			themes: currentModeThemes,
-			baseTheme: currentModeBaseTheme
-		});
+			baseTheme: currentModeBaseTheme,
+			transformKeys: options.transformKeys,
+			appTheme: theme
+		}), [
+			rsKey,
+			currentModeThemes,
+			currentModeBaseTheme,
+			theme
+		]);
 		const finalProps = {
 			...omit(mergeProps, [
 				...RESERVED_STYLING_PROPS_KEYS,
@@ -665,6 +709,7 @@ const rocketstyle = ({ dimensions = DEFAULT_DIMENSIONS, useBooleans = true } = {
 		dimensionKeys: getKeys(dimensions),
 		dimensionValues: getDimensionsValues(dimensions),
 		multiKeys: getMultipleDimensions(dimensions),
+		transformKeys: getTransformDimensions(dimensions),
 		styled: true
 	});
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vitus-labs/rocketstyle",
-  "version": "2.0.0-alpha.9+f2f47db",
+  "version": "2.0.0-beta.0",
   "license": "MIT",
   "author": "Vit Bokisch <vit@bokisch.cz>",
   "maintainers": [
@@ -14,6 +14,7 @@
     "types": "./lib/index.d.ts"
   },
   "types": "./lib/index.d.ts",
+  "main": "./lib/index.js",
   "files": [
     "lib",
     "!lib/**/*.map",
@@ -60,19 +61,20 @@
     "test:coverage": "vitest run --coverage",
     "test:watch": "vitest",
     "cover": "coveralls < .coverage/lcov.info",
-    "typecheck": "tsc --noEmit"
+    "typecheck": "tsc --noEmit",
+    "version": "node ../../scripts/sync-peer-deps.mjs"
   },
   "peerDependencies": {
-    "@vitus-labs/core": "^1.4.0",
+    "@vitus-labs/core": "2.0.0-alpha.27",
     "react": ">= 19"
   },
   "devDependencies": {
-    "@vitus-labs/core": "2.0.0-alpha.9+f2f47db",
-    "@vitus-labs/elements": "2.0.0-alpha.9+f2f47db",
-    "@vitus-labs/tools-rolldown": "^1.6.0",
-    "@vitus-labs/tools-storybook": "^1.6.0",
-    "@vitus-labs/tools-typescript": "^1.6.0",
-    "@vitus-labs/unistyle": "2.0.0-alpha.9+f2f47db"
+    "@vitus-labs/core": "2.0.0-beta.0",
+    "@vitus-labs/elements": "2.0.0-beta.0",
+    "@vitus-labs/tools-rolldown": "1.10.0",
+    "@vitus-labs/tools-storybook": "1.10.0",
+    "@vitus-labs/tools-typescript": "1.10.0",
+    "@vitus-labs/unistyle": "2.0.0-beta.0"
   },
-  "gitHead": "f2f47db887d6a846ee5f9e96f290c59cdde4772a"
+  "gitHead": "dd8b9f356086ecd8bfb69c87fcad1e8bfa9ab1f4"
 }