From b490010d0c8e481bfd821110f6ecaacdb0844d50 Mon Sep 17 00:00:00 2001
From: Pedro Nauck <pedronauck@gmail.com>
Date: Wed, 27 Feb 2019 17:05:23 -0300
Subject: [PATCH] fix(gatsby-theme-docz): add ssr support for styled-components

---
 core/gatsby-theme-docz/gatsby-config.js   | 3 +++
 core/gatsby-theme-docz/package.json       | 2 ++
 examples/gatsby/src/components/Alert.jsx  | 4 ++--
 examples/gatsby/src/components/Button.jsx | 4 ++--
 4 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/core/gatsby-theme-docz/gatsby-config.js b/core/gatsby-theme-docz/gatsby-config.js
index d16f9e2a3..feab9017e 100644
--- a/core/gatsby-theme-docz/gatsby-config.js
+++ b/core/gatsby-theme-docz/gatsby-config.js
@@ -24,6 +24,9 @@ module.exports = opts => {
       {
         resolve: 'gatsby-plugin-root-import',
       },
+      {
+        resolve: 'gatsby-plugin-styled-components',
+      },
       {
         resolve: 'gatsby-plugin-compile-es6-packages',
         options: {
diff --git a/core/gatsby-theme-docz/package.json b/core/gatsby-theme-docz/package.json
index 6a71c158f..774adf1aa 100644
--- a/core/gatsby-theme-docz/package.json
+++ b/core/gatsby-theme-docz/package.json
@@ -30,6 +30,7 @@
     "gatsby-plugin-manifest": "^2.0.19",
     "gatsby-plugin-react-helmet": "^3.0.7",
     "gatsby-plugin-root-import": "^2.0.5",
+    "gatsby-plugin-styled-components": "^3.0.6",
     "lodash": "^4.17.11",
     "prop-types": "^15.7.2",
     "react": "^16.8.3",
@@ -39,6 +40,7 @@
     "rehype-slug": "^2.0.2",
     "remark-docz": "^0.13.3",
     "remark-frontmatter": "^1.3.1",
+    "styled-components": "^4.1.3",
     "ulid": "^2.3.0",
     "yargs": "^13.2.1"
   },
diff --git a/examples/gatsby/src/components/Alert.jsx b/examples/gatsby/src/components/Alert.jsx
index 0a2fefed6..d89fbd499 100644
--- a/examples/gatsby/src/components/Alert.jsx
+++ b/examples/gatsby/src/components/Alert.jsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import styled from '@emotion/styled'
+import styled from 'styled-components'
 import t from 'prop-types'
 
 const kinds = {
@@ -9,7 +9,7 @@ const kinds = {
   warning: '#FFA502',
 }
 
-const AlertStyled = styled('div')`
+const AlertStyled = styled.div`
   padding: 15px 20px;
   background: white;
   border-radius: 3px;
diff --git a/examples/gatsby/src/components/Button.jsx b/examples/gatsby/src/components/Button.jsx
index bfc18edbd..f6cbd7e94 100644
--- a/examples/gatsby/src/components/Button.jsx
+++ b/examples/gatsby/src/components/Button.jsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import styled from '@emotion/styled'
+import styled from 'styled-components'
 import t from 'prop-types'
 
 const scales = {
@@ -49,7 +49,7 @@ const kinds = outline => {
 const getScale = ({ scale = 'normal' }) => scales[scale]
 const getKind = ({ kind = 'primary', outline = false }) => kinds(outline)[kind]
 
-const ButtonStyled = styled('button')`
+const ButtonStyled = styled.button`
   ${getKind};
   ${getScale};
   cursor: pointer;