unplugin-attributify-to-class

0.2.5 verified Mon Apr 27 auth: no javascript

An unplugin-based build tool that converts UnoCSS's attributify mode attributes (e.g., bg="blue-400") into class attributes at build time, enabling attributify mode in environments like WeChat mini-programs that do not support attribute selectors. Current stable version is 0.2.5, with a 2024 release cadence. Key differentiators: supports multiple bundlers (Vite, Rollup, Webpack) via the unplugin interface; provides defaults for common attributify attributes like bg, flex, text; allows custom prefix, escape handling, and include/exclude patterns. Renamed from unplugin-unocss-attributify-wechat to better reflect its broader scope beyond WeChat.

Common errors

error Cannot find module 'unplugin-attributify-to-class' or its corresponding type declarations. ↓

cause Importing from the wrong path (e.g., root instead of /vite, /rollup, /webpack).

fix

Use import { attributifyToClass } from 'unplugin-attributify-to-class/vite' for Vite, or the appropriate subpath for other bundlers.

error TypeError: attributifyToClass is not a function ↓

cause CommonJS require used on an ESM-only export. The root module is ES module; bundler-specific modules are dual CJS/ESM.

fix

Use import syntax if possible, or use require from a bundler subpath (e.g., require('unplugin-attributify-to-class/webpack')).

error Property 'bg' does not exist on type 'HTMLAttributes' ↓

cause TypeScript not recognizing attributify attributes. This is expected; attributify attributes are arbitrary and not part of standard HTML types.

fix

Ignore the error or extend type definitions. No runtime issue.

Warnings

breaking Package renamed from 'unplugin-unocss-attributify-wechat' to 'unplugin-attributify-to-class'. Old package still exists but no longer maintained. ↓

fix Update npm dependency to 'unplugin-attributify-to-class' and update import paths accordingly.

gotcha Only attributes listed in the `attributes` option are converted to classes. Custom attributes not in that list will be ignored unless you extend `attributes` or set `prefixedOnly: false`. ↓

fix Set `attributes` option to include all attributes you want to convert, or use `prefixedOnly: false` to convert any non-standard attribute (not recommended).

deprecated The `nonValuedAttribute` option default changed from false to true in v0.1.16. If relying on the old behavior, set `nonValuedAttribute: false` explicitly. ↓

fix Set `nonValuedAttribute: false` in options if you want to exclude non-valued attributes like `mt-2`.

gotcha When using Webpack, the plugin must be required from 'unplugin-attributify-to-class/webpack', not the root package. Using the root module will cause a runtime error in CommonJS environments. ↓

fix Use `require('unplugin-attributify-to-class/webpack')` for Webpack projects.

Install

npm install unplugin-attributify-to-class

yarn add unplugin-attributify-to-class

pnpm add unplugin-attributify-to-class

Imports

attributifyToClass
wrong
```
import { attributifyToClass } from 'unplugin-attributify-to-class'
```
correct
```
import { attributifyToClass } from 'unplugin-attributify-to-class/vite'
```
Must import from the subpath matching your bundler: /vite, /rollup, /webpack. Top-level import only exports core utilities, not the plugin itself.
defaultAttributes
wrong
```
import { defaultAttributes } from 'unplugin-attributify-to-class/vite'
```
correct
```
import { defaultAttributes } from 'unplugin-attributify-to-class'
```
defaultAttributes and defaultIgnoreNonValuedAttributes are exported from the root package, not from bundler-specific subpaths.

attributifyToClass (CommonJS)

wrong

const { attributifyToClass } = require('unplugin-attributify-to-class')

correct

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

Webpack users must require from 'unplugin-attributify-to-class/webpack'. The root module is ESM-only.

Quickstart

Demonstrates basic setup for Vite with TypeScript and how attributify attributes get converted to class strings.

// Vite config using TypeScript
import { defineConfig } from 'vite'
import { attributifyToClass } from 'unplugin-attributify-to-class/vite'

export default defineConfig({
  plugins: [
    attributifyToClass()
  ]
})

// Now in your .vue or HTML files, attributify mode works:
// <button bg="blue-400 hover:blue-500" text="sm white">Click</button>
// is transformed to:
// <button bg="blue-400 hover:blue-500" text="sm white" class="bg-blue-400 hover:bg-blue-500 text-sm text-white">Click</button>