https://github.com/yunsii/unplugin-polish-tagged-templates
Remove unnecessary tagged templates at compile time.
https://github.com/yunsii/unplugin-polish-tagged-templates
rollup tagged-template tagged-template-literals unplugin vite webpack
Last synced: about 1 month ago
JSON representation
Remove unnecessary tagged templates at compile time.
- Host: GitHub
- URL: https://github.com/yunsii/unplugin-polish-tagged-templates
- Owner: yunsii
- License: mit
- Created: 2023-08-26T02:23:59.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-09-20T04:29:17.000Z (8 months ago)
- Last Synced: 2025-04-18T18:32:41.262Z (about 1 month ago)
- Topics: rollup, tagged-template, tagged-template-literals, unplugin, vite, webpack
- Language: TypeScript
- Homepage:
- Size: 915 KB
- Stars: 3
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# unplugin-polish-tagged-templates
[](https://www.npmjs.com/package/unplugin-polish-tagged-templates) [](https://www.npmjs.com/package/unplugin-polish-tagged-templates)
Remove unnecessary [tagged templates](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#tagged_templates) at compile time.
## Features
- 🦄 [Unified plugin](https://github.com/unjs/unplugin), support Vite/Rollup/Webpack/Nuxt/esbuild
- 💎 polish **class names** tagged templates as preset
- Support comment start with `//`
- 🛠️ Custom tagged templates to polish
> Only polish tagged templates in non-development environment.
## Example
With the config:
```tsx
polishTaggedTemplates({
clsTags: ['cls'],
})
```
It will polish code from:
```tsx
const className = cls`
cursor-pointer
font-bold text-xl
// comment here
text-sky-500
hover:text-sky-600
`
function Component() {
return (
Hi
)
}
```
to
```tsx
const className = 'cursor-pointer font-bold text-xl text-sky-500 hover:text-sky-600'
function Component() {
return (
Hi
)
}
```
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
```bash
npm i unplugin-polish-tagged-templates
```
Vite
```ts
// vite.config.ts
import polishTaggedTemplates from 'unplugin-polish-tagged-templates/vite'
export default defineConfig({
plugins: [
polishTaggedTemplates({
/* options */
}),
],
})
```
Example: [`playground/`](./playground/)
Rollup
```ts
// rollup.config.js
import polishTaggedTemplates from 'unplugin-polish-tagged-templates/rollup'
export default {
plugins: [
polishTaggedTemplates({
/* options */
}),
],
}
```
Webpack
```ts
// webpack.config.js
module.exports = {
/* ... */
plugins: [
require('unplugin-polish-tagged-templates/webpack')({
/* options */
}),
],
}
```
Nuxt
```ts
// nuxt.config.js
export default defineNuxtConfig({
modules: [
[
'unplugin-polish-tagged-templates/nuxt',
{
/* options */
},
],
],
})
```
> This module works for both Nuxt 2 and [Nuxt Vite](https://github.com/nuxt/vite)
Vue CLI
```ts
// vue.config.js
module.exports = {
configureWebpack: {
plugins: [
require('unplugin-polish-tagged-templates/webpack')({
/* options */
}),
],
},
}
```
esbuild
```ts
// esbuild.config.js
import { build } from 'esbuild'
import polishTaggedTemplates from 'unplugin-polish-tagged-templates/esbuild'
build({
plugins: [polishTaggedTemplates()],
})
```
## Related
- [tagged-classnames-free](https://github.com/yunsii/tagged-classnames-free) - Free to tagged classnames.