tailwindcss-mangle icon indicating copy to clipboard operation
tailwindcss-mangle copied to clipboard

How to exclude some files or directories?

Open nilansaha opened this issue 2 years ago • 2 comments

I have a file that has some literal TailwindCSS code and its mangling that too.

Is there any way to keep that file untouched? That Tailwindcss code is not used anywhere. Its just a string and I want that untouched.

Thanks for the help.

nilansaha avatar Jul 05 '23 06:07 nilansaha

There is no particularly effective way to do this.

One option is to use mangleClassFilter and put all the tailwindcss class names in your file to avoid obfuscation: mangleClassFilter:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { vitePlugin as utwm, defaultMangleClassFilter } from 'unplugin-tailwindcss-mangle'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    utwm({
      mangleClassFilter(className) {
        // all your untouched tailwindcss class name
        if (['xxxx','yyyy'].includes(className)) {
          return false
        }
        return defaultMangleClassFilter(className)
      },
    })
  ]
})

But this will make all the class names in the target array unobfuscated.

Another option is to build your untouched target file into a single-file bundle, and then use the exclude option to exclude it (both the include and exclude configuration items are for the webpack/vite chunk path, not the source directory)

sonofmagic avatar Jul 06 '23 13:07 sonofmagic

Hi, [email protected] is release. You can use the new include/exclude options to exclude files and dirs. Have a try! :)

sonofmagic avatar Aug 11 '23 03:08 sonofmagic