forestry-wx/unocss.config.js

import { defineConfig, presetUni } from 'uni-unocss';

export default defineConfig({
    presets: [presetUni()],
    shortcuts: [
        {
            center: 'flex justify-center items-center',
        },
    ],
    rules: [
        [/^mg-([\.\d]+)$/, ([_, num]) => ({ margin: `${num}rpx` })],
        [/^pd-([\.\d]+)$/, ([_, num]) => ({ padding: `${num}rpx` })],
        [/^bg-([\w#-]+)$/, ([_, color]) => ({ 'background-color': color })],
        [/^c-([\w#-]+)$/, ([_, color]) => ({ color: color })],
        // bc-#fafafa
        [/^bc-([\w#-]+)$/, ([_, color]) => ({ 'border-color': color })],
        // 下边距
        [/^mb-([\.\d]+)$/, ([_, num]) => ({ 'margin-bottom': `${num}rpx` })],
        // 上边距
        [/^mt-([\.\d]+)$/, ([_, num]) => ({ 'margin-top': `${num}rpx` })],
        // 左边距
        [/^ml-([\.\d]+)$/, ([_, num]) => ({ 'margin-left': `${num}rpx` })],
        // 右边距
        [/^mr-([\.\d]+)$/, ([_, num]) => ({ 'margin-right': `${num}rpx` })],
        // 上padding
        [/^pt-([\.\d]+)$/, ([_, num]) => ({ 'padding-top': `${num}rpx` })],
        // 下padding
        [/^pb-([\.\d]+)$/, ([_, num]) => ({ 'padding-bottom': `${num}rpx` })],
        // pd3-40-0-20
        // padding
        [
            /^pd3-([\.\d]+)-([\.\d]+)-([\.\d]+)$/,
            ([_, top, right, bottom]) => ({
                padding: `${top}rpx ${right}rpx ${bottom}rpx`,
            }),
        ],
        // pd2-40-20
        [
            /^pd2-([\.\d]+)-([\.\d]+)$/,
            ([_, top, right]) => ({
                padding: `${top}rpx ${right}rpx`,
            }),
        ],
        // pd4-40-20-10-5
        [
            /^pd4-([\.\d]+)-([\.\d]+)-([\.\d]+)-([\.\d]+)$/,
            ([_, top, right, bottom, left]) => ({
                padding: `${top}rpx ${right}rpx ${bottom}rpx ${left}rpx`,
            }),
        ],
        // mg2-40-20
        [
            /^mg2-([\.\d]+)-([\.\d]+)$/,
            ([_, top, right]) => ({
                margin: `${top}rpx ${right}rpx`,
            }),
        ],
        // mg3-40-20-10
        [
            /^mg3-([\.\d]+)-([\.\d]+)-([\.\d]+)$/,
            ([_, top, right, bottom]) => ({
                margin: `${top}rpx ${right}rpx ${bottom}rpx`,
            }),
        ],
        // mg4-40-20-10-5
        [
            /^mg4-([\.\d]+)-([\.\d]+)-([\.\d]+)-([\.\d]+)$/,
            ([_, top, right, bottom, left]) => ({
                margin: `${top}rpx ${right}rpx ${bottom}rpx ${left}rpx`,
            }),
        ],
        // 左padding
        [/^pl-([\.\d]+)$/, ([_, num]) => ({ 'padding-left': `${num}rpx` })],
        // 右padding
        [/^pr-([\.\d]+)$/, ([_, num]) => ({ 'padding-right': `${num}rpx` })],
        // 字体大小
        [/^f-s-([\.\d]+)$/, ([_, num]) => ({ 'font-size': `${num}rpx` })],
        // 字体加粗
        [/^f-w-([\.\d]+)$/, ([_, num]) => ({ 'font-weight': `${num > 100 ? num : num * 100}` })],
        // 宽
        [/^w-([\.\d]+)$/, ([_, num]) => ({ width: `${num}rpx` })],
        // 高
        [/^h-([\.\d]+)$/, ([_, num]) => ({ height: `${num}rpx` })],
        // 带透明度的可传入颜色计算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}%` })],
        [/^w-([\.\d]+)%$/, ([_, num]) => ({ width: `${num}%` })],
        [
            /^wrapper-([\.\d]+)-([\.\d]+)$/,
            ([_, maxWidth, minWidth]) => ({
                'max-width': `${maxWidth}rpx`,
                'min-width': `${minWidth}rpx`,
                margin: '0 auto',
                padding: '0 20px',
            }),
        ],
        // 最大宽
        [/^max-w-([\.\d]+)$/, ([_, num]) => ({ 'max-width': `${num}rpx` })],
        // 最小宽
        [/^min-w-([\.\d]+)$/, ([_, num]) => ({ 'min-width': `${num}rpx` })],
        // 最大高
        [/^max-h-([\.\d]+)$/, ([_, num]) => ({ 'max-height': `${num}rpx` })],
        // 最小高
        [/^min-h-([\.\d]+)$/, ([_, num]) => ({ 'min-height': `${num}rpx` })],
        // 栅格 30份
        [/^hcol-([\.\d]+)$/, ([_, num]) => ({ width: `${(+num / 30) * 100}%` })],
        // border-radius-8
        [
            /^border-radius-([\.\d]+)$/,
            ([_, num]) => ({
                'border-radius': `${num}rpx`,
            }),
        ],
        // border-w-4
        [
            /^border-w-([\.\d]+)$/,
            ([_, num]) => ({
                'border-width': `${num}rpx`,
            }),
        ],
        // 旋转度数
        [
            /^rotate-([\-\.\d]+)$/,
            ([_, num]) => ({
                transform: `rotate(${num}deg)`,
            }),
        ],
        // gap-20
        [
            /^gap-([\.\d]+)$/,
            ([_, num]) => ({
                gap: `${num}rpx`,
            }),
        ],
    ],
    transformers: [
        {
            name: 'remove-custom-classes',
            enforce: 'pre',
            transform(code, id) {
                // 只在相关文件中处理
                if (id.endsWith('.vue')) {
                    // 移除特定的类名
                    const modified = code.replace(/\bclass=["']([^"']*)u-popup__content—transition([^"']*)["']/g, (match, before, after) => {
                        return `class="${before}${after}"`;
                    });
                    return {
                        code: modified,
                        map: null,
                    };
                }
                return { code, map: null };
            },
        },
    ],
    // theme: {
    //     colors: {
    //         /** 主题色，用法如: text-primary */
    //         primary: 'var(--wot-color-theme,#0957DE)',
    //     },
    //     fontSize: {
    //         /** 提供更小号的字体，用法如：text-2xs */
    //         '2xs': ['20rpx', '28rpx'],
    //         '3xs': ['18rpx', '26rpx'],
    //     },
    // },
});