Vite plugin for minifying / obfuscating CSS classes in production builds

Last update: Dec 22, 2022

Overview

vite-plugin-class-mangler

Vite plugin for minifying / obfuscating classes in production builds. Compatible with Tailwind, inline, or imported styles.

Supported frameworks

Vue (In progress)
React (In progress)
Svelte

Installation

Warning This plugin is still in development (and very broken)

Install using yarn or npm:

yarn add -D vite-plugin-class-mangler

Usage

Add to your vite config:

import { defineConfig } from 'vite';
import ClassMangler from 'vite-plugin-class-mangler';

export default defineConfig({
  plugins: [
    ClassMangler()
  ]
});

Optionally, customize any of the following options:

ClassMangler({
  dev: true,
  min: 2,
  max: 6,
  length: 8,
  suffixes: ['.svelte', '.html']
})

'Dev' determines whether to apply the plugin on serve or build. It defaults to 'false', only replacing class names in production builds.

Min / max are inclusive integers used for randomizing the length of the generated classes. If 'length' is provided instead, these will be ignored.

Suffixes can be overriden, provided as an array of strings, although the defaults should work in most cases (['.svelte', '.tsx', '.jsx', '.html', '.vue']).

Testing

Run unit tests:

yarn test

Credits

Forked from vite-plugin-tailwind-obfuscate

⚡️🌱 Vite plugin for Twig, transforms twig templates into HTML

⚡️ 🌱 ViteTwig import twig from '@vituum/vite-plugin-twig' export default { plugins: [ twig({ reload: true, root: null, filte

Dec 15, 2022

✅ Vite plugin for validating your environment variables

This Vite plugin allows you to validate your environment variables at build or dev time. This allows your build/dev-server to fail-fast if your setup

Dec 23, 2022

🎉 基于 vite 2.0 + vue 3.0 + vue-router 4.0 + vuex 4.0 + element-plus 的后台管理系统vue3-element-admin

vue3-element-admin 🎉 基于 Vite 2.0 + Vue3.0 + Vue-Router 4.0 + Vuex 4.0 + element-plus 的后台管理系统简介 vue3-element-admin 是一个后台前端解决方案，它基于 vue3 和 element-plu

Nov 28, 2022

Vite template with TypeScript, Chakra UI, Eslint Airbnb, Prettier

Vite + Typescript + ChakraUI = ❤️ This is a vite template that combines several technologies: Vite React TypeScript ChakraUI Eslint with eslint-config

Mar 26, 2022

Integrate Tauri in a Vite project to build cross-platform apps.

vite-plugin-tauri Integrate Tauri in a Vite project to build cross-platform apps Install Make sure to setup your environment for Tauri development. Th

Dec 15, 2022

A template repository / quick start to build Azure Static Web Apps with a Node.js function. It uses Vue.js v3, Vue Router, Vuex, and Vite.js.

Azure Static Web App Template with Node.js API This is a template repository for creating Azure Static Web Apps that comes pre-configured with: Vue.js

Jun 25, 2022

⏳ vue3 + electron + ts + vite = mini template

v3-electron 🥳 Electron16 + Vue3 + Vite2 运行项目 # enter the project directory cd v3-electron # install dependency yarn # develop yarn dev # build exe

Nov 11, 2022

Using Cypress with Vite, React, TypeScript, MSW and react-query

Vie + Cypress + MSW + react-query Demo Example of using Cypress with Vite, MSW and react-query. Uses the appReady pattern to signal to Cypress when th

Jul 16, 2022

Fastify boilerplate with Vite & Vitest

Fastify boilerplate with Vite & Vitest Enhance your Fastify DX with the power of Vite & Vitest. Features ⚡ All the power of Vite (Next Generation Fron

Dec 13, 2022

Comments

Installation error

Trying to install this package with

yarn add -D vite-plugin-class-mangler

results in

error An unexpected error occurred: "https://registry.yarnpkg.com/vite-plugin-class-mangler: Not found".

opened by driss-chelouati 3

Vue templates

Hi, Good idea to produce a mangling plugin for Vite. I saw that you do not have a matching class list for vue templates. In my Vue3 workflows I use this snippet, if it can help

// © Ronan LE MEILLAT
// MIT License
import fs from "fs";

function getSetOfClasses(data:string):string[]{
    const regExp = new RegExp(/(?:class)=(?:["']\W+\s*(?:\w+)\()?["']([^'"]+)['"]/g)
    const tresult = [] as string[]
    for (const match of data.matchAll(regExp)){
        const noNewLine = match[1].replace(new RegExp(/\n/g),' ')
        const noMultipleSpace = noNewLine.replace(new RegExp(/\s\s+/g), ' ')
        const arrayOfSingleClasses = noMultipleSpace.trim().split(' ')
        tresult.push(...arrayOfSingleClasses)
    }
    return [...new Set(tresult)]
}
const data = fs.readFileSync('./src/components/forms/EmailForm.vue').toString()
console.log (getSetOfClasses(data))

this gives me this array

[
  'container',
  'pt-5',
  'md:pt-0',
  'mx-auto',
  'px-4',
  'flex',
  'flex-wrap',
  'justify-center',
  'w-full',
  'lg:w-6/12',
  'pt-6',
  'sm:pt-0',
  'relative',
  'flex-col',
  'min-w-0',
  'break-words',
  'mb-6',
  'rounded-lg',
  'bg-white',
  'border-dotted',
  'border-2',
  'border-gray-200',
  'flex-auto',
  'p-5',
  'lg:p-10',
  'text-2xl',
  'font-semibold',
  'leading-relaxed',
  'mt-1',
  'mb-4',
  'text-slate-500',
  'mb-3',
  'mt-8',
  'block',
  'uppercase',
  'text-slate-600',
  'text-xs',
  'font-bold',
  'mb-2',
  'border-0',
  'px-3',
  'py-3',
  'placeholder-slate-300',
  'rounded',
  'text-sm',
  'shadow',
  'focus:outline-none',
  'focus:ring',
  'ease-linear',
  'transition-all',
  'duration-150',
  'font-light',
  'text-slate-700',
  'text-slate-300',
  'appearance-none',
  'h-4',
  'w-4',
  'border',
  'border-gray-300',
  'rounded-sm',
  'checked:bg-blue-600',
  'checked:border-blue-600',
  'transition',
  'duration-200',
  'align-center',
  'ml-2',
  'cursor-pointer',
  'mr-2',
  'text-center',
  'mt-6'
]

opened by eltorio 1