feature: cloudcmd: optimize-css-assets-webpack-plugin -> css-minimizer-webpack-plugin

Author: coderaiser

.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 = [{

.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`,

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",

server/columns.spec.mjs

@@ -1,11 +1,12 @@
-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';
 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);

server/themes.spec.mjs

@@ -1,18 +1,19 @@
-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';
 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);