fix: add enableCSSInvalidation for encodeCSS of css HMR (#435)

<!--
  Thank you for submitting a pull request!

We appreciate the time and effort you have invested in making these
changes. Please ensure that you provide enough information to allow
others to review your pull request.

Upon submission, your pull request will be automatically assigned with
reviewers.

If you want to learn more about contributing to this project, please
visit:
https://github.com/lynx-family/lynx-stack/blob/main/CONTRIBUTING.md.
-->

## Summary

<!-- Can you explain the reasoning behind implementing this change? What
problem or issue does this pull request resolve? -->

<!-- It would be helpful if you could provide any relevant context, such
as GitHub issues or related discussions. -->

## Checklist

<!--- Check and mark with an "x" -->

- [ ] Tests updated (or not required).
- [ ] Documentation updated (or not required).

Author: upupming

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