Skip to content

fix: add enableCSSInvalidation for encodeCSS of css HMR #435

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
merged 1 commit into from
Apr 1, 2025
Merged

fix: add enableCSSInvalidation for encodeCSS of css HMR #435

merged 1 commit into from
Apr 1, 2025

Conversation

upupming
Copy link
Collaborator

@upupming upupming commented Apr 1, 2025

Summary

Checklist

  • Tests updated (or not required).
  • Documentation updated (or not required).

@upupming upupming requested a review from colinaaa as a code owner April 1, 2025 06:21
@changeset-bot changeset-bot
Copy link

changeset-bot bot commented Apr 1, 2025 •
edited
Loading

🦋 Changeset detected

Latest commit: f58b7d4

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 4 packages
Name Type
@lynx-js/css-extract-webpack-plugin Patch
@lynx-js/template-webpack-plugin Patch
@lynx-js/react-rsbuild-plugin Patch
@lynx-js/react-alias-rsbuild-plugin Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@codecov Codecov
Copy link

codecov bot commented Apr 1, 2025 •
edited
Loading

Codecov Report

All modified and coverable lines are covered by tests ✅

✅ All tests successful. No failed tests found.

📢 Thoughts on this report? Let us know!

@codspeed-hq CodSpeed HQ
Copy link

codspeed-hq bot commented Apr 1, 2025 •
edited
Loading

CodSpeed Performance Report

Merging #435 will not alter performance

Comparing upupming:fix/hmr-option (f58b7d4) with main (de30a67)

Summary

✅ 1 untouched benchmarks

colinaaa
colinaaa approved these changes Apr 1, 2025
View reviewed changes
Copy link
Collaborator

@colinaaa colinaaa left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM. But I think we need to find a way in the future to use the encode options of this compilation.

