@lynx-js/css-extract-webpack-plugin 0.6.5 → 0.7.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @lynx-js/css-extract-webpack-plugin
 
+## 0.7.0
+
+### Minor Changes
+
+- **BREAKING CHANGE**: Require `@lynx-js/template-webpack-plugin` 0.10.0. ([#1965](https://github.com/lynx-family/lynx-stack/pull/1965))
+
+- Merge all css chunk and generate a `.css.hot-update.json` file for each bundle. ([#1965](https://github.com/lynx-family/lynx-stack/pull/1965))
+
 ## 0.6.5
 
 ### Patch Changes

package/lib/CssExtractRspackPlugin.js

@@ -95,6 +95,7 @@ class CssExtractRspackPluginImpl {
         this.options = options;
         this.name = 'CssExtractRspackPlugin';
         this.hash = null;
+        this.hotUpdateFiles = new Map();
         new compiler.webpack.CssExtractRspackPlugin({
             filename: options.filename ?? '[name].css',
             chunkFilename: options.chunkFilename ?? '',
@@ -110,9 +111,15 @@ class CssExtractRspackPluginImpl {
                 // @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 cssChunks = args.cssChunks;
+                    const content = cssChunks.map((chunk) => chunk.source.source().toString('utf-8'));
+                    for (const entryName of args.entryNames) {
+                        // generate hot update file which is required by cssHotUpdateList
+                        const hotUpdateFilePath = this.hotUpdateFiles.get(entryName);
+                        if (!hotUpdateFilePath) {
+                            continue;
+                        }
+                        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);
@@ -140,7 +147,7 @@ class CssExtractRspackPluginImpl {
                                 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));
+                            compilation.emitAsset(hotUpdateFilePath, new compiler.webpack.sources.RawSource(JSON.stringify(result), true));
                         }
                         catch (error) {
                             if (error && typeof error === 'object' && 'error_msg' in error) {
@@ -159,9 +166,10 @@ class CssExtractRspackPluginImpl {
                 });
                 const { RuntimeGlobals, RuntimeModule } = compiler.webpack;
                 class CSSHotUpdateRuntimeModule extends RuntimeModule {
-                    constructor(hash) {
+                    constructor(hash, hotUpdateFiles) {
                         super('lynx css hot update');
                         this.hash = hash;
+                        this.hotUpdateFiles = hotUpdateFiles;
                     }
                     generate() {
                         const chunk = this.chunk;
@@ -172,10 +180,16 @@ class CssExtractRspackPluginImpl {
                         });
                         const { path } = compilation.getPathWithInfo(options.filename ?? '[name].css', { chunk });
                         const initialChunk = [chunk.name, path];
-                        const cssHotUpdateList = [...asyncChunks, initialChunk].map(([chunkName, cssHotUpdatePath]) => [
-                            chunkName,
-                            cssHotUpdatePath.replace('.css', `${this.hash ? `.${this.hash}` : ''}.css.hot-update.json`),
-                        ]);
+                        const cssHotUpdateList = [...asyncChunks, initialChunk].map(([chunkName, cssHotUpdatePath]) => {
+                            // use hash of previous compilation cause CSSHotUpdateRuntimeModule can not get hash immediately
+                            const hotUpdatePath = cssHotUpdatePath.replace('.css', `${this.hash ? `.${this.hash}` : ''}.css.hot-update.json`);
+                            // save all hot update file info
+                            this.hotUpdateFiles.set(chunkName, hotUpdatePath);
+                            return [
+                                chunkName,
+                                hotUpdatePath,
+                            ];
+                        });
                         return `
 ${RuntimeGlobals.require}.cssHotUpdateList = ${cssHotUpdateList ? JSON.stringify(cssHotUpdateList) : 'null'};
 `;
@@ -187,7 +201,7 @@ ${RuntimeGlobals.require}.cssHotUpdateList = ${cssHotUpdateList ? JSON.stringify
                         return;
                     onceForChunkSet.add(chunk);
                     runtimeRequirements.add(RuntimeGlobals.publicPath);
-                    compilation.addRuntimeModule(chunk, new CSSHotUpdateRuntimeModule(this.hash));
+                    compilation.addRuntimeModule(chunk, new CSSHotUpdateRuntimeModule(this.hash, this.hotUpdateFiles));
                 };
                 compilation.hooks.runtimeRequirementInTree
                     .for(RuntimeGlobals.ensureChunkHandlers)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lynx-js/css-extract-webpack-plugin",
-  "version": "0.6.5",
+  "version": "0.7.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.15",
-    "@rspack/core": "1.6.5",
+    "@rspack/core": "1.6.6",
     "css-loader": "^7.1.2",
     "sass-loader": "^16.0.5",
     "webpack": "^5.102.0",
     "@lynx-js/css-serializer": "0.1.3",
-    "@lynx-js/template-webpack-plugin": "0.9.2",
+    "@lynx-js/template-webpack-plugin": "0.10.0",
     "@lynx-js/test-tools": "0.0.0",
     "@lynx-js/vitest-setup": "0.0.0"
   },
   "peerDependencies": {
-    "@lynx-js/template-webpack-plugin": "^0.9.0"
+    "@lynx-js/template-webpack-plugin": "^0.10.0"
   },
   "engines": {
     "node": ">=18"