unplugin-tailwindcss-mangle 0.0.0 → 0.0.2

package/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 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/classGenerator.d.ts

@@ -0,0 +1,17 @@
+import type { IMangleOptions, IMangleContextClass, IClassGenerator } from './types';
+declare class ClassGenerator implements IClassGenerator {
+    newClassMap: Record<string, IMangleContextClass>;
+    newClassSize: number;
+    context: Record<string, any>;
+    opts: IMangleOptions;
+    classPrefix: string;
+    constructor(opts?: IMangleOptions);
+    defaultClassGenerator(): string;
+    ignoreClassName(className: string): boolean;
+    includeFilePath(filePath: string): boolean;
+    excludeFilePath(filePath: string): boolean;
+    isFileIncluded(filePath: string): boolean;
+    transformCssClass(className: string): string;
+    generateClassName(original: string): IMangleContextClass;
+}
+export default ClassGenerator;

package/dist/constants.d.ts

@@ -0,0 +1 @@
+export declare const pluginName = "unplugin-tailwindcss-mangle";

package/dist/css/index.d.ts

@@ -0,0 +1,2 @@
+import { IHandlerOptions } from '@/types';
+export declare function cssHandler(rawSource: string, options: IHandlerOptions): string;

package/dist/css/plugins.d.ts

@@ -0,0 +1,7 @@
+import { IMangleContextClass } from '@/types';
+import type { PluginCreator } from 'postcss';
+export type PostcssMangleTailwindcssPlugin = PluginCreator<{
+    newClassMap: Record<string, IMangleContextClass>;
+}>;
+declare const postcssMangleTailwindcssPlugin: PostcssMangleTailwindcssPlugin;
+export { postcssMangleTailwindcssPlugin };

package/dist/esbuild.d.ts

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

package/dist/esbuild.js

@@ -0,0 +1,15 @@
+'use strict';
+
+var index = require('./index.js');
+require('unplugin');
+require('tailwindcss-patch');
+require('parse5');
+require('@babel/generator');
+require('@babel/parser');
+require('@babel/traverse');
+require('postcss');
+require('postcss-selector-parser');
+
+var esbuild = index.esbuild;
+
+module.exports = esbuild;

package/dist/esbuild.mjs

@@ -0,0 +1,13 @@
+import unplugin from './index.mjs';
+import 'unplugin';
+import 'tailwindcss-patch';
+import 'parse5';
+import '@babel/generator';
+import '@babel/parser';
+import '@babel/traverse';
+import 'postcss';
+import 'postcss-selector-parser';
+
+var esbuild = unplugin.esbuild;
+
+export { esbuild as default };

package/dist/html/index.d.ts

@@ -0,0 +1,2 @@
+import { IHandlerOptions } from '@/types';
+export declare function htmlHandler(rawSource: string, options: IHandlerOptions): string;

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+import type { Options } from './types';
+declare const unplugin: import("unplugin").UnpluginInstance<Options | undefined, boolean>;
+export default unplugin;

package/dist/index.js

