Update emotion (#69)

* remove previous packages

* add new packages

* refactor emotion stuff

Author: ltclmbdev

next-env.d.ts

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

package.json

@@ -10,12 +10,12 @@
     "test": "jest --watch"
   },
   "dependencies": {
-    "@emotion/core": "^10.1.1",
-    "@emotion/styled": "^10.0.27",
+    "@emotion/babel-preset-css-prop": "^11.2.0",
+    "@emotion/css": "^11.1.3",
+    "@emotion/react": "^11.1.5",
+    "@emotion/server": "^11.0.0",
     "@next/mdx": "^10.0.6",
     "dotenv-flow": "^3.2.0",
-    "emotion": "^10.0.27",
-    "emotion-server": "^10.0.27",
     "mdx-prism": "^0.3.1",
     "next": "10.0.8",
     "next-seo": "^4.19.0",
@@ -30,7 +30,6 @@
   },
   "devDependencies": {
     "@babel/plugin-transform-react-jsx": "^7.12.16",
-    "@emotion/babel-preset-css-prop": "^10.2.1",
     "@mdx-js/loader": "^1.6.22",
     "@tailwindcss/typography": "^0.4.0",
     "@testing-library/jest-dom": "^5.11.9",

src/pages/_document.tsx

@@ -6,7 +6,10 @@ import Document, {
   NextScript,
   DocumentContext,
 } from 'next/document'
-import {extractCritical} from 'emotion-server'
+import createEmotionServer from '@emotion/server/create-instance'
+import {cache} from '@emotion/css'
+
+const {extractCritical} = createEmotionServer(cache)
 
 export default class MyDocument extends Document {
   static async getInitialProps(ctx: DocumentContext) {

src/pages/index.tsx

@@ -1,4 +1,4 @@
-import {jsx} from '@emotion/core'
+import React from 'react'
 import Head from 'next/head'
 import DarkModeToggle from '../components/dark-mode-toggle'