@shuvi/toolpack 1.0.0-rc.9 → 1.0.0

package/lib/utils/{bundle-require.js → bundleRequire.js}

@@ -130,7 +130,7 @@ function bundleRequire(filepath, options = {}) {
             }
             return mod;
         });
-        const result = yield (0, esbuild_1.build)(Object.assign(Object.assign({}, options.esbuildOptions), { entryPoints: [filepath], absWorkingDir: cwd, outfile, format: 'cjs', platform: 'node', sourcemap: 'inline', bundle: true, metafile: true, write: true, watch: false, plugins: [
+        const result = yield (0, esbuild_1.build)(Object.assign(Object.assign({}, options.esbuildOptions), { entryPoints: [filepath], absWorkingDir: cwd, outfile, format: 'cjs', target: 'es6', platform: 'node', sourcemap: 'inline', bundle: true, metafile: true, write: true, watch: false, plugins: [
                 ...(((_b = options.esbuildOptions) === null || _b === void 0 ? void 0 : _b.plugins) || []),
                 (0, exports.externalPlugin)({
                     external: options.external

package/lib/webpack/config/base.d.ts

@@ -1,13 +1,13 @@
 import WebpackChain from 'webpack-chain';
+import { CompilerOptions } from '../loaders/shuvi-swc-loader';
 declare type TsCompilerOptions = import('typescript').CompilerOptions;
 export interface BaseOptions {
     dev: boolean;
-    parcelCss: boolean;
     name: string;
     projectRoot: string;
     outputDir: string;
     cacheDir: string;
-    include: string[];
+    include: (string | RegExp)[];
     typescript?: {
         useTypeScript: boolean;
         typeScriptPath?: string;
@@ -15,14 +15,18 @@ export interface BaseOptions {
         tsCompilerOptions?: TsCompilerOptions;
         resolvedBaseUrl?: string;
     };
-    buildManifestFilename: string;
     target?: string;
     publicPath?: string;
     env?: {
         [x: string]: string | undefined;
     };
-    experimental?: Record<string, any>;
-    compiler?: Record<string, any>;
+    lightningCss?: boolean;
+    compiler?: CompilerOptions;
 }
 export { WebpackChain };
-export declare function baseWebpackChain({ dev, outputDir, parcelCss, experimental, compiler, projectRoot, include, typescript, name, buildManifestFilename, publicPath, env, cacheDir }: BaseOptions): WebpackChain;
+export declare function getDefineEnv(env: {
+    [x: string]: string | undefined;
+}): {
+    [x: string]: string;
+};
+export declare function baseWebpackChain({ dev, outputDir, lightningCss, compiler, projectRoot, include, typescript, name, publicPath, env, cacheDir }: BaseOptions): WebpackChain;

package/lib/webpack/config/base.js

@@ -26,7 +26,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.baseWebpackChain = exports.WebpackChain = void 0;
+exports.baseWebpackChain = exports.getDefineEnv = exports.WebpackChain = void 0;
 const webpack_chain_1 = __importDefault(require("webpack-chain"));
 exports.WebpackChain = webpack_chain_1.default;
 const terser_webpack_plugin_1 = __importDefault(require("terser-webpack-plugin"));
@@ -34,9 +34,7 @@ const css_minimizer_webpack_plugin_1 = __importDefault(require("css-minimizer-we
 const webpack_1 = __importDefault(require("webpack"));
 const path = __importStar(require("path"));
 const constants_1 = require("@shuvi/shared/lib/constants");
-const build_manifest_plugin_1 = __importDefault(require("../plugins/build-manifest-plugin"));
 const fix_watching_plugin_1 = __importDefault(require("../plugins/fix-watching-plugin"));
-const constants_2 = require("../../constants");
 const crypto = __importStar(require("crypto"));
 const jsconfig_paths_plugin_1 = __importDefault(require("../plugins/jsconfig-paths-plugin"));
 const support_ts_extension_resolver_plugin_1 = __importDefault(require("../plugins/support-ts-extension-resolver-plugin"));
@@ -61,7 +59,21 @@ const terserOptions = {
         ascii_only: true
     }
 };
-function baseWebpackChain({ dev, outputDir, parcelCss, experimental, compiler, projectRoot, include, typescript, name, buildManifestFilename, publicPath = '/', env = {}, cacheDir }) {
+function getDefineEnv(env) {
+    return Object.assign(Object.assign({}, Object.keys(process.env).reduce((prev, key) => {
+        if (key.startsWith(constants_1.PUBLIC_ENV_PREFIX)) {
+            prev[`process.env.${key}`] = JSON.stringify(process.env[key]);
+        }
+        return prev;
+    }, {})), Object.keys(env).reduce((acc, key) => {
+        if (/^(?:NODE_.+)|^(?:__.+)$/i.test(key)) {
+            throw new Error(`The key "${key}" under "env" is not allowed.`);
+        }
+        return Object.assign(Object.assign({}, acc), { [`process.env.${key}`]: JSON.stringify(env[key]) });
+    }, {}));
+}
+exports.getDefineEnv = getDefineEnv;
+function baseWebpackChain({ dev, outputDir, lightningCss, compiler, projectRoot, include, typescript, name, publicPath = '/', env = {}, cacheDir }) {
     var _a;
     const config = new webpack_chain_1.default();
     config.mode(dev ? 'development' : 'production');
@@ -71,11 +83,11 @@ function baseWebpackChain({ dev, outputDir, parcelCss, experimental, compiler, p
     config.output.path(outputDir);
     config.output.merge({
         publicPath,
-        filename: `${dev ? '[name].js' : '[name].[contenthash:8]'}.js`,
+        filename: `${dev ? '[name]' : '[name].[contenthash:8]'}.js`,
         // This saves chunks with the name given via `import()`
         chunkFilename: `static/chunks/${dev ? '[name]' : '[name].[contenthash:8]'}.js`,
         hotUpdateChunkFilename: 'static/webpack/[id].[fullhash].hot-update.js',
-        hotUpdateMainFilename: 'static/webpack/[fullhash].hot-update.json',
+        hotUpdateMainFilename: 'static/webpack/[runtime].[fullhash].hot-update.json',
         strictModuleExceptionHandling: true,
         // crossOriginLoading: crossOrigin,
         webassemblyModuleFilename: 'static/wasm/[modulehash:8].wasm',
@@ -99,7 +111,7 @@ function baseWebpackChain({ dev, outputDir, parcelCss, experimental, compiler, p
                 default: false,
                 vendors: {
                     name: 'vendors',
-                    filename: constants_2.CommonChunkFilename,
+                    filename: (0, helpers_1.commonChunkFilename)({ dev: true }),
                     test: /[\\/]node_modules[\\/]/,
                     // Don't let webpack eliminate this chunk (prevents this chunk from
                     // becoming a part of the commons chunk)
@@ -120,8 +132,8 @@ function baseWebpackChain({ dev, outputDir, parcelCss, experimental, compiler, p
         config.optimization.minimizer('cssMinimizer').use(css_minimizer_webpack_plugin_1.default, [
             {
                 // @ts-ignore
-                minify: parcelCss
-                    ? css_minimizer_webpack_plugin_1.default.parcelCssMinify
+                minify: lightningCss
+                    ? css_minimizer_webpack_plugin_1.default.lightningCssMinify
                     : css_minimizer_webpack_plugin_1.default.cssnanoMinify
             }
         ]);
@@ -134,14 +146,14 @@ function baseWebpackChain({ dev, outputDir, parcelCss, experimental, compiler, p
         modules: [
             'node_modules',
             ...nodePathList // Support for NODE_PATH environment variable
-        ],
-        alias: {}
+        ]
     });
+    config.resolve.alias.set('@swc/helpers', path.dirname(require.resolve(`@swc/helpers/package.json`)));
     config.resolveLoader.merge({
         alias: [
+            'lightningcss-loader',
             'shuvi-swc-loader',
-            'route-component-loader',
-            'parcel-css-loader'
+            'route-component-loader'
         ].reduce((alias, loader) => {
             alias[`@shuvi/${loader}`] = resolveLocalLoader(loader);
             return alias;
@@ -158,18 +170,16 @@ function baseWebpackChain({ dev, outputDir, parcelCss, experimental, compiler, p
     mainRule
         .oneOf('js')
         .test(/\.(tsx|ts|js|cjs|mjs|jsx)$/)
-        .include.merge([...include, ...constants_2.AppSourceRegexs])
+        .include.merge([...include])
         .end()
         .use('shuvi-swc-loader')
         .loader('@shuvi/shuvi-swc-loader')
         .options({
         isServer: false,
-        experimental,
         compiler,
         supportedBrowsers: false,
         swcCacheDir: path.join(cacheDir, 'swc')
     });
-    config.resolve.alias.set('@swc/helpers', path.dirname(require.resolve(`@swc/helpers/package.json`)));
     mainRule
         .oneOf('media')
         .exclude.merge([/\.(tsx|ts|js|cjs|mjs|jsx)$/, /\.html$/, /\.json$/])
@@ -185,32 +195,22 @@ function baseWebpackChain({ dev, outputDir, parcelCss, experimental, compiler, p
             contextRegExp: /moment$/
         }
     ]);
-    const shuviPublicEnv = Object.keys(process.env).reduce((prev, key) => {
-        if (key.startsWith(constants_1.PUBLIC_ENV_PREFIX)) {
-            prev[`process.env.${key}`] = JSON.stringify(process.env[key]);
-        }
-        return prev;
-    }, {});
-    const shuviConfigEnv = Object.keys(env).reduce((acc, key) => {
-        if (/^(?:NODE_.+)|^(?:__.+)$/i.test(key)) {
-            throw new Error(`The key "${key}" under "env" is not allowed.`);
-        }
-        return Object.assign(Object.assign({}, acc), { [`process.env.${key}`]: JSON.stringify(env[key]) });
-    }, {});
-    config.plugin('define').use(webpack_1.default.DefinePlugin, [
-        Object.assign(Object.assign(Object.assign({}, shuviPublicEnv), shuviConfigEnv), { 'process.env.NODE_ENV': JSON.stringify(dev ? 'development' : 'production') })
+    config.plugin('private/define').use(webpack_1.default.DefinePlugin, [
+        Object.assign({ 
+            // internal field to identify the plugin config
+            __SHUVI_DEFINE_ENV: 'true' }, getDefineEnv(env))
     ]);
-    config
-        .plugin('private/build-manifest')
-        .use(build_manifest_plugin_1.default, [
-        { filename: buildManifestFilename, chunkRequest: dev }
+    config.plugin('define').use(webpack_1.default.DefinePlugin, [
+        {
+            'process.env.NODE_ENV': JSON.stringify(dev ? 'development' : 'production')
+        }
     ]);
     const getCacheConfig = () => {
         const projectHash = crypto
             .createHash('md5')
             .update(projectRoot)
             .digest('hex');
-        const stringifiedEnvs = Object.entries(Object.assign(Object.assign({}, shuviConfigEnv), shuviPublicEnv)).reduce((prev, [key, value]) => {
+        const stringifiedEnvs = Object.entries(Object.assign({}, getDefineEnv(env))).reduce((prev, [key, value]) => {
             return `${prev}|${key}=${value}`;
         }, '');
         const PACKAGE_JSON = path.resolve(__dirname, '../../../package.json');

package/lib/webpack/config/browser.js

@@ -32,13 +32,23 @@ const webpack_1 = __importDefault(require("webpack"));
 const path = __importStar(require("path"));
 const webpack_bundle_analyzer_1 = require("webpack-bundle-analyzer");
 const resolve_1 = require("@shuvi/utils/lib/resolve");
-// import PreferResolverPlugin from '../plugins/prefer-resolver-plugin';
-const constants_1 = require("../../constants");
-const dynamic_public_path_plugin_1 = __importDefault(require("../plugins/dynamic-public-path-plugin"));
 const base_1 = require("./base");
 const style_1 = require("./parts/style");
 const helpers_1 = require("./parts/helpers");
 const BIG_LIBRARY_THRESHOLD = 160000; // byte
+const SHUVI_PKGS_REGEX = /[\\/]node_modules[\\/]@shuvi[\\/]/;
+const FRAMEWORK_REACT_MODULES = [
+    {
+        test: /[/\\]node_modules[/\\]react[/\\]/
+    },
+    {
+        test: /[/\\]node_modules[/\\]react-dom[/\\]/
+    },
+    {
+        test: /[/\\]node_modules[/\\]scheduler[/\\]/,
+        issuers: [/[/\\]node_modules[/\\]react-dom[/\\]/]
+    }
+];
 function createBrowserWebpackChain(options) {
     const { cacheDir, typescript, dev, publicPath, analyze } = options;
     const chain = (0, base_1.baseWebpackChain)(options);
@@ -82,11 +92,6 @@ function createBrowserWebpackChain(options) {
             }
         ]);
     }
-    // if (options.target) {
-    //   chain.resolve
-    //     .plugin('private/prefer-resolver-plugin')
-    //     .use(PreferResolverPlugin, [{ suffix: options.target }]);
-    // }
     if (dev) {
         chain.plugin('private/hmr-plugin').use(webpack_1.default.HotModuleReplacementPlugin);
     }
@@ -99,15 +104,36 @@ function createBrowserWebpackChain(options) {
                 framework: {
                     chunks: 'all',
                     name: 'framework',
-                    filename: constants_1.CommonChunkFilename,
-                    // This regex ignores nested copies of framework libraries so they're
-                    // bundled with their issuer.
-                    // https://github.com/zeit/next.js/pull/9012
-                    test(module) {
+                    filename: (0, helpers_1.commonChunkFilename)({ dev: false }),
+                    test(module, { moduleGraph }) {
                         const resource = module.nameForCondition();
-                        return resource
-                            ? ['@shuvi/redox-react', 'react', 'react-dom'].some(pkg => resource.indexOf(pkg) >= 0)
-                            : false;
+                        if (!resource) {
+                            return false;
+                        }
+                        if (SHUVI_PKGS_REGEX.test(resource)) {
+                            return true;
+                        }
+                        return FRAMEWORK_REACT_MODULES.some(frameworkModule => {
+                            if (!frameworkModule.test.test(resource)) {
+                                return false;
+                            }
+                            // Check issuer to ignore nested copies of framework libraries so they're
+                            // bundled with their issuer.
+                            // https://github.com/zeit/next.js/pull/9012
+                            if (frameworkModule.issuers) {
+                                for (const issuerTest of frameworkModule.issuers) {
+                                    // fix:  DeprecationWarning: Module.issuer: Use new ModuleGraph API
+                                    const issuer = moduleGraph.getIssuer(module);
+                                    const issuerResource = issuer
+                                        ? issuer.nameForCondition()
+                                        : null;
+                                    if (!issuerResource || !issuerTest.test(issuerResource)) {
+                                        return false;
+                                    }
+                                }
+                            }
+                            return true;
+                        });
                     },
                     // test: /(?<!node_modules.*)[\\/]node_modules[\\/](react|react-dom|@shuvi[\\/]router|@shuvi[\\/]router-react|scheduler|prop-types|use-sync-external-store|history)[\\/]/,
                     priority: 40,
@@ -118,7 +144,7 @@ function createBrowserWebpackChain(options) {
                 lib: {
                     test(module) {
                         return (module.size() > BIG_LIBRARY_THRESHOLD &&
-                            /node_modules[/\\]/.test(module.nameForCondition() || ''));
+                            /[/\\]node_modules[/\\]/.test(module.nameForCondition() || ''));
                     },
                     name(module) {
                         const hash = crypto.createHash('sha1');
@@ -133,7 +159,7 @@ function createBrowserWebpackChain(options) {
                         }
                         return hash.digest('hex').substring(0, 8);
                     },
-                    filename: constants_1.CommonChunkFilename,
+                    filename: (0, helpers_1.commonChunkFilename)({ dev: false }),
                     priority: 30,
                     minChunks: 1,
                     reuseExistingChunk: true
@@ -178,14 +204,10 @@ function createBrowserWebpackChain(options) {
             // prevent errof of destructing process.env
             'process.env': JSON.stringify('{}') })
     ]);
-    chain.plugin('dynamic-public-path-plugin').use(dynamic_public_path_plugin_1.default);
-    chain.plugin('private/build-manifest').tap(([options]) => [
-        Object.assign(Object.assign({}, options), { modules: true })
-    ]);
     return (0, style_1.withStyle)(chain, {
         extractCss: !dev,
         publicPath,
-        parcelCss: options.parcelCss,
+        lightningCss: options.lightningCss,
         filename: 'static/css/[contenthash:8].css',
         chunkFilename: 'static/css/[contenthash:8].chunk.css'
     });

package/lib/webpack/config/node.js

@@ -32,15 +32,12 @@ function createNodeWebpackChain(options) {
         .oneOf('js')
         .use('shuvi-swc-loader')
         .tap(options => (Object.assign(Object.assign({}, options), { isServer: true })));
-    chain.plugin('private/build-manifest').tap(([options]) => [
-        Object.assign(Object.assign({}, options), { modules: false })
-    ]);
     chain.plugin('define').tap(([options]) => [
         Object.assign(Object.assign({}, options), { __BROWSER__: false })
     ]);
     return (0, style_1.withStyle)(chain, {
         ssr: true,
-        parcelCss: options.parcelCss,
+        lightningCss: options.lightningCss,
         filename: 'static/css/[contenthash:8].css',
         chunkFilename: 'static/css/[contenthash:8].chunk.css'
     });

package/lib/webpack/config/parts/external.d.ts

@@ -1,5 +1,5 @@
 import { ExternalsFunction } from '../../types';
 export declare function nodeExternals({ projectRoot, include }: {
-    include: string[];
+    include: (string | RegExp)[];
     projectRoot: string;
 }): ExternalsFunction;

package/lib/webpack/config/parts/external.js

@@ -1,8 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.nodeExternals = void 0;
-// import resolve from "resolve";
-const constants_1 = require("../../../constants");
 function match(value, tests) {
     let matched = false;
     for (let index = 0; index < tests.length; index++) {
@@ -31,17 +29,12 @@ function nodeExternals({ projectRoot, include }) {
             return next(null, `commonjs ${request}`);
         }
         const notExternalModules = [];
-        const externalModules = [
-            /platform-shared[/\\](esm|lib)[/\\]shared[/\\]shuvi-singleton-runtimeConfig/
-        ];
+        const externalModules = [];
         // make sure we don't externalize anything that is
         // supposed to be transpiled
         if (match(request, include)) {
             return transpiled();
         }
-        if (match(request, constants_1.AppSourceRegexs)) {
-            return transpiled();
-        }
         if (match(request, notExternalModules)) {
             return transpiled();
         }

package/lib/webpack/config/parts/helpers.d.ts

@@ -2,3 +2,6 @@ import { IWebpackHelpers } from '../../types';
 export declare const webpackHelpers: () => IWebpackHelpers;
 export declare function shouldUseRelativeAssetPaths(publicPath: string): boolean;
 export declare function splitChunksFilter(chunk: any): boolean;
+export declare const commonChunkFilename: ({ dev }: {
+    dev: boolean;
+}) => string;

package/lib/webpack/config/parts/helpers.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.splitChunksFilter = exports.shouldUseRelativeAssetPaths = exports.webpackHelpers = void 0;
+exports.commonChunkFilename = exports.splitChunksFilter = exports.shouldUseRelativeAssetPaths = exports.webpackHelpers = void 0;
 const webpackHelpers = () => {
     const externalFns = [];
     const defaultExternalsFn = ({ context, request }, callback) => {
@@ -50,8 +50,12 @@ function shouldUseRelativeAssetPaths(publicPath) {
 exports.shouldUseRelativeAssetPaths = shouldUseRelativeAssetPaths;
 function splitChunksFilter(chunk) {
     const excludes = {
-        'static/polyfill': true
+    // 'static/polyfill': true
     };
     return excludes[chunk.name] !== true;
 }
 exports.splitChunksFilter = splitChunksFilter;
+const commonChunkFilename = ({ dev }) => {
+    return `static/common/${dev ? '[name]' : '[name].[contenthash:8]'}.js`;
+};
+exports.commonChunkFilename = commonChunkFilename;

package/lib/webpack/config/parts/style.d.ts

@@ -6,7 +6,7 @@ interface StyleOptions {
     extractCss?: boolean;
     sourceMap?: boolean;
     ssr?: boolean;
-    parcelCss?: boolean;
+    lightningCss?: boolean;
 }
-export declare function withStyle(chain: Config, { extractCss, sourceMap, ssr, publicPath, parcelCss, filename, chunkFilename }: StyleOptions): Config;
+export declare function withStyle(chain: Config, { extractCss, sourceMap, ssr, publicPath, lightningCss, filename, chunkFilename }: StyleOptions): Config;
 export {};

package/lib/webpack/config/parts/style.js

@@ -33,39 +33,48 @@ const mini_css_extract_plugin_1 = __importDefault(require("mini-css-extract-plug
 const loaderUtils = __importStar(require("loader-utils"));
 const path = __importStar(require("path"));
 const helpers_1 = require("./helpers");
-function getCSSModuleLocalIdent(context, localIdentName, localName, options) {
-    // Use the filename or folder name, based on some uses the index.js / index.module.(css|scss|sass) project style
-    const fileNameOrFolder = context.resourcePath.match(/index\.module\.(css|scss|sass)$/)
+const regexLikeIndexModule = /(?<!pages[\\/])index\.(scss|sass|css)$/;
+function getCSSModuleLocalIdent(context, _, exportName, options) {
+    const relativePath = path
+        .relative(context.rootContext, context.resourcePath)
+        .replace(/\\+/g, '/');
+    // Generate a more meaningful name (parent folder) when the user names the
+    // file `index.css`.
+    const fileNameOrFolder = regexLikeIndexModule.test(relativePath)
         ? '[folder]'
         : '[name]';
-    // Create a hash based on a the file location and class name. Will be unique across a project, and close to globally unique.
-    const hash = loaderUtils.getHashDigest(
-    // @ts-ignore
-    path.posix.relative(context.rootContext, context.resourcePath) + localName, 'md5', 'base64', 5);
-    // Use loaderUtils to find the file or folder name
-    const className = loaderUtils.interpolateName(context, fileNameOrFolder + '_' + localName + '__' + hash, options);
-    // remove the .module that appears in every classname when based on the file.
-    return className.replace('.module_', '_');
+    // Generate a hash to make the class name unique.
+    const hash = loaderUtils.getHashDigest(Buffer.from(`filePath:${relativePath}#className:${exportName}`), 'md5', 'base64', 5);
+    // Have webpack interpolate the `[folder]` or `[name]` to its real value.
+    return (loaderUtils
+        .interpolateName(context, fileNameOrFolder + '_' + exportName + '__' + hash, options)
+        // Replace invalid symbols with underscores instead of escaping
+        // https://mathiasbynens.be/notes/css-escapes#identifiers-strings
+        .replace(/[^a-zA-Z0-9-_]/g, '_')
+        // "they cannot start with a digit, two hyphens, or a hyphen followed by a digit [sic]"
+        // https://www.w3.org/TR/CSS21/syndata.html#characters
+        .replace(/^(\d|--|-\d)/, '__$1'));
 }
 // style files regexes
 const cssRegex = /\.css$/;
 const cssModuleQueryRegex = /cssmodules/;
 const sassRegex = /\.(scss|sass)$/;
-function ssrCssRule({ test, resourceQuery, scss, parcelCss }) {
+function ssrCssRule({ test, resourceQuery, scss, lightningCss }) {
     const rule = new Rule_1.default();
     rule.test(test);
     if (resourceQuery) {
         rule.resourceQuery(resourceQuery);
     }
-    if (parcelCss) {
+    if (lightningCss) {
         rule
-            .use('parcel-css-loader')
-            .loader('@shuvi/parcel-css-loader')
+            .use('lightningcss-loader')
+            .loader('@shuvi/lightningcss-loader')
             .options({
             sourceMap: false,
             importLoaders: scss ? 1 : 0,
             esModule: true,
             modules: {
+                getLocalIdent: () => '[name]_[local]__[hash]',
                 exportOnlyLocals: true
             }
         });
@@ -97,7 +106,7 @@ function ssrCssRule({ test, resourceQuery, scss, parcelCss }) {
     }
     return rule;
 }
-function cssRule({ publicPath, test, resourceQuery, cssModule, parcelCss, extractCss, sourceMap, scss }) {
+function cssRule({ publicPath, test, resourceQuery, cssModule, lightningCss, extractCss, sourceMap, scss }) {
     const rule = new Rule_1.default();
     rule.test(test);
     if (resourceQuery) {
@@ -134,22 +143,19 @@ function cssRule({ publicPath, test, resourceQuery, cssModule, parcelCss, extrac
           // anchor. By inserting before and not after, we do not
           // need to track the last inserted element.
           parentNode.insertBefore(element, anchorElement);
-
-          window["${constants_1.DEV_STYLE_PREPARE}"] = new Promise(function(resolve) {
-            (window.requestAnimationFrame || setTimeout)(function() {
-              resolve();
-            });
-          });
         `),
             esModule: true
         });
     }
-    if (parcelCss) {
+    if (lightningCss) {
         rule
-            .use('parcel-css-loader')
-            .loader('@shuvi/parcel-css-loader')
+            .use('lightningcss-loader')
+            .loader('@shuvi/lightningcss-loader')
             .options(Object.assign({ sourceMap, importLoaders: scss ? 2 : 1, esModule: true }, (cssModule && {
-            modules: {}
+            modules: {
+                getLocalIdent: () => '[name]_[local]__[hash]',
+                exportOnlyLocals: false
+            }
         })));
     }
     else {
@@ -158,8 +164,8 @@ function cssRule({ publicPath, test, resourceQuery, cssModule, parcelCss, extrac
             .loader(require.resolve('css-loader'))
             .options(Object.assign({ sourceMap, importLoaders: scss ? 2 : 1, esModule: true }, (cssModule && {
             modules: {
-                getLocalIdent: getCSSModuleLocalIdent
-                // exportOnlyLocals: true,
+                getLocalIdent: getCSSModuleLocalIdent,
+                exportOnlyLocals: false
             }
         })));
         rule
@@ -195,7 +201,7 @@ function cssRule({ publicPath, test, resourceQuery, cssModule, parcelCss, extrac
     }
     return rule;
 }
-function withStyle(chain, { extractCss, sourceMap, ssr, publicPath, parcelCss, filename, chunkFilename }) {
+function withStyle(chain, { extractCss, sourceMap, ssr, publicPath, lightningCss, filename, chunkFilename }) {
     const oneOfs = chain.module.rule('main').oneOfs;
     if (ssr) {
         oneOfs.set('css-module', 
@@ -204,7 +210,7 @@ function withStyle(chain, { extractCss, sourceMap, ssr, publicPath, parcelCss, f
             test: cssRegex,
             resourceQuery: cssModuleQueryRegex,
             scss: false,
-            parcelCss
+            lightningCss
         }).after('js'));
         oneOfs.set('scss-module', 
         // @ts-ignore
@@ -212,8 +218,9 @@ function withStyle(chain, { extractCss, sourceMap, ssr, publicPath, parcelCss, f
             test: sassRegex,
             resourceQuery: cssModuleQueryRegex,
             scss: true,
-            parcelCss
+            lightningCss
         }).after('css-module'));
+        // ignore noraml css module
         const ignoreRule = new Rule_1.default();
         ignoreRule
             .test([cssRegex, sassRegex])
@@ -239,7 +246,7 @@ function withStyle(chain, { extractCss, sourceMap, ssr, publicPath, parcelCss, f
         test: cssRegex,
         resourceQuery: cssModuleQueryRegex,
         cssModule: true,
-        parcelCss,
+        lightningCss,
         scss: false,
         extractCss,
         sourceMap,
@@ -250,7 +257,7 @@ function withStyle(chain, { extractCss, sourceMap, ssr, publicPath, parcelCss, f
     cssRule({
         test: cssRegex,
         cssModule: false,
-        parcelCss,
+        lightningCss,
         scss: false,
         extractCss,
         sourceMap,
@@ -262,7 +269,7 @@ function withStyle(chain, { extractCss, sourceMap, ssr, publicPath, parcelCss, f
         test: sassRegex,
         resourceQuery: cssModuleQueryRegex,
         cssModule: true,
-        parcelCss,
+        lightningCss,
         scss: true,
         extractCss,
         sourceMap,
@@ -273,7 +280,7 @@ function withStyle(chain, { extractCss, sourceMap, ssr, publicPath, parcelCss, f
     cssRule({
         test: sassRegex,
         cssModule: false,
-        parcelCss,
+        lightningCss,
         scss: true,
         extractCss,
         sourceMap,

package/lib/webpack/index.d.ts

@@ -1,15 +1,5 @@
-import webpack from 'webpack';
-export { webpack as default };
-export { WebpackChain } from './config';
-export { DynamicDll } from './dynamic-dll';
+export * from './webpack';
 /**
- * re-export for shuvi plugin
+ * resolve webpack sub module from the same webpack module
  */
-export { webpack, validate, validateSchema, version, cli, ModuleFilenameHelpers, RuntimeGlobals, UsageState, WebpackOptionsValidationError, ValidationError, cache, config, dependencies, ids, javascript, optimize, runtime, prefetch, web, webworker, node, electron, wasm, library, container, sharing, debug, util, sources, experiments, WebpackPluginFunction, 
-/** export */
-AutomaticPrefetchPlugin, AsyncDependenciesBlock, BannerPlugin, Cache, Chunk, ChunkGraph, CleanPlugin, Compilation, Compiler, ConcatenationScope, ContextExclusionPlugin, ContextReplacementPlugin, DefinePlugin, DelegatedPlugin, Dependency, DllPlugin, DllReferencePlugin, DynamicEntryPlugin, EntryOptionPlugin, EntryPlugin, EnvironmentPlugin, EvalDevToolModulePlugin, EvalSourceMapDevToolPlugin, ExternalModule, ExternalsPlugin, Generator, HotUpdateChunk, HotModuleReplacementPlugin, IgnorePlugin, JavascriptModulesPlugin, LibManifestPlugin, LibraryTemplatePlugin, LoaderOptionsPlugin, LoaderTargetPlugin, Module, ModuleGraph, ModuleGraphConnection, NoEmitOnErrorsPlugin, NormalModule, NormalModuleReplacementPlugin, MultiCompiler, Parser, Plugin, PrefetchPlugin, ProgressPlugin, ProvidePlugin, RuntimeModule, EntryPlugin as SingleEntryPlugin, SourceMapDevToolPlugin, Stats, Template, WatchIgnorePlugin, WebpackError, WebpackOptionsApply, WebpackOptionsDefaulter, Entry, EntryNormalized, EntryObject, LibraryOptions, ModuleOptions, ResolveOptions, RuleSetCondition, RuleSetConditionAbsolute, RuleSetRule, RuleSetUse, RuleSetUseItem, Configuration, WebpackOptionsNormalized, WebpackPluginInstance, Asset, AssetInfo, MultiStats, ParserState, Watching, StatsAsset, StatsChunk, StatsChunkGroup, StatsChunkOrigin, StatsCompilation, StatsError, StatsLogging, StatsLoggingEntry, StatsModule, StatsModuleIssuer, StatsModuleReason, StatsModuleTraceDependency, StatsModuleTraceItem, StatsProfile } from 'webpack';
-/**
- * resolve webpack module for not shuvi plugin
- */
-declare const webpackResolveContext: string;
-export { webpackResolveContext };
+export declare function resolveWebpackModule(path: string): any;