Fix scoped css

[sea-chao]

Fix #1482

问题描述

子应用为vue3+vite4时，HRM时micro-app scope丢失

问题原因

vite4在进行HMR时，对于SFC中的CSS变化，会直接修改style标签中的内容，但scopedCSS仅在节点插入时被计算

function updateStyle(id, content) {
  let style = sheetsMap.get(id);
  if (!style) {
    style = document.createElement("style");
    style.setAttribute("type", "text/css");
    style.setAttribute("data-vite-dev-id", id);
    style.textContent = content;
    if (cspNonce) {
      style.setAttribute("nonce", cspNonce);
    }
    if (!lastInsertedStyle) {
      document.head.appendChild(style);
      setTimeout(() => {
        lastInsertedStyle = void 0;
      }, 0);
    } else {
      lastInsertedStyle.insertAdjacentElement("afterend", style);
    }
    lastInsertedStyle = style;
  } else {
    style.textContent = content;
  }
  sheetsMap.set(id, style);
}

解决方法

对于创建了scopedCSS的style标签，监听其内容变化，若变化后不包含scope，则重新计算scope

      const observer = new MutationObserver(() => {
        const isPrefixed = styleElement.textContent && new RegExp(prefix).test(styleElement.textContent)
        observer.disconnect()
        if (!isPrefixed) {
          styleElement.__MICRO_APP_HAS_SCOPED__ = false
        }
        scopedCSS(styleElement, app, linkPath)
      })
      observer.observe(styleElement, { childList: true, characterData: true })