From 820087491266128043c816e1d8dc27cd5962b8b1 Mon Sep 17 00:00:00 2001
From: coderiaser <coderaiser@cloudcmd.io>
Date: Sun, 6 Jul 2025 15:01:50 +0300
Subject: [PATCH] feature: cloudcmd: optimize-css-assets-webpack-plugin ->
 css-minimizer-webpack-plugin

---
 .webpack/css.js         |  6 ------
 .webpack/js.js          | 13 +++++++++++++
 package.json            |  2 +-
 server/columns.spec.mjs |  7 ++++---
 server/themes.spec.mjs  |  7 ++++---
 5 files changed, 22 insertions(+), 13 deletions(-)

diff --git a/.webpack/css.js b/.webpack/css.js
index 2d3faf55..900269dd 100644
--- a/.webpack/css.js
+++ b/.webpack/css.js
@@ -1,19 +1,13 @@
 'use strict';
 
-const {env} = require('node:process');
-
-const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 
-const isDev = env.NODE_ENV === 'development';
-
 const clean = (a) => a.filter(Boolean);
 
 const plugins = clean([
     new MiniCssExtractPlugin({
         filename: '[name].css',
     }),
-    !isDev && new OptimizeCssAssetsPlugin(),
 ]);
 
 const rules = [{
diff --git a/.webpack/js.js b/.webpack/js.js
index 814146c5..51fd2628 100644
--- a/.webpack/js.js
+++ b/.webpack/js.js
@@ -13,6 +13,7 @@ const {
 } = require('webpack');
 
 const WebpackBar = require('webpackbar');
+const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
 
 const modules = './modules';
 const dirModules = './client/modules';
@@ -105,6 +106,18 @@ module.exports = {
     devtool,
     optimization: {
         splitChunks,
+        minimize: true,
+        minimizer: [
+            new CssMinimizerPlugin({
+                minimizerOptions: {
+                    preset: ['default', {
+                        discardComments: {
+                            removeAll: true,
+                        },
+                    }],
+                },
+            }),
+        ],
     },
     entry: {
         'themes/dark': `${dirThemes}/dark.css`,
diff --git a/package.json b/package.json
index 0f8ec91d..b3ce8a1a 100644
--- a/package.json
+++ b/package.json
@@ -168,6 +168,7 @@
     "clean-css-loader": "^4.2.1",
     "codegen.macro": "^4.0.0",
     "css-loader": "^7.1.2",
+    "css-minimizer-webpack-plugin": "^7.0.2",
     "css-modules-require-hook": "^4.2.3",
     "domtokenlist-shim": "^1.2.0",
     "emitify": "^4.0.1",
@@ -192,7 +193,6 @@
     "morgan": "^1.6.1",
     "multi-rename": "^2.0.0",
     "nodemon": "^3.0.1",
-    "optimize-css-assets-webpack-plugin": "^6.0.1",
     "path-browserify": "^1.0.1",
     "philip": "^3.0.0",
     "place": "^1.1.4",
diff --git a/server/columns.spec.mjs b/server/columns.spec.mjs
index 76d80254..ded8d5e6 100644
--- a/server/columns.spec.mjs
+++ b/server/columns.spec.mjs
@@ -1,4 +1,4 @@
-import {dirname} from 'node:path';
+import {join, dirname} from 'node:path';
 import {fileURLToPath} from 'node:url';
 import fs from 'node:fs';
 import test from 'supertape';
@@ -6,6 +6,7 @@ import {getColumns, isDev} from './columns.mjs';
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = dirname(__filename);
+const distDir = join(__dirname, '..', 'dist-dev');
 
 test('columns: prod', (t) => {
     const columns = getColumns({
@@ -21,7 +22,7 @@ test('columns: dev', (t) => {
         isDev: true,
     });
     
-    const css = fs.readFileSync(`${__dirname}/../css/columns/name-size-date.css`, 'utf8');
+    const css = fs.readFileSync(`${distDir}/columns/name-size-date.css`, 'utf8');
     
     t.match(columns['name-size-date'], css);
     t.end();
@@ -32,7 +33,7 @@ test('columns: no args', (t) => {
     isDev(true);
     const columns = getColumns();
     
-    const css = fs.readFileSync(`${__dirname}/../css/columns/name-size-date.css`, 'utf8');
+    const css = fs.readFileSync(`${distDir}/columns/name-size-date.css`, 'utf8');
     isDev(currentIsDev);
     
     t.match(columns['name-size-date'], css);
diff --git a/server/themes.spec.mjs b/server/themes.spec.mjs
index ecb99e97..a4acc855 100644
--- a/server/themes.spec.mjs
+++ b/server/themes.spec.mjs
@@ -1,4 +1,4 @@
-import {dirname} from 'node:path';
+import {dirname, join} from 'node:path';
 import {fileURLToPath} from 'node:url';
 import fs from 'node:fs';
 import test from 'supertape';
@@ -6,13 +6,14 @@ import {getThemes, isDev} from './theme.mjs';
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = dirname(__filename);
+const distDir = join(__dirname, '..', 'dist-dev');
 
 test('themes: dev', (t) => {
     const themes = getThemes({
         isDev: true,
     });
     
-    const css = fs.readFileSync(`${__dirname}/../css/themes/dark.css`, 'utf8');
+    const css = fs.readFileSync(`${distDir}/themes/dark.css`, 'utf8');
     const result = themes.dark.includes(css);
     
     t.ok(result);
@@ -24,7 +25,7 @@ test('themes: no args', (t) => {
     isDev(true);
     const themes = getThemes();
     
-    const css = fs.readFileSync(`${__dirname}/../css/themes/light.css`, 'utf8');
+    const css = fs.readFileSync(`${distDir}/themes/light.css`, 'utf8');
     isDev(currentIsDev);
     
     t.match(themes.light, css);