From 30d4d40e4520595b930b016df95e2b7ccacfb0db Mon Sep 17 00:00:00 2001
From: Jiachi Liu <inbox@huozhi.im>
Date: Fri, 9 Jul 2021 16:26:15 +0800
Subject: [PATCH 1/3] fix: safely remove style

BREAKING CHANGE: This change drops support for React 15 and 16
---
 package.json |  2 +-
 src/style.js | 63 +++++++++++++++++-----------------------------------
 2 files changed, 21 insertions(+), 44 deletions(-)

diff --git a/package.json b/package.json
index 7b2b36e5..ece41020 100644
--- a/package.json
+++ b/package.json
@@ -91,7 +91,7 @@
     "xo": "0.24.0"
   },
   "peerDependencies": {
-    "react": "15.x.x || 16.x.x || 17.x.x"
+    "react": "17.x.x || 18.x.x"
   },
   "keywords": [
     "babel-plugin-macros",
diff --git a/src/style.js b/src/style.js
index 96a2d8d8..9de67848 100644
--- a/src/style.js
+++ b/src/style.js
@@ -1,53 +1,30 @@
-import { Component } from 'react'
+import { useLayoutEffect } from 'react'
 import StyleSheetRegistry from './stylesheet-registry'
 
 const styleSheetRegistry = new StyleSheetRegistry()
 
-export default class JSXStyle extends Component {
-  constructor(props) {
-    super(props)
-    this.prevProps = {}
-  }
-
-  static dynamic(info) {
-    return info
-      .map(tagInfo => {
-        const baseId = tagInfo[0]
-        const props = tagInfo[1]
-        return styleSheetRegistry.computeId(baseId, props)
-      })
-      .join(' ')
-  }
-
-  // probably faster than PureComponent (shallowEqual)
-  shouldComponentUpdate(otherProps) {
-    return (
-      this.props.id !== otherProps.id ||
-      // We do this check because `dynamic` is an array of strings or undefined.
-      // These are the computed values for dynamic styles.
-      String(this.props.dynamic) !== String(otherProps.dynamic)
-    )
-  }
-
-  componentWillUnmount() {
-    styleSheetRegistry.remove(this.props)
+export default function JSXStyle(props) {
+  if (typeof window === 'undefined') {
+    styleSheetRegistry.add(props)
+    return null
   }
-
-  render() {
-    // This is a workaround to make the side effect async safe in the "render" phase.
-    // See https://github.com/zeit/styled-jsx/pull/484
-    if (this.shouldComponentUpdate(this.prevProps)) {
-      // Updates
-      if (this.prevProps.id) {
-        styleSheetRegistry.remove(this.prevProps)
-      }
-
-      styleSheetRegistry.add(this.props)
-      this.prevProps = this.props
+  useLayoutEffect(() => {
+    styleSheetRegistry.add(props)
+    return () => {
+      styleSheetRegistry.remove(props)
     }
+  }, [props.id, props.children, String(props.dynamic)])
+  return null
+}
 
-    return null
-  }
+JSXStyle.dynamic = info => {
+  return info
+    .map(tagInfo => {
+      const baseId = tagInfo[0]
+      const props = tagInfo[1]
+      return styleSheetRegistry.computeId(baseId, props)
+    })
+    .join(' ')
 }
 
 export function flush() {

From 551ba5dc66e3cb4cd4155e96463dfc6102462fe0 Mon Sep 17 00:00:00 2001
From: Jiachi Liu <inbox@huozhi.im>
Date: Wed, 4 Aug 2021 01:40:19 +0800
Subject: [PATCH 2/3] remove props.children dep

---
 src/style.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/style.js b/src/style.js
index 9de67848..3a08f433 100644
--- a/src/style.js
+++ b/src/style.js
@@ -13,7 +13,8 @@ export default function JSXStyle(props) {
     return () => {
       styleSheetRegistry.remove(props)
     }
-  }, [props.id, props.children, String(props.dynamic)])
+    // props.children can be string[], will be striped since id is identical
+  }, [props.id, String(props.dynamic)])
   return null
 }
 

From 48c7df899f797596cc499e085a5a2528bcf222dd Mon Sep 17 00:00:00 2001
From: Jiachi Liu <inbox@huozhi.im>
Date: Wed, 4 Aug 2021 16:58:03 +0800
Subject: [PATCH 3/3] BREAKING CHANGE: This change drops support for React
 version < 16.8.0

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index ece41020..7f4f5d7c 100644
--- a/package.json
+++ b/package.json
@@ -91,7 +91,7 @@
     "xo": "0.24.0"
   },
   "peerDependencies": {
-    "react": "17.x.x || 18.x.x"
+    "react": ">= 16.8.0 || 17.x.x || 18.x.x"
   },
   "keywords": [
     "babel-plugin-macros",