Skip to content

Commit 7243242

Browse files
upupmingupupming
authored
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).
1 parent b5d5ea5 commit 7243242

9 files changed

Lines changed: 65 additions & 39 deletions

File tree

‎.changeset/tender-lemons-film.md‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
---
2+
"@lynx-js/css-extract-webpack-plugin": patch
3+
"@lynx-js/template-webpack-plugin": patch
4+
"@lynx-js/react-rsbuild-plugin": patch
5+
---
6+
7+
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‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ export function applyCSS(
2323
const {
2424
enableRemoveCSSScope,
2525
enableCSSSelector,
26+
enableCSSInvalidation,
2627
targetSdkVersion,
2728
} = options
2829

@@ -131,6 +132,7 @@ export function applyCSS(
131132
...options,
132133
enableRemoveCSSScope: enableRemoveCSSScope ?? true,
133134
enableCSSSelector,
135+
enableCSSInvalidation,
134136
targetSdkVersion,
135137
cssPlugins: [
136138
CSSPlugins.parserPlugins.removeFunctionWhiteSpace(),

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ export class CssExtractRspackPlugin {
2121
// @public
2222
export interface CssExtractRspackPluginOptions extends CssExtractRspackPluginOptions_2 {
2323
cssPlugins: Parameters<typeof LynxTemplatePlugin.convertCSSChunksToMap>[1];
24+
enableCSSInvalidation: boolean;
2425
enableCSSSelector: boolean;
2526
enableRemoveCSSScope: boolean;
2627
targetSdkVersion: string;

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

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,11 @@ interface CssExtractRspackPluginOptions
3333
*/
3434
enableCSSSelector: boolean;
3535

36+
/**
37+
* {@inheritdoc @lynx-js/template-webpack-plugin#LynxTemplatePluginOptions.enableCSSInvalidation}
38+
*/
39+
enableCSSInvalidation: boolean;
40+
3641
/**
3742
* {@inheritdoc @lynx-js/template-webpack-plugin#LynxTemplatePluginOptions.targetSdkVersion}
3843
*/
@@ -110,7 +115,7 @@ class CssExtractRspackPlugin {
110115
.freeze<CssExtractRspackPluginOptions>({
111116
enableRemoveCSSScope: false,
112117
enableCSSSelector: true,
113-
// TODO: version
118+
enableCSSInvalidation: true,
114119
targetSdkVersion: '3.2',
115120
filename: '[name].css',
116121
cssPlugins: [],
@@ -245,6 +250,7 @@ class CssExtractRspackPluginImpl {
245250
targetSdkVersion: options.targetSdkVersion,
246251
enableCSSSelector: options.enableCSSSelector,
247252
enableRemoveCSSScope: options.enableRemoveCSSScope,
253+
enableCSSInvalidation: options.enableCSSInvalidation,
248254
},
249255
options.cssPlugins,
250256
hooks.encode.taps.length > 0

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

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,14 @@ declare namespace CSSPlugins {
5353
}
5454
}
5555

56+
// @public
57+
export interface EncodeCSSOptions {
58+
enableCSSInvalidation: boolean;
59+
enableCSSSelector: boolean;
60+
enableRemoveCSSScope: boolean;
61+
targetSdkVersion: string;
62+
}
63+
5664
// @public
5765
export class LynxEncodePlugin {
5866
constructor(options?: LynxEncodePluginOptions | undefined);
@@ -61,11 +69,7 @@ export class LynxEncodePlugin {
6169
static BEFORE_ENCODE_STAGE: number;
6270
static defaultOptions: Readonly<Required<LynxEncodePluginOptions>>;
6371
static ENCODE_STAGE: number;
64-
static encodeCSS(cssChunks: string[], options: {
65-
enableCSSSelector: boolean;
66-
enableRemoveCSSScope: boolean;
67-
targetSdkVersion: string;
68-
}, plugins?: CSS.Plugin[], encode?: (options: any) => Promise<{
72+
static encodeCSS(cssChunks: string[], options: EncodeCSSOptions, plugins?: CSS.Plugin[], encode?: (options: any) => Promise<{
6973
buffer: Buffer;
7074
}>): Promise<Buffer>;
7175
// (undocumented)

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

Lines changed: 4 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44

55
import type { Compilation, Compiler } from 'webpack';
66

7+
import type { EncodeCSSOptions } from './css/encode.js';
78
import { LynxTemplatePlugin } from './LynxTemplatePlugin.js';
89

910
import type { CSS } from './index.js';
@@ -56,22 +57,7 @@ export class LynxEncodePlugin {
5657
*/
5758
static async encodeCSS(
5859
cssChunks: string[],
59-
options: {
60-
/**
61-
* {@inheritdoc @lynx-js/react-rsbuild-plugin#PluginReactLynxOptions.enableCSSSelector}
62-
*/
63-
enableCSSSelector: boolean;
64-
65-
/**
66-
* {@inheritdoc @lynx-js/react-rsbuild-plugin#PluginReactLynxOptions.enableRemoveCSSScope}
67-
*/
68-
enableRemoveCSSScope: boolean;
69-
70-
/**
71-
* {@inheritdoc @lynx-js/react-rsbuild-plugin#PluginReactLynxOptions.enableRemoveCSSScope}
72-
*/
73-
targetSdkVersion: string;
74-
},
60+
options: EncodeCSSOptions,
7561
plugins?: CSS.Plugin[],
7662
// biome-ignore lint/suspicious/noExplicitAny: <explanation>
7763
encode?: (options: any) => Promise<{
@@ -267,3 +253,5 @@ export function isDebug(): boolean {
267253
export function isRsdoctor(): boolean {
268254
return process.env['RSDOCTOR'] === 'true';
269255
}
256+
257+
export type { EncodeCSSOptions } from './css/encode.js';

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

Lines changed: 30 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -6,28 +6,41 @@ import { removeFunctionWhiteSpace } from '@lynx-js/css-serializer/dist/plugins/r
66
import { cssChunksToMap } from './cssChunksToMap.js';
77
import type { CSS } from '../index.js';
88

9+
/**
10+
* The options for encoding CSS.
11+
*
12+
* @public
13+
*/
14+
export interface EncodeCSSOptions {
15+
/**
16+
* {@inheritdoc @lynx-js/react-rsbuild-plugin#PluginReactLynxOptions.enableCSSSelector}
17+
*/
18+
enableCSSSelector: boolean;
19+
20+
/**
21+
* {@inheritdoc @lynx-js/react-rsbuild-plugin#PluginReactLynxOptions.enableRemoveCSSScope}
22+
*/
23+
enableRemoveCSSScope: boolean;
24+
25+
/**
26+
* {@inheritdoc @lynx-js/react-rsbuild-plugin#PluginReactLynxOptions.enableCSSInvalidation}
27+
*/
28+
enableCSSInvalidation: boolean;
29+
30+
/**
31+
* {@inheritdoc @lynx-js/react-rsbuild-plugin#PluginReactLynxOptions.enableRemoveCSSScope}
32+
*/
33+
targetSdkVersion: string;
34+
}
35+
936
export async function encodeCSS(
1037
cssChunks: string[],
1138
{
1239
enableCSSSelector,
1340
enableRemoveCSSScope,
41+
enableCSSInvalidation,
1442
targetSdkVersion,
15-
}: {
16-
/**
17-
* {@inheritdoc @lynx-js/react-rsbuild-plugin#PluginReactLynxOptions.enableCSSSelector}
18-
*/
19-
enableCSSSelector: boolean;
20-
21-
/**
22-
* {@inheritdoc @lynx-js/react-rsbuild-plugin#PluginReactLynxOptions.enableRemoveCSSScope}
23-
*/
24-
enableRemoveCSSScope: boolean;
25-
26-
/**
27-
* {@inheritdoc @lynx-js/react-rsbuild-plugin#PluginReactLynxOptions.enableRemoveCSSScope}
28-
*/
29-
targetSdkVersion: string;
30-
},
43+
}: EncodeCSSOptions,
3144
plugins: CSS.Plugin[] = [removeFunctionWhiteSpace()],
3245
// biome-ignore lint/suspicious/noExplicitAny: <explanation>
3346
encode: (options: any) => Promise<{
@@ -49,6 +62,7 @@ export async function encodeCSS(
4962
bundleModuleMode: 'ReturnByFunction',
5063

5164
enableCSSSelector,
65+
enableCSSInvalidation,
5266
targetSdkVersion,
5367
},
5468
sourceContent: {

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

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,9 @@ export type {
1414
TemplateHooks,
1515
} from './LynxTemplatePlugin.js';
1616
export { LynxEncodePlugin } from './LynxEncodePlugin.js';
17-
export type { LynxEncodePluginOptions } from './LynxEncodePlugin.js';
17+
export type {
18+
LynxEncodePluginOptions,
19+
EncodeCSSOptions,
20+
} from './LynxEncodePlugin.js';
1821
export * as CSSPlugins from './css/plugins/index.js';
1922
export * as CSS from './css/index.js';

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ describe('CSS', () => {
2828
enableCSSSelector: false,
2929
targetSdkVersion: '3.2',
3030
enableRemoveCSSScope: true,
31+
enableCSSInvalidation: true,
3132
});
3233

3334
expect(encode).toBeCalledTimes(1);

0 commit comments

Comments
 (0)