gale/gale.tsx

const typeface = {
    sans: "sans serif",
    serif: "Times New Roman"
};
const sizes = {
    small: "1rem",
    large: "3rem"
};
const colors = {
    red: "#ff2200",
    blue: "#0022ff"
};

const styles = new Map<string, string>()
function Mapper<T extends Record<string, string>>(className:string, property:string, lut:T)
{
    return new Proxy(lut, {get(target, prop){
        const selector = `${className}-${prop as string}${activeQuery?"_"+activeQuery:""}`;
        const check = styles.get(selector);
        if(!check)
        {
            const body = `{ ${property}:${lut[prop as string]}; }`;
            styles.set(selector, activeQuery ? `{ @media(${activeQuery})${body}}` : body);    
        }
        return selector;
    }});
}

let activeQuery:false|string = false
function Query(amount:string)
{
    activeQuery = amount;
    return (...args:string[])=> {
        activeQuery = false;
        return args.join(" ");
    }
}

export function config<T>(obj:T)
{
    const CSS = {
        Sheet()
        {
            const rules = []
            for(const [key, value] of styles.entries())
            {
                rules.push(key+value);
            }
            return rules.join("\n");
        },
        get MD()
        {
           return Query("768px");
        },
        Face: Mapper("Face", "font-family", {...typeface, ...obj}),
        Pad: Mapper("P", "padding", sizes)
    };
    return CSS;
}

export default config({});