[Bug] 开启 experimentalStyleIsolation 后，样式处理异常

[ken1987]

What happens?

开启 experimentalStyleIsolation 进行样式隔离，源码中样式代码如下：

.demo { padding: var(--any); padding-bottom: 0 }

在 chrome 49-103中，处理后的代码表现如下：

[div[data-qiankun="sub"] .demo { padding-top: ; padding-right: ; padding-right: ; padding-bottom: 0 }

padding 被展开，并且前三个属性丢失

最小可复现仓库

子应用代码

<style>
.demo { --any: 10px; padding: var(--any); padding-bottom: 0 }
</style>
<div class="demo">demo</div>

复现步骤，错误日志以及相关配置

1. 在子应用中，样式中添加符合型的样式，且包含变量
2. 然后紧跟其后，添加一个子类型
3. 在主应用中开启experimentalStyleIsolation: true，并加载子应用
4. 发现 demo 样式丢失
5. 通过调试代码，发现和浏览器底层 cssText 执行 bug 有关，执行如下代码

var a = document.createElement('style')
a.innerText='body{ margin: var(--any); margin-bottom: 0 }'
document.body.appendChild(a)
a.sheet.cssRules[0].cssText

// chrome 103 console
// 'body { margin-top: ; margin-right: ; margin-left: ; margin-bottom: 0px; }'

相关环境信息

• qiankun 版本：2.6.3
• 浏览器版本：chrome 103：
• 操作系统：mac os 12：

[github-actions]

Hello @ken1987. 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!

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

[ken1987]

暂时没有比较简便的处理方案。

同样的问题，safari 低版本中，cssText 也存在兼容问题：

var a = document.createElement('style')
a.innerText='body{  background-color: initial }'
document.body.appendChild(a)
a.sheet.cssRules[0].cssText

// safari 15.6.1 或 14.1 异常
// 'body {  }'

// safari 16.6 或 17.2.1 正常
// 'body{  background-color: initial }'

[github-actions]

由于缺乏足够的信息(github、stackblitz、codesandbox等可复现仓库)，我们暂时关闭了该 Issue。请修改（不要回复） Issue 提供最小重现以重新开启。谢谢。如果只是单独的技术咨询，可移步 https://qiankun.umijs.org/#-community 交流~