digital-medicine-front/vite/plugins/unocss.ts

import UnoCss from 'unocss/vite';

export default () => {
    return UnoCss({
        hmrTopLevelAwait: false, // unocss默认是true，低版本浏览器是不支持的，启动后会报错
        rules: [
            [/^mg-([\.\d]+)$/, ([_, num]) => ({ margin: `${num}px` })],
            [/^pd-([\.\d]+)$/, ([_, num]) => ({ padding: `${num}px` })],
            [/^bg-([\w-]+)$/, ([_, color]) => ({ 'background-color': color })],
            [/^c-([\w-]+)$/, ([_, color]) => ({ color: color })],
            [/^bc-([\w-]+)$/, ([_, color]) => ({ 'border-color': color })],
            [/^rounded-([\.\d]+)$/, ([_, num]) => ({ 'border-radius': `${num}px` })],
            // 下边距
            [/^mb-([\.\d]+)$/, ([_, num]) => ({ 'margin-bottom': `${num}px` })],
            // 上边距
            [/^mt-([\.\d]+)$/, ([_, num]) => ({ 'margin-top': `${num}px` })],
            // 左边距
            [/^ml-([\.\d]+)$/, ([_, num]) => ({ 'margin-left': `${num}px` })],
            // 右边距
            [/^mr-([\.\d]+)$/, ([_, num]) => ({ 'margin-right': `${num}px` })],
            // 上padding
            [/^pt-([\.\d]+)$/, ([_, num]) => ({ 'padding-top': `${num}px` })],
            // 下padding
            [/^pb-([\.\d]+)$/, ([_, num]) => ({ 'padding-bottom': `${num}px` })],
            // pd3-40-0-20
            // padding
            [
                /^pd3-([\.\d]+)-([\.\d]+)-([\.\d]+)$/,
                ([_, top, right, bottom]) => ({
                    padding: `${top}px ${right}px ${bottom}px`
                })
            ],
            // pd2-40-20
            [
                /^pd2-([\.\d]+)-([\.\d]+)$/,
                ([_, top, right]) => ({
                    padding: `${top}px ${right}px`
                })
            ],
            // pd4-40-20-10-5
            [
                /^pd4-([\.\d]+)-([\.\d]+)-([\.\d]+)-([\.\d]+)$/,
                ([_, top, right, bottom, left]) => ({
                    padding: `${top}px ${right}px ${bottom}px ${left}px`
                })
            ],
            // mg2-40-20
            [
                /^mg2-([\.\d]+)-([\.\d]+)$/,
                ([_, top, right]) => ({
                    margin: `${top}px ${right}px`
                })
            ],
            // mg3-40-20-10
            [
                /^mg3-([\.\d]+)-([\.\d]+)-([\.\d]+)$/,
                ([_, top, right, bottom]) => ({
                    margin: `${top}px ${right}px ${bottom}px`
                })
            ],
            // mg4-40-20-10-5
            [
                /^mg4-([\.\d]+)-([\.\d]+)-([\.\d]+)-([\.\d]+)$/,
                ([_, top, right, bottom, left]) => ({
                    margin: `${top}px ${right}px ${bottom}px ${left}px`
                })
            ],
            // 左padding
            [/^pl-([\.\d]+)$/, ([_, num]) => ({ 'padding-left': `${num}px` })],
            // 右padding
            [/^pr-([\.\d]+)$/, ([_, num]) => ({ 'padding-right': `${num}px` })],
            // 字体大小
            [/^f-s-([\.\d]+)$/, ([_, num]) => ({ 'font-size': `${num}px` })],
            // 字体加粗
            [/^f-w-([\.\d]+)$/, ([_, num]) => ({ 'font-weight': `${num}` })],
            // 宽
            [/^w-([\.\d]+)$/, ([_, num]) => ({ width: `${num}px` })],
            // 高
            [/^h-([\.\d]+)$/, ([_, num]) => ({ height: `${num}px` })],
            // 带透明度的可传入颜色计算rgba值加背景
            // 行高
            [/^lh-([\.\d]+)$/, ([_, num]) => ({ 'line-height': `${num}` })],
            // 黑色透明度
            [
                /^bg-black-([\.\d]+)$/,
                ([_, num]) => ({
                    'background-color': `rgba(0, 0, 0, ${num})`
                })
            ],
            // 透明度
            [
                /^opacity-([\.\d]+)$/,
                ([_, num]) => ({
                    opacity: `${num}`
                })
            ],
            // z-index
            [
                /^z-index-([\.\d]+)$/,
                ([_, num]) => ({
                    'z-index': `${num}`
                })
            ],
            // 百分比高度
            [/^h-([\.\d]+)%$/, ([_, num]) => ({ height: `${num}%` })],
            [
                /^wrapper-([\.\d]+)-([\.\d]+)$/,
                ([_, maxWidth, minWidth]) => ({
                    'max-width': `${maxWidth}px`,
                    'min-width': `${minWidth}px`,
                    margin: '0 auto',
                    padding: '0 20px'
                })
            ],
            // 最大宽
            [/^max-w-([\.\d]+)$/, ([_, num]) => ({ 'max-width': `${num}px` })],
            // 最小宽
            [/^min-w-([\.\d]+)$/, ([_, num]) => ({ 'min-width': `${num}px` })],
            // 最大高
            [/^max-h-([\.\d]+)$/, ([_, num]) => ({ 'max-height': `${num}px` })],
            // 最小高
            [/^min-h-([\.\d]+)$/, ([_, num]) => ({ 'min-height': `${num}px` })],
            // 栅格 30份
            [/^hcol-([\.\d]+)$/, ([_, num]) => ({ width: `${(+num / 30) * 100}%` })],
            // border-radius-8
            [
                /^border-radius-([\.\d]+)$/,
                ([_, num]) => ({
                    'border-radius': `${num}px`
                })
            ]
        ]
    });
};