css by js

[LingYanSi]

• css原始语法的自由表达能力较弱
• less/scss做了语法增强，提升了表达能力
• css in js可以获取js context来提升动态性

我现在有一个想法：为什么不css by js，通过js来写css，灵活性与表达能力岂不是更加爆表（无需熟悉less/cscc蹩脚的语法）

而css本质上就是一个树状结构，很容易就可以把json编译成css

interface CSSValue {
    [key: string]: Partial<CSSValue> | string;
    'font-size': string;
    'background-image': string;
    'border': string;
    'display': 'flex' | 'block' | 'grid';
    /** better css */
    'align-items': 'center' | 'start' | 'end';
    'text-align': 'left' | 'right' | 'justify';
}

function css <T extends Partial<CSSValue>>(v: T): T {
    return v
}

const snippet = css({
    "align-items": 'center',
    "text-align": 'justify'
})

const span = css({
    span: {
        ...snippet,
        "font-size": '10px',
        "align-items": 'start',
        ".bbbb": {
            "font-size": "xxxx"
        }
    }
})

const result = css({
    ...span,
    '@keyframe xxx': {
        "font-size": '12px',
        "background-image": 'url()',
        ...snippet,
        ".aaa": {
            "font-size": "xxxx"
        }
    },
    div: {
        "font-size": '10px',
    }
})

export default result