Registry / devops / unplugin-attributify-to-class

unplugin-attributify-to-class

library0.2.5jsnpmunverified

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.

devops

npm install unplugin-attributify-to-class

github ↗package ↗

INSTALL

IMPORT

SIG · UNPLUGIN-ATTRIBUTI

unplugin-attributify-to-class

devopsjavascriptv0.2.5

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–223 runs

build_error

glibc

node 18–223 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

attributifyToClass

✓ import { attributifyToClass } from 'unplugin-attributify-to-class/vite'

✗ import { attributifyToClass } from 'unplugin-attributify-to-class'

Must import from the subpath matching your bundler: /vite, /rollup, /webpack. Top-level import only exports core utilities, not the plugin itself.

defaultAttributes

✓ import { defaultAttributes } from 'unplugin-attributify-to-class'

✗ import { defaultAttributes } from 'unplugin-attributify-to-class/vite'

defaultAttributes and defaultIgnoreNonValuedAttributes are exported from the root package, not from bundler-specific subpaths.

attributifyToClass (CommonJS)

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

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

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

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>

Debug

Known issues

breakingPackage 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.

affects: < 0.2.0

gotchaOnly 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).

affects: >= 0.0.0

deprecatedThe `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`.

affects: >= 0.1.16

gotchaWhen 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.

affects: >= 0.0.0

Errors

Common errors & fixes

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

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.

TypeError: attributifyToClass is not a function

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')).

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

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.

Upgrade

Version history

0.2.5latest on npm

Audit

Dependencies

unpluginrequiredCore unplugin infrastructure required for build tool integration

unplugin-transform-classoptionalUsed for custom transformation rules (transformRules option)

Agent activity

8 hits · last 30 days

node

Resources

githubhttps://github.com/MellowCo/unplugin-attributify-to-class ↗

packagehttps://www.npmjs.com/package/unplugin-attributify-to-class ↗