[Bug] react-jss 非首个样式使用 node.parent.insertBefore 插入，dynamicStyleSheetElements无法记录相应style

umijs / qiankun

📦 🚀 Blazing fast, simple and complete solution for micro frontends.

https://qiankun.umijs.org

MIT License

15.57k stars 2k forks source link

[Bug] react-jss 非首个样式使用 node.parent.insertBefore 插入，dynamicStyleSheetElements无法记录相应style #1533

Open LincWong opened 3 years ago

LincWong commented 3 years ago

What happens?

父应用切换路由后，子应用 react-jss插入的样式丢失

父应用：vue2 子应用：react17 + react-jss

问题原因

react-jss 库的样式插入逻辑避开了qiankun的劫持

https://github.com/cssinjs/jss/blob/18c2dd913d2d289c95c68ab3daf841716d78c65f/packages/jss/src/DomRenderer.js#L231

本地实测注释 231-237行则可以解决该问题；

问题过程

第一次插入style，触发qiankun劫持的appendChild，会被挪到子应用container中。第二次插入style，直接进到node.parent.insertBefore，这时node.parent是子应用的container，所以qiankun的所有劫持都感知不到插入的style；

问题现象

直接导致rebuild后，子应用样式丢失。

建议修复方案

子应用容器也加上appendChild、insertBefore监听应该能解决这个问题？

相关环境信息

qiankun 版本：2.4.2
浏览器版本：Chrome 91
操作系统：MAC OS 11.3.1

LincWong commented 3 years ago

https://www.npmjs.com/package/react-jss

该库 Weekly Downloads 166,733 是 React CSS IN JS 最多人使用的解决方案，请 @kuitos 跟进处理一下

nantunes commented 2 years ago

JSS keeps references to unmounted <style> elements in its global sheets registry. It always start its search for the insertion point at this global registry, even if a new SheetsRegistry is created on each micro app mount (or even if a new JSS instance is created).

In my use case I had to do:

import { sheets } from "jss";
// [...]
sheets.reset();

This works if only one micro app using JSS is rendered at one time (singular/singleton scenario). Additional logic might be needed when rendering more than one.

github-actions[bot] commented 2 years ago

Hello @LincWong. We totally like your proposal/feedback, welcome to send us a Pull Request for it. Please be sure to fill in the default template in the Pull Request, provide changelog/documentation/test cases if needed and make sure CI passed, we will review it soon. We appreciate your effort in advance and looking forward to your contribution!

你好 @LincWong，我们完全同意你的提议/反馈，欢迎直接在此仓库创建一个 Pull Request 来解决这个问题。请务必填写 Pull Request 内的预设模板，提供改动所需相应的 changelog、测试用例、文档等，并确保 CI 通过，我们会尽快进行 Review，提前感谢和期待您的贡献。