0.1.1-beta.2 • Published 8 months ago
unplugin-polish-tagged-templates v0.1.1-beta.2
unplugin-polish-tagged-templates
Remove unnecessary tagged templates at compile time.
Features
- 🦄 Unified plugin, support Vite/Rollup/Webpack/Nuxt/esbuild
- 💎 polish CSS tagged templates as preset
- 🛠️ Custom tagged templates to polish
- ✨ Support comment start with
//
Only polish tagged templates in non-development environment.
Example
With the config:
polishTaggedTemplates({
cssTags: ['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 variables.
This plugin make you free to use tagged templates to composite class name or others aims, and remove unnecessary tagged templates at compile time.
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()],
})