From 6ce7ff591479cb1bc029088063aa09495dd62a9a Mon Sep 17 00:00:00 2001
From: Giuseppe <giuseppeg@users.noreply.github.com>
Date: Wed, 4 Jan 2017 00:04:08 +0100
Subject: [PATCH] Don't add the data-jsx attribute to components instances
 (patch)

---
 src/babel.js                             | 11 ++++++++---
 test/fixtures/component-attribute.js     | 11 +++++++++++
 test/fixtures/component-attribute.out.js |  6 ++++++
 test/fixtures/multiple-jsx.out.js        |  2 +-
 test/index.js                            |  6 ++++++
 5 files changed, 32 insertions(+), 4 deletions(-)
 create mode 100644 test/fixtures/component-attribute.js
 create mode 100644 test/fixtures/component-attribute.out.js

diff --git a/src/babel.js b/src/babel.js
index 09727082..df1d4028 100644
--- a/src/babel.js
+++ b/src/babel.js
@@ -71,9 +71,14 @@ export default function ({types: t}) {
         }
 
         const el = path.node
-
-        if (el.name &&
-          (el.name.name !== 'style' && el.name.name !== STYLE_COMPONENT)) {
+        const {name} = el.name || {}
+
+        if (
+          name &&
+          name !== 'style' &&
+          name !== STYLE_COMPONENT &&
+          name.charAt(0) !== name.charAt(0).toUpperCase()
+        ) {
           for (const attr of el.attributes) {
             if (attr.name === MARKUP_ATTRIBUTE) {
               // avoid double attributes
diff --git a/test/fixtures/component-attribute.js b/test/fixtures/component-attribute.js
new file mode 100644
index 00000000..6cd6d80a
--- /dev/null
+++ b/test/fixtures/component-attribute.js
@@ -0,0 +1,11 @@
+const Test = () => (
+  <div>
+    <span>test</span>
+    <Component />
+    <style jsx>{`
+      span {
+        color: red;
+      }
+    `}</style>
+  </div>
+)
diff --git a/test/fixtures/component-attribute.out.js b/test/fixtures/component-attribute.out.js
new file mode 100644
index 00000000..6a3a5b51
--- /dev/null
+++ b/test/fixtures/component-attribute.out.js
@@ -0,0 +1,6 @@
+import _JSXStyle from "styled-jsx/style";
+const Test = () => <div data-jsx={1535297024}>
+    <span data-jsx={1535297024}>test</span>
+    <Component />
+    <_JSXStyle styleId={1535297024} css={"span[data-jsx=\"1535297024\"] {color: red;}"} />
+  </div>;
diff --git a/test/fixtures/multiple-jsx.out.js b/test/fixtures/multiple-jsx.out.js
index 1d43bc66..13279e0f 100644
--- a/test/fixtures/multiple-jsx.out.js
+++ b/test/fixtures/multiple-jsx.out.js
@@ -1,7 +1,7 @@
 import _JSXStyle from "styled-jsx/style";
 const Test1 = () => <div data-jsx={1535297024}>
     <span data-jsx={1535297024}>test</span>
-    <Component data-jsx={1535297024} />
+    <Component />
     <_JSXStyle styleId={1535297024} css={"span[data-jsx=\"1535297024\"] {color: red;}"} />
   </div>;
 
diff --git a/test/index.js b/test/index.js
index 977b0f16..3fb9f51d 100644
--- a/test/index.js
+++ b/test/index.js
@@ -76,6 +76,12 @@ test('works with multiple jsx blocks', async t => {
   t.is(code, out.trim())
 })
 
+test('should not add the data-jsx attribute to components instances', async t => {
+  const {code} = await transform('./fixtures/component-attribute.js')
+  const out = await read('./fixtures/component-attribute.out.js')
+  t.is(code, out.trim())
+})
+
 test('server rendering', t => {
   function App() {
     return React.createElement('div', null,