Hello, Construct Stylesheets

[gogoend]

近期，笔者的电脑自动更新了 Chrome 浏览器，升级到了 85 版本。笔者在开发者工具中展示的 What's New 选项卡里发现了 “Style editing for CSS-in-JS” 这项更新（如下图）。进入页面中看了看 —— Construct Stylesheets，CSS 还可以使用 JavaScript来构造？本文就来对 Construct Stylesheets 尝试这进行一番探索。

参考资料

https://github.com/WICG/construct-stylesheets/blob/gh-pages/explainer.md
https://developers.google.cn/web/updates/2019/02/constructable-stylesheets

快速Demo

// 1. 构造 CSSStyleSheet 实例
let sheet = new CSSStyleSheet;
// 2. 在该实例中插入一条CSS规则
sheet.insertRule(`body div{outline:1px solid #F00}`);
// 3. 将该实例包含的样式应用到 document
document.adoptedStyleSheets = [ sheet ]

以笔者写本文时使用的GitHub页面为例，下图中，左侧是页面原本的状态，右侧是执行以上代码后的状态。

[gogoend]

const createStyleSheet = (rulesText) => {
let sheet = new CSSStyleSheet;
sheet.insertRule(rulesText);

return sheet
}
const injectStyleSheets = (document, ...styleSheets) => {
document.adoptedStyleSheets(styleSheets)
}