feat: pracel css

shuvijs · Feb 11, 2022 · 150cb89 · 150cb89
1 parent 1a948d1
commit 150cb89
Show file tree

Hide file tree

Showing 39 changed files with 2,826 additions and 150 deletions.
diff --git a/packages/platform-mp/src/lib/platform-mp-base/modify-style.ts b/packages/platform-mp/src/lib/platform-mp-base/modify-style.ts
@@ -88,10 +88,7 @@ export default function ensureExtractLoader(
       ruleUses.get('sass-loader').tap(args => {
         return {
           ...args,
-          sourceMap: true,
-          sassOptions: {
-            outputStyle: 'expanded'
-          }
+          sourceMap: true
         };
       });
     }

diff --git a/packages/service/src/bundler/config.ts b/packages/service/src/bundler/config.ts
@@ -32,11 +32,14 @@ export function createWebpackConfig(
   const dev = mode === 'development';
   let chain: WebpackChain;
 
+  const parcelCss = !!config.experimental.parcelCss;
+
   const srcDirs = [paths.appDir, paths.srcDir, ...(opts.srcDirs || [])];
   if (opts.node) {
     chain = createNodeWebpackChain({
       buildManifestFilename: BUILD_MANIFEST_PATH,
       dev,
+      parcelCss,
       env: config.env,
       mediaFilename: BUILD_MEDIA_PATH,
       name: opts.name,
@@ -51,6 +54,7 @@ export function createWebpackConfig(
       analyze: config.analyze,
       buildManifestFilename: BUILD_MANIFEST_PATH,
       dev,
+      parcelCss,
       env: config.env,
       mediaFilename: BUILD_MEDIA_PATH,
       name: opts.name,

diff --git a/packages/service/src/core/apiTypes.ts b/packages/service/src/core/apiTypes.ts
@@ -139,6 +139,9 @@ export interface UserConfig {
   presets?: IPresetConfig[];
   analyze?: boolean;
   asyncEntry?: boolean;
+  experimental?: {
+    parcelCss?: boolean;
+  };
 }
 
 export interface Config

diff --git a/packages/service/src/core/config/config.ts b/packages/service/src/core/config/config.ts
@@ -38,6 +38,9 @@ const createDefaultConfig: () => UserConfig = () => ({
   apiConfig: {
     prefix: '/api',
     bodyParser: true
+  },
+  experimental: {
+    parcelCss: false
   }
 });
 

diff --git a/packages/toolpack/package.json b/packages/toolpack/package.json
@@ -50,7 +50,10 @@
     "ignore-loader": "0.1.2",
     "loader-utils": "2.0.0",
     "mini-css-extract-plugin": "1.3.9",
+    "css-minimizer-webpack-plugin": "3.4.1",
     "path-browserify": "1.0.1",
+    "@parcel/css": "1.2.0",
+    "browserslist": "4.19.1",
     "postcss": "8.2.3",
     "postcss-flexbugs-fixes": "5.0.2",
     "postcss-loader": "4.1.0",

diff --git a/packages/toolpack/src/webpack/config/base.ts b/packages/toolpack/src/webpack/config/base.ts
@@ -1,5 +1,6 @@
 import WebpackChain from 'webpack-chain';
 import TerserPlugin from 'terser-webpack-plugin';
+import CssMinimizerPlugin from 'css-minimizer-webpack-plugin';
 import webpack from 'webpack';
 import path from 'path';
 import {
@@ -23,6 +24,7 @@ const resolveLocalLoader = (name: string) =>
 
 export interface BaseOptions {
   dev: boolean;
+  parcelCss: boolean;
   name: string;
   projectRoot: string;
   srcDirs: string[];
@@ -59,6 +61,7 @@ export { WebpackChain };
 
 export function baseWebpackChain({
   dev,
+  parcelCss,
   projectRoot,
   srcDirs,
   mediaFilename,
@@ -85,6 +88,7 @@ export function baseWebpackChain({
     minimize: !dev,
     realContentHash: false
   });
+
   if (!dev) {
     // @ts-ignore
     config.optimization.minimizer('terser').use(TerserPlugin, [
@@ -94,6 +98,14 @@ export function baseWebpackChain({
         terserOptions
       }
     ]);
+    config.optimization.minimizer('cssMinimizer').use(CssMinimizerPlugin, [
+      {
+        // @ts-ignore
+        minify: parcelCss
+          ? CssMinimizerPlugin.parcelCssMinify
+          : CssMinimizerPlugin.cssnanoMinify
+      }
+    ]);
   }
 
   config.output.merge({
@@ -123,13 +135,14 @@ export function baseWebpackChain({
   });
 
   config.resolveLoader.merge({
-    alias: ['shuvi-swc-loader', 'route-component-loader'].reduce(
-      (alias, loader) => {
-        alias[`@shuvi/${loader}`] = resolveLocalLoader(loader);
-        return alias;
-      },
-      {} as Record<string, string>
-    )
+    alias: [
+      'shuvi-swc-loader',
+      'route-component-loader',
+      'parcel-css-loader'
+    ].reduce((alias, loader) => {
+      alias[`@shuvi/${loader}`] = resolveLocalLoader(loader);
+      return alias;
+    }, {} as Record<string, string>)
   });
 
   config.module.set('strictExportPresence', true);

diff --git a/packages/toolpack/src/webpack/config/browser.ts b/packages/toolpack/src/webpack/config/browser.ts
@@ -162,5 +162,9 @@ export function createBrowserWebpackChain({
     }
   ]);
 
-  return withStyle(chain, { extractCss: !dev, publicPath });
+  return withStyle(chain, {
+    extractCss: !dev,
+    publicPath,
+    parcelCss: baseOptions.parcelCss
+  });
 }
diff --git a/packages/toolpack/src/webpack/config/node.ts b/packages/toolpack/src/webpack/config/node.ts
@@ -66,5 +66,5 @@ export function createNodeWebpackChain({
     }
   ]);
 
-  return withStyle(chain, { ssr: true });
+  return withStyle(chain, { ssr: true, parcelCss: baseOptions.parcelCss });
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -66,5 +66,5 @@ export function createNodeWebpackChain({ @@
         }
       ]);
-      return withStyle(chain, { ssr: true });
+      return withStyle(chain, { ssr: true, parcelCss: baseOptions.parcelCss });
     }