unplugin-attributify-to-class

v0.2.5

Published

a year ago

css attributify mode to class, support use in vite, rollup, webpack

Downloads

441

0High
0Medium
0Low

meoc

unplugin vite webpack rollup transform attributify

将原子化css attributify mode 收集并添加到 class 中，以支持在小程序中使用 attributify mode

为了贴合功能语义，unplugin-unocss-attributify-wechat 改名为 unplugin-attributify-to-class

为什么使用

使用 @unocss/preset-attributify

<button
  bg="blue-400">
  button
</button>

生成后的css

[bg~="blue-400"] {
  --un-bg-opacity: 1;
  background-color: rgba(96,165,250,var(--un-bg-opacity));
}

小程序不支持属性选择器 [bg~="blue-400"] ，微信文档

使用该插件

<button
  bg="blue-400">
  button
</button>

转换后

<button
  bg="blue-400"
  class="bg-blue-400">
  button
</button>

安装

npm i -D unplugin-attributify-to-class

import { defineConfig } from 'vite'
import { attributifyToClass, defaultAttributes, defaultIgnoreNonValuedAttributes } from 'unplugin-attributify-to-class/vite'

export default defineConfig({
  plugins: [
    // https://github.com/MellowCo/unplugin-attributify-to-class
    attributifyToClass(),
  ],
})

const { defaultAttributes, defaultIgnoreNonValuedAttributes, attributifyToClass } = require('unplugin-attributify-to-class/webpack')

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

如何使用

options

export interface Options {

  /**
   * @default 'un-'
   */
  prefix?: string

  /**
   * 仅匹配前缀属性
   * @default false
   */
  prefixedOnly?: boolean

  /**
   * 需要转换的属性列表
   * @default ['bg', 'flex', 'grid', 'border', 'text', 'font', 'class', 'className', 'p', 'm', 'animate']
   */
  attributes?: string[]

  /**
   * 忽略的非值属性列表
   * @default ['class']
   */
  ignoreNonValuedAttributes?: string[]

  /**
   * 支持匹配非值属性
   *
   * For example
   * ```html
   * <div mt-2 />
   * ```
   *
   * @default true
   */
  nonValuedAttribute?: boolean

  /**
   * 转换转义字符 [ # $
   * @default true
   */
  transformEscape?: boolean

  /**
   * 自定义转义字符转换规则
   * @default https://github.com/MellowCo/unplugin-transform-class#options
   */
  transformRules?: Record<string, string>

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

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

  /**
    * 为生成的class选择器添加前缀
    * @default ''
    */
  classPrefix?: string
}

Attributify Mode

前缀自参照

对于 flex、grid、border 等具有与前缀相同的实用程序，将提供一个特殊的 ~ 值

<button class="border border-red">
  Button
</button>

可以写成

<button border="~ red">
  Button
</button>

Valueless Attributify

<button m-2 rounded text-teal-400 />

转换后

<button 
  m-2 rounded text-teal-400 
  class="m-2 rounded text-teal-400" 
/>

注意事项

Valueless Attributify 默认是 开启 的，设置 nonValuedAttribute 为 false 关闭
默认提取所有 valueless 属性，可以设置 ignoreNonValuedAttributes，排除掉不需要的属性，避免生成多余的 class
ignoreNonValuedAttributes 默认值 ['class']

<button m-2 rounded text-teal-400 my-prop is-top/>

转换后，会将 my-prop is-top 提取到 class中

<button 
  m-2 rounded text-teal-400 my-prop is-top
  class="m-2 rounded text-teal-400 my-prop is-top" 
/>

配置 ignoreNonValuedAttributes 忽略 my-prop is-top

import { attributifyToClass, defaultIgnoreNonValuedAttributes } from 'unplugin-attributify-to-class/vite'
// import { attributifyToClass, defaultIgnoreNonValuedAttributes } from 'unplugin-attributify-to-class/webpack'

attributifyToClass({
  // 开启 valueless attributify
  nonValuedAttribute: true,
  // 忽略的非值属性列表
  ignoreNonValuedAttributes: [...defaultIgnoreNonValuedAttributes, 'my-prop', 'is-top']
})

<button 
  m-2 rounded text-teal-400 my-prop is-top
  class="m-2 rounded text-teal-400" 
/>

Properties Conflicts

如果属性模式的名称与元素或组件的属性冲突，可以针对属性模式添加 prefix

<a 
  text="red" 
  bg-red
  un-text="blue"
  un-bg-blue
>
  This conflicts with links' `text` prop
</a>

设置前缀匹配

attributifyToClass({
  // 前缀属性默认值`un-`
  prefix: 'un-',
  // 仅匹配前缀属性
  prefixedOnly: true,
})

转换后

<a 
  text="red" 
  bg-red
  un-text="blue"
  un-bg-blue
  class="text-blue bg-blue"
>
  This conflicts with links' text prop
</a>

transformEscape

针对 uniappp vue2 taro webpack插件， bg="[#333]" 编译后变成 bg- 333，导致样式无法正常显示将 bg="[#333]" 提前转义 bg="[#333]" => bg--fl--w-333-fr

默认开启，设置 transformEscape
通过 transformRules 设置自定义转换规则，默认转换规则

自定义转换规则

const myRules = {
  '.': '-d-',
  '/': '-s-',
  ':': '-c-',
  '%': '-p-',
  '!': '-e-',
  '#': '-w-',
  '(': '-bl-',
  ')': '-br-',
  '[': '-fl-',
  ']': '-fr-',
  '$': '-r-',
}

attributifyToClass({
  transformEscape: true,
  transformRules: myRules
})

include exclude

自定义转换的目标

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

classPrefix

为生成的class选择器添加前缀

<button bg-green bg-red text="center left"></button>

<button 
  bg-green bg-red 
  text="center left" 
  class="bg-green bg-red text-center text-left"
></button>

设置 classPrefix，生成的class选择器会加上前缀

const classPrefixExtract = extractorAttributify({
  nonValuedAttribute: true,
  classPrefix: 'li-',
})

转换后，会在生成的 class 中，添加前缀，bg-green => class="li-bg-green"

<button 
  bg-green bg-red 
  text="center left" 
  class="li-bg-green li-bg-red li-text-center li-text-left"
></button>

utils 导出

import { extractorAttributify } from 'unplugin-attributify-to-class/utils'
const options = {
  // ...
}

const extractor = extractorAttributify(options)

const code = 'xxxxx'
const newCode = extractor(code)