diff --git a/package.json b/package.json index 0eb54da..95188e4 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@pistonite/celera", - "version": "0.2.1", + "version": "0.2.2", "type": "module", "private": true, "description": "In-house UI framework", diff --git a/src/style/gale.ts b/src/style/gale.ts index e6665e9..fefa767 100644 --- a/src/style/gale.ts +++ b/src/style/gale.ts @@ -95,7 +95,7 @@ export const gale = ( componentStylesToGaleStringCache.set(STUB_COMPONENT_STYLES_KEY, c); galeStringCache = c; } - const mFunction = (classes: string): string => { + const mFunction = (...classes: string[]): string => { return computeClassesWithCache( projectStyles, STUB_COMPONENT_STYLES_KEY, @@ -128,7 +128,7 @@ export const gale = ( componentStylesToGaleStringCache.set(componentStyles, c); galeStringCache = c; } - const mFunction = (classes: string): string => { + const mFunction = (...classes: string[]): string => { return computeClassesWithCache( projectStyles, componentStyles, @@ -144,14 +144,15 @@ export const gale = ( projectStyles: Record, componentStyles: Record, cache: Map, - classes: string, + classes: (string | undefined | null | false)[], ): string => { - const cached = cache.get(classes); + const classesConcatenated = classes.filter(Boolean).join(" "); + const cached = cache.get(classesConcatenated); if (cached !== undefined) { return cached; } const parsed: string[] = []; - for (const p of classes.split(" ")) { + for (const p of classesConcatenated.split(" ")) { const slotName = p.trim(); if (!slotName) { continue; @@ -166,7 +167,7 @@ export const gale = ( } const result = mergeClasses(...parsed); - cache.set(classes, result); + cache.set(classesConcatenated, result); return result; }; @@ -188,7 +189,9 @@ export type GaleKeys = T | GaleBuiltinKey; /** Hook to be called inside a component to get the `m` function. See {@link gale} */ export type GaleHook = () => GaleFn; /** The `m` function that turns a style string into class names */ -export type GaleFn = (classes: GaleString) => string; +export type GaleFn = ( + ...classes: (GaleString | undefined | null | false)[] +) => string; /** Type-safe, space-separated style idents */ export type GaleString = K extends S[number] @@ -362,14 +365,3 @@ export const GALE_BUILTIN_STYLES = { } as const satisfies Record; type GaleBuiltinKey = keyof typeof GALE_BUILTIN_STYLES; -// // type A = Validate<"margin-0", Keys>; -// // type B = Validate<"foo", Keys>; -// // type C = Validate<"foo bar", Keys>; -// // type D = Validate<"margin-0 padding-0", Keys>; -// // type E = Validate<"margin-0 0", Keys>; -// // type F = Validate<"0 padding-0", Keys>; -// -// const testFunc = (exp: Validate): void => { -// } -// -// testFunc("margin-0");