Dynamically loaded CSS files are not inlined in SPA(动态加载的css文件没有进行内联)

[champkeh]

问题：动态加载的css文件没有进行内联

下面是在播放的时候去请求了css文件：

我的使用场景

我的场景是需要记录网站每一个版本的图片，我的处理方式是采用图片内容hash处理，然后hash值保存到图片url中，然后将这些图片单独保存到图片库。
在播放的时候，我会将event中的图片地址替换为图片库对应的地址，还原出对应版本的图片。

由于动态css文件没有进行内联，所以css文件中的图片地址没有保存到event中，我就无法在播放的时候动态修改这些图片的地址。

[champkeh]

这是对应的event文件：
events.json

[champkeh]

我看了一下源码，发现是因为mutation监听到插入link标签时立即访问doc.styleSheets获取页面样式，这里可能样式还没有加载及解析完成，所以没有拿到。

// remote css
if (tagName === 'link' && inlineStylesheet) {
  const stylesheet = Array.from(doc.styleSheets).find((s) => {
    return s.href === (n as HTMLLinkElement).href;
  });
  // note: stylesheet maybe null

  const cssText = getCssRulesString(stylesheet as CSSStyleSheet);
  if (cssText) {
    delete attributes.rel;
    delete attributes.href;
    attributes._cssText = absoluteToStylesheet(
      cssText,
      stylesheet!.href!,
    );
  }
}

做了一个小demo验证了这一点。

对于这种情况，我能想到的只能是通过onload事件来获取css内容，但这样的话，序列化可能就要改成异步的了。
不知道还有其他方案解决不 @Yuyz0112

[leossw]

我看了一下源码，发现是因为mutation监听到插入link标签时立即访问doc.styleSheets获取页面样式，这里可能样式还没有加载及解析完成，所以没有拿到。

// remote css
if (tagName === 'link' && inlineStylesheet) {
  const stylesheet = Array.from(doc.styleSheets).find((s) => {
    return s.href === (n as HTMLLinkElement).href;
  });
  // note: stylesheet maybe null

  const cssText = getCssRulesString(stylesheet as CSSStyleSheet);
  if (cssText) {
    delete attributes.rel;
    delete attributes.href;
    attributes._cssText = absoluteToStylesheet(
      cssText,
      stylesheet!.href!,
    );
  }
}

做了一个小demo验证了这一点。

对于这种情况，我能想到的只能是通过onload事件来获取css内容，但这样的话，序列化可能就要改成异步的了。 不知道还有其他方案解决不 @Yuyz0112

@champkeh 同样遇到了动态 css 文件无法内联的问题，请问你最后解决了么

[champkeh]

还没有，这个估计要看下官方是否会把序列化改为异步，或者你去检测路由是否有跳转新页面，然后重新做一个全量快照

[leossw]

还没有，这个估计要看下官方是否会把序列化改为异步，或者你去检测路由是否有跳转新页面，然后重新做一个全量快照

ok，我再试试看，能不能加个 styleSheets 的 observer

[leossw]

@champkeh 试了下把 mutation.ts 文件中的 pushAdd 方法改成 async，判断是 link 标签且是 css 资源，用 setTimeout 包起来倒是可以，你可以试试当成临时方案

[croqaz]

I also have the same problem and I thought about making all the functions async: serializeNode, serializeNodeWithId and snapshot. There are usecases where it can make sense.
It's probably better to handle waiting for the CSS or other resources before calling the snapshot function. This way all the resources are ready to be included in the snapshot.

[leossw]

I also have the same problem and I thought about making all the functions async: serializeNode, serializeNodeWithId and snapshot. There are usecases where it can make sense. It's probably better to handle waiting for the CSS or other resources before calling the snapshot function. This way all the resources are ready to be included in the snapshot.

@croqaz Try the right section(Mutation.ts). It works for me.

`
const pushAdd = async(n: Node) => {
const shadowHost: Element | null = n.getRootNode
? (n.getRootNode() as ShadowRoot)?.host
: null;
// ensure shadowHost is a Node, or doc.contains will throw an error
const notInDoc =
!this.doc.contains(n) &&
(!(shadowHost instanceof Node) || !this.doc.contains(shadowHost));
if (!n.parentNode || notInDoc) {
return;
}
const parentId = isShadowRoot(n.parentNode)
? this.mirror.getId((shadowHost as unknown) as INode)
: this.mirror.getId((n.parentNode as Node) as INode);
const nextId = getNextId(n);
if (parentId === -1 || nextId === -1 && n.tagName?.toLowerCase() !== 'link') {
return addList.addNode(n);
}

  const serializeObj = {
    doc: this.doc,
    map: this.mirror.map,
    blockClass: this.blockClass,
    blockSelector: this.blockSelector,
    maskTextClass: this.maskTextClass,
    maskTextSelector: this.maskTextSelector,
    skipChild: true,
    inlineStylesheet: this.inlineStylesheet,
    maskInputOptions: this.maskInputOptions,
    maskTextFn: this.maskTextFn,
    maskInputFn: this.maskInputFn,
    slimDOMOptions: this.slimDOMOptions,
    recordCanvas: this.recordCanvas,
    onSerialize: (currentN: INode) => {
      if (isIframeINode(currentN)) {
        this.iframeManager.addIframe(currentN);
      }
      if (hasShadowRoot(n)) {
        this.shadowDomManager.addShadowRoot(n.shadowRoot, document);
      }
    },
    onIframeLoad: (iframe: INode, childSn: serializedNodeWithId) => {
      this.iframeManager.attachIframe(iframe, childSn);
    },
  };

  let sn;
  if (n.tagName?.toLowerCase() === 'link' && n.getAttribute('rel') === 'stylesheet') {
    await new Promise(resolve => {
      setTimeout(() => {
        const ret = serializeNodeWithId(n, serializeObj);

        resolve(ret);
      }, 1000);
    }).then(res => {
      sn = res;
    });
  } else {
    sn = serializeNodeWithId(n, serializeObj);
  }

  if (sn) {
    adds.push({
      parentId,
      nextId: nextId === -1 && n.tagName?.toLowerCase() === 'link' ? null : nextId,
      node: sn,
    });
  }
};

`

[champkeh]

I don't think hardcode 1s in setTimeout is a perfect solution, and eventually, you also need to change to asynchronous serialization

[leossw]

I don't think hardcode 1s in setTimeout is a perfect solution, and eventually, you also need to change to asynchronous serialization

Yeah.. It`s a temporary way for me.

[Yuyz0112]

一个方案是监听 onload 或者衍生的变化，然后触发一个增量的事件记录 loaded CSS