小程序兼容原子化CSS，转换小程序转义选择器

按照自定义转换规则， 转换 html class 选择器

为了贴合功能语义，unplugin-transform-we-class 改名为 unplugin-transform-class

github

静态class

  <view class="tracking-[2/5] bg-teal-200:55">
    tracking-[2/5]
  </view>

设置rules

const rules = {
  '/': '-s-',
  ':': '-c-',
  '[': '-fl-',
  ']': '-fr-',
}

transformClass({
  rules
})

转换后

  <view class="tracking--fl-2-sr-5-fr- bg-teal-200-c-55">
    tracking-[2/5]
  </view>

动态复杂class

 <view
    :class="{'bg-blue-600:80': flag,'text-green-600/40': !flag}"
  >
    111111111
  </view>

  <view
  :class="[
    flag ? 'bg-blue-600/40' : 'bg-blue-600:80',
    !flag ? 'text-yellow-800/80' : 'text-yellow-800/40',
  ]"
>
  111111111
</view>

转换后

  <view
    :class="{'bg-blue-600-c-80': flag,'text-green-600-s-40': !flag}"
  >
    111111111
  </view>


  <view
  :class="[
    flag ? 'bg-blue-600-s-40' : 'bg-blue-600-c-80',
    !flag ? 'text-yellow-800-s-80' : 'text-yellow-800-s-40',
  ]"
>
  111111111
</view>

下载

npm i unplugin-transform-class -D

import { defineConfig } from 'vite'
import transformClass from 'unplugin-transform-class/vite'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    // https://github.com/MellowCo/unplugin-transform-class
    transformClass(),
  ],
})

const transformClass = require('unplugin-transform-class/webpack')

module.exports = {
  configureWebpack: {
    plugins: [
      // https://github.com/MellowCo/unplugin-transform-class
      transformClass(),
    ],
  },
}

如何使用

options

export interface Options {
  /**
   * 自定义转换规则
   * @default
   * {
      '.': '-dl-',
      '/': '-sl-',
      ':': '-cl-',
      '%': '-pes-',
      '!': '-el-',
      '#': '-wn-',
      '(': '-lbl-',
      ')': '-lbr-',
      '[': '-lfl-',
      ']': '-lfr-',
      '$': '-do-',
      ',': '-lco-',
      '=': '-eqe-',
     }
   */
  rules?: Record<string, string>

  /**
   * 排除转换目标
   * @default [/[\\/]node_modules[\\/]/, /[\\/]\.git[\\/]/]
   */
  exclude?: FilterPattern

  /**
   * 需要转换的目标
   * @default [/\.[jt]sx?$/, /\.vue$/,  /\.vue\?vue/]
   */
  include?: FilterPattern
}

自定义转换规则

// webpack
// const transformClass =  require('unplugin-transform-class/webpack')
// import transformClass from 'unplugin-transform-class/webpack'

// vite
import transformClass from 'unplugin-transform-class/vite'

const myRules = {
  '.': '-ddd-',
  '/': '-ss-',
  ':': '-cc-',
  '%': '-pp-'
}

transformWeClass({
  rules: myRules
})

设置 exclude include

// webpack
// const transformClass =  require('unplugin-transform-class/webpack')
// import transformClass from 'unplugin-transform-class/webpack'

// vite
import transformClass from 'unplugin-transform-class/vite'

transformWeClass({
  exclude: [/[\\/]node_modules[\\/]/, /[\\/]\.git[\\/]/, /[\\/]my-folder[\\/]/],
  include: [/\.vue$/, /\.vue\?vue/]
})

工具方法导出

import { defaultRules, escapeRegExp, restoreSelector, transformEscapESelector, transformSelector } from 'unplugin-transform-class/utils'

使用场景

1. 在微信小程序中使用原子化css

用于转换 微信小程序 不支持的 \\，\: \[ \$ \. 等转义类名， 实现在小程序中使用原子化css

例如结合 unocss 小程序预设 ，实现 unocss 在小程序中开发使用

相关链接

• unocss-preset-weapp - UnoCSS 小程序预设