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 //
• 🛠️ 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

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

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

Example: playground/

Rollup

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

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

Webpack

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

Nuxt

// nuxt.config.js
export default defineNuxtConfig({
  modules: [
    [
      'unplugin-polish-tagged-templates/nuxt',
      {
        /* options */
      },
    ],
  ],
})

This module works for both Nuxt 2 and Nuxt Vite

Vue CLI

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

esbuild

// 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.