fix(emotion): fix .extend behaviour using emotion

Closes #29

Author: gregberge

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 !

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
       }

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()