{"id":22518,"library":"unplugin-attributify-to-class","title":"unplugin-attributify-to-class","description":"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.","status":"active","version":"0.2.5","language":"javascript","source_language":"en","source_url":"https://github.com/MellowCo/unplugin-attributify-to-class","tags":["javascript","unplugin","vite","webpack","rollup","transform","attributify","typescript"],"install":[{"cmd":"npm install unplugin-attributify-to-class","lang":"bash","label":"npm"},{"cmd":"yarn add unplugin-attributify-to-class","lang":"bash","label":"yarn"},{"cmd":"pnpm add unplugin-attributify-to-class","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core unplugin infrastructure required for build tool integration","package":"unplugin","optional":false},{"reason":"Used for custom transformation rules (transformRules option)","package":"unplugin-transform-class","optional":true}],"imports":[{"note":"Must import from the subpath matching your bundler: /vite, /rollup, /webpack. Top-level import only exports core utilities, not the plugin itself.","wrong":"import { attributifyToClass } from 'unplugin-attributify-to-class'","symbol":"attributifyToClass","correct":"import { attributifyToClass } from 'unplugin-attributify-to-class/vite'"},{"note":"defaultAttributes and defaultIgnoreNonValuedAttributes are exported from the root package, not from bundler-specific subpaths.","wrong":"import { defaultAttributes } from 'unplugin-attributify-to-class/vite'","symbol":"defaultAttributes","correct":"import { defaultAttributes } from 'unplugin-attributify-to-class'"},{"note":"Webpack users must require from 'unplugin-attributify-to-class/webpack'. The root module is ESM-only.","wrong":"const { attributifyToClass } = require('unplugin-attributify-to-class')","symbol":"attributifyToClass (CommonJS)","correct":"const { attributifyToClass } = require('unplugin-attributify-to-class/webpack')"}],"quickstart":{"code":"// Vite config using TypeScript\nimport { defineConfig } from 'vite'\nimport { attributifyToClass } from 'unplugin-attributify-to-class/vite'\n\nexport default defineConfig({\n  plugins: [\n    attributifyToClass()\n  ]\n})\n\n// Now in your .vue or HTML files, attributify mode works:\n// <button bg=\"blue-400 hover:blue-500\" text=\"sm white\">Click</button>\n// is transformed to:\n// <button bg=\"blue-400 hover:blue-500\" text=\"sm white\" class=\"bg-blue-400 hover:bg-blue-500 text-sm text-white\">Click</button>","lang":"typescript","description":"Demonstrates basic setup for Vite with TypeScript and how attributify attributes get converted to class strings."},"warnings":[{"fix":"Update npm dependency to 'unplugin-attributify-to-class' and update import paths accordingly.","message":"Package renamed from 'unplugin-unocss-attributify-wechat' to 'unplugin-attributify-to-class'. Old package still exists but no longer maintained.","severity":"breaking","affected_versions":"< 0.2.0"},{"fix":"Set `attributes` option to include all attributes you want to convert, or use `prefixedOnly: false` to convert any non-standard attribute (not recommended).","message":"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`.","severity":"gotcha","affected_versions":">= 0.0.0"},{"fix":"Set `nonValuedAttribute: false` in options if you want to exclude non-valued attributes like `mt-2`.","message":"The `nonValuedAttribute` option default changed from false to true in v0.1.16. If relying on the old behavior, set `nonValuedAttribute: false` explicitly.","severity":"deprecated","affected_versions":">= 0.1.16"},{"fix":"Use `require('unplugin-attributify-to-class/webpack')` for Webpack projects.","message":"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.","severity":"gotcha","affected_versions":">= 0.0.0"}],"env_vars":null,"last_verified":"2026-04-27T00:00:00.000Z","next_check":"2026-07-26T00:00:00.000Z","problems":[{"fix":"Use import { attributifyToClass } from 'unplugin-attributify-to-class/vite' for Vite, or the appropriate subpath for other bundlers.","cause":"Importing from the wrong path (e.g., root instead of /vite, /rollup, /webpack).","error":"Cannot find module 'unplugin-attributify-to-class' or its corresponding type declarations."},{"fix":"Use import syntax if possible, or use require from a bundler subpath (e.g., require('unplugin-attributify-to-class/webpack')).","cause":"CommonJS require used on an ESM-only export. The root module is ES module; bundler-specific modules are dual CJS/ESM.","error":"TypeError: attributifyToClass is not a function"},{"fix":"Ignore the error or extend type definitions. No runtime issue.","cause":"TypeScript not recognizing attributify attributes. This is expected; attributify attributes are arbitrary and not part of standard HTML types.","error":"Property 'bg' does not exist on type 'HTMLAttributes'"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}