forestry-wx/unocss.config.js

import { presetUni } from '@uni-helper/unocss-preset-uni';
import { defineConfig, presetIcons, presetAttributify, transformerDirectives, transformerVariantGroup } from 'unocss';

export default defineConfig({
    presets: [
        presetUni(),
        presetIcons({
            scale: 1.2,
            warn: true,
            extraProperties: {
                display: 'inline-block',
                'vertical-align': 'middle',
            },
        }),
        // 支持css class属性化, 可能会与ui的组件属性冲突
        presetAttributify({
            ignoreAttributes: [
                'color',
                // ...
            ],
        }),
    ],
    transformers: [
        // 启用指令功能：主要用于支持 @apply、@screen 和 theme() 等 CSS 指令
        transformerDirectives(),
        // 启用 () 分组功能
        // 支持css class组合，eg: `<div class="hover:(bg-gray-400 font-medium) font-(light mono)">测试 unocss</div>`
        transformerVariantGroup(),
    ],
    shortcuts: [
        {
            center: 'flex justify-center items-center',
            'p-rtv': 'position: relative',
            'text-indent-2': 'text-indent: 2em',
            'w-s-no': 'white-space: nowrap',
        },
    ],
    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}%` })],
        [
            /^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`,
            }),
        ],
    ],
    theme: {
        colors: {
            /** 主题色，用法如: text-primary */
            primary: 'var(--wot-color-theme,#0957DE)',
        },
        fontSize: {
            /** 提供更小号的字体，用法如：text-2xs */
            '2xs': ['20rpx', '28rpx'],
            '3xs': ['18rpx', '26rpx'],
        },
    },
});