Upgrade Emotion CSS preset for new JSX transform

Ref: emotion-js/emotion#2062 Ref: emotion-js/emotion#2041 (comment)
upleveled · Nov 1, 2020 · f46407e · f46407e
1 parent 99cfb43
commit f46407e
Show file tree

Hide file tree

Showing 6 changed files with 33 additions and 22 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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 (
-    <Fragment>
+    <>
       {globalStyles}
       <Component {...pageProps} />
-    </Fragment>
+    </>
   );
 }
 

diff --git 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
         </button>
       ) : (
-        <Fragment>
+        <>
           <button
             onClick={async () => {
               await fetch(`/api/users/${props.user.id}`, {
@@ -83,7 +83,7 @@ export default function SingleUser(props: Props) {
           >
             cancel
           </button>
-        </Fragment>
+        </>
       )}
       <br />
       <h2>user lastName</h2>
@@ -104,7 +104,7 @@ export default function SingleUser(props: Props) {
           edit
         </button>
       ) : (
-        <Fragment>
+        <>
           <button
             onClick={() => {
               setEditingKey(null);
@@ -121,7 +121,7 @@ export default function SingleUser(props: Props) {
           >
             cancel
           </button>
-        </Fragment>
+        </>
       )}
       <br />
       <br />

diff --git 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"