feat: Use lightningcss

nuintun · Jun 23, 2024 · 13b55c1 · 13b55c1
1 parent 5709ece
commit 13b55c1
Show file tree

Hide file tree

Showing 4 changed files with 132 additions and 42 deletions.
diff --git a/packages/examples/package.json b/packages/examples/package.json
@@ -37,15 +37,15 @@
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "autoprefixer": "^10.4.19",
+    "browserslist": "^4.23.1",
     "bufferutil": "^4.0.8",
     "case-sensitive-paths-webpack-plugin": "^2.4.0",
     "css-loader": "^7.1.2",
     "css-minimizer-webpack-plugin": "7.0.0",
     "css-modules-types-loader": "^0.5.8",
     "find-free-ports": "^3.1.1",
     "html-webpack-plugin": "^5.6.0",
-    "koa": "^2.15.3",
-    "koa-compress": "^5.1.1",
+    "lightningcss": "^1.25.1",
     "memfs": "^4.9.3",
     "mini-css-extract-plugin": "^2.9.0",
     "nodemon": "^3.1.4",

diff --git a/packages/examples/tools/bin/webpack.config.prod.js b/packages/examples/tools/bin/webpack.config.prod.js
@@ -10,10 +10,17 @@ process.env.NODE_ENV = mode;
 process.env.BABEL_ENV = mode;
 
 import webpack from 'webpack';
+import browserslist from 'browserslist';
+import targets from '../lib/targets.js';
 import TerserPlugin from 'terser-webpack-plugin';
+import { browserslistToTargets } from 'lightningcss';
 import resolveConfigure from './webpack.config.base.js';
 import CssMinimizerPlugin from 'css-minimizer-webpack-plugin';
 
+async function getLightningTargets() {
+  return browserslistToTargets(browserslist(await targets()));
+}
+
 (async () => {
   const configure = await resolveConfigure(mode);
 
@@ -22,7 +29,12 @@ import CssMinimizerPlugin from 'css-minimizer-webpack-plugin';
 
   // 使用自定义 minimizer 工具
   configure.optimization.minimizer = [
-    new CssMinimizerPlugin(),
+    new CssMinimizerPlugin({
+      minimizerOptions: {
+        targets: await getLightningTargets()
+      },
+      minify: CssMinimizerPlugin.lightningCssMinify
+    }),
     new TerserPlugin({
       minify: TerserPlugin.swcMinify,
       terserOptions: { format: { comments: false } }

diff --git a/packages/examples/tools/lib/rules.js b/packages/examples/tools/lib/rules.js
@@ -126,7 +126,7 @@ export default async mode => {
         },
         {
           type: 'asset/resource',
-          test: /\.(png|gif|bmp|ico|jpe?g|woff2?|ttf|eot)$/i
+          test: /\.(png|gif|bmp|ico|jpe?g|webp|woff2?|ttf|eot)$/i
         }
       ]
     }

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
-Original file line number
+Diff line change
@@ Expand Up / @@ -126,7 +126,7 @@ export default async mode => { @@
             },
             {
               type: 'asset/resource',
-              test: /\.(png|gif|bmp|ico|jpe?g|woff2?|ttf|eot)$/i
+              test: /\.(png|gif|bmp|ico|jpe?g|webp|woff2?|ttf|eot)$/i
             }
           ]
         }
@@ Expand Down @@