@lynx-js/css-extract-webpack-plugin 0.5.4 → 0.6.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @lynx-js/css-extract-webpack-plugin
 
+## 0.6.0
+
+### Minor Changes
+
+- Fix CSS HMR crash issues by using the same encode options with the main template. ([#1033](https://github.com/lynx-family/lynx-stack/pull/1033))
+
 ## 0.5.4
 
 ### Patch Changes

package/lib/CssExtractRspackPlugin.d.ts

@@ -6,22 +6,6 @@ import { LynxTemplatePlugin } from '@lynx-js/template-webpack-plugin';
  * @public
  */
 interface CssExtractRspackPluginOptions extends ExternalCssExtractRspackPluginOptions {
-    /**
-     * {@inheritdoc @lynx-js/template-webpack-plugin#LynxTemplatePluginOptions.enableRemoveCSSScope}
-     */
-    enableRemoveCSSScope: boolean;
-    /**
-     * {@inheritdoc @lynx-js/template-webpack-plugin#LynxTemplatePluginOptions.enableCSSSelector}
-     */
-    enableCSSSelector: boolean;
-    /**
-     * {@inheritdoc @lynx-js/template-webpack-plugin#LynxTemplatePluginOptions.enableCSSInvalidation}
-     */
-    enableCSSInvalidation: boolean;
-    /**
-     * {@inheritdoc @lynx-js/template-webpack-plugin#LynxTemplatePluginOptions.targetSdkVersion}
-     */
-    targetSdkVersion: string;
     /**
      * plugins passed to parser
      */

package/lib/CssExtractRspackPlugin.js

@@ -2,7 +2,7 @@
 // Licensed under the Apache License Version 2.0 that can be found in the
 // LICENSE file in the root directory of this source tree.
 import { createRequire } from 'node:module';
-import { LynxEncodePlugin, LynxTemplatePlugin, } from '@lynx-js/template-webpack-plugin';
+import { CSS, LynxTemplatePlugin } from '@lynx-js/template-webpack-plugin';
 const require = createRequire(import.meta.url);
 /**
  * @public
@@ -64,12 +64,10 @@ class CssExtractRspackPlugin {
      */
     static { this.defaultOptions = Object
         .freeze({
-        enableRemoveCSSScope: false,
-        enableCSSSelector: true,
-        enableCSSInvalidation: true,
-        targetSdkVersion: '3.2',
         filename: '[name].css',
-        cssPlugins: [],
+        cssPlugins: [
+            CSS.Plugins.removeFunctionWhiteSpace(),
+        ],
     }); }
     /**
      * The entry point of a webpack plugin.
@@ -97,6 +95,52 @@ class CssExtractRspackPluginImpl {
         compiler.hooks.thisCompilation.tap(this.name, (compilation) => {
             if (compiler.options.mode === 'development'
                 || process.env['NODE_ENV'] === 'development') {
+                const hooks = LynxTemplatePlugin.getLynxTemplatePluginHooks(
+                // @ts-expect-error Rspack to Webpack Compilation
+                compilation);
+                hooks.beforeEmit.tapPromise(this.name, async (args) => {
+                    for (const { name: filename, source, } of args.cssChunks) {
+                        const content = source.source().toString('utf-8');
+                        const css = LynxTemplatePlugin.convertCSSChunksToMap([content], options.cssPlugins, Boolean(args.finalEncodeOptions.compilerOptions['enableCSSSelector']));
+                        const cssDeps = Object.entries(css.cssMap).reduce((acc, [key, value]) => {
+                            const importRuleNodes = value.filter((node) => node.type === 'ImportRule');
+                            acc[key] = importRuleNodes.map(({ href }) => href);
+                            return acc;
+                        }, {});
+                        try {
+                            const { buffer } = await hooks.encode.promise({
+                                encodeOptions: {
+                                    ...args.finalEncodeOptions,
+                                    css,
+                                    lepusCode: {
+                                        root: undefined,
+                                        lepusChunk: {},
+                                    },
+                                    manifest: {},
+                                    customSections: {},
+                                },
+                            });
+                            const result = {
+                                content: buffer.toString('base64'),
+                                deps: cssDeps,
+                            };
+                            compilation.emitAsset(filename.replace('.css', `${this.hash ? `.${this.hash}` : ''}.css.hot-update.json`), new compiler.webpack.sources.RawSource(JSON.stringify(result), true));
+                        }
+                        catch (error) {
+                            if (error && typeof error === 'object' && 'error_msg' in error) {
+                                compilation.errors.push(
+                                // TODO: use more human-readable error message(i.e.: using sourcemap to get source code)
+                                //       or give webpack/rspack with location of bundle
+                                new compiler.webpack.WebpackError(error.error_msg));
+                            }
+                            else {
+                                compilation.errors.push(error);
+                            }
+                        }
+                    }
+                    this.hash = compilation.hash;
+                    return args;
+                });
                 const { RuntimeGlobals, RuntimeModule } = compiler.webpack;
                 class CSSHotUpdateRuntimeModule extends RuntimeModule {
                     constructor(hash) {
@@ -147,60 +191,6 @@ ${RuntimeGlobals.require}.cssHotUpdateList = ${cssHotUpdateList ? JSON.stringify
                 compilation.hooks.runtimeRequirementInTree
                     .for(RuntimeGlobals.onChunksLoaded)
                     .tap(this.name, handler);
-                compilation.hooks.processAssets.tapPromise({
-                    name: this.name,
-                    stage: 300,
-                }, async (assets) => {
-                    for (const [filename, source] of Object.entries(assets)) {
-                        if (!filename.endsWith('.css')) {
-                            continue;
-                        }
-                        // TODO: sourcemap
-                        const content = source.source().toString('utf-8');
-                        const { cssMap } = LynxTemplatePlugin.convertCSSChunksToMap([content], options.cssPlugins, options.enableCSSSelector);
-                        const cssDeps = Object.entries(cssMap).reduce((acc, [key, value]) => {
-                            const importRuleNodes = value.filter((node) => node.type === 'ImportRule');
-                            acc[key] = importRuleNodes.map(({ href }) => href);
-                            return acc;
-                        }, {});
-                        const hooks = LynxTemplatePlugin.getLynxTemplatePluginHooks(
-                        // @ts-expect-error Rspack to Webpack Compilation
-                        compilation);
-                        try {
-                            const encoded = await LynxEncodePlugin.encodeCSS([content], {
-                                targetSdkVersion: options.targetSdkVersion,
-                                enableCSSSelector: options.enableCSSSelector,
-                                enableRemoveCSSScope: options.enableRemoveCSSScope,
-                                enableCSSInvalidation: options.enableCSSInvalidation,
-                            }, options.cssPlugins, hooks.encode.taps.length > 0
-                                ? async (encodeOptions) => {
-                                    // @ts-expect-error Only CSS is needed
-                                    return await hooks.encode.promise({
-                                        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-                                        encodeOptions,
-                                    });
-                                }
-                                : undefined);
-                            const result = {
-                                content: encoded.toString('base64'),
-                                deps: cssDeps,
-                            };
-                            compilation.emitAsset(filename.replace('.css', `${this.hash ? `.${this.hash}` : ''}.css.hot-update.json`), new compiler.webpack.sources.RawSource(JSON.stringify(result), true));
-                        }
-                        catch (error) {
-                            if (error && typeof error === 'object' && 'error_msg' in error) {
-                                compilation.errors.push(
-                                // TODO: use more human-readable error message(i.e.: using sourcemap to get source code)
-                                //       or give webpack/rspack with location of bundle
-                                new compiler.webpack.WebpackError(error.error_msg));
-                            }
-                            else {
-                                compilation.errors.push(error);
-                            }
-                        }
-                    }
-                    this.hash = compilation.hash;
-                });
             }
         });
     }

package/lib/util.js

@@ -14,14 +14,14 @@ export function stringifyRequest(loaderContext, request) {
         && typeof loaderContext.utils.contextify === 'function') {
         return JSON.stringify(loaderContext.utils.contextify(loaderContext.context || loaderContext.rootContext, request));
     }
-    const splitted = request.split('!');
+    const split = request.split('!');
     const { context } = loaderContext;
-    return JSON.stringify(splitted
+    return JSON.stringify(split
         .map((part) => {
         // First, separate singlePath from query, because the query might contain paths again
-        const splittedPart = /^(.*?)(\?.*)/.exec(part);
-        const query = splittedPart ? splittedPart[2] : '';
-        let singlePath = splittedPart ? splittedPart[1] : part;
+        const splitPart = /^(.*?)(\?.*)/.exec(part);
+        const query = splitPart ? splitPart[2] : '';
+        let singlePath = splitPart ? splitPart[1] : part;
         if (isAbsolutePath(singlePath) && context) {
             singlePath = path.relative(context, singlePath);
             if (isAbsolutePath(singlePath)) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lynx-js/css-extract-webpack-plugin",
-  "version": "0.5.4",
+  "version": "0.6.0",
   "description": "This plugin extracts CSS into separate files. It creates a CSS file per JS file which contains CSS.",
   "keywords": [
     "webpack",
@@ -45,17 +45,17 @@
   },
   "devDependencies": {
     "@microsoft/api-extractor": "7.52.8",
-    "@rspack/core": "1.3.11",
+    "@rspack/core": "1.3.15",
     "css-loader": "^7.1.2",
     "sass-loader": "^16.0.5",
     "webpack": "^5.99.9",
-    "@lynx-js/css-serializer": "0.1.2",
-    "@lynx-js/template-webpack-plugin": "0.7.0",
+    "@lynx-js/css-serializer": "0.1.3",
+    "@lynx-js/template-webpack-plugin": "0.8.0",
     "@lynx-js/test-tools": "0.0.0",
     "@lynx-js/vitest-setup": "0.0.0"
   },
   "peerDependencies": {
-    "@lynx-js/template-webpack-plugin": "^0.5.0 || ^0.6.0 || ^0.7.0"
+    "@lynx-js/template-webpack-plugin": "^0.8.0"
   },
   "engines": {
     "node": ">=18"