README.md

@unocss-applet/transformer-attributify

Attributify Mode for UnoCSS.

Instal

npm i @unocss-applet/transformer-attributify --save-dev # with npm
yarn add @unocss-applet/transformer-attributify -D # with yarn
pnpm add @unocss-applet/transformer-attributify -D # with pnpm

Usage

import { defineConfig } from 'unocss'

import transformerAttributify from '@unocss-applet/transformer-attributify'

export default defineConfig({
  // ...
  transformers: [
    transformerAttributify(),
  ],
})

Type Declarations

export interface TransformerAttributifyOptions {
  /**
   * Enable attributify, only build applet should be true
   * e.g. In uniapp set `enable: !(process.env.UNI_PLATFORM === 'h5')` to disable for h5
   * @default true
   */
  enable?: boolean

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

  /**
    * Only match for prefixed attributes
    *
    * @default false
    */
  prefixedOnly?: boolean

  /**
    * Support matching non-valued attributes
    *
    * For example
    * ```html
    * <div mt-2 />
    * ```
    *
    * @default true
    */
  nonValuedAttribute?: boolean

  /**
    * A list of attributes to be ignored from extracting.
    */
  ignoreAttributes?: string[]

  /**
   * Delete attributes that added in `class=""`
   * @default false
   */
  deleteClass?: boolean
}

Example

Attributes will be retained unless deleteClass is set to true, but deletion is not recommended.

without

<div h-80 text-center flex flex-col align-center select-none all:transition-400>
  py-3
</div>

with

<div h-80 text-center flex flex-col align-center select-none all:transition-400 class="h-80 text-center flex flex-col select-none all:transition-400">
  py-3
</div>

License

MIT License © 2022-PRESENT Neil Lee