Fixes issue with makeStylesheetInert (#32027)
Fixes https://github.com/vercel/next.js/issues/32024 Fixing makeStylesheetInert. Fixes log import. ## Bug - [x] Related issues linked using `fixes #number` - [ ] Integration tests added - [ ] Errors have helpful link attached, see `contributing.md` ## Feature - [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR. - [ ] Related issues linked using `fixes #number` - [ ] Integration tests added - [ ] Documentation added - [ ] Telemetry added. In case of a feature if it's used or not. - [ ] Errors have helpful link attached, see `contributing.md` ## Documentation / Examples - [ ] Make sure the linting passes by running `yarn lint` Co-authored-by: Devin Wall <87490815+DevinWallKcl@users.noreply.github.com>
This commit is contained in:
parent
52cf7fe51e
commit
d0e72fd9fa
4 changed files with 68 additions and 9 deletions
|
@ -452,21 +452,30 @@ export class Head extends Component<
|
|||
makeStylesheetInert(node: ReactNode): ReactNode[] {
|
||||
return React.Children.map(node, (c: any) => {
|
||||
if (
|
||||
c.type === 'link' &&
|
||||
c.props['href'] &&
|
||||
c?.type === 'link' &&
|
||||
c?.props?.href &&
|
||||
OPTIMIZED_FONT_PROVIDERS.some(({ url }) =>
|
||||
c.props['href'].startsWith(url)
|
||||
c?.props?.href?.startsWith(url)
|
||||
)
|
||||
) {
|
||||
const newProps = { ...(c.props || {}) }
|
||||
newProps['data-href'] = newProps['href']
|
||||
newProps['href'] = undefined
|
||||
const newProps = {
|
||||
...(c.props || {}),
|
||||
'data-href': c.props.href,
|
||||
href: undefined,
|
||||
}
|
||||
|
||||
return React.cloneElement(c, newProps)
|
||||
} else if (c?.props?.children) {
|
||||
const newProps = {
|
||||
...(c.props || {}),
|
||||
children: this.makeStylesheetInert(c.props.children),
|
||||
}
|
||||
|
||||
return React.cloneElement(c, newProps)
|
||||
} else if (c.props && c.props['children']) {
|
||||
c.props['children'] = this.makeStylesheetInert(c.props['children'])
|
||||
}
|
||||
|
||||
return c
|
||||
})
|
||||
}).filter(Boolean)
|
||||
}
|
||||
|
||||
render() {
|
||||
|
|
|
@ -0,0 +1,36 @@
|
|||
import Document, { Html, Head, Main, NextScript } from 'next/document'
|
||||
|
||||
class MyDocument extends Document {
|
||||
static async getInitialProps(ctx) {
|
||||
const initialProps = await Document.getInitialProps(ctx)
|
||||
return { ...initialProps }
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Html>
|
||||
<Head>
|
||||
<>
|
||||
{false && <script data-href="test"></script>}
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link
|
||||
rel="preconnect"
|
||||
href="https://fonts.gstatic.com"
|
||||
crossOrigin
|
||||
/>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
</>
|
||||
</Head>
|
||||
<body>
|
||||
<Main />
|
||||
<NextScript />
|
||||
</body>
|
||||
</Html>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default MyDocument
|
|
@ -0,0 +1,8 @@
|
|||
export default function Home() {
|
||||
return (
|
||||
<h1>
|
||||
Falsey values contained in an element contained in Head should not result
|
||||
in an error!
|
||||
</h1>
|
||||
)
|
||||
}
|
|
@ -328,4 +328,10 @@ describe('Font Optimization', () => {
|
|||
const { code } = await nextBuild(appDir)
|
||||
expect(code).toBe(0)
|
||||
})
|
||||
|
||||
test('makeStylesheetInert regression', async () => {
|
||||
const appDir = join(fixturesDir, 'make-stylesheet-inert-regression')
|
||||
const { code } = await nextBuild(appDir)
|
||||
expect(code).toBe(0)
|
||||
})
|
||||
})
|
||||
|
|
Loading…
Reference in a new issue