Releases: vercel/styled-jsx
Releases · vercel/styled-jsx
v5.0.4
v5.0.3
v5.0.2
v5.0.1
v5.0.0
5.0.0 (2022-01-20)
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
nonceproperty - Pre-compile dependencies to reduce install size/time (#770)
BREAKING CHANGES
APIs
styled-jsx/serverimport path is deprecatedflushandflushToHTMLfromstyled-jsx/serverAPIs are deprecated- New component
<StyledRegistry>is introduced - New APIs
useStyleRegistryandcreateStyleRegistryare introduced
Usage
If you're only use styled-jsx in pure client side, nothing will effect you.
If you're using styled-jsx inside Next.js without customization, Next.js will manage the new gaps and it's same as previous.
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.