Update emotion example to use css instead of fragment (#2497)

examples/with-emotion/package.json

@@ -7,7 +7,7 @@
     "start": "next start"
   },
   "dependencies": {
-    "emotion": "^5.0.0",
+    "emotion": "^5.1.4",
     "next": "^2.4.6",
     "react": "^15.6.1",
     "react-dom": "^15.6.1"

examples/with-emotion/pages/index.js

 import React from 'react'
-import { hydrate, keyframes, fragment, injectGlobal } from 'emotion'
+import { hydrate, keyframes, css, injectGlobal } from 'emotion'
 import styled from 'emotion/react'
 
 // Adds server generated styles to emotion cache.
@@ -20,7 +20,7 @@ export default () => {
     }
   `
 
-  const basicStyles = fragment`
+  const basicStyles = css`
     background-color: white;
     color: cornflowerblue;
     border: 1px solid lightgreen;
@@ -31,11 +31,13 @@ export default () => {
     margin: 3rem 0;
     padding: 1rem 0.5rem;
   `
-  const hoverStyles = fragment`
-    color: white;
-    background-color: lightgray;
-    border-color: aqua;
-    box-shadow: -15px -15px 0 0 aqua, -30px -30px 0 0 cornflowerblue;
+  const hoverStyles = css`
+    &:hover {
+      color: white;
+      background-color: lightgray;
+      border-color: aqua;
+      box-shadow: -15px -15px 0 0 aqua, -30px -30px 0 0 cornflowerblue;
+    }
   `
   const bounce = keyframes`
     from {
@@ -48,19 +50,13 @@ export default () => {
 
   const Basic = styled.div`@apply ${basicStyles};`
   const Combined = styled.div`
-    @apply ${basicStyles};
-    &:hover {
-      @apply ${hoverStyles};
-    }
+    composes: ${basicStyles} ${hoverStyles};
     & code {
       background-color: linen;
     }
   `
   const Animated = styled.div`
-    @apply ${basicStyles};
-    &:hover {
-      @apply ${hoverStyles};
-    }
+    composes: ${basicStyles} ${hoverStyles};
     & code {
       background-color: linen;
     }