feat(bundler-webpack): replace postcss-csso with lightningcss (close #1349)

Author: meteorlxy

.vscode/settings.json

@@ -28,6 +28,7 @@
     "frontmatter",
     "globby",
     "gtag",
+    "lightningcss",
     "mdit",
     "nprogress",
     "prefetch",

e2e/docs/styles/css-container.md

@@ -0,0 +1,23 @@
+Check if the `@container` rule could be supported and minimized correctly.
+
+<div class="container">
+
+Container text
+
+</div>
+
+<style>
+.container {
+  container-type: inline-size;
+}
+.container p {
+  font-size: clamp(.75rem, calc(100cqw / 40), 2rem);
+  text-align: left;
+}
+@container (max-width: 480px) {
+  .container p {
+    text-align: center;
+    font-weight: bold;
+  }
+}
+</style>

packages/bundler-webpack/package.json

@@ -46,12 +46,13 @@
     "chokidar": "^3.6.0",
     "copy-webpack-plugin": "^12.0.2",
     "css-loader": "^7.1.1",
+    "css-minimizer-webpack-plugin": "^7.0.0",
     "esbuild-loader": "~4.1.0",
     "express": "^4.19.2",
     "html-webpack-plugin": "^5.6.0",
+    "lightningcss": "^1.24.1",
     "mini-css-extract-plugin": "^2.9.0",
     "postcss": "^8.4.38",
-    "postcss-csso": "^6.0.1",
     "postcss-loader": "^8.1.1",
     "style-loader": "^4.0.0",
     "vue": "^3.4.27",

packages/bundler-webpack/src/build/createClientConfig.ts

@@ -2,6 +2,7 @@ import { createRequire } from 'node:module'
 import type { App } from '@vuepress/core'
 import { fs } from '@vuepress/utils'
 import CopyWebpackPlugin from 'copy-webpack-plugin'
+import CssMinimizerPlugin from 'css-minimizer-webpack-plugin'
 import MiniCssExtractPlugin from 'mini-css-extract-plugin'
 import type Config from 'webpack-chain'
 import { createClientBaseConfig } from '../config/index.js'
@@ -83,6 +84,16 @@ export const createClientConfig = async (
   // enable runtimeChunk
   config.optimization.runtimeChunk(true)
 
+  // minify css
+  config.optimization
+    .minimizer('css-minimizer-webpack-plugin')
+    .use(CssMinimizerPlugin, [
+      {
+        minify:
+          CssMinimizerPlugin.lightningCssMinify as CssMinimizerPlugin.BasicMinimizerImplementation<unknown>,
+      },
+    ])
+
   // disable performance hints
   if (!app.env.isDebug) {
     config.performance.hints(false)

packages/bundler-webpack/src/config/handleModuleStyles.ts

@@ -1,7 +1,6 @@
 import { createRequire } from 'node:module'
 import autoprefixer from 'autoprefixer'
 import MiniCssExtractPlugin from 'mini-css-extract-plugin'
-import postcssCsso from 'postcss-csso'
 import type Config from 'webpack-chain'
 import type {
   LessLoaderOptions,
@@ -69,7 +68,7 @@ export const handleModuleStyles = ({
       .loader(require.resolve('postcss-loader'))
       .options({
         postcssOptions: {
-          plugins: [autoprefixer, postcssCsso],
+          plugins: [autoprefixer],
         },
         ...options.postcss,
       })