unplugin-tailwindcss-mangle 2.0.0 → 2.0.2

package/README.md

@@ -2,22 +2,23 @@
 
 mangle tailwindcss utilities plugin
 
+It is recommended to read the documentation of [tailwindcss-patch](https://github.com/sonofmagic/tailwindcss-mangle/tree/main/packages/tailwindcss-patch) first, `unplugin-tailwindcss-mangle` depends on this tool.
+
 > 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)
+    - [2. Run install script](#2-run-install-script)
     - [3. add `prepare` script in your `package.json`](#3-add-prepare-script-in-your-packagejson)
-    - [4. run extract command](#4-run-extract-command)
-    - [5. register this plugin](#5-register-this-plugin)
+    - [4. Run extract command](#4-run-extract-command)
+    - [5. Register this plugin](#5-register-this-plugin)
       - [vite](#vite)
       - [webpack](#webpack)
   - [Options](#options)
-    - [classGenerator](#classgenerator)
-    - [include / exclude](#include--exclude)
   - [Notice](#notice)
+  - [Migration form v1 to v2](#migration-form-v1-to-v2)
 
 ## Features
 
@@ -36,7 +37,7 @@ mangle tailwindcss utilities plugin
 <npm|yarn|pnpm> i -D unplugin-tailwindcss-mangle tailwindcss-patch
 ```
 
-### 2. Run patch script
+### 2. Run install script
 
 ```sh
 npx tw-patch install
@@ -50,7 +51,9 @@ npx tw-patch install
   },
 ```
 
-### 4. run extract command
+### 4. Run extract command
+
+cd to the same directory as `package.son` and `tailwind.config.js`, then run:
 
 ```sh
 npx tw-patch extract
@@ -58,9 +61,9 @@ npx tw-patch extract
 
 > See more options in [tailwindcss-patch](https://github.com/sonofmagic/tailwindcss-mangle/tree/main/packages/tailwindcss-patch)
 
-Then there will generate a json file:   `.tw-patch/tw-class-list.json`
+Then there will generate a json file:  `.tw-patch/tw-class-list.json`
 
-### 5. register this plugin
+### 5. Register this plugin
 
 #### vite
 
@@ -68,7 +71,7 @@ Then there will generate a json file:   `.tw-patch/tw-class-list.json`
 // for example: vue vite project
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
-import { vitePlugin as utwm } from 'unplugin-tailwindcss-mangle'
+import utwm from 'unplugin-tailwindcss-mangle/vite'
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [vue(), utwm()]
@@ -92,7 +95,7 @@ You will see all class was renamed to `tw-*`
 // esm
 import { webpackPlugin as utwm } from 'unplugin-tailwindcss-mangle'
 // or cjs
-const { webpackPlugin: utwm } = require('unplugin-tailwindcss-mangle')
+const utwm = require('unplugin-tailwindcss-mangle/webpack')
 // use this webpack plugin
 // for example next.config.js
 const { defineConfig } = require('@vue/cli-service')
@@ -110,34 +113,12 @@ module.exports = defineConfig({
 
 ## Options
 
-### classGenerator
-
-custom class generator, if you want to custom class name (default 'tw-*'), use this options
-
-```js
-export interface IClassGeneratorOptions {
-  reserveClassName?: (string | RegExp)[]
-  // custom generate class name
-  customGenerate?: (original: string, opts: IClassGeneratorOptions, context: Record<string, any>) => string | undefined
-  log?: boolean
-  exclude?: (string | RegExp)[]
-  include?: (string | RegExp)[]
-  ignoreClass?: (string | RegExp)[]
-  // default 'tw-',for example: tw-a,tw-b, you can set any you want, like '','ice-'
-  classPrefix?: string
-}
-```
-
-### include / exclude
-
-Type: `string | string[]`  
-
-Default: `undefined`
-
-`glob string` allow you to control the mangle range of bundles.
+[types.ts]('./src/types.ts')
 
 ## Notice
 
+By default, only the build will take effect. Due to some restrictions, it cannot take effect in the development mode.
+
 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`.
@@ -150,3 +131,15 @@ document.body.innerHTML = innerHTML
 ```
 
 so only strings with `-` or `:` will be transformed.
+
+## Migration form v1 to v2
+
+```diff
+// vite
+- import { vitePlugin } from 'unplugin-tailwindcss-mangle'
++ import utwm from 'unplugin-tailwindcss-mangle/vite'
+
+// webpack
+- import { webpackPlugin } from 'unplugin-tailwindcss-mangle'
++ import utwm from 'unplugin-tailwindcss-mangle/webpack'
+```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "unplugin-tailwindcss-mangle",
-  "version": "2.0.0",
+  "version": "2.0.2",
   "description": "mangle tailwindcss utilities class plugin. support vite and webpack!",
   "main": "./dist/index.cjs",
   "module": "./dist/index.mjs",
@@ -64,7 +64,7 @@
     "micromatch": "^4.0.5",
     "unplugin": "^1.4.0",
     "@tailwindcss-mangle/config": "^1.0.1",
-    "@tailwindcss-mangle/core": "^2.0.0",
+    "@tailwindcss-mangle/core": "^2.0.2",
     "@tailwindcss-mangle/shared": "^2.0.0"
   },
   "publishConfig": {