JSPM

  • Created
  • Published
  • Downloads 4153
  • Score
    100M100P100Q145802F
  • License MIT

Attributify Mode for [UnoCSS](https://github.com/unocss/unocss).

Package Exports

  • @unocss-applet/transformer-attributify

Readme

@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
   * @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 true
   */
  deleteClass?: boolean
}

Example

Attributes will be deleted unless deleteClass is set to true.

without

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

with

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

License

MIT License © 2022-PRESENT Neil Lee