Skip to content

Commit d72d463

Browse files
mirkamirka
committed
Style Runtime: Support CSS module style injection across documents (#77965)
1 parent e229179 commit d72d463

29 files changed

Lines changed: 559 additions & 14 deletions

‎docs/manifest.json‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2057,6 +2057,12 @@
20572057
"markdown_source": "../packages/style-engine/docs/using-the-style-engine-with-block-supports.md",
20582058
"parent": "packages-style-engine"
20592059
},
2060+
{
2061+
"title": "@wordpress/style-runtime",
2062+
"slug": "packages-style-runtime",
2063+
"markdown_source": "../packages/style-runtime/README.md",
2064+
"parent": "packages"
2065+
},
20602066
{
20612067
"title": "@wordpress/stylelint-config",
20622068
"slug": "packages-stylelint-config",

‎package-lock.json‎

Lines changed: 19 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/admin-ui/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,7 @@
5050
"@wordpress/i18n": "file:../i18n",
5151
"@wordpress/private-apis": "file:../private-apis",
5252
"@wordpress/route": "file:../route",
53+
"@wordpress/style-runtime": "file:../style-runtime",
5354
"@wordpress/ui": "file:../ui",
5455
"clsx": "^2.1.1"
5556
},

‎packages/admin-ui/tsconfig.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
{ "path": "../i18n" },
1111
{ "path": "../private-apis" },
1212
{ "path": "../route" },
13+
{ "path": "../style-runtime" },
1314
{ "path": "../ui" }
1415
]
1516
}

‎packages/components/CHANGELOG.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,10 @@
22

33
## Unreleased
44

5+
### Enhancements
6+
7+
- `StyleProvider`: Add support for injecting package CSS module styles into target documents ([#77965](https://github.com/WordPress/gutenberg/pull/77965)).
8+
59
## 33.0.0 (2026-04-29)
610

711
### Enhancements

‎packages/components/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -81,6 +81,7 @@
8181
"@wordpress/primitives": "file:../primitives",
8282
"@wordpress/private-apis": "file:../private-apis",
8383
"@wordpress/rich-text": "file:../rich-text",
84+
"@wordpress/style-runtime": "file:../style-runtime",
8485
"@wordpress/warning": "file:../warning",
8586
"change-case": "^4.1.2",
8687
"clsx": "^2.1.1",

‎packages/components/src/style-provider/index.tsx‎

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,8 @@
1-
/**
2-
* External dependencies
3-
*/
41
import { CacheProvider } from '@emotion/react';
52
import createCache from '@emotion/cache';
63
import * as uuid from 'uuid';
7-
8-
/**
9-
* Internal dependencies
10-
*/
4+
import { useLayoutEffect } from '@wordpress/element';
5+
import { registerDocument } from '@wordpress/style-runtime';
116
import type { StyleProviderProps } from './types';
127

138
const uuidCache = new Set();
@@ -36,6 +31,14 @@ const memoizedCreateCacheWithContainer = ( container: HTMLElement ) => {
3631
export function StyleProvider( props: StyleProviderProps ) {
3732
const { children, document } = props;
3833

34+
useLayoutEffect( () => {
35+
if ( ! document ) {
36+
return;
37+
}
38+
39+
return registerDocument( document );
40+
}, [ document ] );
41+
3942
if ( ! document ) {
4043
return null;
4144
}

‎packages/components/src/style-provider/test/index.tsx‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import { render } from '@testing-library/react';
2+
import { registerStyle } from '@wordpress/style-runtime';
3+
import StyleProvider from '..';
4+
5+
type GlobalScopeWithStyleRuntime = typeof globalThis & {
6+
__wpStyleRuntime?: unknown;
7+
};
8+
9+
describe( 'StyleProvider', () => {
10+
const globalScope = globalThis as GlobalScopeWithStyleRuntime;
11+
12+
afterEach( () => {
13+
delete globalScope.__wpStyleRuntime;
14+
document.head.innerHTML = '';
15+
} );
16+
17+
it( 'registers the provided document for package style injection', () => {
18+
render(
19+
<StyleProvider document={ document }>
20+
<div />
21+
</StyleProvider>
22+
);
23+
24+
registerStyle( 'test-style', '.test-class{color:red;}' );
25+
26+
const iframeDocument = document.implementation.createHTMLDocument();
27+
28+
render(
29+
<StyleProvider document={ iframeDocument }>
30+
<div />
31+
</StyleProvider>
32+
);
33+
34+
expect( iframeDocument.head.innerHTML ).toBe(
35+
'<style data-wp-hash="test-style">.test-class{color:red;}</style>'
36+
);
37+
} );
38+
} );

‎packages/components/tsconfig.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@
2727
{ "path": "../private-apis" },
2828
{ "path": "../react-i18n" },
2929
{ "path": "../rich-text" },
30+
{ "path": "../style-runtime" },
3031
{ "path": "../warning" }
3132
],
3233
"files": [ "global.d.ts", "storybook.d.ts" ],

‎packages/dependency-extraction-webpack-plugin/lib/util.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ const BUNDLED_PACKAGES = [
77
'@wordpress/grid',
88
'@wordpress/icons',
99
'@wordpress/interface',
10+
'@wordpress/style-runtime',
1011
'@wordpress/ui',
1112
'@wordpress/undo-manager',
1213
'@wordpress/views',

0 commit comments

Comments
 (0)