⬆️ update emotion and fix updates side-effect

.eslintrc

@@ -36,7 +36,7 @@
     "@typescript-eslint/no-unused-vars": [
       "error",
       {
-        "varsIgnorePattern": "React|tw|css"
+        "varsIgnorePattern": "React|tw|css|jsx"
       }
     ],
     "arrow-body-style": [
@@ -158,7 +158,7 @@
     "react/no-array-index-key": 0,
     "react/no-unescaped-entities": 0,
     "react/require-default-props": 0,
-    "simple-import-sort/sort": [
+    "simple-import-sort/imports": [
       "error",
       {
         "groups": [

package.json

@@ -17,7 +17,7 @@
     "cypress:run": "cypress run",
     "jest:start": "jest --watchAll",
     "jest:run": "jest",
-    "start": "cd playground && node_modules/.bin/next start",
+    "start": "cd playground && node_modules/.bin/next dev",
     "storybook:start": "NODE_PATH=playground/src start-storybook -p 6006",
     "storybook:build": "NODE_PATH=playground/src build-storybook"
   },

playground/.babelrc

@@ -1,5 +1,5 @@
 {
-  "presets": ["next/babel"],
+  "presets": ["next/babel", "@emotion/babel-preset-css-prop"],
   "plugins": [
     "babel-plugin-macros"
   ]

playground/babel-plugin-macros.config.js

@@ -5,5 +5,6 @@ module.exports = {
     format: 'auto',
     hasSuggestions: true,
     debug: false,
+    allowStyleProp: true,
   },
 };

playground/next-env.d.ts

@@ -1,2 +1,3 @@
 /// <reference types="next" />
 /// <reference types="next/types/global" />
+/// <reference types="@emotion/react/types/css-prop" />

playground/package.json

@@ -10,9 +10,11 @@
     "type-check": "tsc"
   },
   "dependencies": {
-    "@emotion/core": "^11.0.0",
+    "@emotion/babel-preset-css-prop": "^11.0.0",
+    "@emotion/react": "^11.1.2",
     "@emotion/styled": "^11.0.0",
     "next": "10.0.3",
+    "postcss": "^8.2.0",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "tailwindcss": "^2.0.1",

playground/src/components/Blank/Blank.styles.tsx

@@ -1,4 +1,4 @@
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import tw from 'twin.macro';
 
 export default css`

playground/src/components/Blank/Blank.tsx

@@ -1,6 +1,5 @@
-/** @jsx jsx */
 import React from 'react';
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import tw from 'twin.macro';
 
 import styles from './Blank.styles';

playground/src/components/Counter/Counter.tsx

@@ -1,13 +1,12 @@
-/** @jsx jsx */
 import React, { useState } from 'react';
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import tw from 'twin.macro';
 
 import { add, subtract } from 'utils';
 
-export interface CounterProps {
+export type CounterProps = {
   count: number;
-}
+};
 
 const Counter = ({ count: defaultCount }: CounterProps): JSX.Element => {
   const [count, setCount] = useState(defaultCount);

playground/src/pages/_app.tsx

@@ -1,9 +1,9 @@
-import React, { ReactType } from 'react';
+import React, { FunctionComponent } from 'react';
 
 import '../styles/base.css';
 
 interface AppProps {
-  Component: ReactType;
+  Component: FunctionComponent;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   pageProps: any;
 }

playground/src/pages/index.tsx

@@ -1,6 +1,5 @@
-/** @jsx jsx */
 import React from 'react';
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import tw from 'twin.macro';
 
 import Counter from 'components/Counter';