unplugin-tailwindcss-mangle 0.0.0 → 0.0.2

package/dist/index.mjs

@@ -0,0 +1,488 @@
+import { createUnplugin } from 'unplugin';
+import { getClassCacheSet } from 'tailwindcss-patch';
+import { html, defaultTreeAdapter, parse, serialize } from 'parse5';
+import _generate from '@babel/generator';
+import { parse as parse$1 } from '@babel/parser';
+import _traverse from '@babel/traverse';
+import postcss from 'postcss';
+import parser from 'postcss-selector-parser';
+
+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: html.NS.HTML,
+    XML: html.NS.XML,
+    MATHML: html.NS.MATHML,
+    SVG: html.NS.SVG,
+    XLINK: html.NS.XLINK,
+    XMLNS: 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 = defaultTreeAdapter.isElementNode;
+const isCommentNode = defaultTreeAdapter.isCommentNode;
+const isDocumentTypeNode = defaultTreeAdapter.isDocumentTypeNode;
+const isTextNode = 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));
+}
+
+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 = 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 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);
+const traverse = getDefaultExportFromNamespaceIfPresent(_traverse);
+function jsHandler(rawSource, options) {
+    const ast = parse$1(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((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([
+        postcssMangleTailwindcssPlugin({
+            newClassMap: options.classGenerator.newClassMap
+        })
+    ]).process(rawSource).css;
+}
+
+const unplugin = createUnplugin((options = {}, meta) => {
+    const isMangleClass = (className) => {
+        return /[-:]/.test(className);
+    };
+    let classSet;
+    const classGenerator = new ClassGenerator();
+    function getCachedClassSet() {
+        const set = 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);
+                        }
+                    }
+                });
+            });
+        }
+    };
+});
+
+export { unplugin as default };

package/dist/js/index.d.ts

@@ -0,0 +1,2 @@
+import type { IHandlerOptions } from '../types';
+export declare function jsHandler(rawSource: string, options: IHandlerOptions): import("@babel/generator").GeneratorResult;

package/dist/js/split.d.ts

@@ -0,0 +1,3 @@
+export declare const validateFilterRE: RegExp;
+export declare function isValidSelector(selector?: string): selector is string;
+export declare const splitCode: (code: string) => string[];

package/dist/nuxt.d.ts

@@ -0,0 +1,2 @@
+import type { Options } from './types';
+export default function (options: Options | undefined, nuxt: any): void;

package/dist/nuxt.js

@@ -0,0 +1,49 @@
+'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');
+
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+function __awaiter(thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+}
+
+function nuxt (options = {}, nuxt) {
+    nuxt.hook('webpack:config', (config) => __awaiter(this, void 0, void 0, function* () {
+        config.plugins = config.plugins || [];
+        config.plugins.unshift(index.webpack(options));
+    }));
+    nuxt.hook('vite:extendConfig', (config) => __awaiter(this, void 0, void 0, function* () {
+        config.plugins = config.plugins || [];
+        config.plugins.push(index.vite(options));
+    }));
+}
+
+module.exports = nuxt;

package/dist/nuxt.mjs

@@ -0,0 +1,47 @@
+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';
+
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+function __awaiter(thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+}
+
+function nuxt (options = {}, nuxt) {
+    nuxt.hook('webpack:config', (config) => __awaiter(this, void 0, void 0, function* () {
+        config.plugins = config.plugins || [];
+        config.plugins.unshift(unplugin.webpack(options));
+    }));
+    nuxt.hook('vite:extendConfig', (config) => __awaiter(this, void 0, void 0, function* () {
+        config.plugins = config.plugins || [];
+        config.plugins.push(unplugin.vite(options));
+    }));
+}
+
+export { nuxt as default };

package/dist/rollup.d.ts

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

package/dist/rollup.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 rollup = index.rollup;
+
+module.exports = rollup;

package/dist/rollup.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 rollup = unplugin.rollup;
+
+export { rollup as default };

package/dist/types.d.ts

@@ -0,0 +1,26 @@
+import type ClassGenerator from './classGenerator';
+export interface Options {
+}
+export interface IMangleContextClass {
+    name: string;
+    usedBy: any[];
+}
+export interface IMangleOptions {
+    reserveClassName?: (string | RegExp)[];
+    classGenerator?: (original: string, opts: IMangleOptions, context: Record<string, any>) => string | undefined;
+    log?: boolean;
+    exclude?: (string | RegExp)[];
+    include?: (string | RegExp)[];
+    ignoreClass?: (string | RegExp)[];
+    classPrefix?: string;
+}
+export interface IClassGenerator {
+    newClassMap: Record<string, IMangleContextClass>;
+    newClassSize: number;
+    context: Record<string, any>;
+}
+export type { TraverseOptions } from '@babel/traverse';
+export interface IHandlerOptions {
+    runtimeSet: Set<string>;
+    classGenerator: ClassGenerator;
+}

package/dist/utils.d.ts

@@ -0,0 +1,14 @@
+import type { IMangleOptions, IClassGenerator } from './types';
+export declare function groupBy<T>(arr: T[], cb: (arg: T) => string): Record<string, T[]>;
+export declare function getGroupedEntries<T>(entries: [string, T][], options?: {
+    cssMatcher(file: string): boolean;
+    htmlMatcher(file: string): boolean;
+    jsMatcher(file: string): boolean;
+}): Record<"css" | "html" | "js" | "other", [string, T][]>;
+export declare const acceptChars: string[];
+export declare function stripEscapeSequence(words: string): string;
+export declare const validate: (opts: IMangleOptions, classGenerator: IClassGenerator) => void;
+export declare function isRegexp(value: unknown): boolean;
+export declare function isMap(value: unknown): boolean;
+export declare function regExpTest(arr: (string | RegExp)[] | undefined, str: string): boolean;
+export declare function escapeStringRegexp(str: string): string;

package/dist/vite.d.ts

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