fix: add enableCSSInvalidation for encodeCSS of css HMR

.changeset/tender-lemons-film.md

@@ -0,0 +1,7 @@
+---
+"@lynx-js/css-extract-webpack-plugin": patch
+"@lynx-js/template-webpack-plugin": patch
+"@lynx-js/react-rsbuild-plugin": patch
+---
+
+fix: add enableCSSInvalidation for encodeCSS of css HMR, this will fix pseudo-class (such as `:active`) not working in HMR.

packages/rspeedy/plugin-react/src/css.ts

@@ -23,6 +23,7 @@ export function applyCSS(
   const {
     enableRemoveCSSScope,
     enableCSSSelector,
+    enableCSSInvalidation,
     targetSdkVersion,
   } = options
 
@@ -131,6 +132,7 @@ export function applyCSS(
               ...options,
               enableRemoveCSSScope: enableRemoveCSSScope ?? true,
               enableCSSSelector,
+              enableCSSInvalidation,
               targetSdkVersion,
               cssPlugins: [
                 CSSPlugins.parserPlugins.removeFunctionWhiteSpace(),

packages/webpack/css-extract-webpack-plugin/etc/css-extract-webpack-plugin.api.md

@@ -21,6 +21,7 @@ export class CssExtractRspackPlugin {
 // @public
 export interface CssExtractRspackPluginOptions extends CssExtractRspackPluginOptions_2 {
     cssPlugins: Parameters<typeof LynxTemplatePlugin.convertCSSChunksToMap>[1];
+    enableCSSInvalidation: boolean;
     enableCSSSelector: boolean;
     enableRemoveCSSScope: boolean;
     targetSdkVersion: string;

packages/webpack/css-extract-webpack-plugin/src/CssExtractRspackPlugin.ts

@@ -33,6 +33,11 @@ interface CssExtractRspackPluginOptions
    */
   enableCSSSelector: boolean;
 
+  /**
+   * {@inheritdoc @lynx-js/template-webpack-plugin#LynxTemplatePluginOptions.enableCSSInvalidation}
+   */
+  enableCSSInvalidation: boolean;
+
   /**
    * {@inheritdoc @lynx-js/template-webpack-plugin#LynxTemplatePluginOptions.targetSdkVersion}
    */
@@ -110,7 +115,7 @@ class CssExtractRspackPlugin {
     .freeze<CssExtractRspackPluginOptions>({
       enableRemoveCSSScope: false,
       enableCSSSelector: true,
-      // TODO: version
+      enableCSSInvalidation: true,
       targetSdkVersion: '3.2',
       filename: '[name].css',
       cssPlugins: [],
@@ -245,6 +250,7 @@ class CssExtractRspackPluginImpl {
                     targetSdkVersion: options.targetSdkVersion,
                     enableCSSSelector: options.enableCSSSelector,
                     enableRemoveCSSScope: options.enableRemoveCSSScope,
+                    enableCSSInvalidation: options.enableCSSInvalidation,
                   },
                   options.cssPlugins,
                   hooks.encode.taps.length > 0

packages/webpack/template-webpack-plugin/etc/template-webpack-plugin.api.md

@@ -53,6 +53,14 @@ declare namespace CSSPlugins {
     }
 }
 
+// @public
+export interface EncodeCSSOptions {
+    enableCSSInvalidation: boolean;
+    enableCSSSelector: boolean;
+    enableRemoveCSSScope: boolean;
+    targetSdkVersion: string;
+}
+
 // @public
 export class LynxEncodePlugin {
     constructor(options?: LynxEncodePluginOptions | undefined);
@@ -61,11 +69,7 @@ export class LynxEncodePlugin {
     static BEFORE_ENCODE_STAGE: number;
     static defaultOptions: Readonly<Required<LynxEncodePluginOptions>>;
     static ENCODE_STAGE: number;
-    static encodeCSS(cssChunks: string[], options: {
-        enableCSSSelector: boolean;
-        enableRemoveCSSScope: boolean;
-        targetSdkVersion: string;
-    }, plugins?: CSS.Plugin[], encode?: (options: any) => Promise<{
+    static encodeCSS(cssChunks: string[], options: EncodeCSSOptions, plugins?: CSS.Plugin[], encode?: (options: any) => Promise<{
         buffer: Buffer;
     }>): Promise<Buffer>;
     // (undocumented)

packages/webpack/template-webpack-plugin/src/LynxEncodePlugin.ts

@@ -4,6 +4,7 @@
 
 import type { Compilation, Compiler } from 'webpack';
 
+import type { EncodeCSSOptions } from './css/encode.js';
 import { LynxTemplatePlugin } from './LynxTemplatePlugin.js';
 
 import type { CSS } from './index.js';
@@ -56,22 +57,7 @@ export class LynxEncodePlugin {
    */
   static async encodeCSS(
     cssChunks: string[],
-    options: {
-      /**
-       * {@inheritdoc @lynx-js/react-rsbuild-plugin#PluginReactLynxOptions.enableCSSSelector}
-       */
-      enableCSSSelector: boolean;
-
-      /**
-       * {@inheritdoc @lynx-js/react-rsbuild-plugin#PluginReactLynxOptions.enableRemoveCSSScope}
-       */
-      enableRemoveCSSScope: boolean;
-
-      /**
-       * {@inheritdoc @lynx-js/react-rsbuild-plugin#PluginReactLynxOptions.enableRemoveCSSScope}
-       */
-      targetSdkVersion: string;
-    },
+    options: EncodeCSSOptions,
     plugins?: CSS.Plugin[],
     // biome-ignore lint/suspicious/noExplicitAny: <explanation>
     encode?: (options: any) => Promise<{
@@ -267,3 +253,5 @@ export function isDebug(): boolean {
 export function isRsdoctor(): boolean {
   return process.env['RSDOCTOR'] === 'true';
 }
+
+export type { EncodeCSSOptions } from './css/encode.js';

packages/webpack/template-webpack-plugin/src/css/encode.ts

@@ -6,28 +6,41 @@ import { removeFunctionWhiteSpace } from '@lynx-js/css-serializer/dist/plugins/r
 import { cssChunksToMap } from './cssChunksToMap.js';
 import type { CSS } from '../index.js';
 
+/**
+ * The options for encoding CSS.
+ *
+ * @public
+ */
+export interface EncodeCSSOptions {
+  /**
+   * {@inheritdoc @lynx-js/react-rsbuild-plugin#PluginReactLynxOptions.enableCSSSelector}
+   */
+  enableCSSSelector: boolean;
+
+  /**
+   * {@inheritdoc @lynx-js/react-rsbuild-plugin#PluginReactLynxOptions.enableRemoveCSSScope}
+   */
+  enableRemoveCSSScope: boolean;
+
+  /**
+   * {@inheritdoc @lynx-js/react-rsbuild-plugin#PluginReactLynxOptions.enableCSSInvalidation}
+   */
+  enableCSSInvalidation: boolean;
+
+  /**
+   * {@inheritdoc @lynx-js/react-rsbuild-plugin#PluginReactLynxOptions.enableRemoveCSSScope}
+   */
+  targetSdkVersion: string;
+}
+
 export async function encodeCSS(
   cssChunks: string[],
   {
     enableCSSSelector,
     enableRemoveCSSScope,
+    enableCSSInvalidation,
     targetSdkVersion,
-  }: {
-    /**
-     * {@inheritdoc @lynx-js/react-rsbuild-plugin#PluginReactLynxOptions.enableCSSSelector}
-     */
-    enableCSSSelector: boolean;
-
-    /**
-     * {@inheritdoc @lynx-js/react-rsbuild-plugin#PluginReactLynxOptions.enableRemoveCSSScope}
-     */
-    enableRemoveCSSScope: boolean;
-
-    /**
-     * {@inheritdoc @lynx-js/react-rsbuild-plugin#PluginReactLynxOptions.enableRemoveCSSScope}
-     */
-    targetSdkVersion: string;
-  },
+  }: EncodeCSSOptions,
   plugins: CSS.Plugin[] = [removeFunctionWhiteSpace()],
   // biome-ignore lint/suspicious/noExplicitAny: <explanation>
   encode: (options: any) => Promise<{
@@ -49,6 +62,7 @@ export async function encodeCSS(
       bundleModuleMode: 'ReturnByFunction',
 
       enableCSSSelector,
+      enableCSSInvalidation,
       targetSdkVersion,
     },
     sourceContent: {

packages/webpack/template-webpack-plugin/src/index.ts

@@ -14,6 +14,9 @@ export type {
   TemplateHooks,
 } from './LynxTemplatePlugin.js';
 export { LynxEncodePlugin } from './LynxEncodePlugin.js';
-export type { LynxEncodePluginOptions } from './LynxEncodePlugin.js';
+export type {
+  LynxEncodePluginOptions,
+  EncodeCSSOptions,
+} from './LynxEncodePlugin.js';
 export * as CSSPlugins from './css/plugins/index.js';
 export * as CSS from './css/index.js';

packages/webpack/template-webpack-plugin/test/css.test.ts

@@ -28,6 +28,7 @@ describe('CSS', () => {
       enableCSSSelector: false,
       targetSdkVersion: '3.2',
       enableRemoveCSSScope: true,
+      enableCSSInvalidation: true,
     });
 
     expect(encode).toBeCalledTimes(1);