chore: upgrade styled-jsx

components/css-baseline/css-baseline.tsx

@@ -2,25 +2,6 @@ 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

@@ -1,7 +1,7 @@
 import React, { useMemo } from 'react'
 import GridBasicItem, { GridBasicItemProps } from './basic-item'
 import { GridWrap } from './grid-types'
-import { css } from 'styled-jsx/css'
+import css from 'styled-jsx/css'
 import useScaleable, { withScaleable } from '../use-scaleable'
 
 interface Props {

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 GridBasicItem, { GridBasicItemProps } from './basic-item'
 import useScaleable, { withScaleable } from '../use-scaleable'
 

components/modal/modal-action.tsx

@@ -1,5 +1,5 @@
 import React, { MouseEvent, useImperativeHandle, 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,6 +1,6 @@
 import React from 'react'
 import { Image } from 'components/index'
-import { css } from 'styled-jsx/css'
+import css from 'styled-jsx/css'
 
 export const LogoIcon: React.FC<React.ImgHTMLAttributes<any>> = ({ ...props }) => {
   const { className, styles } = css.resolve`

package.json

@@ -99,7 +99,7 @@
     "webpack-cli": "^3.3.11"
   },
   "dependencies": {
-    "styled-jsx": "^3.4.4"
+    "styled-jsx": "^4.0.0"
   },
   "peerDependencies": {
     "react": ">=16.9.0",

yarn.lock

@@ -1103,15 +1103,6 @@
     "@babel/helper-validator-identifier" "^7.14.9"
     to-fast-properties "^2.0.0"
 
-"@babel/types@7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.8.3.tgz#5a383dffa5416db1b73dedffd311ffd0788fb31c"
-  integrity sha512-jBD+G8+LWpMBBWvVcdr4QysjUE4mU/syrhN17o1u3gx0/WzJB1kwiVZAXRtWbsIPOwW8pF/YJV5+nmetPzepXg==
-  dependencies:
-    esutils "^2.0.2"
-    lodash "^4.17.13"
-    to-fast-properties "^2.0.0"
-
 "@bcoe/v8-coverage@^0.2.3":
   version "0.2.3"
   resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
@@ -2470,11 +2461,6 @@ babel-plugin-polyfill-regenerator@^0.2.2:
   dependencies:
     "@babel/helper-define-polyfill-provider" "^0.2.2"
 
-babel-plugin-syntax-jsx@6.18.0:
-  version "6.18.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz#0af32a9a6e13ca7a3fd5069e62d7b0f58d0d8946"
-  integrity sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY=
-
 babel-preset-current-node-syntax@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/babel-preset-current-node-syntax/-/babel-preset-current-node-syntax-1.0.1.tgz#b4399239b89b2a011f9ddbe3e4f401fc40cff73b"
@@ -6000,7 +5986,7 @@ lodash.uniq@4.5.0:
   resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
   integrity sha1-0CJTc662Uq3BvILklFM5qEJ1R3M=
 
-lodash@4.x, lodash@^4.0.1, lodash@^4.17.11, lodash@^4.17.13, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.7.0:
+lodash@4.x, lodash@^4.0.1, lodash@^4.17.11, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.7.0:
   version "4.17.21"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
@@ -8167,7 +8153,7 @@ style-to-object@^0.2.1:
   dependencies:
     inline-style-parser "0.1.1"
 
-styled-jsx@4.0.0:
+styled-jsx@4.0.0, styled-jsx@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/styled-jsx/-/styled-jsx-4.0.0.tgz#f7b90e7889d0a4f4635f8d1ae9ac32f3acaedc57"
   integrity sha512-2USeoWMoJ/Lx5s2y1PxuvLy/cz2Yrr8cTySV3ILHU1Vmaw1bnV7suKdblLPjnyhMD+qzN7B1SWyh4UZTARn/WA==
@@ -8181,20 +8167,6 @@ styled-jsx@4.0.0:
     stylis "3.5.4"
     stylis-rule-sheet "0.0.10"
 
-styled-jsx@^3.4.4:
-  version "3.4.7"
-  resolved "https://registry.yarnpkg.com/styled-jsx/-/styled-jsx-3.4.7.tgz#803bc8a36f1c359cc99691b6db6e0791ea3e1e31"
-  integrity sha512-PkImcCsovR39byv4Tz83tAPsYs2CiTPOmDSplhe0lsIFVYJyd7rzJ7fbm41vSNsF/lnO+Ob5n/jgMookwY0pww==
-  dependencies:
-    "@babel/types" "7.8.3"
-    babel-plugin-syntax-jsx "6.18.0"
-    convert-source-map "1.7.0"
-    loader-utils "1.2.3"
-    source-map "0.7.3"
-    string-hash "1.1.3"
-    stylis "3.5.4"
-    stylis-rule-sheet "0.0.10"
-
 stylis-rule-sheet@0.0.10:
   version "0.0.10"
   resolved "https://registry.yarnpkg.com/stylis-rule-sheet/-/stylis-rule-sheet-0.0.10.tgz#44e64a2b076643f4b52e5ff71efc04d8c3c4a430"