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()],
})