@@ -0,0 +1,497 @@
+'use strict';
+
+var unplugin$1 = require('unplugin');
+var tailwindcssPatch = require('tailwindcss-patch');
+var parse5 = require('parse5');
+var _generate = require('@babel/generator');
+var parser = require('@babel/parser');
+var _traverse = require('@babel/traverse');
+var postcss = require('postcss');
+var parser$1 = require('postcss-selector-parser');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+var _generate__default = /*#__PURE__*/_interopDefault(_generate);
+var _traverse__default = /*#__PURE__*/_interopDefault(_traverse);
+var postcss__default = /*#__PURE__*/_interopDefault(postcss);
+var parser__default = /*#__PURE__*/_interopDefault(parser$1);
+
+const pluginName = 'unplugin-tailwindcss-mangle';
+
+function groupBy(arr, cb) {
+    if (!Array.isArray(arr)) {
+        throw new Error('expected an array for first argument');
+    }
+    if (typeof cb !== 'function') {
+        throw new Error('expected a function for second argument');
+    }
+    const result = {};
+    for (let i = 0; i < arr.length; i++) {
+        const item = arr[i];
+        const bucketCategory = cb(item);
+        const bucket = result[bucketCategory];
+        if (!Array.isArray(bucket)) {
+            result[bucketCategory] = [item];
+        }
+        else {
+            result[bucketCategory].push(item);
+        }
+    }
+    return result;
+}
+function getGroupedEntries(entries, options = {
+    cssMatcher(file) {
+        return /\.css$/.test(file);
+    },
+    htmlMatcher(file) {
+        return /\.html?$/.test(file);
+    },
+    jsMatcher(file) {
+        return /\.js$/.test(file);
+    }
+}) {
+    const { cssMatcher, htmlMatcher, jsMatcher } = options;
+    const groupedEntries = groupBy(entries, ([file]) => {
+        if (cssMatcher(file)) {
+            return 'css';
+        }
+        else if (htmlMatcher(file)) {
+            return 'html';
+        }
+        else if (jsMatcher(file)) {
+            return 'js';
+        }
+        else {
+            return 'other';
+        }
+    });
+    return groupedEntries;
+}
+const acceptChars = 'abcdefghijklmnopqrstuvwxyz'.split('');
+function stripEscapeSequence(words) {
+    return words.replace(/\\/g, '');
+}
+function isRegexp(value) {
+    return Object.prototype.toString.call(value) === '[object RegExp]';
+}
+function regExpTest(arr = [], str) {
+    if (Array.isArray(arr)) {
+        for (let i = 0; i < arr.length; i++) {
+            const item = arr[i];
+            if (typeof item === 'string') {
+                if (item === str) {
+                    return true;
+                }
+            }
+            else if (isRegexp(item)) {
+                item.lastIndex = 0;
+                if (item.test(str)) {
+                    return true;
+                }
+            }
+        }
+        return false;
+    }
+    throw new TypeError("paramater 'arr' should be a Array of Regexp | String !");
+}
+function escapeStringRegexp(str) {
+    if (typeof str !== 'string') {
+        throw new TypeError('Expected a string');
+    }
+    return str.replace(/[|\\{}()[\]^$+*?.]/g, '\\$&').replace(/-/g, '\\x2d');
+}
+
+class ClassGenerator {
+    constructor(opts = {}) {
+        var _a;
+        this.newClassMap = {};
+        this.newClassSize = 0;
+        this.context = {};
+        this.opts = opts;
+        this.classPrefix = (_a = opts.classPrefix) !== null && _a !== void 0 ? _a : 'tw-';
+    }
+    defaultClassGenerator() {
+        const chars = [];
+        let rest = (this.newClassSize - (this.newClassSize % acceptChars.length)) / acceptChars.length;
+        if (rest > 0) {
+            while (true) {
+                rest -= 1;
+                const m = rest % acceptChars.length;
+                const c = acceptChars[m];
+                chars.push(c);
+                rest -= m;
+                if (rest === 0) {
+                    break;
+                }
+                rest /= acceptChars.length;
+            }
+        }
+        const prefixIndex = this.newClassSize % acceptChars.length;
+        const newClassName = `${this.classPrefix}${acceptChars[prefixIndex]}${chars.join('')}`;
+        return newClassName;
+    }
+    ignoreClassName(className) {
+        return regExpTest(this.opts.ignoreClass, className);
+    }
+    includeFilePath(filePath) {
+        const { include } = this.opts;
+        if (Array.isArray(include)) {
+            return regExpTest(include, filePath);
+        }
+        else {
+            return true;
+        }
+    }
+    excludeFilePath(filePath) {
+        const { exclude } = this.opts;
+        if (Array.isArray(exclude)) {
+            return regExpTest(exclude, filePath);
+        }
+        else {
+            return false;
+        }
+    }
+    isFileIncluded(filePath) {
+        return this.includeFilePath(filePath) && !this.excludeFilePath(filePath);
+    }
+    transformCssClass(className) {
+        const key = stripEscapeSequence(className);
+        const cn = this.newClassMap[key];
+        if (cn)
+            return cn.name;
+        return className;
+    }
+    generateClassName(original) {
+        const opts = this.opts;
+        original = stripEscapeSequence(original);
+        const cn = this.newClassMap[original];
+        if (cn)
+            return cn;
+        let newClassName;
+        if (opts.classGenerator) {
+            newClassName = opts.classGenerator(original, opts, this.context);
+        }
+        if (!newClassName) {
+            newClassName = this.defaultClassGenerator();
+        }
+        if (opts.reserveClassName && regExpTest(opts.reserveClassName, newClassName)) {
+            if (opts.log) {
+                console.log(`The class name has been reserved. ${newClassName}`);
+            }
+            this.newClassSize++;
+            return this.generateClassName(original);
+        }
+        if (opts.log) {
+            console.log(`Minify class name from ${original} to ${newClassName}`);
+        }
+        const newClass = {
+            name: newClassName,
+            usedBy: []
+        };
+        this.newClassMap[original] = newClass;
+        this.newClassSize++;
+        return newClass;
+    }
+}
+
+({
+    HTML: parse5.html.NS.HTML,
+    XML: parse5.html.NS.XML,
+    MATHML: parse5.html.NS.MATHML,
+    SVG: parse5.html.NS.SVG,
+    XLINK: parse5.html.NS.XLINK,
+    XMLNS: parse5.html.NS.XMLNS
+});
+
+/**
+ * Determines if a given node is a document or not
+ * @param {Node} node Node to test
+ * @return {boolean}
+ */
+function isDocument(node) {
+    return node.nodeName === '#document';
+}
+/**
+ * Determines if a given node is a document fragment or not
+ * @param {Node} node Node to test
+ * @return {boolean}
+ */
+function isDocumentFragment(node) {
+    return node.nodeName === '#document-fragment';
+}
+/**
+ * Determines if a given node is a template node or not
+ * @param {Node} node Node to test
+ * @return {boolean}
+ */
+function isTemplateNode(node) {
+    return node.nodeName === 'template';
+}
+const isElementNode = parse5.defaultTreeAdapter.isElementNode;
+const isCommentNode = parse5.defaultTreeAdapter.isCommentNode;
+const isDocumentTypeNode = parse5.defaultTreeAdapter.isDocumentTypeNode;
+const isTextNode = parse5.defaultTreeAdapter.isTextNode;
+/**
+ * Determines if a given node is a parent or not
+ * @param {Node} node Node to test
+ * @return {boolean}
+ */
+function isParentNode(node) {
+    return (isDocument(node) ||
+        isDocumentFragment(node) ||
+        isElementNode(node) ||
+        isTemplateNode(node));
+}
+
+parse5.defaultTreeAdapter.appendChild;
+
+/**
+ * Traverses the tree of a given node
+ * @param {Node} node Node to traverse
+ * @param {Visitor} visitor Visitor to apply
+ * @param {ParentNode=} parent Parent node of the current node
+ * @return {void}
+ */
+function traverse$1(node, visitor, parent) {
+    const shouldVisitChildren = typeof visitor['pre:node'] !== 'function' ||
+        visitor['pre:node'](node, parent) !== false;
+    if (shouldVisitChildren && isParentNode(node)) {
+        for (const child of node.childNodes) {
+            traverse$1(child, visitor, node);
+        }
+    }
+    if (typeof visitor.node === 'function') {
+        visitor.node(node, parent);
+    }
+    if (typeof visitor.document === 'function' && isDocument(node)) {
+        visitor.document(node);
+    }
+    if (typeof visitor.documentFragment === 'function' &&
+        isDocumentFragment(node)) {
+        visitor.documentFragment(node, parent);
+    }
+    if (typeof visitor.element === 'function' && isElementNode(node)) {
+        visitor.element(node, parent);
+    }
+    if (typeof visitor.template === 'function' && isTemplateNode(node)) {
+        visitor.template(node, parent);
+    }
+    if (typeof visitor.comment === 'function' && isCommentNode(node)) {
+        visitor.comment(node, parent);
+    }
+    if (typeof visitor.text === 'function' && isTextNode(node)) {
+        visitor.text(node, parent);
+    }
+    if (typeof visitor.documentType === 'function' && isDocumentTypeNode(node)) {
+        visitor.documentType(node, parent);
+    }
+}
+
+function htmlHandler(rawSource, options) {
+    const { runtimeSet, classGenerator } = options;
+    const fragment = parse5.parse(rawSource);
+    traverse$1(fragment, {
+        element(node, parent) {
+            const attr = node.attrs.find((x) => x.name === 'class');
+            if (attr) {
+                const arr = attr.value.split(/\s/).filter((x) => x);
+                attr.value = arr
+                    .map((x) => {
+                    if (runtimeSet.has(x)) {
+                        return classGenerator.generateClassName(x).name;
+                    }
+                    return x;
+                })
+                    .join(' ');
+            }
+        }
+    });
+    return parse5.serialize(fragment);
+}
+
+const validateFilterRE = /[\w\u00A0-\uFFFF-_:%-?]/;
+function isValidSelector(selector = '') {
+    return validateFilterRE.test(selector);
+}
+const splitCode = (code) => code.split(/[\s"]+/).filter(isValidSelector);
+
+function getDefaultExportFromNamespaceIfPresent(n) {
+    return n && Object.prototype.hasOwnProperty.call(n, 'default') ? n.default : n;
+}
+const generate = getDefaultExportFromNamespaceIfPresent(_generate__default["default"]);
+const traverse = getDefaultExportFromNamespaceIfPresent(_traverse__default["default"]);
+function jsHandler(rawSource, options) {
+    const ast = parser.parse(rawSource);
+    const set = options.runtimeSet;
+    const clsGen = options.classGenerator;
+    const topt = {
+        StringLiteral: {
+            enter(p) {
+                const n = p.node;
+                const arr = splitCode(n.value);
+                let rawStr = n.value;
+                for (let i = 0; i < arr.length; i++) {
+                    const v = arr[i];
+                    if (set.has(v)) {
+                        let ignoreFlag = false;
+                        if (Array.isArray(n.leadingComments)) {
+                            ignoreFlag = n.leadingComments.findIndex((x) => x.value.includes('tw-mangle') && x.value.includes('ignore')) > -1;
+                        }
+                        if (!ignoreFlag) {
+                            rawStr = rawStr.replace(new RegExp(escapeStringRegexp(v), 'g'), clsGen.generateClassName(v).name);
+                        }
+                    }
+                }
+                n.value = rawStr;
+            }
+        },
+        noScope: true
+    };
+    traverse(ast, topt);
+    return generate(ast);
+}
+
+const postcssPlugin = 'postcss-mangle-tailwindcss-plugin';
+const postcssMangleTailwindcssPlugin = (options) => {
+    let newClassMap = {};
+    if (options) {
+        if (options.newClassMap) {
+            newClassMap = options.newClassMap;
+        }
+    }
+    return {
+        postcssPlugin,
+        Rule(rule, helper) {
+            rule.selector = parser__default["default"]((selectors) => {
+                selectors.walk((s) => {
+                    if (s.value) {
+                        const hit = newClassMap[s.value];
+                        if (hit) {
+                            s.value = hit.name;
+                        }
+                    }
+                });
+            }).processSync(rule.selector);
+        }
+    };
+};
+postcssMangleTailwindcssPlugin.postcss = true;
+
+function cssHandler(rawSource, options) {
+    return postcss__default["default"]([
+        postcssMangleTailwindcssPlugin({
+            newClassMap: options.classGenerator.newClassMap
+        })
+    ]).process(rawSource).css;
+}
+
+const unplugin = unplugin$1.createUnplugin((options = {}, meta) => {
+    const isMangleClass = (className) => {
+        return /[-:]/.test(className);
+    };
+    let classSet;
+    const classGenerator = new ClassGenerator();
+    function getCachedClassSet() {
+        const set = tailwindcssPatch.getClassCacheSet();
+        set.forEach((c) => {
+            if (!isMangleClass(c)) {
+                set.delete(c);
+            }
+        });
+        classSet = set;
+        return classSet;
+    }
+    return {
+        name: pluginName,
+        enforce: 'post',
+        vite: {
+            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++) {
+                            const [, asset] = groupedEntries.html[i];
+                            asset.source = htmlHandler(asset.source.toString(), {
+                                classGenerator,
+                                runtimeSet
+                            });
+                        }
+                    }
+                    if (Array.isArray(groupedEntries.js) && groupedEntries.js.length) {
+                        for (let i = 0; i < groupedEntries.js.length; i++) {
+                            const [, chunk] = groupedEntries.js[i];
+                            chunk.code = jsHandler(chunk.code, {
+                                runtimeSet,
+                                classGenerator
+                            }).code;
+                        }
+                    }
+                    if (Array.isArray(groupedEntries.css) && groupedEntries.css.length) {
+                        for (let i = 0; i < groupedEntries.css.length; i++) {
+                            const [, css] = groupedEntries.css[i];
+                            css.source = cssHandler(css.source.toString(), {
+                                classGenerator,
+                                runtimeSet
+                            });
+                        }
+                    }
+                }
+            }
+        },
+        webpack(compiler) {
+            const Compilation = compiler.webpack.Compilation;
+            const { ConcatSource } = compiler.webpack.sources;
+            compiler.hooks.compilation.tap(pluginName, (compilation) => {
+                compilation.hooks.processAssets.tap({
+                    name: pluginName,
+                    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++) {
+                            const [file, asset] = groupedEntries.html[i];
+                            const html = htmlHandler(asset.source().toString(), {
+                                classGenerator,
+                                runtimeSet
+                            });
+                            const source = new ConcatSource(html);
+                            compilation.updateAsset(file, source);
+                        }
+                    }
+                    if (Array.isArray(groupedEntries.js) && groupedEntries.js.length) {
+                        for (let i = 0; i < groupedEntries.js.length; i++) {
+                            const [file, chunk] = groupedEntries.js[i];
+                            const code = jsHandler(chunk.source().toString(), {
+                                runtimeSet,
+                                classGenerator
+                            }).code;
+                            const source = new ConcatSource(code);
+                            compilation.updateAsset(file, source);
+                        }
+                    }
+                    if (Array.isArray(groupedEntries.css) && groupedEntries.css.length) {
+                        for (let i = 0; i < groupedEntries.css.length; i++) {
+                            const [file, css] = groupedEntries.css[i];
+                            const newCss = cssHandler(css.source().toString(), {
+                                classGenerator,
+                                runtimeSet
+                            });
+                            const source = new ConcatSource(newCss);
+                            compilation.updateAsset(file, source);
+                        }
+                    }
+                });
+            });
+        }
+    };
+});
+
+module.exports = unplugin;