classnames-minifier 0.0.0-experimental-6b8a553

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 Alex Savelyev <dev@alexdln.com>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,83 @@
+# classnames-minifier
+
+[![npm version](https://badge.fury.io/js/classnames-minifier.svg)](https://badge.fury.io/js/classnames-minifier)
+
+Library for configuring style _(css/scss/sass)_ modules to generate compressed classes (`.header` -> `.a`, `.nav` -> `.b`, ..., `.footer` -> `.aad`, etc.) with support for changes and rebuilding without clearing the built application.
+
+## Reasons
+
+_Compressing classes_ can reduce the size of the generated html and css by up to _20%_, which will have a positive effect on page rendering and metrics (primarily [FCP](https://web.dev/first-contentful-paint/))
+
+## Installation
+
+**Using npm:**
+
+```bash
+npm i classnames-minifier
+```
+
+**Using yarn:**
+
+```bash
+yarn add classnames-minifier
+```
+
+## Configuration
+
+### Options
+
+- `prefix` - custom prefix that will be added to each updated class;
+- `reservedNames` - array of reserved names that should not be used by this package (must include prefix);
+- `cacheDir` - directory where this library will write the cache. Passing this parameter will enable caching. Use this option only if your framework really needs it;
+- `distDir` - directory where the project is being assembled. Used only when caching is enabled to synchronize caches between this library and the project;
+- `disableDistDeletion` - option that allows you to disable the automatic deletion of the dist folder if necessary (_f.e. differences in package setup in cache and now or first launch_);
+
+Configuration example:
+
+```js
+// webpack.config.js
+const classnamesMinifier = new ClassnamesMinifier({
+  prefix: "_",
+  reservedNames: ["_en", "_de"],
+});
+// ...
+loaders.push({
+  loader: require.resolve("css-loader"),
+  options: {
+    importLoaders: 3,
+    modules: {
+      mode: "local",
+      getLocalIdent: classnamesMinifier.getLocalIdent,
+    },
+  },
+});
+```
+
+If the framework you are using utilizes component caching between builds, you can configure caching in classnames-minifier as well. As a result, module classes between builds will use the same compressed classes.
+
+```js
+// webpack.config.js
+const classnamesMinifier = new ClassnamesMinifier({
+  distDir: path.join(process.cwd(), "build"),
+  cacheDir: path.join(process.cwd(), "build/cache"),
+});
+// ...
+loaders.push(
+  classnamesMinifier.postLoader,
+  {
+    loader: require.resolve("css-loader"),
+    options: {
+      importLoaders: 3,
+      modules: {
+        mode: "local",
+        getLocalIdent: classnamesMinifier.getLocalIdent,
+      },
+    },
+  },
+  classnamesMinifier.preLoader
+);
+```
+
+## License
+
+[MIT](https://github.com/alexdln/classnames-minifier/blob/main/LICENSE)

package/dist/cjs/ClassnamesMinifier.d.ts

@@ -0,0 +1,21 @@
+import type { LoaderContext } from "webpack";
+import type { Config } from "./lib/types/plugin";
+import ConverterMinified from "./lib/ConverterMinified";
+declare class ClassnamesMinifier {
+    converterMinified: ConverterMinified;
+    constructor(config: Config);
+    get getLocalIdent(): ({ resourcePath }: LoaderContext<any>, _localIdent: string, origName: string) => string;
+    get preLoader(): {
+        loader: string;
+        options: {
+            classnamesMinifier: ConverterMinified;
+        };
+    };
+    get postLoader(): {
+        loader: string;
+        options: {
+            classnamesMinifier: ConverterMinified;
+        };
+    };
+}
+export default ClassnamesMinifier;

package/dist/cjs/ClassnamesMinifier.js

@@ -0,0 +1,83 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const fs_1 = __importDefault(require("fs"));
+const path_1 = __importDefault(require("path"));
+const configuration_1 = require("./lib/constants/configuration");
+const validateConfig_1 = __importDefault(require("./lib/validateConfig"));
+const ConverterMinified_1 = __importDefault(require("./lib/ConverterMinified"));
+const validateDist_1 = __importDefault(require("./lib/validateDist"));
+const removeDist_1 = __importDefault(require("./lib/removeDist"));
+class ClassnamesMinifier {
+    constructor(config) {
+        (0, validateConfig_1.default)(config);
+        this.converterMinified = new ConverterMinified_1.default(config);
+        if (!config.cacheDir || !config.distDir) {
+            console.log("classnames-minifier: Failed to check the dist folder because cacheDir or distDir is not specified");
+        }
+        else {
+            const manifestDir = path_1.default.join(config.cacheDir, "ncm-meta");
+            const manifestPath = path_1.default.join(manifestDir, "manifest.json");
+            const { distDeletionPolicy = "error" } = config;
+            let distCleared = false;
+            if (config.cacheDir) {
+                const errors = (0, validateDist_1.default)(config, manifestPath);
+                if (errors) {
+                    console.log(`classnames-minifier: "distDeletionPolicy" option was set to "${distDeletionPolicy}"`);
+                    if (distDeletionPolicy === "auto") {
+                        (0, removeDist_1.default)(config.distDir, errors);
+                        distCleared = true;
+                    }
+                    else if (distDeletionPolicy === "error") {
+                        throw new Error(`classnames-minifier: Please, remove dist dir manually. ${errors}`);
+                    }
+                    else {
+                        console.warn(`classnames-minifier: Please, remove dist dir manually. ${errors}`);
+                    }
+                }
+            }
+            const { syncFreedNames, freedNamesLimit = 100000 } = config.experimental || {};
+            if (!syncFreedNames && this.converterMinified.freeClasses.length > freedNamesLimit && config.distDir) {
+                console.log(`classnames-minifier: "distDeletionPolicy" option was set to "${distDeletionPolicy}"`);
+                if (distDeletionPolicy === "auto") {
+                    (0, removeDist_1.default)(config.distDir, `Freed names exceeds the limit (${freedNamesLimit})`);
+                    distCleared = true;
+                }
+                else if (distDeletionPolicy === "error") {
+                    throw new Error(`Please, remove dist dir manually. Freed names exceeds the limit (${freedNamesLimit})`);
+                }
+                else {
+                    console.warn(`Please, remove dist dir manually. Freed names exceeds the limit (${freedNamesLimit})`);
+                }
+            }
+            if (distCleared) {
+                this.converterMinified.reset();
+            }
+            if (!fs_1.default.existsSync(manifestDir))
+                fs_1.default.mkdirSync(manifestDir, { recursive: true });
+            fs_1.default.writeFileSync(manifestPath, JSON.stringify(Object.assign(Object.assign({}, config), { version: configuration_1.CODE_VERSION })), { encoding: "utf-8" });
+        }
+    }
+    get getLocalIdent() {
+        return this.converterMinified.getLocalIdent.bind(this.converterMinified);
+    }
+    get preLoader() {
+        return {
+            loader: path_1.default.join(__dirname, "./lib/classnames-minifier-preloader.js"),
+            options: {
+                classnamesMinifier: this.converterMinified,
+            },
+        };
+    }
+    get postLoader() {
+        return {
+            loader: path_1.default.join(__dirname, "./lib/classnames-minifier-postloader.js"),
+            options: {
+                classnamesMinifier: this.converterMinified,
+            },
+        };
+    }
+}
+exports.default = ClassnamesMinifier;

package/dist/cjs/lib/ConverterMinified.d.ts

@@ -0,0 +1,31 @@
+import type { LoaderContext } from "webpack";
+import type { Config } from "./types/plugin";
+type CacheType = {
+    [resourcePath: string]: {
+        cachePath: string;
+        matchings: {
+            [origClass: string]: string;
+        };
+        type: "new" | "updated" | "old";
+    };
+};
+declare class ConverterMinified {
+    private cacheDir?;
+    private prefix;
+    private reservedNames;
+    private syncFreedNames;
+    private symbols;
+    dirtyСache: CacheType;
+    freeClasses: string[];
+    lastIndex: number;
+    private nextLoopEndsWith;
+    private currentLoopLength;
+    private nameMap;
+    constructor({ cacheDir, prefix, reservedNames, experimental }: Config);
+    reset: () => void;
+    private invalidateCache;
+    private generateClassName;
+    private getTargetClassName;
+    getLocalIdent({ resourcePath }: LoaderContext<any>, _localIdent: string, origName: string): string;
+}
+export default ConverterMinified;

package/dist/cjs/lib/ConverterMinified.js

@@ -0,0 +1,208 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const fs_1 = require("fs");
+const uuid_1 = require("uuid");
+const path_1 = __importDefault(require("path"));
+class ConverterMinified {
+    constructor({ cacheDir, prefix = "", reservedNames = [], experimental }) {
+        this.symbols = [
+            "a",
+            "b",
+            "c",
+            "d",
+            "e",
+            "f",
+            "g",
+            "h",
+            "i",
+            "j",
+            "k",
+            "l",
+            "m",
+            "n",
+            "o",
+            "p",
+            "q",
+            "r",
+            "s",
+            "t",
+            "u",
+            "v",
+            "w",
+            "x",
+            "y",
+            "z",
+            "A",
+            "B",
+            "C",
+            "D",
+            "E",
+            "F",
+            "G",
+            "H",
+            "I",
+            "J",
+            "K",
+            "L",
+            "M",
+            "N",
+            "O",
+            "P",
+            "Q",
+            "R",
+            "S",
+            "T",
+            "U",
+            "V",
+            "W",
+            "X",
+            "Y",
+            "Z",
+            "0",
+            "1",
+            "2",
+            "3",
+            "4",
+            "5",
+            "6",
+            "7",
+            "8",
+            "9",
+        ];
+        this.dirtyСache = {};
+        this.freeClasses = [];
+        this.lastIndex = 0;
+        this.nextLoopEndsWith = 26;
+        this.currentLoopLength = 0;
+        this.nameMap = [0];
+        this.reset = () => {
+            this.dirtyСache = {};
+            this.freeClasses = [];
+            this.lastIndex = 0;
+            this.nextLoopEndsWith = 26;
+            this.currentLoopLength = 0;
+            this.nameMap = [0];
+            if (this.cacheDir) {
+                this.invalidateCache(this.cacheDir);
+            }
+        };
+        this.invalidateCache = (cacheDir) => {
+            this.cacheDir = cacheDir;
+            if (!(0, fs_1.existsSync)(cacheDir))
+                (0, fs_1.mkdirSync)(cacheDir, { recursive: true });
+            const cachedFiles = (0, fs_1.readdirSync)(cacheDir);
+            if (cachedFiles.length) {
+                console.log("classnames-minifier: Restoring pairs of classes...");
+            }
+            else {
+                return;
+            }
+            const usedClassNames = [];
+            const dirtyСache = {};
+            let prevLastIndex = 0;
+            cachedFiles.forEach((file) => {
+                const filePath = path_1.default.join(cacheDir, file);
+                const dirtyCacheFile = (0, fs_1.readFileSync)(filePath, { encoding: "utf8" });
+                const [resourcePath, lastIndex, ...classnames] = dirtyCacheFile.split(",");
+                if (lastIndex && +lastIndex > prevLastIndex)
+                    prevLastIndex = +lastIndex;
+                if ((0, fs_1.existsSync)(resourcePath)) {
+                    const cachedMatchings = classnames.reduce((acc, cur) => {
+                        const [origClass, newClass] = cur.split("=");
+                        acc[origClass] = newClass;
+                        if (!usedClassNames.includes(newClass)) {
+                            usedClassNames.push(newClass);
+                        }
+                        return acc;
+                    }, {});
+                    dirtyСache[resourcePath] = {
+                        cachePath: filePath,
+                        matchings: cachedMatchings,
+                        type: "old",
+                    };
+                }
+                else {
+                    (0, fs_1.rmSync)(filePath);
+                }
+            });
+            for (let i = 0; i <= prevLastIndex; i++) {
+                const newClass = this.generateClassName();
+                this.lastIndex += 1;
+                const usedClassNameIndex = usedClassNames.indexOf(newClass);
+                if (usedClassNameIndex !== -1) {
+                    usedClassNames.splice(usedClassNameIndex, 1);
+                }
+                else if (!this.reservedNames.includes(newClass)) {
+                    this.freeClasses.push(newClass);
+                }
+            }
+            if (cachedFiles.length) {
+                console.log("classnames-minifier: Pairs restored");
+            }
+            this.dirtyСache = dirtyСache;
+        };
+        this.prefix = prefix;
+        this.reservedNames = reservedNames;
+        this.syncFreedNames = Boolean(experimental === null || experimental === void 0 ? void 0 : experimental.syncFreedNames);
+        if (cacheDir)
+            this.invalidateCache(path_1.default.join(cacheDir, "ncm"));
+    }
+    generateClassName() {
+        const symbolsCount = 62;
+        if (this.lastIndex >= this.nextLoopEndsWith) {
+            if (this.nextLoopEndsWith === 26)
+                this.nextLoopEndsWith = 62 * symbolsCount;
+            else
+                this.nextLoopEndsWith = this.nextLoopEndsWith * symbolsCount;
+            this.nameMap.push(0);
+            this.currentLoopLength += 1;
+        }
+        const currentClassname = this.prefix + this.nameMap.map((e) => this.symbols[e]).join("");
+        for (let i = this.currentLoopLength; i >= 0; i--) {
+            if (this.nameMap[i] === symbolsCount - 1 || (i === 0 && this.nameMap[i] === 25)) {
+                this.nameMap[i] = 0;
+            }
+            else {
+                this.nameMap[i] += 1;
+                break;
+            }
+        }
+        return currentClassname;
+    }
+    getTargetClassName(origName) {
+        let targetClassName;
+        if (this.freeClasses.length && this.syncFreedNames) {
+            targetClassName = this.freeClasses.shift();
+        }
+        else {
+            targetClassName = this.generateClassName();
+        }
+        if (this.reservedNames.includes(targetClassName)) {
+            targetClassName = this.getTargetClassName(origName);
+            this.lastIndex += 1;
+        }
+        return targetClassName;
+    }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    getLocalIdent({ resourcePath }, _localIdent, origName) {
+        if (!this.dirtyСache[resourcePath]) {
+            this.dirtyСache[resourcePath] = {
+                cachePath: this.cacheDir ? path_1.default.join(this.cacheDir, (0, uuid_1.v4)()) : "",
+                matchings: {},
+                type: "new",
+            };
+        }
+        const currentCache = this.dirtyСache[resourcePath];
+        if (currentCache.matchings[origName])
+            return currentCache.matchings[origName];
+        const targetClassName = this.getTargetClassName(origName);
+        currentCache.matchings[origName] = targetClassName;
+        currentCache.type = "updated";
+        this.lastIndex += 1;
+        return targetClassName;
+    }
+}
+exports.default = ConverterMinified;

package/dist/cjs/lib/classnames-minifier-postloader.d.ts

@@ -0,0 +1,5 @@
+import type { LoaderContext } from "webpack";
+import type ConverterMinified from "./ConverterMinified";
+export default function (this: LoaderContext<{
+    classnamesMinifier: ConverterMinified;
+}>, source: string, map: any, meta: any): void;

package/dist/cjs/lib/classnames-minifier-postloader.js

@@ -0,0 +1,20 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = default_1;
+const fs_1 = __importDefault(require("fs"));
+function default_1(source, map, meta) {
+    const options = this.getOptions();
+    const classnamesMinifier = options.classnamesMinifier;
+    Object.entries(classnamesMinifier.dirtyСache).forEach(([resourcePath, data]) => {
+        if (data.type !== "old") {
+            fs_1.default.writeFileSync(data.cachePath, `${resourcePath},${classnamesMinifier.lastIndex},${Object.entries(data.matchings)
+                .map(([key, value]) => `${key}=${value}`)
+                .join(",")}`);
+        }
+    });
+    this.callback(null, source, map, meta);
+    return;
+}

package/dist/cjs/lib/classnames-minifier-preloader.d.ts

@@ -0,0 +1,5 @@
+import type { LoaderContext } from "webpack";
+import type ConverterMinified from "./ConverterMinified";
+export default function (this: LoaderContext<{
+    classnamesMinifier: ConverterMinified;
+}>, source: string, map: any, meta: any): void;

package/dist/cjs/lib/classnames-minifier-preloader.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = default_1;
+function default_1(source, map, meta) {
+    const options = this.getOptions();
+    const classnamesMinifier = options.classnamesMinifier;
+    const maybeClassesList = source.match(/\.-?[_a-zA-Z]+[_a-zA-Z0-9-]*/g);
+    const cache = classnamesMinifier.dirtyСache[this.resourcePath];
+    /**
+     * if some class has ceased to be used since the last time the file was loaded, we remove it from the cache
+     */
+    if (cache && cache.matchings) {
+        cache.matchings = maybeClassesList
+            ? Object.fromEntries(Object.entries(cache.matchings).filter(([key]) => maybeClassesList === null || maybeClassesList === void 0 ? void 0 : maybeClassesList.includes(`.${key}`)))
+            : {};
+    }
+    this.callback(null, source, map, meta);
+    return;
+}

package/dist/cjs/lib/constants/configuration.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Just a version of the code whose change means that the logic has a critical update
+ * and minifying the previous version is not compatible with the current one,
+ * which would mean that we should clean dist folder
+ */
+export declare const CODE_VERSION = "parrot";

package/dist/cjs/lib/constants/configuration.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CODE_VERSION = void 0;
+/**
+ * Just a version of the code whose change means that the logic has a critical update
+ * and minifying the previous version is not compatible with the current one,
+ * which would mean that we should clean dist folder
+ */
+exports.CODE_VERSION = "parrot";

package/dist/cjs/lib/removeDist.d.ts

@@ -0,0 +1,2 @@
+declare const removeDist: (distDir: string, message: string) => void;
+export default removeDist;

package/dist/cjs/lib/removeDist.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const fs_1 = require("fs");
+const removeDist = (distDir, message) => {
+    console.log(`classnames-minifier: ${message}Cleaning the dist folder...`);
+    (0, fs_1.rmSync)(distDir, { recursive: true, force: true });
+    console.log("classnames-minifier: Dist folder cleared");
+};
+exports.default = removeDist;

package/dist/cjs/lib/types/plugin.d.ts

@@ -0,0 +1,60 @@
+export type Config = {
+    /**
+     * The directory where the package cache will be written
+     */
+    cacheDir?: string;
+    /**
+     * Directory where the project is built
+     */
+    distDir?: string;
+    /**
+     * Prefix which will be added to each generated name
+     */
+    prefix?: string;
+    /**
+     * Reserved minified names. Use this option if you are adding short classes manually
+     */
+    reservedNames?: string[];
+    /**
+     * Package policy to resolve potential problems with minified classes
+     *
+     * This may happen due to the following reasons:
+     *
+     * 1. Launching the package for the first time. Package need clean next.js cache to put everything in the correct order
+     * 2. Changing the package configuration. Package need clean next.js cache to rebuild it with classes according to the new rules
+     * 3. Exceeding the limit on freed classes (these are classes that were used before, but are now *probably* no longer used)
+     *
+     * @param "warning" - a warning message will simply be displayed.
+     * With this option, there is a high risk of errors and duplicates of generated classes.
+     *
+     * @param "error" - an error will be thrown, and as a result the build will stop.
+     * If this option occurs, delete the next.js cache manually and restart the build.
+     *
+     * @param "auto" - the package will automatically delete the next.js cache directory.
+     *
+     * @default "error"
+     */
+    distDeletionPolicy?: "warning" | "error" | "auto";
+    /**
+     * Additional check of the dist directory for freshness
+     */
+    checkDistFreshness?: () => boolean;
+    experimental?: {
+        /**
+         * Automatically synchronize freed classes (for example, if you deleted the original styles)
+         * Such classes will be reused in new locations. In this case, there may be situations that the package
+         * will mistakenly consider them freed and reuse the class again, thereby creating duplicates.
+         *
+         * Be careful using this option
+         * @default false
+         */
+        syncFreedNames?: boolean;
+        /**
+         * Limit of unused minified classes. Such classes are not reused by default,
+         * since the package cannot be sure of this at this time.
+         *
+         * @default 100000
+         */
+        freedNamesLimit?: number;
+    };
+};

package/dist/cjs/lib/types/plugin.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/cjs/lib/validateConfig.d.ts

@@ -0,0 +1,3 @@
+import type { Config } from "./types/plugin";
+declare const validateConfig: (config?: unknown) => Config;
+export default validateConfig;

package/dist/cjs/lib/validateConfig.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const validKeys = [
+    "prefix",
+    "reservedNames",
+    "cacheDir",
+    "distDir",
+    "distDeletionPolicy",
+    "experimental",
+    "checkDistFreshness",
+];
+const validateIsObject = (config) => {
+    if (!config)
+        return false;
+    if (typeof config !== "object" || Array.isArray(config)) {
+        console.error(`classnames-minifier: Invalid configuration. Expected object, received ${typeof config}. See https://github.com/alexdln/classnames-minifier#configuration`);
+        process.exit();
+    }
+    const isValidKeys = Object.keys(config).every((key) => validKeys.includes(key));
+    if (!isValidKeys) {
+        console.error(`classnames-minifier: Invalid configuration. Valid keys are: ${validKeys.join(", ")}. See https://github.com/alexdln/classnames-minifier#configuration`);
+        process.exit();
+    }
+    return true;
+};
+const validateConfig = (config = {}) => {
+    if (!validateIsObject(config))
+        return {};
+    if (config.prefix && !config.prefix.match(/^-?[_a-zA-Z]+[_a-zA-Z0-9-]*$/)) {
+        console.error(`classnames-minifier: Invalid prefix. It should match following rule: "^-?[_a-zA-Z]+[_a-zA-Z0-9-]*$". See https://github.com/alexdln/classnames-minifier#configuration`);
+        process.exit();
+    }
+    return config;
+};
+exports.default = validateConfig;

package/dist/cjs/lib/validateDist.d.ts

@@ -0,0 +1,3 @@
+import type { Config } from "./types/plugin";
+declare const validateDist: (pluginOptions: Config, manifestPath: string) => string | undefined;
+export default validateDist;