@lynx-js/css-extract-webpack-plugin 0.5.0 → 0.5.2

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @lynx-js/css-extract-webpack-plugin
 
+## 0.5.2
+
+### Patch Changes
+
+- feat(css-extra-webpack-plugin): Support css hmr for lazy bundle ([#155](https://github.com/lynx-family/lynx-stack/pull/155))
+
+## 0.5.1
+
+### Patch Changes
+
+- Support NPM provenance. ([#30](https://github.com/lynx-family/lynx-stack/pull/30))
+
 ## 0.5.0
 
 ### Minor Changes

package/lib/CssExtractRspackPlugin.js

@@ -103,11 +103,21 @@ class CssExtractRspackPluginImpl {
                 });
                 compilation.hooks.runtimeModule.tap(this.name, (runtimeModule, chunk) => {
                     if (runtimeModule.name === 'require_chunk_loading') {
+                        const asyncChunks = Array.from(chunk.getAllAsyncChunks())
+                            .map(c => {
+                            const { path } = compilation.getAssetPathWithInfo(options.chunkFilename ?? '.rspeedy/async/[name]/[name].css', { chunk: c });
+                            return [c.name, path];
+                        });
                         const { path } = compilation.getPathWithInfo(options.filename ?? '[name].css', 
                         // Rspack does not pass JsChunk to Rust.
                         // See: https://github.com/web-infra-dev/rspack/blob/73c31abcb78472eb5a3d93e4ece19d9f106727a6/crates/rspack_binding_values/src/path_data.rs#L62
                         { filename: chunk.name });
-                        this.#overrideChunkLoadingRuntimeModule(compiler, runtimeModule, path.replace('.css', `${this.hash ? `.${this.hash}` : ''}.css.hot-update.json`));
+                        const initialChunk = [chunk.name, path];
+                        const cssHotUpdateList = [...asyncChunks, initialChunk].map(([chunkName, cssHotUpdatePath]) => [
+                            chunkName,
+                            cssHotUpdatePath.replace('.css', `${this.hash ? `.${this.hash}` : ''}.css.hot-update.json`),
+                        ]);
+                        this.#overrideChunkLoadingRuntimeModule(compiler, runtimeModule, cssHotUpdateList);
                     }
                 });
                 compilation.hooks.processAssets.tapPromise({
@@ -148,7 +158,6 @@ class CssExtractRspackPluginImpl {
                                 deps: cssDeps,
                             };
                             compilation.emitAsset(filename.replace('.css', `${this.hash ? `.${this.hash}` : ''}.css.hot-update.json`), new compiler.webpack.sources.RawSource(JSON.stringify(result), true));
-                            this.hash = compilation.hash;
                         }
                         catch (error) {
                             if (error && typeof error === 'object' && 'error_msg' in error) {
@@ -162,17 +171,18 @@ class CssExtractRspackPluginImpl {
                             }
                         }
                     }
+                    this.hash = compilation.hash;
                 });
             }
         });
     }
-    #overrideChunkLoadingRuntimeModule(compiler, runtimeModule, filename) {
+    #overrideChunkLoadingRuntimeModule(compiler, runtimeModule, cssHotUpdateList) {
         const { RuntimeGlobals } = compiler.webpack;
         runtimeModule.source.source = Buffer.concat([
             Buffer.from(runtimeModule.source.source),
-            // lynxCssFileName
+            // cssHotUpdateList
             Buffer.from(`
-      ${RuntimeGlobals.require}.lynxCssFileName = ${filename ? JSON.stringify(filename) : 'null'};
+      ${RuntimeGlobals.require}.cssHotUpdateList = ${cssHotUpdateList ? JSON.stringify(cssHotUpdateList) : 'null'};
     `),
         ]);
     }

package/package.json

