From 5bd3a5f1d12da896bcd2bb1cccbc679405caa08c Mon Sep 17 00:00:00 2001
From: Josh Hawkins <hawkins@users.noreply.github.com>
Date: Fri, 7 Jul 2017 10:25:26 -0500
Subject: [PATCH] Update emotion example to use css instead of fragment (#2497)

---
 examples/with-emotion/package.json   |  2 +-
 examples/with-emotion/pages/index.js | 26 +++++++++++---------------
 2 files changed, 12 insertions(+), 16 deletions(-)

diff --git a/examples/with-emotion/package.json b/examples/with-emotion/package.json
index 54ce5f15..7c1700c6 100644
--- a/examples/with-emotion/package.json
+++ b/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"
diff --git a/examples/with-emotion/pages/index.js b/examples/with-emotion/pages/index.js
index f83839d2..3a54c740 100644
--- a/examples/with-emotion/pages/index.js
+++ b/examples/with-emotion/pages/index.js
@@ -1,5 +1,5 @@
 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;
     }