From 0eaad36f9de7b3d7417ac38ca9fda77528adb62d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Greg=20Berg=C3=A9?= <berge.greg@gmail.com>
Date: Sat, 8 Sep 2018 09:25:08 +0200
Subject: [PATCH] fix(emotion): fix `.extend` behaviour using emotion

Closes #29
---
 docs/advanced/ExtendStyles.mdx | 1 +
 src/styled-engine/emotion.js   | 6 +++++-
 src/utils/createComponent.js   | 2 +-
 3 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/docs/advanced/ExtendStyles.mdx b/docs/advanced/ExtendStyles.mdx
index 6e4a6b306..0f3023d13 100644
--- a/docs/advanced/ExtendStyles.mdx
+++ b/docs/advanced/ExtendStyles.mdx
@@ -61,6 +61,7 @@ An example of a `BorderedButton` extended from a `Button`:
         border-color: blue;
       }
     `
+
     return (
       <BorderedButton variant="primary">
         A button with border !
diff --git a/src/styled-engine/emotion.js b/src/styled-engine/emotion.js
index 78812c816..e8c6fb880 100644
--- a/src/styled-engine/emotion.js
+++ b/src/styled-engine/emotion.js
@@ -53,7 +53,11 @@ export const patchStyledAPI = (StyledComponent, BaseComponent) => {
   Object.defineProperty(StyledComponent, 'extend', {
     get() {
       return (...args) => {
-        const NewStyledComponent = styled(StyledComponent)(...args)
+        const NewStyledComponent = styled(StyledComponent)`
+          &&& {
+            ${css(...args)};
+          }
+        `
         patchStyledAPI(NewStyledComponent, StyledComponent)
         return NewStyledComponent
       }
diff --git a/src/utils/createComponent.js b/src/utils/createComponent.js
index 4f0ab32ba..2921492e7 100644
--- a/src/utils/createComponent.js
+++ b/src/utils/createComponent.js
@@ -17,7 +17,7 @@ function createComponent(getConfig) {
     render = ({ Component, ...props }) => <Component {...props} />,
     defaultComponent = 'div',
     system = allSystem,
-    applySystem = system => props => ({ '&&&': system(props) }),
+    applySystem = system => props => ({ '&&&&': system(props) }),
     injectTheme,
     InnerComponent: InnerComponentFromConfig,
   } = getConfig()