« Changelog History


styled-jsx v5.0.0 Release Notes

  • 🔋 Features

    • 💅 Introduce contextual styles (#744)
    • Opt-in react 18 insertion effect hook when available (#753)
    • 💻 Fallback to module level registry in browser (#768)

    👌 Improvements

    • 💅 Make JSXStyle return a noop if the registry context is not provided (#749)
    • 🛠 Fix typings of nonce property
    • Pre-compile dependencies to reduce install size/time (#770)

    💥 BREAKING CHANGES

    APIs

    • 💅 styled-jsx/server import path is deprecated
    • 💅 flush and flushToHTML from styled-jsx/server APIs are deprecated
    • 🆕 New component <StyledRegistry> is introduced
    • 🆕 New APIs useStyleRegistry and createStyleRegistry are introduced

    Usage

    💅 If you're only using styled-jsx purely client side, nothing will effect you. 💅 If you're using styled-jsx inside Next.js without customization, Next.js will automatically handle the changes for you.

    💅 If you have your own customization with styled-jsx in Next.js, for example you have a custom _document: 💅 By default, doing this will let Next.js collect styles and pass them down.

    class Document extends React.Component {
  static async getInitialProps(ctx) {
    return await ctx.defaultGetInitialProps(ctx)
  }
}

    🔧 Or for instance you're passing nonce property in getInitialProps of _document, this will let you configure it:

    class Document extends React.Component {
  static async getInitialProps(ctx) {
-    return await ctx.defaultGetInitialProps(ctx)
+    return await ctx.defaultGetInitialProps(ctx, { nonce })
  }
}

    If you're building the SSR solution yourself with other frameworks, please checkout the Server-Side Rendering section in readme.