Skip to content

[Float][Fizz][Fiber]: Refactor <style> Resource implementation to group on flush #26280

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Mar 3, 2023
Merged

[Float][Fizz][Fiber]: Refactor <style> Resource implementation to group on flush #26280

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0008afb
Refactor <style> Resource implementation to group on flush
gnoff Mar 2, 2023
5128af2
warn if <style> tag href has a space on server
gnoff Mar 3, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
warn if <style> tag href has a space on server
  • Loading branch information
@gnoff
gnoff committed Mar 3, 2023
commit 5128af254cc0345a07f51fa76348ac233e8144e5
9 changes: 9 additions & 0 deletions packages/react-dom-bindings/src/server/ReactDOMServerFormatConfig.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1581,6 +1581,15 @@ function pushStyle(
return pushStyleImpl(target, props);
}

if (__DEV__) {
if (href.includes(' ')) {
console.error(
'React expected the `href` prop for a <style> tag opting into hoisting semantics using the `precedence` prop to not have any spaces but ecountered spaces instead. using spaces in this prop will cause hydration of this style to fail on the client. The href for the <style> where this ocurred is "%s".',
href,
);
}
}

const key = getResourceKey('style', href);
let resource = resources.stylesMap.get(key);
if (!resource) {
Expand Down
19 changes: 19 additions & 0 deletions packages/react-dom/src/__tests__/ReactDOMFloat-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3492,6 +3492,7 @@ body {
<div>1</div>,
]);
});

// @gate enableFloat
it('escapes hrefs when selecting matching elements in the document when rendering Resources', async () => {
function App() {
Expand Down Expand Up @@ -4424,6 +4425,24 @@ background-color: green;
</html>,
);
});

it('warns if you render a <style> with an href with a space on the server', async () => {
await expect(async () => {
await actIntoEmptyDocument(() => {
renderToPipeableStream(
<html>
<body>
<style href="foo bar" precedence="default">
style
</style>
</body>
</html>,
).pipe(writable);
});
}).toErrorDev(
'React expected the `href` prop for a <style> tag opting into hoisting semantics using the `precedence` prop to not have any spaces but ecountered spaces instead. using spaces in this prop will cause hydration of this style to fail on the client. The href for the <style> where this ocurred is "foo bar".',
);
});
});

describe('Script Resources', () => {
Expand Down