chore(deps): update styled-jsx to ^3.3.1 (#520)

* chore(deps): update styled-jsx to ^3.3.1

update styled-jsx to ^3.3.1 to allow compatiblity with react@^17

* fix(modules): fix 695-issue to compatible with React 17

* docs: fix module error caused by styled-jsx update

Co-authored-by: unix <unix.bio@gmail.com>

components/css-baseline/css-baseline.tsx

@@ -2,6 +2,25 @@ import React from 'react'
 import useTheme from '../use-theme'
 import flush from 'styled-jsx/server'
 import flushToReact from 'styled-jsx/server'
+/**
+ * Hack Patch for 695 issue.
+ *
+ * This is to fix a compilation issue for styled-jsx,
+ * perhaps for reasons that may be related to babel:
+ *   https://github.com/vercel/styled-jsx/issues/695
+ *
+ * styled-jsx has not considered fixing this issue in recent versions,
+ * and we had to hack it into our code to be compatible with React 17.
+ */
+/* istanbul ignore next */
+/* eslint-disable */
+// @ts-ignore
+import _JSXStyle from 'styled-jsx/style'
+/* istanbul ignore if */
+if (typeof global !== 'undefined') {
+  Object.assign(global, { _JSXStyle })
+}
+/* eslint-enable */
 
 const CssBaseline: React.FC<React.PropsWithChildren<unknown>> = ({ children }) => {
   const theme = useTheme()

components/grid/grid-container.tsx

@@ -2,7 +2,7 @@ import React, { useMemo } from 'react'
 import useTheme from '../use-theme'
 import GridBasicItem, { GridBasicItemComponentProps } from './basic-item'
 import { Wrap } from './grid-types'
-import css from 'styled-jsx/css'
+import { css } from 'styled-jsx/css'
 
 interface Props {
   gap: number

components/grid/grid.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import css from 'styled-jsx/css'
+import { css } from 'styled-jsx/css'
 import GridContainer from './grid-container'
 import GridBasicItem, { GridBasicItemComponentProps } from './basic-item'
 

components/modal/modal-action.tsx

@@ -6,7 +6,7 @@ import React, {
   useMemo,
   useRef,
 } from 'react'
-import css from 'styled-jsx/css'
+import { css } from 'styled-jsx/css'
 import useTheme from '../use-theme'
 import { useModalContext } from './modal-context'
 import Button, { ButtonProps } from '../button/button'

lib/components/icons/logo.tsx

@@ -1,9 +1,9 @@
 import React from 'react'
 import { Image } from 'components/index'
-import { resolve } from 'styled-jsx/css'
+import { css } from 'styled-jsx/css'
 
 export const LogoIcon: React.FC<React.ImgHTMLAttributes<any>> = ({ ...props }) => {
-  const { className, styles } = resolve`
+  const { className, styles } = css.resolve`
     .image {
       border-radius: 50%;
       cursor: pointer;

package.json

@@ -94,6 +94,6 @@
     "webpack-cli": "^3.3.11"
   },
   "dependencies": {
-    "styled-jsx": "3.3.0"
+    "styled-jsx": "^3.4.4"
   }
 }

tests/__mocks__/styled-jsx/css.js

@@ -1,8 +1,12 @@
-const css = {
+module.exports = {
   resolve: () => ({
     className: 'mock',
     style: null,
   }),
+  css: {
+    resolve: () => ({
+      className: 'mock',
+      style: null,
+    }),
+  },
 }
-
-module.exports = css

yarn.lock

@@ -296,7 +296,7 @@
   dependencies:
     "@babel/types" "^7.12.13"
 
-"@babel/helper-module-imports@^7.12.1", "@babel/helper-module-imports@^7.12.5":
+"@babel/helper-module-imports@7.12.5", "@babel/helper-module-imports@^7.12.1", "@babel/helper-module-imports@^7.12.5":
   version "7.12.5"
   resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.12.5.tgz#1bfc0229f794988f76ed0a4d4e90860850b54dfb"
   integrity sha512-SR713Ogqg6++uexFRORf/+nPXMmWIn80TALu0uaFb+iQIUoR7bOC7zBWyzBs5b3tBBJXuyD0cRu1F15GyzjOWA==
@@ -8700,10 +8700,10 @@ style-to-object@^0.2.1:
   dependencies:
     inline-style-parser "0.1.1"
 
-styled-jsx@3.3.0:
-  version "3.3.0"
-  resolved "https://registry.yarnpkg.com/styled-jsx/-/styled-jsx-3.3.0.tgz#32335c1a3ecfc923ba4f9c056eeb3d4699006b09"
-  integrity sha512-sh8BI5eGKyJlwL4kNXHjb27/a/GJV8wP4ElRIkRXrGW3sHKOsY9Pa1VZRNxyvf3+lisdPwizD9JDkzVO9uGwZw==
+styled-jsx@3.3.2:
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/styled-jsx/-/styled-jsx-3.3.2.tgz#2474601a26670a6049fb4d3f94bd91695b3ce018"
+  integrity sha512-daAkGd5mqhbBhLd6jYAjYBa9LpxYCzsgo/f6qzPdFxVB8yoGbhxvzQgkC0pfmCVvW3JuAEBn0UzFLBfkHVZG1g==
   dependencies:
     "@babel/types" "7.8.3"
     babel-plugin-syntax-jsx "6.18.0"
@@ -8714,11 +8714,12 @@ styled-jsx@3.3.0:
     stylis "3.5.4"
     stylis-rule-sheet "0.0.10"
 
-styled-jsx@3.3.2:
-  version "3.3.2"
-  resolved "https://registry.yarnpkg.com/styled-jsx/-/styled-jsx-3.3.2.tgz#2474601a26670a6049fb4d3f94bd91695b3ce018"
-  integrity sha512-daAkGd5mqhbBhLd6jYAjYBa9LpxYCzsgo/f6qzPdFxVB8yoGbhxvzQgkC0pfmCVvW3JuAEBn0UzFLBfkHVZG1g==
+styled-jsx@^3.4.4:
+  version "3.4.4"
+  resolved "https://registry.yarnpkg.com/styled-jsx/-/styled-jsx-3.4.4.tgz#d5012cac2ed22be0b72e28932f3eece8d83b695c"
+  integrity sha512-PkZi/col7R4cpwSPY2n4JjpcTYfBgaWg/1mt0+1E/pmkXL+Pik5Kr/snYMWj90+N3kDw+BqfnJOogdRw4621GQ==
   dependencies:
+    "@babel/helper-module-imports" "7.12.5"
     "@babel/types" "7.8.3"
     babel-plugin-syntax-jsx "6.18.0"
     convert-source-map "1.7.0"