- Introduce contextual styles (#744)
- Opt-in react 18 insertion effect hook when available (#753)
- Fallback to module level registry in browser (#768)
- 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)
styled-jsx/serverimport path is deprecatedflushandflushToHTMLfromstyled-jsx/serverAPIs are deprecated- New component
<StyledRegistry>is introduced - New APIs
useStyleRegistryandcreateStyleRegistryare introduced
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.
- Mark
@babel/coreas optional peer dependency
- Use react hooks to manage styles injection (#720)
- Drop support for react versions < 16.8.0
- Drop babel 6 support (#730)
- Auto publish alpha/beta versions
- Typing support
- Inject unique _JSXStyle identifier
- Hide webpack loader warnings
- Refactor the import helpers