unplugin-polish-tagged-templates
v0.2.1
Published
Remove unnecessary tagged templates at compile time.
Downloads
225
Maintainers
Readme
unplugin-polish-tagged-templates
Remove unnecessary tagged templates at compile time.
Features
- 🦄 Unified plugin, support Vite/Rollup/Webpack/Nuxt/esbuild
- 💎 polish class names tagged templates as preset
- Support comment start with
//
- Support comment start with
- 🛠️ Custom tagged templates to polish
Only polish tagged templates in non-development environment.
Example
With the config:
polishTaggedTemplates({
clsTags: ['cls'],
})
It will polish code from:
const className = cls`
cursor-pointer
font-bold text-xl
// comment here
text-sky-500
hover:text-sky-600
`
function Component() {
return (
<p
className={cls`
cursor-pointer
font-bold text-xl
// comment here
text-sky-500
hover:text-sky-600
`}
// ...
>
Hi
</p>
)
}
to
const className = 'cursor-pointer font-bold text-xl text-sky-500 hover:text-sky-600'
function Component() {
return (
<p
className='cursor-pointer font-bold text-xl text-sky-500 hover:text-sky-600'
// ...
>
Hi
</p>
)
}
However, there is no effect if tagged templates has any expressions.
This plugin make you free to use tagged templates to composite class name or others aims, and remove unnecessary tagged templates at compile time.
[!TIP] For better compile performance, you'd better reduce using nested tagged templates as much as possible.
Install
npm i unplugin-polish-tagged-templates
// vite.config.ts
import polishTaggedTemplates from 'unplugin-polish-tagged-templates/vite'
export default defineConfig({
plugins: [
polishTaggedTemplates({
/* options */
}),
],
})
Example: playground/
// rollup.config.js
import polishTaggedTemplates from 'unplugin-polish-tagged-templates/rollup'
export default {
plugins: [
polishTaggedTemplates({
/* options */
}),
],
}
// webpack.config.js
module.exports = {
/* ... */
plugins: [
require('unplugin-polish-tagged-templates/webpack')({
/* options */
}),
],
}
// nuxt.config.js
export default defineNuxtConfig({
modules: [
[
'unplugin-polish-tagged-templates/nuxt',
{
/* options */
},
],
],
})
This module works for both Nuxt 2 and Nuxt Vite
// vue.config.js
module.exports = {
configureWebpack: {
plugins: [
require('unplugin-polish-tagged-templates/webpack')({
/* options */
}),
],
},
}
// esbuild.config.js
import { build } from 'esbuild'
import polishTaggedTemplates from 'unplugin-polish-tagged-templates/esbuild'
build({
plugins: [polishTaggedTemplates()],
})
Related
- tagged-classnames-free - Free to tagged classnames.