CSS

A powerful CSS-in-JS solution powered by Goober that can be merged and extended.

Intantiate

function useCss<T extends readonly unknown[], V extends CSSProperties>(fn: UseCssDeclaration<T, V>): UseCss<T, V>;

Props

type UseCssDeclaration<T extends readonly unknown[], V extends CSSProperties> = (...args: T) => V;

Returns

type UseCss<T extends readonly unknown[] = unknown[], V extends CSSProperties = CSSProperties> = {
    /**
     * Get the CSS declaration.
     */
    (...args: T): CssDeclaration<V>;
    /**
     * Merge the given CSS into the current definition.
     */
    merge: <TExtension extends CSSProperties>(fn: UseCssDeclaration<T, TExtension>) => UseCss<T, MergedCssDeclaration<V, TExtension>>;
    /**
     * Extend the current definition with the given CSS.
     */
    extend: <TExtension extends CSSProperties>(fn: UseCssDeclaration<T, TExtension>) => UseCss<T, MergedCssDeclaration<V, TExtension>>;
};

type CssDeclaration<T extends CSSProperties = CSSProperties> = {
    css: T;
    toString(): string;
};

Usage

import { useCss } from 'flipclock';

const css = useCss((background: string, color: string) => ({
    body: {
        background: background,
        color: color,
    }
}));

const declaration = css('white', 'black'); // {body: {background: 'white', color: 'blacl'}}

console.log(String(declaration)); // 'go3003028782'

TIP

These are just a few examples and far from complete. If you want to see a feature-complete example, check tests/helpers/css.test.ts in the repo.