unplugin-tailwindcss-mangle 0.0.1 → 0.0.2

package/README.md

@@ -1,96 +1,96 @@
-# unplugin-tailwindcss-mangle
-
-mangle tailwindcss utilities plugin
-
-> Now Support `vite` and `webpack`
-
-- [unplugin-tailwindcss-mangle](#unplugin-tailwindcss-mangle)
-  - [Features](#features)
-  - [Usage](#usage)
-    - [1. Install Package](#1-install-package)
-    - [2. Run patch script](#2-run-patch-script)
-    - [3. add `prepare` script in your `package.json`](#3-add-prepare-script-in-your-packagejson)
-    - [4. register this plugin](#4-register-this-plugin)
-      - [vite](#vite)
-      - [webpack](#webpack)
-  - [Notice](#notice)
-
-## Features
-
-```html
-<!-- before -->
-<div class="z-10 w-full max-w-5xl items-center justify-between font-mono text-sm lg:flex"></div>
-<!-- after -->
-<div class="tw-g tw-h tw-i tw-d tw-e tw-j tw-k tw-l"></div>
-```
-
-## Usage
-
-### 1. Install Package
-
-```sh
-<npm|yarn|pnpm> i -D unplugin-tailwindcss-mangle tailwindcss-patch
-```
-
-### 2. Run patch script
-
-```sh
-npx tw-patch
-```
-
-### 3. add `prepare` script in your `package.json`
-
-```json
-  "scripts": {
-    "prepare": "tw-patch"
-  },
-```
-
-### 4. register this plugin
-
-#### vite
-
-```js
-// for example: vue vite project
-import { defineConfig } from 'vite'
-import vue from '@vitejs/plugin-vue'
-import utwm from 'unplugin-tailwindcss-mangle'
-// https://vitejs.dev/config/
-export default defineConfig({
-  plugins: [vue(), utwm.vite()]
-})
-```
-
-then run script:
-
-```sh
-# generate bundle
-yarn build
-# preview
-yarn preview
-```
-
-You will see all class was renamed to `tw-*`
-
-#### webpack
-
-```js
-import utwm from 'unplugin-tailwindcss-mangle'
-// use this webpack plugin
-utwm.webpack()
-```
-
-## Notice
-
-This plugin only transform those classes which name with `-` or `:`, like `w-32`, `before:h-[300px]`,`after:dark:via-[#0141ff]/40`. some classes like `flex`,`relative` will not be mangled.
-
-because plugin will **traverse** all `html class attr` and `js StringLiteral` to find `utilities` generated by `tailwindcss`.
-
-it's dangerous to mangle some `js StringLiteral` like:
-
-```js
-const innerHTML = "i'm flex and relative and grid"
-document.body.innerHTML = innerHTML
-```
-
-so only strings with `-` or `:` will be transformed.
+# unplugin-tailwindcss-mangle
+
+mangle tailwindcss utilities plugin
+
+> Now Support `vite` and `webpack`
+
+- [unplugin-tailwindcss-mangle](#unplugin-tailwindcss-mangle)
+  - [Features](#features)
+  - [Usage](#usage)
+    - [1. Install Package](#1-install-package)
+    - [2. Run patch script](#2-run-patch-script)
+    - [3. add `prepare` script in your `package.json`](#3-add-prepare-script-in-your-packagejson)
+    - [4. register this plugin](#4-register-this-plugin)
+      - [vite](#vite)
+      - [webpack](#webpack)
+  - [Notice](#notice)
+
+## Features
+
+```html
+<!-- before -->
+<div class="z-10 w-full max-w-5xl items-center justify-between font-mono text-sm lg:flex"></div>
+<!-- after -->
+<div class="tw-g tw-h tw-i tw-d tw-e tw-j tw-k tw-l"></div>
+```
+
+## Usage
+
+### 1. Install Package
+
+```sh
+<npm|yarn|pnpm> i -D unplugin-tailwindcss-mangle tailwindcss-patch
+```
+
+### 2. Run patch script
+
+```sh
+npx tw-patch
+```
+
+### 3. add `prepare` script in your `package.json`
+
+```json
+  "scripts": {
+    "prepare": "tw-patch"
+  },
+```
+
+### 4. register this plugin
+
+#### vite
+
+```js
+// for example: vue vite project
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import utwm from 'unplugin-tailwindcss-mangle'
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [vue(), utwm.vite()]
+})
+```
+
+then run script:
+
+```sh
+# generate bundle
+yarn build
+# preview
+yarn preview
+```
+
+You will see all class was renamed to `tw-*`
+
+#### webpack
+
+```js
+import utwm from 'unplugin-tailwindcss-mangle'
+// use this webpack plugin
+utwm.webpack()
+```
+
+## Notice
+
+This plugin only transform those classes which name contain `-` or `:`, like `w-32`, `before:h-[300px]`,`after:dark:via-[#0141ff]/40`. some classes like `flex`,`relative` will not be mangled.
+
+because plugin will **traverse** all `html class attr` and `js StringLiteral` to find `utilities` generated by `tailwindcss`.
+
+it's dangerous to mangle some `js StringLiteral` like:
+
+```js
+const innerHTML = "i'm flex and relative and grid"
+document.body.innerHTML = innerHTML
+```
+
+so only strings with `-` or `:` will be transformed.

package/dist/esbuild.d.ts

@@ -1,2 +1,2 @@
-declare const _default: (options?: import("./types").Options | undefined) => import("unplugin").EsbuildPlugin;
+declare const _default: (options?: import("./types").Options | undefined) => import("esbuild").Plugin;
 export default _default;

package/dist/index.js

@@ -386,7 +386,7 @@ function cssHandler(rawSource, options) {
 }
 
 const unplugin = unplugin$1.createUnplugin((options = {}, meta) => {
-    const mangleClass = (className) => {
+    const isMangleClass = (className) => {
         return /[-:]/.test(className);
     };
     let classSet;
@@ -394,7 +394,7 @@ const unplugin = unplugin$1.createUnplugin((options = {}, meta) => {
     function getCachedClassSet() {
         const set = tailwindcssPatch.getClassCacheSet();
         set.forEach((c) => {
-            if (!mangleClass(c)) {
+            if (!isMangleClass(c)) {
                 set.delete(c);
             }
         });
@@ -408,6 +408,9 @@ const unplugin = unplugin$1.createUnplugin((options = {}, meta) => {
             generateBundle: {
                 handler(options, bundle, isWrite) {
                     const runtimeSet = getCachedClassSet();
+                    if (!runtimeSet.size) {
+                        return;
+                    }
                     const groupedEntries = getGroupedEntries(Object.entries(bundle));
                     if (Array.isArray(groupedEntries.html) && groupedEntries.html.length) {
                         for (let i = 0; i < groupedEntries.html.length; i++) {
@@ -448,6 +451,9 @@ const unplugin = unplugin$1.createUnplugin((options = {}, meta) => {
                     stage: Compilation.PROCESS_ASSETS_STAGE_SUMMARIZE
                 }, (assets) => {
                     const runtimeSet = getCachedClassSet();
+                    if (!runtimeSet.size) {
+                        return;
+                    }
                     const groupedEntries = getGroupedEntries(Object.entries(assets));
                     if (Array.isArray(groupedEntries.html) && groupedEntries.html.length) {
                         for (let i = 0; i < groupedEntries.html.length; i++) {

package/dist/index.mjs

@@ -377,7 +377,7 @@ function cssHandler(rawSource, options) {
 }
 
 const unplugin = createUnplugin((options = {}, meta) => {
-    const mangleClass = (className) => {
+    const isMangleClass = (className) => {
         return /[-:]/.test(className);
     };
     let classSet;
@@ -385,7 +385,7 @@ const unplugin = createUnplugin((options = {}, meta) => {
     function getCachedClassSet() {
         const set = getClassCacheSet();
         set.forEach((c) => {
-            if (!mangleClass(c)) {
+            if (!isMangleClass(c)) {
                 set.delete(c);
             }
         });
@@ -399,6 +399,9 @@ const unplugin = createUnplugin((options = {}, meta) => {
             generateBundle: {
                 handler(options, bundle, isWrite) {
                     const runtimeSet = getCachedClassSet();
+                    if (!runtimeSet.size) {
+                        return;
+                    }
                     const groupedEntries = getGroupedEntries(Object.entries(bundle));
                     if (Array.isArray(groupedEntries.html) && groupedEntries.html.length) {
                         for (let i = 0; i < groupedEntries.html.length; i++) {
@@ -439,6 +442,9 @@ const unplugin = createUnplugin((options = {}, meta) => {
                     stage: Compilation.PROCESS_ASSETS_STAGE_SUMMARIZE
                 }, (assets) => {
                     const runtimeSet = getCachedClassSet();
+                    if (!runtimeSet.size) {
+                        return;
+                    }
                     const groupedEntries = getGroupedEntries(Object.entries(assets));
                     if (Array.isArray(groupedEntries.html) && groupedEntries.html.length) {
                         for (let i = 0; i < groupedEntries.html.length; i++) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "unplugin-tailwindcss-mangle",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "mangle tailwindcss utilities class",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -64,7 +64,7 @@
     "postcss-selector-parser": "^6.0.11",
     "semver": "^7.5.0",
     "unplugin": "^1.3.1",
-    "tailwindcss-patch": "1.0.0"
+    "tailwindcss-patch": "1.0.1"
   },
   "publishConfig": {
     "access": "public",