导出时包含所有 class 为 pluginStyle 的样式

[frostime]

In what scenarios do you need this feature?

相关 issue：#9376

目前在导出的时候，会自动将插件的 css 样式囊括进来

但是有些插件的功能，需要选择性的添加或删除 css 样式。例如后续 callout 插件的开发计划中，计划让用户自定义 callout 样式。这样就不得不通过 js 自定义插入 style，而非通过统一的 import 将 css 加入 #pluginStyle 当中——带来的问题就是这些动态插入的样式，将无法在导出的时候生效。

Describe the optimal solution

希望在 style#pluginStyle 的基础上，扩展出对 style.pluginStyle 的支持：凡是 class 为 pluginStyle 的样式，都会在导出的时候生效。

Describe the candidate solution

No response

Other information

No response

[Vanessa219]

动态插入的我也无法获取到。是否可以通过 api 进行 css 代码片段的设置？

[frostime]

Part 1

您好，首先我没有太理解「动态插入的我也无法获取到」是啥意思，我看了一下 export 部分的代码，比如获取代码片段就是遍历所有的 style 标签

const getSnippetCSS = () => {
    let snippetCSS = "";
    document.querySelectorAll("style").forEach((item) => {
        if (item.id.startsWith("snippet")) {
            snippetCSS += item.innerHTML;
        }
    });
    return snippetCSS;
};

按照我的想法，插件动态插入样式最常见的操作就是通过操作 DOM 在 head 当中插入 style 标签

<style> ... </style>

那么如果给这类 style 一个统一的规范，比如 <style class="pluginStyle"> 或者 <style id="pluginStyle-xxx"> 不是一样可以在导出的时候获取到吗？

Part 2

提供 API 设置 css 样式也行，但是要解决一个问题是可以插入也可以删除、更新。不然使用起来就没那么灵活了。

[Vanessa219]

这样的话把 id 设置为 snippetPluginName 是否就可以了？

[frostime]

这样的话把 id 设置为 snippetPluginName 是否就可以了？

额……这样好像也行？

那这样的话要不给个接口如何？比如 plugin.setSnippet(css?: string)。如果 css 是 string 就插入一个片段，如果为 null 就删掉代码片段，构造的 style 标签的 id 就是 snippet-${plugin.name}。

[Vanessa219]

这个就不统一了，自己发挥吧 😄