[Bug] external 引入的border:var(--el-border); border-color: var(--el-border-color);转换成style后border的样式丢失了

[chenzhiwei199]

What happens?

external stylesheet 转换为style标签的时候，部分简写使用css variable的样式会失效。

最小可复现仓库

const s = document.createElement('style') const t = document.createTextNode(':root { --el-border: 1px solid black; } .el-button{border:var(--el-border); border-color: var(--el-border-color); color: var(--el-color);}'); s.appendChild(t); document.body.appendChild(s)

可以看到，css 定义是 border:var(--el-border);border-color: var(--el-border-color);， 但是转换之后border的样式丢失了

相关环境信息

• qiankun 版本 2.7.0
• 浏览器版本： 版本 101.0.4951.64（正式版本） (arm64)
• 操作系统：MacBook Pro

[raoooool]

用 antd 也会出现同样的问题，在主应用是 antd3，子应用是 antd4 的情况下。

[YuArtian]

额 解决了吗

[chenzhiwei199]

我自己解决了，通过postcss自己来解析，不用浏览器的。 fork qiankun， 修改 sandbox ->patchers -> css 文件

import postcss from 'postcss';
import type { ChildNode } from 'postcss';
export function parseRulePostCss(css: string) {
  try {
    const res = postcss.parse(css);
    function travser(nodes: ChildNode[]) {
      return nodes.reduce((ruleList, item) => {
        let rule: any;
        if (item.type === 'rule') {
          rule = {
            selectorText: item.selector,
            cssText: item.toString(),
            type: RuleType.STYLE,
          };
        } else if (item.type === 'atrule') {
          if (item.name === 'media') {
            rule = {
              type: RuleType.MEDIA,
              conditionText: item.params,
              cssText: item.toString(),
              cssRules: travser(item.nodes),
            };
          } else if (item.name === 'supports') {
            rule = {
              type: RuleType.SUPPORTS,
              cssText: item.toString(),
              cssRules: travser(item.nodes),
              conditionText: item.params,
            };
          } else if (item.name === 'charset') {
            rule = {
              cssText: item.toString() + ';',
            };
          } else {
            rule = {
              cssText: item.toString(),
            };
          }
          // "charset" 要过滤掉
          // item.name === '';
        }
        if (rule) {
          return ruleList.concat(rule);
        } else {
          return ruleList;
        }
      }, [] as any);
    }
    return travser(res.nodes);
  } catch (error) {
    return [];
  }
}


 process(styleNode: HTMLStyleElement, prefix: string = '') {
    if (styleNode.textContent !== '') {
      const textNode = document.createTextNode(styleNode.textContent || '');
      this.swapNode.appendChild(textNode);
      // const sheet = this.swapNode.sheet as any; // type is missing

      // const rules = arrayify<CSSRule>(sheet?.cssRules ?? []);
      const rules = arrayify<CSSRule>(parseRulePostCss(textNode.textContent || '') ?? []);

      const css = this.rewrite(rules, prefix);
      // eslint-disable-next-line no-param-reassign
      styleNode.textContent = css;

      // cleanup
      this.swapNode.removeChild(textNode);
    }

[wangjunpeng1015]

没有大佬修一下吗？