remove unneeded deps & updated example (#17651)

Closes #17626

examples/with-emotion/.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["next/babel", "@emotion/babel-preset-css-prop"]
+}

examples/with-emotion/package.json

@@ -11,11 +11,12 @@
   "keywords": [],
   "author": "Thomas Greco",
   "license": "MIT",
+  "devDependencies": {
+    "@emotion/babel-preset-css-prop": "10.0.27"
+  },
   "dependencies": {
-    "@emotion/core": "10.0.27",
+    "@emotion/core": "10.0.35",
     "@emotion/styled": "10.0.27",
-    "emotion": "10.0.27",
-    "emotion-server": "10.0.27",
     "next": "latest",
     "react": "^16.7.0",
     "react-dom": "^16.7.0"

examples/with-emotion/pages/_app.js

@@ -1,19 +1,10 @@
-import NextApp from 'next/app'
-import { CacheProvider } from '@emotion/core'
-
-// Use only { cache } from 'emotion'. Don't use { css }.
-import { cache } from 'emotion'
-
 import { globalStyles } from '../shared/styles'
 
-export default class App extends NextApp {
-  render() {
-    const { Component, pageProps } = this.props
-    return (
-      <CacheProvider value={cache}>
-        {globalStyles}
-        <Component {...pageProps} />
-      </CacheProvider>
-    )
-  }
-}
+const App = ({ Component, pageProps }) => (
+  <>
+    {globalStyles}
+    <Component {...pageProps} />
+  </>
+)
+
+export default App

examples/with-emotion/pages/index.js

@@ -1,4 +1,5 @@
-import { Basic, Combined, Animated, bounce } from '../shared/styles'
+import { Animated, Basic, bounce, Combined } from '../shared/styles'
+
 const Home = () => (
   <div>
     <Basic>Cool Styles</Basic>

examples/with-emotion/shared/styles.js

@@ -1,4 +1,4 @@
-import { keyframes, css, Global } from '@emotion/core'
+import { css, Global, keyframes } from '@emotion/core'
 import styled from '@emotion/styled'
 
 export const globalStyles = (
@@ -46,22 +46,22 @@ export const bounce = keyframes`
   }
 `
 
-export const Basic = styled('div')`
+export const Basic = styled.div`
   ${basicStyles};
 `
 
-export const Combined = styled('div')`
+export const Combined = styled.div`
   ${basicStyles};
   ${hoverStyles};
   & code {
     background-color: linen;
   }
 `
-export const Animated = styled('div')`
+export const Animated = styled.div`
   ${basicStyles};
   ${hoverStyles};
   & code {
     background-color: linen;
   }
-  animation: ${(props) => props.animation} 0.2s infinite ease-in-out alternate;
+  animation: ${({ animation }) => animation} 0.2s infinite ease-in-out alternate;
 `