@colinaaa colinaaa added this pull request to the merge queue Apr 1, 2025
Merged via the queue into lynx-family:main with commit 7243242 Apr 1, 2025
21 checks passed
@github-actions github-actions bot mentioned this pull request Apr 1, 2025
Merged
colinaaa pushed a commit that referenced this pull request Apr 5, 2025
@github-actions
chore: Release 2025-04-05 13:19:16 (#413)
6b210f3 
This PR was opened by the [Changesets
release](https://github.com/changesets/action) GitHub action. When
you're ready to do a release, you can merge this and the packages will
be published to npm automatically. If you're not ready to do a release
yet, that's fine, whenever you add more changesets to main, this PR will
be updated.


# Releases
## @lynx-js/rspeedy@0.9.0

### Minor Changes

- Bundle Rspeedy with Rslib for faster start-up times.
([#395](#395))

This would be a **BREAKING CHANGE** for using [global version of
Rspeedy](https://lynxjs.org/rspeedy/cli#using-the-global-rspeedy-version).

Please ensure that you update your globally installed version of
Rspeedy:

    ```bash
    npm install --global @lynx-js/rspeedy@latest
    ```

- Bump Rsbuild v1.3.2 with Rspack v1.3.1
([#446](#446))

- **BREAKING CHANGE**: Added explicit TypeScript peer dependency
requirement of 5.1.6 - 5.8.x.
([#480](#480))

This formalizes the existing TypeScript version requirement in
`peerDependencies` (marked as optional since it is only needed for
TypeScript configurations). The actual required TypeScript version has
not changed.

Note: This may cause installation to fail if you have strict peer
dependency checks enabled.

Node.js v22.7+ users can bypass TypeScript installation using
`--experimental-transform-types` or `--experimental-strip-types` flags.
Node.js v23.6+ users don't need any flags. See [Node.js -
TypeScript](https://nodejs.org/api/typescript.html) for details.

### Patch Changes

- Support cli flag `--base` to specify the base path of the server.
([#387](#387))

- Support cli option `--environment` to specify the name of environment
to build ([#462](#462))

- Select the most appropriate network interface.
([#457](#457))

This is a port of
[webpack/webpack-dev-server#5411](webpack/webpack-dev-server#5411).

- Support Node.js v23.6+ native TypeScript.
([#481](#481))

See [Node.js - TypeScript](https://nodejs.org/api/typescript.html) for
more details.

- Support cli option `--env-mode` to specify the env mode to load the
`.env.[mode]` file.
([#453](#453))

- Support `dev.hmr` and `dev.liveReload`.
([#458](#458))

- Updated dependencies
\[[`df63722`](df63722),
[`df63722`](df63722)]:
    -   @lynx-js/chunk-loading-webpack-plugin@0.2.0

## @lynx-js/chunk-loading-webpack-plugin@0.2.0

### Minor Changes

- **BREAKING CHANGE**: Requires `@rspack/core` v1.3.0.
([#400](#400))

- **BREAKING CHANGE**: Remove the deprecated `ChunkLoadingRspackPlugin`,
use `ChunkLoadingWebpackPlugin` with `output.chunkLoading: 'lynx'`
instead. ([#400](#400))

    ```js
import { ChunkLoadingWebpackPlugin } from
"@lynx-js/chunk-loading-webpack-plugin";

    export default {
      output: {
        chunkLoading: "lynx",
      },
      plugins: [new ChunkLoadingWebpackPlugin()],
    };
    ```

## @lynx-js/react@0.106.3

### Patch Changes

- Do some global var initialize in hydrate, which fixes error like
`cannot read property '-21' of undefined` and some style issue.
([#461](#461))

- fix: ensure ref lifecycle events run after firstScreen in the
background thread
([#434](#434))

This patch fixes an issue where ref lifecycle events were running before
firstScreen events in the background thread async render mode, which
could cause refs to be undefined when components try to access them.

## @lynx-js/qrcode-rsbuild-plugin@0.3.5

### Patch Changes

- Build with Rslib
([#396](#396))

## @lynx-js/react-rsbuild-plugin@0.9.5

### Patch Changes

- fix: add enableCSSInvalidation for encodeCSS of css HMR, this will fix
pseudo-class (such as `:active`) not working in HMR.
([#435](#435))

- Disable `module.generator.json.JSONParse` option as it increases the
bundle size of `main-thread.js`. For more detail, please see this
[issue](webpack/webpack#19319).
([#402](#402))

- Updated dependencies
\[[`3e7988f`](3e7988f),
[`7243242`](7243242)]:
    -   @lynx-js/css-extract-webpack-plugin@0.5.3
    -   @lynx-js/template-webpack-plugin@0.6.8
    -   @lynx-js/react-alias-rsbuild-plugin@0.9.5
    -   @lynx-js/react-refresh-webpack-plugin@0.3.2
    -   @lynx-js/react-webpack-plugin@0.6.10
    -   @lynx-js/web-webpack-plugin@0.6.3

## @lynx-js/web-constants@0.10.1

### Patch Changes

- feat: onNapiModulesCall function add new param: `dispatchNapiModules`,
napiModulesMap val add new param: `handleDispatch`.
([#414](#414))

Now you can use them to actively communicate to napiModules (background
thread) in onNapiModulesCall (ui thread).

-   Updated dependencies \[]:
    -   @lynx-js/web-worker-rpc@0.10.1

## @lynx-js/web-core@0.10.1

### Patch Changes

- docs: fix documents about lynx-view's properties
([#412](#412))

    Attributes should be hyphen-name: 'init-data', 'global-props'.

    now all properties has corresponding attributes.

- feat: onNapiModulesCall function add new param: `dispatchNapiModules`,
napiModulesMap val add new param: `handleDispatch`.
([#414](#414))

Now you can use them to actively communicate to napiModules (background
thread) in onNapiModulesCall (ui thread).

- Updated dependencies
\[[`1af3b60`](1af3b60)]:
    -   @lynx-js/web-constants@0.10.1
    -   @lynx-js/web-worker-runtime@0.10.1
    -   @lynx-js/web-worker-rpc@0.10.1

## @lynx-js/web-elements@0.5.3

### Patch Changes

- feat: add `layoutchange` event support for x-view and x-text
([#408](#408))

## @lynx-js/web-mainthread-apis@0.10.1

### Patch Changes

- Updated dependencies
\[[`1af3b60`](1af3b60)]:
    -   @lynx-js/web-constants@0.10.1

## @lynx-js/web-worker-runtime@0.10.1

### Patch Changes

- feat: onNapiModulesCall function add new param: `dispatchNapiModules`,
napiModulesMap val add new param: `handleDispatch`.
([#414](#414))

Now you can use them to actively communicate to napiModules (background
thread) in onNapiModulesCall (ui thread).

- Updated dependencies
\[[`1af3b60`](1af3b60)]:
    -   @lynx-js/web-constants@0.10.1
    -   @lynx-js/web-mainthread-apis@0.10.1
    -   @lynx-js/web-worker-rpc@0.10.1

## @lynx-js/css-extract-webpack-plugin@0.5.3

### Patch Changes

- Fix CSS HMR not working with nested entry name.
([#456](#456))

- fix: add enableCSSInvalidation for encodeCSS of css HMR, this will fix
pseudo-class (such as `:active`) not working in HMR.
([#435](#435))

## @lynx-js/template-webpack-plugin@0.6.8

### Patch Changes

- fix: add enableCSSInvalidation for encodeCSS of css HMR, this will fix
pseudo-class (such as `:active`) not working in HMR.
([#435](#435))

## create-rspeedy@0.9.0



## @lynx-js/react-alias-rsbuild-plugin@0.9.5



## upgrade-rspeedy@0.9.0



## @lynx-js/web-worker-rpc@0.10.1

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
@colinaaa colinaaa mentioned this pull request Jun 6, 2025
Open
@upupming upupming mentioned this pull request Jun 6, 2025
Merged
2 tasks
github-merge-queue bot pushed a commit that referenced this pull request Jun 16, 2025
@upupming
feat(css-hmr): use the compiler options from main template for css hmr (
0d151db 
#1033)

<!--
  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. -->

In #435, we have passed the `enableCSSInvalidation` compiler option for
CSS hmr updates encode.

However, many other compiler options may cause CSS not to work or crash
problems. We have found that missing `enableParallelElement` may cause a
page crash in some circumstances. To fully solve this issue, we used the
same encoding options from the main template to encode CSS hmr updates.

Since `CssExtractRspackPlugin` already depends on `LynxTemplatePlugin`,
we tap the `encode` hook to make a copy of the real compiler options for
the main template.

## Checklist

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

- [x] Tests updated (or not required).
- [x] Documentation updated (or not required).
PupilTong pushed a commit to PupilTong/lynx-stack that referenced this pull request Jun 17, 2025
@upupming @PupilTong
feat(css-hmr): use the compiler options from main template for css hmr (
7639436 
lynx-family#1033)

<!--
  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. -->

In lynx-family#435, we have passed the `enableCSSInvalidation` compiler option for
CSS hmr updates encode.

However, many other compiler options may cause CSS not to work or crash
problems. We have found that missing `enableParallelElement` may cause a
page crash in some circumstances. To fully solve this issue, we used the
same encoding options from the main template to encode CSS hmr updates.

Since `CssExtractRspackPlugin` already depends on `LynxTemplatePlugin`,
we tap the `encode` hook to make a copy of the real compiler options for
the main template.

## Checklist

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

- [x] Tests updated (or not required).
- [x] Documentation updated (or not required).
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@colinaaa colinaaa colinaaa approved these changes

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@upupming @colinaaa