[Fiber][Float] preinitialized stylesheets should support integrity option (#26881)
preinitialized stylesheets did not render the integrity option on the client implementation of Float. This was an oversight.
Josh Story committed
May 31, 2023 at 13:48 UTC
e1e68b9f7ffecf98e1b625cfe3ab95741be1417b
2 files changed
+66
packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js
+1
@@ -2394,6 +2394,7 @@ function stylesheetPropsFromPreinitOptions(
2394
href,
2395
'data-precedence': precedence,
2396
crossOrigin: options.crossOrigin,
2397
+ integrity: options.integrity,
2398
};
2399
}
2400
packages/react-dom/src/__tests__/ReactDOMFloat-test.js
+65
@@ -4409,6 +4409,71 @@ body {
4409
</html>,
4410
);
4411
});
4412
+
4413
+ it('accepts an `integrity` option for `as: "style"`', async () => {
4414
+ function Component({src, hash}) {
4415
+ ReactDOM.preinit(src, {as: 'style', integrity: hash});
4416
+ return 'hello';
4417
+ }
4418
+
4419
+ await act(() => {
4420
+ renderToPipeableStream(
4421
+ <html>
4422
+ <body>
4423
+ <Component src="foo" hash="foo hash" />
4424
+ </body>
4425
+ </html>,
4426
+ {
4427
+ nonce: 'R4nD0m',
4428
+ },
4429
+ ).pipe(writable);
4430
+ });
4431
+
4432
+ expect(getMeaningfulChildren(document)).toEqual(
4433
+ <html>
4434
+ <head>
4435
+ <link
4436
+ rel="stylesheet"
4437
+ href="foo"
4438
+ integrity="foo hash"
4439
+ data-precedence="default"
4440
+ />
4441
+ </head>
4442
+ <body>hello</body>
4443
+ </html>,
4444
+ );
4445
+
4446
+ await clientAct(() => {
4447
+ ReactDOMClient.hydrateRoot(
4448
+ document,
4449
+ <html>
4450
+ <body>
4451
+ <Component src="bar" hash="bar hash" />
4452
+ </body>
4453
+ </html>,
4454
+ );
4455
+ });
4456
+
4457
+ expect(getMeaningfulChildren(document)).toEqual(
4458
+ <html>
4459
+ <head>
4460
+ <link
4461
+ rel="stylesheet"
4462
+ href="foo"
4463
+ integrity="foo hash"
4464
+ data-precedence="default"
4465
+ />
4466
+ <link
4467
+ rel="stylesheet"
4468
+ href="bar"
4469
+ integrity="bar hash"
4470
+ data-precedence="default"
4471
+ />
4472
+ </head>
4473
+ <body>hello</body>
4474
+ </html>,
4475
+ );
4476
+ });
4477
});
4478
4479
describe('Stylesheet Resources', () => {