css-variants
Version:
Lightweight helpers to compose class names and inline styles using variants. Zero runtime deps, small bundle, and first-class TypeScript support.
1 lines • 6.94 kB
Source Map (JSON)
{"version":3,"sources":["../src/utils/merge-props.ts","../src/ssv.ts"],"names":["mergeProps","defaultProps","props","omitKeys","merged","k","ssv","config","slots","base","variants","compoundVariants","defaultVariants","mergedProps","result","slot","key","slotStyle","i","compound","matches","value","propValue","ssv_default"],"mappings":"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","file":"ssv.cjs","sourcesContent":["export function mergeProps<T extends Record<string, unknown>, P extends Record<string, unknown>>(\n defaultProps: T | undefined,\n props: P | undefined,\n omitKeys?: (keyof P)[]\n): Record<string, unknown> {\n const merged: Record<string, unknown> = { ...defaultProps }\n\n if (props) {\n for (const k in props) {\n if (props[k] !== undefined && (!omitKeys || !omitKeys.includes(k))) {\n merged[k] = props[k]\n }\n }\n }\n\n return merged\n}\n","import { ObjectKeyPicker, ObjectKeyArrayPicker, PartialRecord, CssProperties } from './utils/types'\nimport { mergeProps } from './utils/merge-props'\n\nexport type SlotStyleRecord<S extends string> = PartialRecord<S, CssProperties>\n\nexport type SlotStyleVariantRecord<S extends string> = Record<string, Record<string, SlotStyleRecord<S>>>\n\nexport type SlotStyleVariantExtendProps<S extends string> = { styles: SlotStyleRecord<S> }\n\nexport interface SlotStyleVariantDefinition<S extends string, T extends SlotStyleVariantRecord<S> | undefined> {\n slots: S[]\n base?: SlotStyleRecord<S>\n variants?: T\n compoundVariants?: (ObjectKeyArrayPicker<T> & SlotStyleVariantExtendProps<S>)[]\n defaultVariants?: ObjectKeyPicker<T>\n}\n\nexport type SlotStyleVariantFnProps<\n S extends string,\n T extends SlotStyleVariantRecord<S> | undefined,\n> = T extends undefined\n ? Partial<SlotStyleVariantExtendProps<S>>\n : ObjectKeyPicker<T> & Partial<SlotStyleVariantExtendProps<S>>\n\nexport type SlotStyleVariantFn<S extends string, T extends SlotStyleVariantRecord<S> | undefined> = (\n props?: SlotStyleVariantFnProps<S, T>\n) => Record<S, CssProperties>\n\nexport type SlotStyleVariantCreatorFn = <S extends string, T extends SlotStyleVariantRecord<S> | undefined>(\n config: SlotStyleVariantDefinition<S, T>\n) => SlotStyleVariantFn<S, T>\n\n/**\n * Creates a slot-based style variant function that composes CSS properties based on variants and compound variants.\n *\n * @param config - Configuration object for creating style variants\n * @returns A function that accepts variant props and returns composed styles for each slot\n *\n * @example\n * ```ts\n * const buttonStyles = ssv({\n * slots: ['root', 'icon'],\n * base: {\n * root: { padding: '8px' },\n * icon: { size: '16px' }\n * },\n * variants: {\n * size: {\n * small: {\n * root: { padding: '4px' },\n * icon: { size: '12px' }\n * },\n * large: {\n * root: { padding: '12px' },\n * icon: { size: '20px' }\n * }\n * }\n * }\n * });\n *\n * // Usage\n * const styles = buttonStyles({ size: 'small' });\n * // => { root: { padding: '4px' }, icon: { size: '12px' } }\n * ```\n */\nexport const ssv: SlotStyleVariantCreatorFn = (config) => {\n const { slots, base, variants, compoundVariants, defaultVariants } = config\n\n if (!variants) {\n return (props) => {\n const result = {} as Record<(typeof slots)[number], CssProperties>\n\n for (const slot of slots) {\n result[slot] = { ...base?.[slot], ...props?.styles?.[slot] }\n }\n\n return result\n }\n }\n\n return (props) => {\n const mergedProps = mergeProps(defaultVariants, props, ['styles'])\n\n const result = {} as Record<(typeof slots)[number], CssProperties>\n\n for (const slot of slots) {\n result[slot] = { ...base?.[slot] }\n }\n\n for (const key in mergedProps) {\n const slotStyle = variants[key]?.[mergedProps[key] as string]\n\n if (slotStyle) {\n for (const slot in slotStyle) {\n Object.assign(result[slot], slotStyle[slot])\n }\n }\n }\n\n if (compoundVariants) {\n for (let i = 0; i < compoundVariants.length; i++) {\n const compound = compoundVariants[i]\n let matches = true\n\n for (const key in compound) {\n if (key === 'styles') continue\n const value = compound[key as keyof typeof compound]\n const propValue = mergedProps[key]\n\n if (Array.isArray(value) ? !value.includes(propValue) : value !== propValue) {\n matches = false\n break\n }\n }\n\n if (matches && compound.styles) {\n for (const slot in compound.styles) {\n Object.assign(result[slot], compound.styles[slot])\n }\n }\n }\n }\n\n if (props?.styles) {\n for (const slot in props.styles) {\n Object.assign(result[slot], props.styles[slot])\n }\n }\n\n return result\n }\n}\n\nexport default ssv\n"]}