65 lines
2.8 KiB
TypeScript
65 lines
2.8 KiB
TypeScript
|
type NestedRecord<V = any> = {
|
||
|
|
[k: string | number]: NestedRecord<V> | V;
|
||
|
|
};
|
||
|
|
/**
|
||
|
|
* This function create an object from keys, value and then assign to target
|
||
|
|
*
|
||
|
|
* @param {Object} obj : the target object to be assigned
|
||
|
|
* @param {string[]} keys
|
||
|
|
* @param {string | number} value
|
||
|
|
*
|
||
|
|
* @example
|
||
|
|
* const source = {}
|
||
|
|
* assignNestedKeys(source, ['palette', 'primary'], 'var(--palette-primary)')
|
||
|
|
* console.log(source) // { palette: { primary: 'var(--palette-primary)' } }
|
||
|
|
*
|
||
|
|
* @example
|
||
|
|
* const source = { palette: { primary: 'var(--palette-primary)' } }
|
||
|
|
* assignNestedKeys(source, ['palette', 'secondary'], 'var(--palette-secondary)')
|
||
|
|
* console.log(source) // { palette: { primary: 'var(--palette-primary)', secondary: 'var(--palette-secondary)' } }
|
||
|
|
*/
|
||
|
|
export declare const assignNestedKeys: <T extends string | Record<string, any> | null | undefined = NestedRecord<any>, Value = any>(obj: T, keys: Array<string>, value: Value, arrayKeys?: Array<string>) => void;
|
||
|
|
/**
|
||
|
|
*
|
||
|
|
* @param {Object} obj : source object
|
||
|
|
* @param {Function} callback : a function that will be called when
|
||
|
|
* - the deepest key in source object is reached
|
||
|
|
* - the value of the deepest key is NOT `undefined` | `null`
|
||
|
|
*
|
||
|
|
* @example
|
||
|
|
* walkObjectDeep({ palette: { primary: { main: '#000000' } } }, console.log)
|
||
|
|
* // ['palette', 'primary', 'main'] '#000000'
|
||
|
|
*/
|
||
|
|
export declare const walkObjectDeep: <Value, T = Record<string, any>>(obj: T, callback: (keys: Array<string>, value: Value, arrayKeys: Array<string>) => void, shouldSkipPaths?: ((keys: Array<string>) => boolean) | undefined) => void;
|
||
|
|
/**
|
||
|
|
* a function that parse theme and return { css, vars }
|
||
|
|
*
|
||
|
|
* @param {Object} theme
|
||
|
|
* @param {{
|
||
|
|
* prefix?: string,
|
||
|
|
* shouldSkipGeneratingVar?: (objectPathKeys: Array<string>, value: string | number) => boolean
|
||
|
|
* }} options.
|
||
|
|
* `prefix`: The prefix of the generated CSS variables. This function does not change the value.
|
||
|
|
*
|
||
|
|
* @returns {{ css: Object, vars: Object }} `css` is the stylesheet, `vars` is an object to get css variable (same structure as theme).
|
||
|
|
*
|
||
|
|
* @example
|
||
|
|
* const { css, vars } = parser({
|
||
|
|
* fontSize: 12,
|
||
|
|
* lineHeight: 1.2,
|
||
|
|
* palette: { primary: { 500: 'var(--color)' } }
|
||
|
|
* }, { prefix: 'foo' })
|
||
|
|
*
|
||
|
|
* console.log(css) // { '--foo-fontSize': '12px', '--foo-lineHeight': 1.2, '--foo-palette-primary-500': 'var(--color)' }
|
||
|
|
* console.log(vars) // { fontSize: 'var(--foo-fontSize)', lineHeight: 'var(--foo-lineHeight)', palette: { primary: { 500: 'var(--foo-palette-primary-500)' } } }
|
||
|
|
*/
|
||
|
|
export default function cssVarsParser<T extends Record<string, any>>(theme: Record<string, any>, options?: {
|
||
|
|
prefix?: string;
|
||
|
|
shouldSkipGeneratingVar?: (objectPathKeys: Array<string>, value: string | number) => boolean;
|
||
|
|
}): {
|
||
|
|
css: Record<string, string | number>;
|
||
|
|
vars: T;
|
||
|
|
varsWithDefaults: {};
|
||
|
|
};
|
||
|
|
export {};
|