Add support for custom HTML tags

src/_utils.js

@@ -21,7 +21,7 @@ const joinSpreads = spreads => spreads.reduce((acc, curr) => or(acc, curr))
 
 export const hashString = str => String(_hashString(str))
 
-export const addClassName = (path, jsxId) => {
+export const addClassName = (path, jsxId, classNameAttribute = 'className') => {
   const jsxIdWithSpace = concat(jsxId, t.stringLiteral(' '))
   const attributes = path.get('attributes')
   const spreads = []
@@ -35,7 +35,7 @@ export const addClassName = (path, jsxId) => {
         const properties = node.argument.properties
 
         const index = properties.findIndex(
-          property => property.key.name === 'className'
+          property => property.key.name === classNameAttribute
         )
 
         if (~index) {
@@ -59,7 +59,7 @@ export const addClassName = (path, jsxId) => {
           : t.identifier(name)
         const attrNameDotClassName = t.memberExpression(
           spreadObj,
-          t.identifier('className')
+          t.identifier(classNameAttribute)
         )
 
         spreads.push(
@@ -76,7 +76,7 @@ export const addClassName = (path, jsxId) => {
       continue
     }
 
-    if (t.isJSXAttribute(attr) && node.name.name === 'className') {
+    if (t.isJSXAttribute(attr) && node.name.name === classNameAttribute) {
       className = attributes[i]
       // found className break the loop
       break
@@ -105,7 +105,7 @@ export const addClassName = (path, jsxId) => {
   }
 
   path.node.attributes.push(
-    t.jSXAttribute(t.jSXIdentifier('className'), className)
+    t.jSXAttribute(t.jSXIdentifier(classNameAttribute), className)
   )
 }
 

src/babel.js

@@ -19,6 +19,11 @@ import {
 
 import { STYLE_COMPONENT } from './_constants'
 
+const getClassNameAttributeNameForElementName = name => {
+  const isLowerCase = name.charAt(0) === name.charAt(0).toLowerCase()
+  return isLowerCase && name.includes('-') ? 'class' : 'className'
+}
+
 export default function({ types: t }) {
   const jsxVisitors = {
     JSXOpeningElement(path, state) {
@@ -49,8 +54,9 @@ export default function({ types: t }) {
             binding.referencePaths.some(r => r === tag)
           ))
       ) {
+        const classNameAttribute = getClassNameAttributeNameForElementName(name)
         if (state.className) {
-          addClassName(path, state.className)
+          addClassName(path, state.className, classNameAttribute)
         }
       }
 

test/attribute.js

@@ -18,6 +18,13 @@ test('rewrites className', async t => {
   t.snapshot(code)
 })
 
+test('rewrites class for custom components', async t => {
+  const { code } = await transform(
+    './fixtures/attribute-generation-custom-component-class-rewriting.js'
+  )
+  t.snapshot(code)
+})
+
 test('generate attribute for mixed modes (global, static, dynamic)', async t => {
   const { code } = await transform('./fixtures/attribute-generation-modes.js')
   t.snapshot(code)

test/fixtures/attribute-generation-custom-component-class-rewriting.js

@@ -0,0 +1,11 @@
+import test from 'ava'
+
+export default () => {
+  const Element = 'custom-component'
+  return (
+    <custom-component>
+      <custom-component class="test" {...test.test} />
+      <style jsx>{'custom-component { color: red }'}</style>
+    </custom-component>
+  )
+}

test/snapshots/attribute.js.md

@@ -108,6 +108,20 @@ Generated by [AVA](https://ava.li).
       return <ul className="items">{items}</ul>;␊
     };`
 
+## rewrites class for custom components
+
+> Snapshot 1
+
+    `import _JSXStyle from "styled-jsx/style";␊
+    import test from "ava";␊
+    export default (() => {␊
+      const Element = 'custom-component';␊
+      return <custom-component class={"jsx-1299692644"}>␊
+          <custom-component {...test.test} class={"jsx-1299692644" + " " + (test.test && test.test.class != null && test.test.class || "test")} />␊
+          <_JSXStyle id={"1299692644"}>{"custom-component.jsx-1299692644{color:red;}"}</_JSXStyle>␊
+        </custom-component>;␊
+    });`
+
 ## rewrites className
 
 > Snapshot 1