hanzoai/next.js
2
0
Fork 0
mirror of https://github.com/hanzoai/next.js.git synced 2026-09-24 17:00:51 +00:00
Code Issues Packages Projects Releases Wiki Activity

[dev-overlay] font style backward compat with react 18 (#76225)

Browse Source 
Style tag hoisting is not available in React 18 -- see [failed
test](https://github.com/vercel/next.js/actions/runs/13416102637/job/37480399204).
Thus, replace it with a backward-compatible solution.
This commit is contained in:
Jude Gao
2025-02-19 13:56:39 -05:00
committed by GitHub
parent 912b700b0a
commit bedbbb7395
1 changed files with 59 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/next/src/client/components/react-dev-overlay/_experimental/font/font-styles.tsx
+59 -53
View File
@@ -1,57 +1,63 @@
import { noop as css } from '../internal/helpers/noop-template'
import { useInsertionEffect } from 'react'
export const FontStyles = () => {
return (
// precedence & href are to satisfy React float's style hoisting
<style precedence="default" href="/__nextjs_font_styles">
{css`
/* latin-ext */
@font-face {
font-family: 'Geist';
font-style: normal;
font-weight: 400 600;
font-display: swap;
src: url(__nextjs_font/geist-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
U+A720-A7FF;
}
/* latin-ext */
@font-face {
font-family: 'Geist Mono';
font-style: normal;
font-weight: 400 600;
font-display: swap;
src: url(__nextjs_font/geist-mono-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Geist';
font-style: normal;
font-weight: 400 600;
font-display: swap;
src: url(__nextjs_font/geist-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face {
font-family: 'Geist Mono';
font-style: normal;
font-weight: 400 600;
font-display: swap;
src: url(__nextjs_font/geist-mono-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
`}
</style>
)
useInsertionEffect(() => {
const style = document.createElement('style')
style.textContent = css`
/* latin-ext */
@font-face {
font-family: 'Geist';
font-style: normal;
font-weight: 400 600;
font-display: swap;
src: url(__nextjs_font/geist-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
U+A720-A7FF;
}
/* latin-ext */
@font-face {
font-family: 'Geist Mono';
font-style: normal;
font-weight: 400 600;
font-display: swap;
src: url(__nextjs_font/geist-mono-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Geist';
font-style: normal;
font-weight: 400 600;
font-display: swap;
src: url(__nextjs_font/geist-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face {
font-family: 'Geist Mono';
font-style: normal;
font-weight: 400 600;
font-display: swap;
src: url(__nextjs_font/geist-mono-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
`
document.head.appendChild(style)
return () => {
document.head.removeChild(style)
}
}, [])
return null
}