[+] Fixed StyledComponent.extend when it's used with props

Author: liqueflies

example/index.html

@@ -29,18 +29,31 @@ <h1>Basic Example</h1>
         }
       `;
 
+    const VueComponent = {
+      functional: true,
+      render: function (createElement, context) {
+        // Transparently pass any attributes, event listeners, children, etc.
+        return createElement('button', context.data, context.children)
+      }
+    }
+
+    const StyledVueComponent = styled.default(VueComponent)``
+
     // Create a <CustomTitle> vue component that renders an <h1> which is
     // centered, palevioletred and sized at 1.5em
-    const CustomTitle = styled.default.h1`
+    const CustomTitle = styled.default('h1', { animate: Boolean })`
       font-size: 2em;
       text-align: center;
       color: ${props => props.theme.primary};
-      animation: ${animation} 2s linear infinite;
 
       @supports (-webkit-text-stroke: 1px) {
         -webkit-text-stroke: 2px ${props => props.theme.primary};
         color: transparent
       }
+
+      ${props => props.animate &&
+        `animation: ${animation} 2s linear infinite;`
+      }
     `;
 
     const H2 = CustomTitle.withComponent('h2')
@@ -52,8 +65,8 @@ <h1>Basic Example</h1>
       background: ${props => props.theme.secondary};
     `;
 
-    const W2 = styled.default(Wrapper)`
-      color: red;
+    const W2 = Wrapper.extend`
+      background: ${props => props.theme.tertiary};
     `;
 
     const W3 = styled.default(W2)`
@@ -62,6 +75,13 @@ <h1>Basic Example</h1>
       }
     `
 
+    const StyledInput = styled.default.input`
+      display: block;
+      width: 100%;
+      height: 60px;
+      border: solid 1px ${props => props.theme.primary};
+    `
+
     const Btn = styled.default('button', { visible: Boolean })`
       background-color: red;
       opacity: ${props => props.visible ? 1: 0};
@@ -73,21 +93,42 @@ <h1>Basic Example</h1>
 
     new Vue({
       el: '#container',
+      data: {
+        text: 'Hello World, this is my first styled component!'
+      },
+      methods: {
+        input(e) {
+          console.log(e.target.value)
+          this.text += e.target.value
+        }
+      },
       template: `
       <theme-provider :theme="{
         primary: 'palevioletred',
-        secondary: 'papayawhip'
+        secondary: 'papayawhip',
+        tertiary: 'goldenrod'
       }">
-        <wrapper>
-          <custom-title> Hello World, this is my first styled component! </custom-title>
+        <wrapper color="salmon">
+          <custom-title> {{text}} </custom-title>
+          <styled-input
+            v-bind:value="text"
+            v-on:input="text = $event.target.value"
+          />
+          <input
+            v-bind:value="text"
+            v-on:input="text = $event.target.value"
+          />
           <btn visible> Button </btn>
+          <styled-vue-component>ciao</styled-vue-component>
         </wrapper>
       </theme-provider>`,
       components: {
         'custom-title': H2,
-        wrapper: W3,
+        wrapper: W2,
         btn: SuperBtn,
-        'theme-provider': styled.ThemeProvider
+        StyledVueComponent,
+        'styled-input': StyledInput,
+        'theme-provider': styled.ThemeProvider,
       },
     });
     </script>

src/models/StyledComponent.js

@@ -1,3 +1,5 @@
+import css from '../constructors/css'
+
 export default (ComponentStyle) => {
   const createStyledComponent = (target, rules, props) => {
     const prevProps = target && typeof target !== 'string'
@@ -27,8 +29,6 @@ export default (ComponentStyle) => {
           }
         }
 
-        console.log()
-
         return createElement(
           target,
           {
@@ -57,8 +57,9 @@ export default (ComponentStyle) => {
           return this.$theme()
         }
       },
-      extend (extendedRules) {
-        return createStyledComponent(target, rules.slice().concat(extendedRules), props)
+      extend (cssRules, ...interpolations) {
+        const extendedRules = css(cssRules, ...interpolations)
+        return createStyledComponent(target, rules.concat(extendedRules), props)
       },
       withComponent (newTarget) {
         return createStyledComponent(newTarget, rules, props)

src/utils/isValidElementType.js

@@ -8,7 +8,7 @@ export default function isValidElementType (tag) {
     return domElements.indexOf(tag) !== -1
   }
   if (typeof tag === 'object') {
-    return !!tag.template || !!tag.withComponent
+    return !!tag.template || !!tag.withComponent || !!tag.functional
   }
   return true
 }