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

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @lynx-js/css-extract-webpack-plugin
 
+## 0.5.4
+
+### Patch Changes
+
+- Support `@lynx-js/template-webpack-plugin` v0.7.0. ([#880](https://github.com/lynx-family/lynx-stack/pull/880))
+
+- Support Rspack v1.3.11. ([#866](https://github.com/lynx-family/lynx-stack/pull/866))
+
+## 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

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}
      */
@@ -22,6 +26,14 @@ interface CssExtractRspackPluginOptions extends ExternalCssExtractRspackPluginOp
      * plugins passed to parser
      */
     cssPlugins: Parameters<typeof LynxTemplatePlugin.convertCSSChunksToMap>[1];
+    /**
+     * The name of non-initial CSS chunk files
+     */
+    chunkFilename?: string;
+    /**
+     * The name of each output bundle.
+     */
+    filename?: string;
 }
 /**
  * @public

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,29 +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 { 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', 
-                        // 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 });
+                        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`),
                         ]);
-                        this.#overrideChunkLoadingRuntimeModule(compiler, runtimeModule, cssHotUpdateList);
+                        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,
@@ -130,7 +157,7 @@ class CssExtractRspackPluginImpl {
                         }
                         // TODO: sourcemap
                         const content = source.source().toString('utf-8');
-                        const { cssMap } = LynxTemplatePlugin.convertCSSChunksToMap([content], options.cssPlugins);
+                        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);
@@ -144,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
@@ -176,15 +204,5 @@ class CssExtractRspackPluginImpl {
             }
         });
     }
-    #overrideChunkLoadingRuntimeModule(compiler, runtimeModule, cssHotUpdateList) {
-        const { RuntimeGlobals } = compiler.webpack;
-        runtimeModule.source.source = Buffer.concat([
-            Buffer.from(runtimeModule.source.source),
-            // cssHotUpdateList
-            Buffer.from(`
-      ${RuntimeGlobals.require}.cssHotUpdateList = ${cssHotUpdateList ? JSON.stringify(cssHotUpdateList) : 'null'};
-    `),
-        ]);
-    }
 }
 //# sourceMappingURL=CssExtractRspackPlugin.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lynx-js/css-extract-webpack-plugin",
-  "version": "0.5.2",
+  "version": "0.5.4",
   "description": "This plugin extracts CSS into separate files. It creates a CSS file per JS file which contains CSS.",
   "keywords": [
     "webpack",
@@ -44,17 +44,18 @@
     "mini-css-extract-plugin": "^2.9.2"
   },
   "devDependencies": {
-    "@microsoft/api-extractor": "7.51.1",
-    "@rspack/core": "1.2.8",
+    "@microsoft/api-extractor": "7.52.8",
+    "@rspack/core": "1.3.11",
     "css-loader": "^7.1.2",
     "sass-loader": "^16.0.5",
-    "webpack": "^5.98.0",
+    "webpack": "^5.99.9",
     "@lynx-js/css-serializer": "0.1.2",
-    "@lynx-js/template-webpack-plugin": "0.6.5",
-    "@lynx-js/test-tools": "0.0.0"
+    "@lynx-js/template-webpack-plugin": "0.7.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"
+    "@lynx-js/template-webpack-plugin": "^0.5.0 || ^0.6.0 || ^0.7.0"
   },
   "engines": {
     "node": ">=18"