8000 Merge branch 'inline-css' · tailwindlabs/blog.tailwindcss.com@7beb539 · GitHub
Skip to content
This repository was archived by the owner on Feb 14, 2022. It is now read-only.

Commit 7beb539

Browse files
committed
Merge branch 'inline-css'
2 parents a28a2d0 + 1dbfcdb commit 7beb539

File tree

1 file changed

+27
-1
lines changed

1 file changed

+27
-1
lines changed

src/pages/_document.js

+27-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,30 @@
11
import NextDocument, { Html, Head, Main, NextScript } from 'next/document'
2+
import * as fs from 'fs'
3+
import * as path from 'path'
4+
5+
class InlineStylesHead extends Head {
6+
getCssLinks() {
7+
return this.__getInlineStyles()
8+
}
9+
10+
__getInlineStyles() {
11+
const { assetPrefix, files } = this.context._documentProps
12+
if (!files || files.length === 0) return null
13+
14+
return files
15+
.filter((file) => /\.css$/.test(file))
16+
.map((file) => (
17+
<style
18+
key={file}
19+
nonce={this.props.nonce}
20+
data-href={`${assetPrefix}/_next/${file}`}
21+
dangerouslySetInnerHTML={{
22+
__html: fs.readFileSync(path.join(process.cwd(), '.next', file), 'utf-8'),
23+
}}
24+
/>
25+
))
26+
}
27+
}
228

329
export default class Document extends NextDocument {
430
static async getInitialProps(ctx) {
@@ -9,7 +35,7 @@ export default class Document extends NextDocument {
935
render() {
1036
return (
1137
<Html lang="en">
12-
<Head />
38+
<InlineStylesHead />
1339
<body>
1440
<Main />
1541
<NextScript />

0 commit comments

Comments
 (0)