From f46407e345d3a00e99066d0276acb768f11ad02e Mon Sep 17 00:00:00 2001 From: Karl Horky Date: Sun, 1 Nov 2020 15:05:33 +0100 Subject: [PATCH] Upgrade Emotion CSS preset for new JSX transform Ref: https://github.com/emotion-js/emotion/pull/2062 Ref: https://github.com/emotion-js/emotion/issues/2041#issuecomment-720053255 --- babel.config.js | 5 ++++- components/Layout.js | 1 - package.json | 4 ++-- pages/_app.tsx | 5 ++--- pages/users/[id].tsx | 10 +++++----- yarn.lock | 30 ++++++++++++++++++++---------- 6 files changed, 33 insertions(+), 22 deletions(-) diff --git a/babel.config.js b/babel.config.js index 3169e5a..e8e0558 100644 --- a/babel.config.js +++ b/babel.config.js @@ -1,3 +1,6 @@ module.exports = { - presets: ['next/babel', '@emotion/babel-preset-css-prop'], + presets: [ + 'next/babel', + ['@emotion/babel-preset-css-prop', { runtime: 'automatic' }], + ], }; diff --git a/components/Layout.js b/components/Layout.js index 0ff656d..1c72b8d 100644 --- a/components/Layout.js +++ b/components/Layout.js @@ -1,4 +1,3 @@ -import React from 'react'; import Head from 'next/head'; import Header from './Header'; diff --git a/package.json b/package.json index bce3153..af31a6b 100644 --- a/package.json +++ b/package.json @@ -10,7 +10,7 @@ "migrate": "dotenv ley" }, "dependencies": { - "@emotion/core": "^10.0.35", + "@emotion/core": "^10.1.0", "@types/js-cookie": "^2.2.6", "argon2": "^0.27.0", "camelcase-keys": "^6.2.2", @@ -30,7 +30,7 @@ "snakecase-keys": "^3.2.0" }, "devDependencies": { - "@emotion/babel-preset-css-prop": "^10.0.27", + "@emotion/babel-preset-css-prop": "^10.1.0", "@types/jest": "^26.0.14", "@types/node": "^14.11.2", "@types/react": "^16.9.49", diff --git a/pages/_app.tsx b/pages/_app.tsx index 63e8fb8..bd72787 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -1,4 +1,3 @@ -import { Fragment } from 'react'; import { NextPage } from 'next'; import globalStyles from '../components/GlobalStyles'; @@ -9,10 +8,10 @@ type Props = { function MyApp({ Component, pageProps }: Props) { return ( - + <> {globalStyles} - + ); } diff --git a/pages/users/[id].tsx b/pages/users/[id].tsx index e663521..bc00eb7 100644 --- a/pages/users/[id].tsx +++ b/pages/users/[id].tsx @@ -1,4 +1,4 @@ -import { Fragment, useState } from 'react'; +import { useState } from 'react'; import { GetServerSidePropsContext } from 'next'; import Head from 'next/head'; import Layout from '../../components/Layout'; @@ -60,7 +60,7 @@ export default function SingleUser(props: Props) { edit ) : ( - + <> - + )}

user lastName

@@ -104,7 +104,7 @@ export default function SingleUser(props: Props) { edit ) : ( - + <> - + )}

