├── .husky
└── pre-commit
├── pnpm-workspace.yaml
├── deps.d.ts
├── .gitignore
├── examples
└── app-router
│ ├── src
│ └── app
│ │ ├── favicon.ico
│ │ ├── fonts
│ │ ├── GeistVF.woff
│ │ └── GeistMonoVF.woff
│ │ ├── globals.css
│ │ ├── layout.tsx
│ │ ├── page.tsx
│ │ └── page.module.css
│ ├── public
│ ├── vercel.svg
│ ├── window.svg
│ ├── file.svg
│ ├── globe.svg
│ └── next.svg
│ ├── next.config.ts
│ ├── package.json
│ ├── .gitignore
│ ├── tsconfig.json
│ └── README.md
├── package
├── tsconfig.json
├── package.json
└── src
│ ├── withClassnamesMinifier.ts
│ └── lib
│ └── injectConfig.ts
├── eslint.config.mjs
├── README.md
├── package.json
├── LICENSE
├── .github
└── workflows
│ └── npm-publish.yml
└── pnpm-lock.yaml
/.husky/pre-commit:
--------------------------------------------------------------------------------
1 | pnpm run lint
2 |
--------------------------------------------------------------------------------
/pnpm-workspace.yaml:
--------------------------------------------------------------------------------
1 | packages:
2 | - 'package'
--------------------------------------------------------------------------------
/deps.d.ts:
--------------------------------------------------------------------------------
1 | declare module "css-loader/dist/utils";
2 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # build
2 | dist
3 | *.tgz
4 |
5 | # dependencies
6 | node_modules
7 | yarn.lock
8 | yarn-error.log
--------------------------------------------------------------------------------
/examples/app-router/src/app/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vordgi/nimpl-classnames-minifier/HEAD/examples/app-router/src/app/favicon.ico
--------------------------------------------------------------------------------
/examples/app-router/src/app/fonts/GeistVF.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vordgi/nimpl-classnames-minifier/HEAD/examples/app-router/src/app/fonts/GeistVF.woff
--------------------------------------------------------------------------------
/examples/app-router/public/vercel.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/examples/app-router/src/app/fonts/GeistMonoVF.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vordgi/nimpl-classnames-minifier/HEAD/examples/app-router/src/app/fonts/GeistMonoVF.woff
--------------------------------------------------------------------------------
/package/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "es2016",
4 | "module": "commonjs",
5 | "esModuleInterop": true,
6 | "forceConsistentCasingInFileNames": true,
7 | "strict": true,
8 | "skipLibCheck": true,
9 | "outDir": "dist",
10 | "rootDir": "src",
11 | "declaration": true
12 | }
13 | }
14 |
--------------------------------------------------------------------------------
/examples/app-router/next.config.ts:
--------------------------------------------------------------------------------
1 | import type { NextConfig } from "next";
2 | import classNamesMinifier from "@nimpl/classnames-minifier";
3 |
4 | const withClassNamesMinifier = classNamesMinifier({
5 | prefix: "_",
6 | });
7 |
8 | const nextConfig: NextConfig = withClassNamesMinifier({
9 | /* config options here */
10 | });
11 |
12 | export default nextConfig;
13 |
--------------------------------------------------------------------------------
/examples/app-router/public/window.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/examples/app-router/public/file.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/examples/app-router/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "base",
3 | "version": "0.1.0",
4 | "private": true,
5 | "scripts": {
6 | "dev": "next dev",
7 | "build": "next build",
8 | "start": "next start",
9 | "lint": "next lint"
10 | },
11 | "dependencies": {
12 | "@nimpl/classnames-minifier": "link:..\\..\\package",
13 | "next": "15.0.1",
14 | "react": "19.0.0-rc-69d4b800-20241021",
15 | "react-dom": "19.0.0-rc-69d4b800-20241021"
16 | },
17 | "devDependencies": {
18 | "@types/node": "^20",
19 | "@types/react": "^18",
20 | "@types/react-dom": "^18",
21 | "typescript": "^5"
22 | }
23 | }
--------------------------------------------------------------------------------
/examples/app-router/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /.pnp
6 | /pnpm-lock.yaml
7 | .pnp.*
8 | .yarn/*
9 | !.yarn/patches
10 | !.yarn/plugins
11 | !.yarn/releases
12 | !.yarn/versions
13 |
14 | # testing
15 | /coverage
16 |
17 | # next.js
18 | /.next/
19 | /out/
20 |
21 | # production
22 | /build
23 |
24 | # misc
25 | .DS_Store
26 | *.pem
27 |
28 | # debug
29 | npm-debug.log*
30 | yarn-debug.log*
31 | yarn-error.log*
32 |
33 | # env files (can opt-in for commiting if needed)
34 | .env*
35 |
36 | # vercel
37 | .vercel
38 |
39 | # typescript
40 | *.tsbuildinfo
41 | next-env.d.ts
42 |
--------------------------------------------------------------------------------
/eslint.config.mjs:
--------------------------------------------------------------------------------
1 | import eslintPluginPrettierRecommended from "eslint-plugin-prettier/recommended";
2 | import tseslint from "typescript-eslint";
3 |
4 | export default [
5 | {
6 | rules: {
7 | "prettier/prettier": [
8 | "error",
9 | {
10 | endOfLine: "auto",
11 | tabWidth: 4,
12 | printWidth: 120,
13 | arrowParens: "always",
14 | },
15 | ],
16 | },
17 | },
18 | ...tseslint.configs.recommended,
19 | eslintPluginPrettierRecommended,
20 | {
21 | ignores: ["**/node_modules/**", "**/dist/**", "**/.next/**"],
22 | },
23 | ];
24 |
--------------------------------------------------------------------------------
/examples/app-router/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "ES2017",
4 | "lib": ["dom", "dom.iterable", "esnext"],
5 | "allowJs": true,
6 | "skipLibCheck": true,
7 | "strict": true,
8 | "noEmit": true,
9 | "esModuleInterop": true,
10 | "module": "esnext",
11 | "moduleResolution": "bundler",
12 | "resolveJsonModule": true,
13 | "isolatedModules": true,
14 | "jsx": "preserve",
15 | "incremental": true,
16 | "plugins": [
17 | {
18 | "name": "next"
19 | }
20 | ],
21 | "paths": {
22 | "@/*": ["./src/*"]
23 | }
24 | },
25 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
26 | "exclude": ["node_modules"]
27 | }
28 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # @nimpl/classnames-minifier
2 |
3 | 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. The package itself synchronizes minified classnames with components of the application compiled earlier.
4 |
5 | Visit https://nimpl.dev/docs/classnames-minifier to view the full documentation.
6 |
7 | ## Installation
8 |
9 | **Using npm:**
10 | ```bash
11 | npm i @nimpl/classnames-minifier
12 | ```
13 |
14 | **Using yarn:**
15 | ```bash
16 | yarn add @nimpl/classnames-minifier
17 | ```
18 |
19 | ## License
20 |
21 | [MIT](https://github.com/vordgi/nimpl-classnames-minifier/blob/main/LICENSE)
22 |
--------------------------------------------------------------------------------
/examples/app-router/src/app/globals.css:
--------------------------------------------------------------------------------
1 | :root {
2 | --background: #ffffff;
3 | --foreground: #171717;
4 | }
5 |
6 | @media (prefers-color-scheme: dark) {
7 | :root {
8 | --background: #0a0a0a;
9 | --foreground: #ededed;
10 | }
11 | }
12 |
13 | html,
14 | body {
15 | max-width: 100vw;
16 | overflow-x: hidden;
17 | }
18 |
19 | body {
20 | color: var(--foreground);
21 | background: var(--background);
22 | font-family: Arial, Helvetica, sans-serif;
23 | -webkit-font-smoothing: antialiased;
24 | -moz-osx-font-smoothing: grayscale;
25 | }
26 |
27 | * {
28 | box-sizing: border-box;
29 | padding: 0;
30 | margin: 0;
31 | }
32 |
33 | a {
34 | color: inherit;
35 | text-decoration: none;
36 | }
37 |
38 | @media (prefers-color-scheme: dark) {
39 | html {
40 | color-scheme: dark;
41 | }
42 | }
43 |
--------------------------------------------------------------------------------
/examples/app-router/src/app/layout.tsx:
--------------------------------------------------------------------------------
1 | import type { Metadata } from "next";
2 | import localFont from "next/font/local";
3 | import "./globals.css";
4 |
5 | const geistSans = localFont({
6 | src: "./fonts/GeistVF.woff",
7 | variable: "--font-geist-sans",
8 | weight: "100 900",
9 | });
10 | const geistMono = localFont({
11 | src: "./fonts/GeistMonoVF.woff",
12 | variable: "--font-geist-mono",
13 | weight: "100 900",
14 | });
15 |
16 | export const metadata: Metadata = {
17 | title: "Create Next App",
18 | description: "Generated by create next app",
19 | };
20 |
21 | export default function RootLayout({
22 | children,
23 | }: Readonly<{
24 | children: React.ReactNode;
25 | }>) {
26 | return (
27 |
28 | {children}
29 |
30 | );
31 | }
32 |
--------------------------------------------------------------------------------
/examples/app-router/public/globe.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "nimpl-classnames-minifier",
3 | "version": "1.0.0",
4 | "description": "",
5 | "scripts": {
6 | "nimpl:classnames-minifier": "pnpm --filter @nimpl/classnames-minifier",
7 | "lint": "eslint \"package/\"",
8 | "eslint": "eslint",
9 | "prettier": "prettier",
10 | "prepare": "husky"
11 | },
12 | "repository": {
13 | "type": "git",
14 | "url": "git://github.com/vordgi/nimpl-classnames-minifier.git"
15 | },
16 | "author": {
17 | "name": "Savelyev Alexander",
18 | "email": "vordgi1@gmail.com",
19 | "url": "https://github.com/vordgi/"
20 | },
21 | "devDependencies": {
22 | "eslint": "9.13.0",
23 | "eslint-config-prettier": "9.1.0",
24 | "eslint-plugin-prettier": "5.2.1",
25 | "husky": "9.1.6",
26 | "prettier": "3.3.3",
27 | "typescript-eslint": "8.11.0"
28 | },
29 | "license": "MIT",
30 | "packageManager": "pnpm@10.8.0+sha512.0e82714d1b5b43c74610193cb20734897c1d00de89d0e18420aebc5977fa13d780a9cb05734624e81ebd81cc876cd464794850641c48b9544326b5622ca29971"
31 | }
32 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2021 Alexander Savelyev
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/package/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@nimpl/classnames-minifier",
3 | "version": "4.0.1",
4 | "description": "Library for configuring style modules to generate compressed classes",
5 | "main": "dist/withClassnamesMinifier.js",
6 | "types": "dist/withClassnamesMinifier.d.ts",
7 | "files": [
8 | "dist"
9 | ],
10 | "scripts": {
11 | "build": "tsc"
12 | },
13 | "keywords": [
14 | "next",
15 | "next.js",
16 | "classname",
17 | "class",
18 | "minify",
19 | "compress",
20 | "cut",
21 | "css",
22 | "sass",
23 | "scss",
24 | "modules"
25 | ],
26 | "repository": {
27 | "type": "git",
28 | "url": "git://github.com/vordgi/nimpl-classnames-minifier.git"
29 | },
30 | "author": {
31 | "name": "Savelyev Alexander",
32 | "email": "vordgi1@gmail.com",
33 | "url": "https://github.com/vordgi/"
34 | },
35 | "license": "MIT",
36 | "devDependencies": {
37 | "@types/node": "22.8.1",
38 | "@types/uuid": "10.0.0",
39 | "@types/webpack": "5.28.5",
40 | "css-loader": "7.1.2",
41 | "typescript": "5.6.3"
42 | },
43 | "peerDependencies": {
44 | "css-loader": ">=4.0.0"
45 | },
46 | "dependencies": {
47 | "classnames-minifier": "1.0.0",
48 | "uuid": "10.0.0"
49 | }
50 | }
--------------------------------------------------------------------------------
/examples/app-router/public/next.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/.github/workflows/npm-publish.yml:
--------------------------------------------------------------------------------
1 | name: Publish package
2 |
3 | on:
4 | release:
5 | types: [created]
6 |
7 | jobs:
8 | publish:
9 | runs-on: ubuntu-latest
10 |
11 | steps:
12 | - name: Checkout code
13 | uses: actions/checkout@v4
14 |
15 | - name: Set up Node.js
16 | uses: actions/setup-node@v3
17 | with:
18 | node-version: "20"
19 |
20 | - name: Install pnpm
21 | uses: pnpm/action-setup@v3
22 | with:
23 | version: 8
24 |
25 | - name: Install dependencies and build
26 | run: |
27 | pnpm install
28 | pnpm run build
29 | cp ../README.md .
30 | cp ../LICENSE .
31 | working-directory: ./package
32 |
33 | - name: Publish on main
34 | if: "!contains(github.ref_name, 'canary')"
35 | run: |
36 | npm set //registry.npmjs.org/:_authToken=${{secrets.NPM_TOKEN}}
37 | npm publish --access public
38 | working-directory: ./package
39 |
40 | - name: Publish on canary
41 | if: contains(github.ref_name, 'canary')
42 | run: |
43 | npm set //registry.npmjs.org/:_authToken=${{secrets.NPM_TOKEN}}
44 | npm version --no-git-tag-version ${{github.ref_name}}
45 | npm publish --tag canary --access public
46 | working-directory: ./package
47 |
--------------------------------------------------------------------------------
/examples/app-router/README.md:
--------------------------------------------------------------------------------
1 | This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
2 |
3 | ## Getting Started
4 |
5 | First, run the development server:
6 |
7 | ```bash
8 | npm run dev
9 | # or
10 | yarn dev
11 | # or
12 | pnpm dev
13 | # or
14 | bun dev
15 | ```
16 |
17 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
18 |
19 | You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
20 |
21 | This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
22 |
23 | ## Learn More
24 |
25 | To learn more about Next.js, take a look at the following resources:
26 |
27 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
28 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
29 |
30 | You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
31 |
32 | ## Deploy on Vercel
33 |
34 | The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
35 |
36 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
37 |
--------------------------------------------------------------------------------
/package/src/withClassnamesMinifier.ts:
--------------------------------------------------------------------------------
1 | /* eslint-disable @typescript-eslint/no-explicit-any */
2 | import type { Configuration } from "webpack";
3 | import type { Config } from "classnames-minifier/dist/lib/types/plugin";
4 | import ClassnamesMinifier from "classnames-minifier";
5 | import path from "path";
6 | import fs from "fs";
7 |
8 | import injectConfig from "./lib/injectConfig";
9 |
10 | type PluginOptions = Omit & { disabled?: boolean };
11 |
12 | let classnamesMinifier: ClassnamesMinifier;
13 |
14 | const withClassnameMinifier = (pluginOptions: PluginOptions = {}) => {
15 | return (nextConfig: any = {}) => {
16 | if (pluginOptions.disabled) return nextConfig;
17 |
18 | if (!classnamesMinifier) {
19 | const distDir = nextConfig?.distDir || ".next";
20 | const distDirAbsolute = path.join(process.cwd(), distDir);
21 | const cacheDir = path.join(distDirAbsolute, "cache/ncm");
22 | classnamesMinifier = new ClassnamesMinifier({
23 | prefix: pluginOptions.prefix,
24 | reservedNames: pluginOptions.reservedNames,
25 | distDeletionPolicy: pluginOptions.distDeletionPolicy,
26 | experimental: pluginOptions.experimental,
27 | distDir: distDirAbsolute,
28 | checkDistFreshness: () => {
29 | return !fs.existsSync(".next/build-manifest.json");
30 | },
31 | cacheDir,
32 | });
33 | }
34 |
35 | return {
36 | ...nextConfig,
37 | webpack: (config: Configuration, options: any) => {
38 | injectConfig({ classnamesMinifier }, config.module?.rules);
39 |
40 | if (typeof nextConfig.webpack === "function") {
41 | return nextConfig.webpack(config, options);
42 | }
43 |
44 | return config;
45 | },
46 | };
47 | };
48 | };
49 |
50 | export default withClassnameMinifier;
51 |
--------------------------------------------------------------------------------
/package/src/lib/injectConfig.ts:
--------------------------------------------------------------------------------
1 | import type { RuleSetUseItem, ModuleOptions } from "webpack";
2 | import type ClassnamesMinifier from "classnames-minifier";
3 |
4 | export type InjectConfig = {
5 | localIdentName?: string;
6 | classnamesMinifier: ClassnamesMinifier;
7 | };
8 |
9 | const injectConfig = (config: InjectConfig, rules?: ModuleOptions["rules"]) => {
10 | if (!rules) return;
11 |
12 | const oneOfRule = rules?.find((rule) => typeof rule === "object" && typeof rule?.oneOf === "object");
13 |
14 | if (oneOfRule && typeof oneOfRule === "object") {
15 | const testCssLoaderWithModules = (loaderObj: RuleSetUseItem) =>
16 | typeof loaderObj === "object" &&
17 | loaderObj?.loader?.match("css-loader") &&
18 | typeof loaderObj.options === "object" &&
19 | loaderObj.options.modules;
20 | const testFontLoader = (loaderObj: RuleSetUseItem) =>
21 | typeof loaderObj === "object" && loaderObj?.loader?.match("next-font-loader");
22 | oneOfRule.oneOf?.forEach((rule) => {
23 | if (rule && Array.isArray(rule.use)) {
24 | let cssLoaderIndex = null as null | number;
25 | for (let i = rule.use.length - 1; i >= 0; i--) {
26 | const loaderObj = rule.use[i];
27 |
28 | if (!loaderObj) continue;
29 |
30 | /**
31 | * Next.js has special logic for generating font classes,
32 | * so we don't change the rules that work with fonts and, as a result, do not minify font classes
33 | */
34 | if (testFontLoader(loaderObj)) break;
35 |
36 | if (testCssLoaderWithModules(loaderObj)) {
37 | if (typeof loaderObj !== "object" || typeof loaderObj.options !== "object") continue;
38 | cssLoaderIndex = i;
39 | loaderObj.options.modules.getLocalIdent = config.classnamesMinifier.getLocalIdent;
40 | }
41 | }
42 |
43 | if (cssLoaderIndex !== null) {
44 | rule.use.splice(
45 | cssLoaderIndex,
46 | 1,
47 | config.classnamesMinifier.postLoader,
48 | rule.use[cssLoaderIndex],
49 | config.classnamesMinifier.preLoader,
50 | );
51 | }
52 | }
53 | });
54 | }
55 | };
56 |
57 | export default injectConfig;
58 |
--------------------------------------------------------------------------------
/examples/app-router/src/app/page.tsx:
--------------------------------------------------------------------------------
1 | import Image from "next/image";
2 | import styles from "./page.module.css";
3 |
4 | export default function Home() {
5 | return (
6 |
7 |
8 |
9 |
10 | -
11 | Get started by editing
src/app/page.tsx.
12 |
13 | - Save and see your changes instantly.
14 |
15 |
16 |
35 |
36 |
62 |