Add support for spread attributes (patch) (#86)

src/babel.js

@@ -15,8 +15,8 @@ const STYLE_COMPONENT_ID = 'styleId'
 const STYLE_COMPONENT_CSS = 'css'
 
 export default function ({types: t}) {
-  const isGlobalEl = el => el.attributes.some(attr => (
-    attr.name.name === GLOBAL_ATTRIBUTE
+  const isGlobalEl = el => el.attributes.some(({name}) => (
+    name && name.name === GLOBAL_ATTRIBUTE
   ))
 
   const isStyledJsx = ({node: el}) => (
@@ -93,8 +93,11 @@ export default function ({types: t}) {
           name !== STYLE_COMPONENT &&
           name.charAt(0) !== name.charAt(0).toUpperCase()
         ) {
-          for (const attr of el.attributes) {
-            if (attr.name === MARKUP_ATTRIBUTE || attr.name.name === MARKUP_ATTRIBUTE) {
+          for (const {name} of el.attributes) {
+            if (!name) {
+              continue
+            }
+            if (name === MARKUP_ATTRIBUTE || name.name === MARKUP_ATTRIBUTE) {
               // avoid double attributes
               return
             }

test/fixtures/multiple-jsx.js

@@ -1,6 +1,10 @@
+const attrs = {
+  id: 'test'
+}
+
 const Test1 = () => (
   <div>
-    <span>test</span>
+    <span {...attrs} data-test="test">test</span>
     <Component />
     <style jsx>{`
       span {

test/fixtures/multiple-jsx.out.js

@@ -1,6 +1,10 @@
 import _JSXStyle from "styled-jsx/style";
+const attrs = {
+  id: 'test'
+};
+
 const Test1 = () => <div data-jsx={1535297024}>
-    <span data-jsx={1535297024}>test</span>
+    <span {...attrs} data-test="test" data-jsx={1535297024}>test</span>
     <Component />
     <_JSXStyle styleId={1535297024} css={"span[data-jsx=\"1535297024\"] {color: red;}"} />
   </div>;