@lynx-js/css-extract-webpack-plugin 0.5.1 → 0.5.3

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @lynx-js/css-extract-webpack-plugin
 
+## 0.5.3
+
+### Patch Changes
+
+- Fix CSS HMR not working with nested entry name. ([#456](https://github.com/lynx-family/lynx-stack/pull/456))
+
+- fix: add enableCSSInvalidation for encodeCSS of css HMR, this will fix pseudo-class (such as `:active`) not working in HMR. ([#435](https://github.com/lynx-family/lynx-stack/pull/435))
+
+## 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

package/lib/CssExtractRspackPlugin.d.ts

@@ -1,7 +1,7 @@
 import type { Compiler, CssExtractRspackPluginOptions as ExternalCssExtractRspackPluginOptions } from '@rspack/core';
 import { LynxTemplatePlugin } from '@lynx-js/template-webpack-plugin';
 /**
- * The options for {@link @lynx-js/webpack/css-extract-webpack-plugin#CssExtractRspackPlugin}
+ * The options for {@link @lynx-js/css-extract-webpack-plugin#CssExtractRspackPlugin}
  *
  * @public
  */
@@ -14,6 +14,10 @@ interface CssExtractRspackPluginOptions extends ExternalCssExtractRspackPluginOp
      * {@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}
      */

package/lib/CssExtractRspackPlugin.js

@@ -66,7 +66,7 @@ class CssExtractRspackPlugin {
         .freeze({
         enableRemoveCSSScope: false,
         enableCSSSelector: true,
-        // TODO: version
+        enableCSSInvalidation: true,
         targetSdkVersion: '3.2',
         filename: '[name].css',
         cssPlugins: [],
@@ -97,19 +97,56 @@ class CssExtractRspackPluginImpl {
         compiler.hooks.thisCompilation.tap(this.name, (compilation) => {
             if (compiler.options.mode === 'development'
                 || process.env['NODE_ENV'] === 'development') {
-                // We require publicPath to get css.hot-update.json
-                compilation.hooks.additionalTreeRuntimeRequirements.tap(this.name, (_, set) => {
-                    set.add(compiler.webpack.RuntimeGlobals.publicPath);
-                });
-                compilation.hooks.runtimeModule.tap(this.name, (runtimeModule, chunk) => {
-                    if (runtimeModule.name === 'require_chunk_loading') {
-                        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 { RuntimeGlobals, RuntimeModule } = compiler.webpack;
+                class CSSHotUpdateRuntimeModule extends RuntimeModule {
+                    constructor(hash) {
+                        super('lynx css hot update');
+                        this.hash = hash;
                     }
-                });
+                    generate() {
+                        const chunk = this.chunk;
+                        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', { 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`),
+                        ]);
+                        return `
+${RuntimeGlobals.require}.cssHotUpdateList = ${cssHotUpdateList ? JSON.stringify(cssHotUpdateList) : 'null'};
+`;
+                    }
+                }
+                const onceForChunkSet = new WeakSet();
+                const handler = (chunk, runtimeRequirements) => {
+                    if (onceForChunkSet.has(chunk))
+                        return;
+                    onceForChunkSet.add(chunk);
+                    runtimeRequirements.add(RuntimeGlobals.publicPath);
+                    compilation.addRuntimeModule(chunk, new CSSHotUpdateRuntimeModule(this.hash));
+                };
+                compilation.hooks.runtimeRequirementInTree
+                    .for(RuntimeGlobals.ensureChunkHandlers)
+                    .tap(this.name, handler);
+                compilation.hooks.runtimeRequirementInTree
+                    .for(RuntimeGlobals.hmrDownloadUpdateHandlers)
+                    .tap(this.name, handler);
+                compilation.hooks.runtimeRequirementInTree
+                    .for(RuntimeGlobals.hmrDownloadManifest)
+                    .tap(this.name, handler);
+                compilation.hooks.runtimeRequirementInTree
+                    .for(RuntimeGlobals.baseURI)
+                    .tap(this.name, handler);
+                compilation.hooks.runtimeRequirementInTree
+                    .for(RuntimeGlobals.externalInstallChunk)
+                    .tap(this.name, handler);
+                compilation.hooks.runtimeRequirementInTree
+                    .for(RuntimeGlobals.onChunksLoaded)
+                    .tap(this.name, handler);
                 compilation.hooks.processAssets.tapPromise({
                     name: this.name,
                     stage: 300,
@@ -134,6 +171,7 @@ class CssExtractRspackPluginImpl {
                                 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
@@ -148,7 +186,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,19 +199,10 @@ class CssExtractRspackPluginImpl {
                             }
                         }
                     }
+                    this.hash = compilation.hash;
                 });
             }
         });
     }
-    #overrideChunkLoadingRuntimeModule(compiler, runtimeModule, filename) {
-        const { RuntimeGlobals } = compiler.webpack;
-        runtimeModule.source.source = Buffer.concat([
-            Buffer.from(runtimeModule.source.source),
-            // lynxCssFileName
-            Buffer.from(`
-      ${RuntimeGlobals.require}.lynxCssFileName = ${filename ? JSON.stringify(filename) : 'null'};
-    `),
-        ]);
-    }
 }
 //# sourceMappingURL=CssExtractRspackPlugin.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lynx-js/css-extract-webpack-plugin",
-  "version": "0.5.1",
+  "version": "0.5.3",
   "description": "This plugin extracts CSS into separate files. It creates a CSS file per JS file which contains CSS.",
   "keywords": [
     "webpack",
@@ -44,14 +44,15 @@
     "mini-css-extract-plugin": "^2.9.2"
   },
   "devDependencies": {
-    "@microsoft/api-extractor": "7.51.1",
-    "@rspack/core": "1.2.7",
+    "@microsoft/api-extractor": "7.52.2",
+    "@rspack/core": "1.3.1",
     "css-loader": "^7.1.2",
     "sass-loader": "^16.0.5",
     "webpack": "^5.98.0",
     "@lynx-js/css-serializer": "0.1.2",
-    "@lynx-js/template-webpack-plugin": "0.6.4",
-    "@lynx-js/test-tools": "0.0.0"
+    "@lynx-js/template-webpack-plugin": "0.6.8",
+    "@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"

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();