62 lines
1.4 KiB
TypeScript
62 lines
1.4 KiB
TypeScript
|
|
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({}); |