From 2d4a209cd6c93b17d3de7e87a78891c86a5afddf Mon Sep 17 00:00:00 2001 From: Florian Levis Date: Thu, 22 Apr 2021 17:41:33 +0200 Subject: [PATCH] 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 --- components/css-baseline/css-baseline.tsx | 19 +++++++++++++++++++ components/grid/grid-container.tsx | 2 +- components/grid/grid.tsx | 2 +- components/modal/modal-action.tsx | 2 +- lib/components/icons/logo.tsx | 4 ++-- package.json | 2 +- tests/__mocks__/styled-jsx/css.js | 10 +++++++--- yarn.lock | 19 ++++++++++--------- 8 files changed, 42 insertions(+), 18 deletions(-) diff --git a/components/css-baseline/css-baseline.tsx b/components/css-baseline/css-baseline.tsx index ff4735ca6..06ca39d47 100644 --- a/components/css-baseline/css-baseline.tsx +++ b/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> = ({ children }) => { const theme = useTheme() diff --git a/components/grid/grid-container.tsx b/components/grid/grid-container.tsx index 7d7a11c74..8c007d2ef 100644 --- a/components/grid/grid-container.tsx +++ b/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 diff --git a/components/grid/grid.tsx b/components/grid/grid.tsx index 902374c83..95146fe73 100644 --- a/components/grid/grid.tsx +++ b/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' diff --git a/components/modal/modal-action.tsx b/components/modal/modal-action.tsx index 4d89cee56..7fb816a87 100644 --- a/components/modal/modal-action.tsx +++ b/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' diff --git a/lib/components/icons/logo.tsx b/lib/components/icons/logo.tsx index 5cc6907f1..6d9a126bc 100644 --- a/lib/components/icons/logo.tsx +++ b/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> = ({ ...props }) => { - const { className, styles } = resolve` + const { className, styles } = css.resolve` .image { border-radius: 50%; cursor: pointer; diff --git a/package.json b/package.json index 70e882a6a..9d196a979 100644 --- a/package.json +++ b/package.json @@ -94,6 +94,6 @@ "webpack-cli": "^3.3.11" }, "dependencies": { - "styled-jsx": "3.3.0" + "styled-jsx": "^3.4.4" } } diff --git a/tests/__mocks__/styled-jsx/css.js b/tests/__mocks__/styled-jsx/css.js index 68dab92a4..41ce11d8f 100644 --- a/tests/__mocks__/styled-jsx/css.js +++ b/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 diff --git a/yarn.lock b/yarn.lock index e561659f1..8832c392e 100644 --- a/yarn.lock +++ b/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"