@@ -1,11 +1,16 @@
 {
   "name": "@lynx-js/css-extract-webpack-plugin",
-  "version": "0.5.0",
+  "version": "0.5.2",
   "description": "This plugin extracts CSS into separate files. It creates a CSS file per JS file which contains CSS.",
   "keywords": [
     "webpack",
     "Lynx"
   ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/lynx-family/lynx-stack.git",
+    "directory": "packages/webpack/css-extract-webpack-plugin"
+  },
   "license": "Apache-2.0",
   "author": {
     "name": "Qingyu Wang",
@@ -39,14 +44,13 @@
     "mini-css-extract-plugin": "^2.9.2"
   },
   "devDependencies": {
-    "@microsoft/api-extractor": "7.51.0",
-    "@rspack/cli": "1.2.6",
-    "@rspack/core": "1.2.6",
+    "@microsoft/api-extractor": "7.51.1",
+    "@rspack/core": "1.2.8",
     "css-loader": "^7.1.2",
     "sass-loader": "^16.0.5",
     "webpack": "^5.98.0",
-    "@lynx-js/css-serializer": "0.1.1",
-    "@lynx-js/template-webpack-plugin": "0.6.3",
+    "@lynx-js/css-serializer": "0.1.2",
+    "@lynx-js/template-webpack-plugin": "0.6.5",
     "@lynx-js/test-tools": "0.0.0"
   },
   "peerDependencies": {

package/runtime/hotModuleReplacement.cjs

@@ -17,29 +17,38 @@ function debounce(fn, time) {
 }
 
 function updateStyle(cssId = 0) {
-  const filename = __webpack_require__.lynxCssFileName;
-  if (!filename) {
-    throw new Error('Css Filename not found');
+  const cssHotUpdateList = __webpack_require__.cssHotUpdateList;
+  if (!cssHotUpdateList) {
+    throw new Error('cssHotUpdateList is not found');
   }
 
-  lynx.requireModuleAsync(
-    // lynx.requireModuleAsync has two level hash and we cannot delete
-    // the LynxGroup level cache here.
-    // Temporarily using `Date.now` to avoid being cached.
-    __webpack_require__.p + filename,
-    (err, ret) => {
-      if (err) {
-        throw new Error('Load update css file `' + filename + '` failed');
-      }
-
-      if (ret.content) {
-        lynx.getCoreContext().dispatchEvent({
-          type: 'lynx.hmr.css',
-          data: { cssId, content: ret.content, deps: ret.deps },
-        });
-      }
-    },
-  );
+  for (const [chunkName, cssHotUpdatePath] of cssHotUpdateList) {
+    lynx.requireModuleAsync(
+      // lynx.requireModuleAsync has two level hash and we cannot delete
+      // the LynxGroup level cache here.
+      // Temporarily using `Date.now` to avoid being cached.
+      __webpack_require__.p + cssHotUpdatePath,
+      (err, ret) => {
+        if (err) {
+          throw new Error(
+            `Failed to load CSS update file: ${cssHotUpdatePath}`,
+          );
+        }
+
+        if (ret.content) {
+          lynx.getCoreContext().dispatchEvent({
+            type: 'lynx.hmr.css',
+            data: {
+              cssId,
+              content: ret.content,
+              deps: ret.deps,
+              entry: lynx.__chunk_entries__[chunkName],
+            },
+          });
+        }
+      },
+    );
+  }
 }
 
 /**

package/runtime/hotModuleReplacement.lepus.cjs

@@ -2,13 +2,14 @@ function main() {
   try {
     lynx.getJSContext().addEventListener('lynx.hmr.css', (event) => {
       try {
-        const { data: { cssId, content, deps } } = event;
+        const { data: { cssId, content, deps, entry } } = event;
         // Update the css deps first because the css deps are updated actually.
         if (Array.isArray(deps[cssId])) {
           deps[cssId].forEach(depCSSId => {
             lynx.getDevtool().replaceStyleSheetByIdWithBase64(
               Number(depCSSId),
               content,
+              entry,
             );
           });
         }
@@ -16,6 +17,7 @@ function main() {
         lynx.getDevtool().replaceStyleSheetByIdWithBase64(
           Number(cssId),
           content,
+          entry,
         );
 
         __FlushElementTree();