From e30f495d0aa7c32e63987fe21ce6aa84989bd1b2 Mon Sep 17 00:00:00 2001
From: Jiachi Liu <inbox@huozhi.im>
Date: Thu, 20 Jan 2022 20:54:18 +0100
Subject: [PATCH 1/2] docs: add changelog and update readme

---
 Changelog.md | 79 ++++++++++++++++++++++++++++++++++++++++++++++++++++
 readme.md    | 17 +++++++++++
 2 files changed, 96 insertions(+)
 create mode 100644 Changelog.md

diff --git a/Changelog.md b/Changelog.md
new file mode 100644
index 00000000..1d729a23
--- /dev/null
+++ b/Changelog.md
@@ -0,0 +1,79 @@
+# Changelog
+
+## [5.0.0]
+
+### 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 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.
+
+```jsx
+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:
+
+```diff
+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.
+
+## [4.0.1]
+
+- Mark `@babel/core` as optional peer dependency
+
+## [4.0.0]
+
+- Use react hooks to manage styles injection (#720)
+
+### BREAKING CHANGES
+
+- Drop support for react versions < 16.8.0
+
+### Improvements
+
+- Drop babel 6 support (#730)
+- Auto publish alpha/beta versions
+
+## [3.4.x]
+
+### Improvements
+
+- Typing support
+- Inject unique \_JSXStyle identifier
+- Hide webpack loader warnings
+- Refactor the import helpers
diff --git a/readme.md b/readme.md
index af903208..e522c808 100644
--- a/readme.md
+++ b/readme.md
@@ -375,6 +375,23 @@ export default (req, res) => {
 }
 ```
 
+There's also a new API `createStyleRegistry` is introduced when you have to create a registry manually. In this way you can operate the registry yourself to extract the rendered styles (`registry.styles()`) or flush them out (`registry.flush()`).
+
+```js
+const registry = createStyleRegistry()
+const styles = registry.styles() // access styles
+
+function Page() {
+  return (
+    <StyleRegistry registry={registry}>
+      <App />
+    </StyleRegistry>
+  )
+}
+```
+
+By default `<StyleRegistry />` will use the `registry` from root top `StyleRegistry`, which means there's only one `registry` in the react tree.
+
 It's **paramount** that you use one of these two functions so that
 the generated styles can be diffed when the client loads and
 duplicate styles are avoided.

From b10dd933bac3a4c8fa80aca27986afbace009206 Mon Sep 17 00:00:00 2001
From: Jiachi Liu <inbox@huozhi.im>
Date: Thu, 20 Jan 2022 21:21:17 +0100
Subject: [PATCH 2/2] Apply suggestions from code review

Co-authored-by: JJ Kasper <jj@jjsweb.site>
---
 Changelog.md | 4 ++--
 readme.md    | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/Changelog.md b/Changelog.md
index 1d729a23..ea4a681c 100644
--- a/Changelog.md
+++ b/Changelog.md
@@ -25,8 +25,8 @@
 
 #### 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'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.
diff --git a/readme.md b/readme.md
index e522c808..af1266ff 100644
--- a/readme.md
+++ b/readme.md
@@ -375,7 +375,7 @@ export default (req, res) => {
 }
 ```
 
-There's also a new API `createStyleRegistry` is introduced when you have to create a registry manually. In this way you can operate the registry yourself to extract the rendered styles (`registry.styles()`) or flush them out (`registry.flush()`).
+There's also a new API `createStyleRegistry` that is introduced when you have to create a registry manually. In this way you can operate the registry yourself to extract the rendered styles (`registry.styles()`) or flush them out (`registry.flush()`).
 
 ```js
 const registry = createStyleRegistry()