[+] Added normalizeProps in order to accept also non-validated props

[+] Updated SC validation component
[+] v-model is now working
[+] Updated examples

Author: liqueflies

example/index.html

@@ -16,6 +16,11 @@ <h1>Basic Example</h1>
     styled.injectGlobal`
       body {
         background-color: #fefefe;
+        font-family: -apple-system, BlinkMacSystemFont, sans-serif;
+      }
+
+      *, *::before, *::after {
+        box-sizing: border-box;
       }
     `;
 
@@ -29,22 +34,13 @@ <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', { animate: Boolean })`
       font-size: 2em;
       text-align: center;
       color: ${props => props.theme.primary};
+      text-transform: uppercase;
 
       @supports (-webkit-text-stroke: 1px) {
         -webkit-text-stroke: 2px ${props => props.theme.primary};
@@ -58,6 +54,16 @@ <h1>Basic Example</h1>
 
     const H2 = CustomTitle.withComponent('h2')
 
+    const MyComponent = {
+      props: ['visible'],
+      template: `<h1><slot /></h1>`
+    }
+
+    const SuperCustomTitle = styled.default(MyComponent, { color: String })`
+      color: ${props => props.color || 'red'};
+      opacity: ${props => props.visible ? 1 : 0};
+    `
+
     // Create a <Wrapper> vue component that renders a <section> with
     // some padding and a papayawhip background
     const Wrapper = styled.default.section`
@@ -79,55 +85,67 @@ <h1>Basic Example</h1>
       display: block;
       width: 100%;
       height: 60px;
-      border: solid 1px ${props => props.theme.primary};
+      border: solid 3px transparent;
+      padding: 0 0.6em;
+      font-size: 1em;
+      line-height: 1;
+
+      &:focus {
+        outline: none;
+        border: solid 3px ${props => props.theme.primary};
+      }
     `
 
     const Btn = styled.default('button', { visible: Boolean })`
-      background-color: red;
+      outline: none;
+      border: none;
+      border-radius: 6em;
+      padding: 1em 2em;
+      color: #fff;
+      cursor: pointer;
+      margin: 1.5em 0;
+      background-color: ${props => props.theme.primary};
       opacity: ${props => props.visible ? 1: 0};
     `
 
     const SuperBtn = styled.default(Btn, { visible: Boolean, big: Boolean })`
-      font-size: ${props => props.big ? 22 : 18}px;
+      font-size: ${props => props.big ? 0.8 : 1}em;
     `
 
     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
-        }
+        text1: 'Hello World, this is my first styled component!',
+        text2: 'Hello World, this is my first styled component!',
+        animated1: false,
+        animated2: false
       },
       template: `
       <theme-provider :theme="{
         primary: 'palevioletred',
         secondary: 'papayawhip',
-        tertiary: 'goldenrod'
+        tertiary: 'lavenderblush'
       }">
-        <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>
+          <custom-title :visible="true" :animate="animated1"> {{text1}} </custom-title>
+          <styled-input v-model="text1" />
+          <btn visible @click="animated1 = !animated1"> A Styled Button </btn>
         </wrapper>
+        <w-2>
+          <h-2 :animate="animated2"> {{text2}} </h-2>
+          <styled-input v-model="text2" />
+          <super-btn visible @click="animated2 = !animated2"> An extension of Styled Button </super-btn>
+        </w-2>
       </theme-provider>`,
       components: {
-        'custom-title': H2,
-        wrapper: W2,
-        btn: SuperBtn,
-        StyledVueComponent,
-        'styled-input': StyledInput,
+        CustomTitle,
+        Wrapper,
+        W2,
+        H2,
+        Btn,
+        SuperBtn,
+        SuperCustomTitle,
+        StyledInput,
         'theme-provider': styled.ThemeProvider,
       },
     });

package-lock.json

@@ -37,6 +37,7 @@
     "glamor": "^2.20.24",
     "inline-style-prefixer": "^2.0.5",
     "lodash.isplainobject": "^4.0.6",
+    "lodash.zipobject": "^4.1.3",
     "stylis": "^3.5.4"
   },
   "devDependencies": {

package.json

@@ -1,15 +1,14 @@
 import css from '../constructors/css'
+import normalizeProps from '../utils/normalizeProps'
 
 export default (ComponentStyle) => {
   const createStyledComponent = (target, rules, props) => {
-    const prevProps = target && typeof target !== 'string'
-      ? (typeof target === 'object' ? target.props : (typeof target === 'function' ? target.options.props : {}))
-      : {}
-
-    const mergedProps = { ...prevProps, ...props }
-
     const componentStyle = new ComponentStyle(rules)
 
+    // handle array-declaration props
+    const currentProps = normalizeProps(props)
+    const prevProps = normalizeProps(target.props)
+
     const StyledComponent = {
       inject: {
         $theme: {
@@ -18,8 +17,17 @@ export default (ComponentStyle) => {
           }
         }
       },
-      props: mergedProps,
-      render: function (createElement) {
+      props: {
+        value: null,
+        ...currentProps,
+        ...prevProps
+      },
+      data () {
+        return {
+          localValue: this.value
+        }
+      },
+      render (createElement) {
         const children = []
         for (const slot in this.$slots) {
           if (slot === 'default') {
@@ -35,9 +43,16 @@ export default (ComponentStyle) => {
             class: [this.generatedClassName],
             props: this.$props,
             domProps: {
-              value: this.value
+              value: this.localValue
+            },
+            on: {
+              ...this.$listeners,
+              input: event => {
+                if (event && event.target) {
+                  this.localValue = event.target.value
+                }
+              }
             },
-            on: this.$listeners,
             scopedSlots: this.$scopedSlots
           },
           children
@@ -57,6 +72,14 @@ export default (ComponentStyle) => {
           return this.$theme()
         }
       },
+      watch: {
+        value (newValue) {
+          this.localValue = newValue
+        },
+        localValue () {
+          this.$emit('input', this.localValue)
+        }
+      },
       extend (cssRules, ...interpolations) {
         const extendedRules = css(cssRules, ...interpolations)
         return createStyledComponent(target, rules.concat(extendedRules), props)

src/models/StyledComponent.js

@@ -1,3 +1,5 @@
 export default function isStyledComponent (target) {
-  return target && typeof target.generatedClassName === 'string'
+  return target &&
+    target.methods &&
+    typeof target.methods.generateAndInjectStyles() === 'string'
 }

src/utils/isStyledComponent.js

@@ -3,7 +3,7 @@ import isVueComponent from './isVueComponent'
 import isStyledComponent from './isStyledComponent'
 
 export default function isValidElementType (target) {
-  return isTag(target) ||
+  return isStyledComponent(target) ||
     isVueComponent(target) ||
-    isStyledComponent(target)
+    isTag(target)
 }

src/utils/isValidElementType.js

@@ -1,3 +1,7 @@
 export default function isVueComponent (target) {
-  return target && typeof target.render === 'function'
+  return target &&
+    (
+      typeof target.render === 'function' ||
+      typeof target.template === 'string'
+    )
 }

src/utils/isVueComponent.js

@@ -0,0 +1,9 @@
+import zipObject from 'lodash.zipobject'
+
+export default function normalizeProps (props = {}) {
+  if (Array.isArray(props)) {
+    return zipObject(props)
+  } else {
+    return props
+  }
+}