feat: release unplugin-tailwindcss-mangle 0.0.1

Author: sonofmagic

package.json

@@ -27,10 +27,10 @@
     "jest": "^29.5.0",
     "only-allow": "^1.1.1",
     "prettier": "^2.8.7",
-    "rollup": "^3.20.2",
+    "rollup": "^3.20.6",
     "ts-jest": "^29.1.0",
     "ts-node": "^10.9.1",
-    "turbo": "^1.9.0",
+    "turbo": "^1.9.3",
     "typescript": "^5.0.4"
   },
   "engines": {

packages/unplugin-tailwindcss-mangle/README.md

@@ -1 +1,96 @@
-# unplugin-tailwindcss-mangle (WIP)
+# 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.

packages/unplugin-tailwindcss-mangle/package.json

@@ -1,7 +1,7 @@
 {
   "name": "unplugin-tailwindcss-mangle",
-  "version": "0.0.0",
-  "description": "",
+  "version": "0.0.1",
+  "description": "mangle tailwindcss utilities class",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
@@ -53,7 +53,12 @@
   "files": [
     "dist"
   ],
-  "keywords": [],
+  "keywords": [
+    "tailwindcss",
+    "utilities",
+    "mangle",
+    "class"
+  ],
   "author": "SonOfMagic <[email protected]>",
   "license": "MIT",
   "dependencies": {
@@ -64,9 +69,9 @@
     "acorn-walk": "^8.2.0",
     "escodegen": "^2.0.0",
     "parse5": "^7.1.2",
-    "postcss": "^8.4.21",
+    "postcss": "^8.4.22",
     "postcss-selector-parser": "^6.0.11",
-    "semver": "^7.3.8",
+    "semver": "^7.5.0",
     "tailwindcss-patch": "workspace:*",
     "unplugin": "^1.3.1"
   },
@@ -83,7 +88,7 @@
     "pkg-types": "^1.0.2",
     "tailwindcss": "^3.3.1",
     "tslib": "^2.5.0",
-    "vite": "^4.2.0",
+    "vite": "^4.2.2",
     "webpack": "^5.79.0"
   },
   "homepage": "https://github.com/sonofmagic/tailwindcss-mangle",