@wordpress/style-runtime

用于注册样式并将其注入一个或多个文档的运行时辅助工具。

CSS 模块导入会作为 JavaScript 模块副作用被执行。默认情况下，
这意味着生成的 style 标签会被插入根文档。这对大多数屏幕有效，
但不涵盖在另一个文档（例如 iframe 画布）内渲染的组件样式。

@wordpress/style-runtime 维护样式文本和目标文档的共享注册表。
构建工具可以在导入 CSS 模块时注册已编译样式，
而宿主组件可以注册应接收这些样式的额外文档。

用法

生成的 CSS 模块输出会使用稳定的哈希值注册样式：

import { registerStyle } from '@wordpress/style-runtime';

registerStyle( 'style-hash', '.example{color:red;}' );

将软件包组件渲染到另一个文档中的宿主会将该文档注册为样式目标：

import { registerDocument } from '@wordpress/style-runtime';

const unregisterDocument = registerDocument( iframe.contentDocument );

// 稍后，当不再使用该文档时：
unregisterDocument();

注册文档后，所有先前注册的样式都会被注入其中。后续样式会注入每个已注册的文档。

该运行时通过一个保留的 globalThis.__wpStyleRuntime 对象来协调单独打包的此软件包副本。使用者应使用下面的公共 API，而不是直接读写该全局对象。

API

registerStyle

在稳定的哈希值下注册 CSS 文本，并将其注入所有已注册的文档。该哈希值用于去除重复的 style 标签，因此同一文档中不会多次插入相同样式。

已注册的样式会在页面生命周期内保留，因此可以重新应用到稍后注册的文档中。

import { registerStyle } from '@wordpress/style-runtime';

registerStyle( 'style-hash', '.example{color:red;}' );

registerDocument

将文档注册为样式注入目标，并返回清理函数。文档采用引用计数，因此同一文档可以由多个提供方注册，只有在所有注册都被清理后才会停止接收后续样式。

import { registerDocument } from '@wordpress/style-runtime';

const cleanup = registerDocument( document );

cleanup();

为此软件包做贡献

这是一个独立软件包，属于 Gutenberg 项目。该项目以 monorepo 形式组织，由多个自包含的软件包组成，每个软件包都有特定用途。此 monorepo 中的软件包会发布到 npm，并被 WordPress 及其他软件项目使用。

要了解有关参与此软件包或整个 Gutenberg 项目的更多信息，请阅读项目的主 贡献者指南。