无内容<style>标签存在对应style rule的成因与实现方式咨询

现象成因 #

你遇到的是CSS-in-JS技术栈的典型表现，核心原因是站点采用了基于CSSOM接口的高性能样式注入方案：

• 前端代码不会把CSS文本直接写入<style>标签的内部文本，而是创建空<style>标签后，直接通过CSSStyleSheet.insertRule()接口将样式规则插入到标签对应的样式表实例中，因此在开发者工具中查看<style>标签内容时会显示为空。
• 对<style>标签执行删除后撤销的操作时，浏览器只会还原DOM节点本身，不会恢复之前通过JS注入到样式表实例中的规则，因此对应样式会消失。

该类样式的实现逻辑 #

这类动态样式的实现步骤如下：

• 运行时创建空<style>标签插入到页面DOM结构中
• 获取该标签关联的CSSStyleSheet实例
• 调用实例的insertRule方法直接注入样式规则，全程不修改<style>标签的文本内容
• 该方案的优势是样式注入性能远高于直接写入CSS文本，同时也会增加直接爬取样式的成本

样式提取复用方法 #

你可以通过两种方式获取目标样式：

• 直接在开发者工具「元素」面板的「样式」子 tab 中，找到.css-1r17gmu对应的所有样式规则，手动复制到自有项目的样式文件中即可。
• 若需要批量提取同类动态样式，可以在浏览器控制台执行以下代码，直接打印目标规则的完整内容：

Array.from(document.styleSheets).forEach(sheet => {
  try {
    Array.from(sheet.cssRules).forEach(rule => {
      if (rule.selectorText?.includes('.css-1r17gmu')) {
        console.log(rule.cssText)
      }
    })
  } catch(err) {
    // 跳过跨域样式表的访问报错
  }
})

内容的提问来源于stack exchange，提问作者Illya