Add options to defaultGetInitialProps and upgrade styled-jsx-with-csp example

examples/styled-jsx-with-csp/package.json

@@ -7,7 +7,7 @@
  },
  "dependencies": {
  "nanoid": "3.1.21",
- "next": "10.0.8",
+ "next": "^12.0.7",
  "react": "^17.0.2",
  "react-dom": "^17.0.2"
  }

examples/styled-jsx-with-csp/pages/_document.jsx

@@ -1,17 +1,9 @@
 import Document, { Html, Head, Main, NextScript } from 'next/document'
-import flush from 'styled-jsx/server'
-
 import { nanoid } from 'nanoid'
-
 class CustomDocument extends Document {
  static async getInitialProps(ctx) {
  const nonce = nanoid()
-
- // https://github.com/vercel/next.js/blob/canary/packages/next/pages/_document.tsx#L89
- const { html, head } = await ctx.renderPage()
-
- // Adds `nonce` to style tags on Server Side Rendering
- const styles = [...flush({ nonce })]
+ const docProps = await ctx.defaultGetInitialProps(ctx, { nonce })
 
  let contentSecurityPolicy = ''
  if (process.env.NODE_ENV === 'production') {
@@ -24,8 +16,7 @@ class CustomDocument extends Document {
  }
 
  ctx.res.setHeader('Content-Security-Policy', contentSecurityPolicy)
-
- return { styles, html, head, nonce }
+ return { ...docProps, nonce }
  }
 
  render() {

packages/next/package.json

@@ -114,7 +114,7 @@
  "stream-browserify": "3.0.0",
  "stream-http": "3.1.1",
  "string_decoder": "1.3.0",
- "styled-jsx": "5.0.0-beta.3",
+ "styled-jsx": "5.0.0-beta.5",
  "timers-browserify": "2.0.12",
  "tty-browserify": "0.0.1",
  "use-subscription": "1.5.1",

packages/next/server/render.tsx

@@ -637,14 +637,15 @@ export async function renderToHTML(
  )
  },
  defaultGetInitialProps: async (
- docCtx: DocumentContext
+ docCtx: DocumentContext,
+ options: { nonce?: string } = {}
  ): Promise<DocumentInitialProps> => {
  const enhanceApp = (AppComp: any) => {
  return (props: any) => <AppComp {...props} />
  }
 
  const { html, head } = await docCtx.renderPage({ enhanceApp })
- const styles = jsxStyleRegistry.styles()
+ const styles = jsxStyleRegistry.styles({ nonce: options.nonce })
  return { html, head, styles }
  },
  }

yarn.lock

@@ -18448,10 +18448,10 @@ styled-jsx-plugin-postcss@3.0.2:
  postcss "^7.0.2"
  postcss-load-plugins "^2.3.0"
 
-styled-jsx@5.0.0-beta.3:
- version "5.0.0-beta.3"
- resolved "https://registry.yarnpkg.com/styled-jsx/-/styled-jsx-5.0.0-beta.3.tgz#400d16179b5dff10d5954ab8be27a9a1b7780dd2"
- integrity sha512-HtDDGSFPvmjHIqWf9n8Oo54tAoY/DTplvlyOH2+YOtD80Sp31Ap8ffSmxhgk5EkUoJ7xepdXMGT650mSffWuRA==
+styled-jsx@5.0.0-beta.5:
+ version "5.0.0-beta.5"
+ resolved "https://registry.yarnpkg.com/styled-jsx/-/styled-jsx-5.0.0-beta.5.tgz#f603c20bda0625a2aa3b6bed40211e21641e5410"
+ integrity sha512-QTdBoD+vmxQX68DHMwKTYdC6Z5DLVuNoGoFf+Ih3yZ8jch4WjpR83s21uQA44ZDeB6iUFKs8N60W3y/vkl6ehA==
  dependencies:
  "@babel/plugin-syntax-jsx" "7.14.5"
  "@babel/types" "7.15.0"