# unplugin-polish-tagged-templates

> Remove unnecessary tagged templates at compile time.

Latest version **0.2.1** (published 2024-09-20) · MIT license · 0 weekly downloads

## Install

```sh
npm install unplugin-polish-tagged-templates
pnpm add unplugin-polish-tagged-templates
yarn add unplugin-polish-tagged-templates
bun add unplugin-polish-tagged-templates
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.1 |
| Published | 2024-09-20 |
| First published | 2023-08-26 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 6 |
| Unpacked size | 73.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 4 |
| Maintainers | theprimone |
| Keywords | unplugin, vite, webpack, rollup, transform, tagged-template |

## Links

- npm: https://www.npmjs.com/package/unplugin-polish-tagged-templates
- Repository: https://github.com/yunsii/unplugin-polish-tagged-templates
- Homepage: https://github.com/yunsii/unplugin-polish-tagged-templates#readme
- Issues: https://github.com/yunsii/unplugin-polish-tagged-templates/issues
- npm.io page: https://npm.io/package/unplugin-polish-tagged-templates

## Dependencies (6)

- [pathe](https://npm.io/package/pathe.md) ^1.1.1
- [consola](https://npm.io/package/consola.md) ^3.2.3
- [gogocode](https://npm.io/package/gogocode.md) ^1.0.55
- [unplugin](https://npm.io/package/unplugin.md) ^1.12.0
- [@babel/types](https://npm.io/package/@babel/types.md) ^7.25.6
- [magic-string](https://npm.io/package/magic-string.md) ^0.30.10

## Alternatives

- [raw-loader](https://npm.io/package/raw-loader.md) — 4.3M weekly downloads
- [plop](https://npm.io/package/plop.md) — 1.4M weekly downloads
- [webpack-deadcode-plugin](https://npm.io/package/webpack-deadcode-plugin.md) — 80.3K weekly downloads
- [@storybook/preact-vite](https://npm.io/package/@storybook/preact-vite.md) — 54.2K weekly downloads
- [vite-plugin-transform](https://npm.io/package/vite-plugin-transform.md) — 2.4K weekly downloads

## Recent versions

- 0.2.1 (latest) — 2024-09-20
- 0.2.0 — 2024-09-20
- 0.2.0-beta.5 — 2024-08-05
- 0.2.0-beta.4 — 2024-07-28
- 0.2.0-beta.3 — 2024-07-28
- 0.2.0-beta.2 — 2024-07-27
- 0.2.0-beta.1 — 2024-07-27
- 0.1.1 — 2024-07-14
- 0.1.1-beta.2 — 2023-08-27
- 0.1.1-beta.1 — 2023-08-26
- 0.1.1-beta.0 — 2023-08-26

## README

# unplugin-polish-tagged-templates

[![NPM version](https://img.shields.io/npm/v/unplugin-polish-tagged-templates?color=a1b858&label=)](https://www.npmjs.com/package/unplugin-polish-tagged-templates) [![Download monthly](https://img.shields.io/npm/dm/unplugin-polish-tagged-templates.svg)](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 (
    <p
      className={cls`
        cursor-pointer
        font-bold text-xl
        // comment here
        text-sky-500
        hover:text-sky-600
      `}
      // ...
    >
      Hi
    </p>
  )
}
```

to

```tsx
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

```bash
npm i unplugin-polish-tagged-templates
```

<details>
<summary>Vite</summary><br>

```ts
// vite.config.ts
import polishTaggedTemplates from 'unplugin-polish-tagged-templates/vite'

export default defineConfig({
  plugins: [
    polishTaggedTemplates({
      /* options */
    }),
  ],
})
```

Example: [`playground/`](./playground/)

<br></details>

<details>
<summary>Rollup</summary><br>

```ts
// rollup.config.js
import polishTaggedTemplates from 'unplugin-polish-tagged-templates/rollup'

export default {
  plugins: [
    polishTaggedTemplates({
      /* options */
    }),
  ],
}
```

<br></details>

<details>
<summary>Webpack</summary><br>

```ts
// webpack.config.js
module.exports = {
  /* ... */
  plugins: [
    require('unplugin-polish-tagged-templates/webpack')({
      /* options */
    }),
  ],
}
```

<br></details>

<details>
<summary>Nuxt</summary><br>

```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)

<br></details>

<details>
<summary>Vue CLI</summary><br>

```ts
// vue.config.js
module.exports = {
  configureWebpack: {
    plugins: [
      require('unplugin-polish-tagged-templates/webpack')({
        /* options */
      }),
    ],
  },
}
```

<br></details>

<details>
<summary>esbuild</summary><br>

```ts
// esbuild.config.js
import { build } from 'esbuild'
import polishTaggedTemplates from 'unplugin-polish-tagged-templates/esbuild'

build({
  plugins: [polishTaggedTemplates()],
})
```

<br></details>

## Related

- [tagged-classnames-free](https://github.com/yunsii/tagged-classnames-free) - Free to tagged classnames.

---
_Source: https://npm.io/package/unplugin-polish-tagged-templates · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._