{"id":22526,"library":"unplugin-transform-class","title":"unplugin-transform-class","description":"A build tool plugin for transforming HTML class selectors according to custom rules, supporting Vite, Rollup, Webpack, esbuild, and Farm. Version 0.7.0 is current. It primarily targets developers using atomic CSS frameworks (like UnoCSS) in environments that restrict certain characters in class names (e.g., WeChat Mini Programs). Key differentiators: unplugin-based architecture for multi-bundler support, built-in default transformation rules, and utility functions for custom selector processing. Release cadence is irregular; last update 2023. Compared to similar tools, it offers broader bundler support and simpler rule configuration.","status":"active","version":"0.7.0","language":"javascript","source_language":"en","source_url":"https://github.com/MellowCo/unplugin-transform-class","tags":["javascript","unplugin","vite","webpack","rollup","transform","we","class","typescript"],"install":[{"cmd":"npm install unplugin-transform-class","lang":"bash","label":"npm"},{"cmd":"yarn add unplugin-transform-class","lang":"bash","label":"yarn"},{"cmd":"pnpm add unplugin-transform-class","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Used internally for filter patterns (include/exclude).","package":"@rollup/pluginutils","optional":false},{"reason":"Core unplugin abstraction for multi-bundler compatibility.","package":"unplugin","optional":false}],"imports":[{"note":"Must import from a specific bundler subpath (/vite, /webpack, /rollup, /esbuild, /farm). The root package does not export a default plugin.","wrong":"import transformClass from 'unplugin-transform-class'","symbol":"transformClass (default)","correct":"import transformClass from 'unplugin-transform-class/vite'"},{"note":"For Webpack (CJS projects), use require with the /webpack subpath. Similarly for other bundlers.","wrong":"const transformClass = require('unplugin-transform-class')","symbol":"transformClass (CJS)","correct":"const transformClass = require('unplugin-transform-class/webpack')"},{"note":"Utility functions for custom transformations; not available from bundler subpaths. Import from /utils.","wrong":"","symbol":"Utils (named exports)","correct":"import { defaultRules, escapeRegExp, restoreSelector, transformCode, transformEscapESelector, transformSelector } from 'unplugin-transform-class/utils'"}],"quickstart":{"code":"// vite.config.ts\nimport { defineConfig } from 'vite'\nimport transformClass from 'unplugin-transform-class/vite'\n\nexport default defineConfig({\n  plugins: [\n    transformClass({\n      rules: {\n        '/': '-s-',\n        ':': '-c-',\n        '[': '-fl-',\n        ']': '-fr-',\n      },\n      include: [/\\\\.vue$/, /\\\\.vue\\?vue/],\n      exclude: [/[\\\\/]node_modules[\\\\/]/, /[\\\\/]\\\\.git[\\\\/]/],\n    }),\n  ],\n})","lang":"typescript","description":"Shows Vite plugin configuration with custom rules, include/exclude patterns, and TypeScript usage."},"warnings":[{"fix":"Use correct subpath: 'unplugin-transform-class/vite', 'unplugin-transform-class/webpack', etc.","message":"The plugin must be imported from a bundler-specific subpath (e.g., /vite). Importing from the root returns undefined or an incorrect module.","severity":"breaking","affected_versions":">=0.7.0"},{"fix":"Inspect default rules in Options interface; override 'rules' if unwanted transformations occur.","message":"Default rules include transformations for characters like '.' -> '_dl_' which may conflict with existing CSS class naming conventions.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Test with your specific bundler version. Consider forking or switching to actively maintained alternatives if issues arise.","message":"The plugin is not actively maintained; last update was in 2023. Compatibility with newer bundler versions is uncertain.","severity":"deprecated","affected_versions":">=0.0.0"},{"fix":"Only use transformCode for raw HTML strings; for Vue/JSX use the plugin directly.","message":"The 'transformCode' utility function expects a string and rules object; it does not handle Vue/JSX parsing internally.","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":"Change import to 'unplugin-transform-class/vite' (or /webpack, /rollup, etc.)","cause":"Imported the plugin from the root package instead of the bundler-specific subpath.","error":"TypeError: Cannot read properties of undefined (reading 'transform')"},{"fix":"Ensure you use the correct subpath matching your bundler (e.g., /webpack for webpack).","cause":"Missing bundler subpath or wrong bundler specified.","error":"Error: [plugin:unplugin-transform-class] Could not load plugin: unplugin-transform-class"},{"fix":"Check include patterns (default: [/\\\\.jsx?$/, /\\\\.vue$/, /\\\\.vue\\?vue/]) and ensure rules have entries.","cause":"Include/exclude patterns exclude all files, or rules are empty.","error":"Warning: The plugin 'unplugin-transform-class/vite' seems to have no effect"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}