@weser/styling 0.0.9 → 0.0.10

package/dist/core/createRenderer.d.ts

@@ -1,8 +1,7 @@
-import { CSSProperties } from 'react';
 import { createHooks as baseCreateHooks } from '@css-hooks/react';
 import { WithHooks } from '@css-hooks/core';
 import { assignStyle } from 'css-in-js-utils';
-import { T_Fallback } from '../types.js';
+import { T_Fallback, T_RawStyle } from '../types.js';
 type Plugin<T> = (style: T) => T;
 type HookOptions<Hooks extends string> = Parameters<typeof baseCreateHooks<Hooks>>[0];
 type Config<T, Hooks extends string> = {
@@ -12,8 +11,8 @@ type Config<T, Hooks extends string> = {
     mergeStyle?: typeof assignStyle;
 };
 type Properties<T, Hooks> = Array<Properties<T, Hooks>> | WithHooks<Hooks, T> | undefined;
-type CSSFunction<T, Hooks> = (...style: Array<Properties<T, Hooks>>) => CSSProperties;
-export default function createRenderer<Hooks extends Record<string, string>, T extends Record<string, any> = CSSProperties>({ hooks, fallbacks, plugins, mergeStyle, }: Config<T, keyof Hooks & string>): [
+type CSSFunction<T, Hooks> = (...style: Array<Properties<T, Hooks>>) => T_RawStyle;
+export default function createRenderer<Hooks extends Record<string, string>, T extends Record<string, any> = T_RawStyle>({ hooks, fallbacks, plugins, mergeStyle, }: Config<T, keyof Hooks & string>): [
     string,
     CSSFunction<T, keyof Hooks & string>
 ];

package/dist/helpers/useCSSVariable.d.ts

@@ -1 +1 @@
-export default function useCSSVariable(): [`--${string}`, string];
+export default function useCSSVariable(fallbackValue?: string): [`--${string}`, string];

package/dist/helpers/useCSSVariable.js

@@ -1,6 +1,10 @@
 import { useId } from 'react';
-export default function useCSSVariable() {
+export default function useCSSVariable(fallbackValue) {
     const id = useId();
     const name = id.replace(/:/g, '_');
-    return [`--${name}`, `var(--${name})`];
+    const variable = `--${name}`;
+    if (fallbackValue) {
+        return [variable, `var(${variable}, ${fallbackValue})`];
+    }
+    return [variable, `var(${variable})`];
 }

package/dist/types.d.ts

@@ -7,6 +7,6 @@ export type T_Fallback = {
 type T_VariableStyle = {
     [key: `--${string}`]: string | number;
 };
-type T_RawStyle = CSSProperties;
+export type T_RawStyle = CSSProperties;
 export type T_Style = T_RawStyle & T_VariableStyle;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@weser/styling",
-  "version": "0.0.9",
+  "version": "0.0.10",
   "description": "Utils for styling with CSS hooks",
   "author": "Robin Weser <robin@weser.io>",
   "license": "MIT",
@@ -57,5 +57,5 @@
     "styles-debugger": "^1.0.0",
     "typescript": "^5.9.2"
   },
-  "gitHead": "abbfb42cee4e8bdbbd870bd1086ebc65b6074584"
+  "gitHead": "6dd1ad00ab8dacea2878edc99085324ea5d03588"
 }