check tag type in create styled component

Author: ka2jun8

src/constructors/styled.js

@@ -1,11 +1,29 @@
 import css from './css'
 import domElements from '../utils/domElements'
 
+// check valid vue-styled-component element type
+function isValidElementType (tag) {
+  if (typeof tag === 'undefined' || typeof tag === 'number') {
+    return false
+  }
+  if (typeof tag === 'string') {
+    return domElements.includes(tag)
+  }
+  if (typeof tag === 'object') {
+    return !!tag.template || !!tag.withComponent
+  }
+  return true
+}
+
 export default (createStyledComponent) => {
-  const styled = (tagName, props = {}) =>
-    (cssRules, ...interpolations) => (
+  const styled = (tagName, props = {}) => {
+    if (!isValidElementType(tagName)) {
+      throw new Error(tagName + ' is not allowed for styled tag type.')
+    }
+    return (cssRules, ...interpolations) => (
       createStyledComponent(tagName, css(cssRules, ...interpolations), props)
     )
+  }
 
   domElements.forEach((domElement) => {
     styled[domElement] = styled(domElement)

src/test/basic.test.js

@@ -29,6 +29,11 @@ describe('basic', () => {
     expectCSSMatches('')
   })
 
+  it('should throw an error when called', () => {
+    expect(() => styled``).toThrow()
+    expect(() => styled.notExistTag``).toThrow()
+  })
+
   // it('should generate an empty tag once rendered', () => {
   //   const Comp = styled.div``
   //   const vm = new Vue(Comp).$mount()