diff --git a/yarn.lock b/yarn.lock index 910c080..28a162a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -837,6 +837,15 @@ "@babel/helper-plugin-utils" "^7.10.4" "@babel/plugin-syntax-jsx" "^7.10.4" +"@babel/plugin-transform-react-jsx-development@^7.12.1": + version "7.12.1" + resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-development/-/plugin-transform-react-jsx-development-7.12.1.tgz#0b8f8cd531dcf7991f1e5f2c10a2a4f1cfc78e36" + integrity sha512-IilcGWdN1yNgEGOrB96jbTplRh+V2Pz1EoEwsKsHfX1a/L40cUYuD71Zepa7C+ujv7kJIxnDftWeZbKNEqZjCQ== + dependencies: + "@babel/helper-builder-react-jsx-experimental" "^7.12.1" + "@babel/helper-plugin-utils" "^7.10.4" + "@babel/plugin-syntax-jsx" "^7.12.1" + "@babel/plugin-transform-react-jsx-self@^7.10.4": version "7.10.4" resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.10.4.tgz#cd301a5fed8988c182ed0b9d55e9bd6db0bd9369" @@ -863,7 +872,7 @@ "@babel/helper-plugin-utils" "^7.10.4" "@babel/plugin-syntax-jsx" "^7.10.4" -"@babel/plugin-transform-react-jsx@^7.3.0": +"@babel/plugin-transform-react-jsx@^7.12.1": version "7.12.1" resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.12.1.tgz#c2d96c77c2b0e4362cc4e77a43ce7c2539d478cb" integrity sha512-RmKejwnT0T0QzQUzcbP5p1VWlpnP8QHtdhEtLG55ZDQnJNalbF3eeDyu3dnGKvGzFIQiBzFhBYTwvv435p9Xpw== @@ -1234,12 +1243,13 @@ dependencies: "@babel/plugin-syntax-jsx" "^7.2.0" -"@emotion/babel-preset-css-prop@^10.0.27": - version "10.0.27" - resolved "https://registry.yarnpkg.com/@emotion/babel-preset-css-prop/-/babel-preset-css-prop-10.0.27.tgz#58868d9a6afee0eeaeb0fa9dc5ccb1b12d4f786b" - integrity sha512-rducrjTpLGDholp0l2l4pXqpzAqYYGMg/x4IteO0db2smf6zegn6RRZdDnbaoMSs63tfPWgo2WukT1/F1gX/AA== +"@emotion/babel-preset-css-prop@^10.1.0": + version "10.1.0" + resolved "https://registry.yarnpkg.com/@emotion/babel-preset-css-prop/-/babel-preset-css-prop-10.1.0.tgz#4800943dff35bd82a83891b278565918bbed14a7" + integrity sha512-t1ar2Zt3fJ/TuoEg7Oin4sYdYt4BMWbvsQkaO4rq0II4hb9t/NdbCUd0jXFIYDuf0FYhyDEHt6sqpdPAG4uQrA== dependencies: - "@babel/plugin-transform-react-jsx" "^7.3.0" + "@babel/plugin-transform-react-jsx" "^7.12.1" + "@babel/plugin-transform-react-jsx-development" "^7.12.1" "@babel/runtime" "^7.5.5" "@emotion/babel-plugin-jsx-pragmatic" "^0.1.5" babel-plugin-emotion "^10.0.27" @@ -1254,10 +1264,10 @@ "@emotion/utils" "0.11.3" "@emotion/weak-memoize" "0.2.5" -"@emotion/core@^10.0.35": - version "10.0.35" - resolved "https://registry.yarnpkg.com/@emotion/core/-/core-10.0.35.tgz#513fcf2e22cd4dfe9d3894ed138c9d7a859af9b3" - integrity sha512-sH++vJCdk025fBlRZSAhkRlSUoqSqgCzYf5fMOmqqi3bM6how+sQpg3hkgJonj8GxXM4WbD7dRO+4tegDB9fUw== +"@emotion/core@^10.1.0": + version "10.1.0" + resolved "https://registry.yarnpkg.com/@emotion/core/-/core-10.1.0.tgz#8e3a99bf42fc27608d692f6ea7a82a180cfe0eb6" + integrity sha512-b4ojBXwumJ/Zc7zie4NjE5J/snS9DxsCCjW5dQ3Yr8sX5cOSbRPOd80ba3fIWUydTZmhRvbGXdBFJxj4J24rXg== dependencies: "@babel/runtime" "^7.5.5" "@emotion/cache" "^10.0.27"