Filter props on composed components

src/react/index.js

@@ -27,51 +27,50 @@ export default function(tag, cls, objs, vars = [], content) {
   }
 
   const componentTag = tag.displayName || tag.name || 'Component'
+  const spec = {
+    vars,
+    content,
+    objs,
+    tag,
+    cls
+  }
+  const newSpec =
+    tag.__emotion_spec !== undefined ? tag.__emotion_spec.concat(spec) : [spec]
+  const localTag = newSpec[0].tag
+
   const omitFn =
-    typeof tag === 'string'
+    typeof localTag === 'string'
       ? testOmitPropsOnStringTag
       : testOmitPropsOnComponent
   function Styled(props, context) {
     const getValue = v => {
       if (v && typeof v === 'function') {
-        if (v.__emotion_class) {
+        if (v.__emotion_class !== undefined) {
           return `& .${v.__emotion_class}`
         }
         return v(props, context)
       }
 
       return v
     }
-    let localTag = tag
 
     let finalObjs = []
 
-    if (tag.__emotion_spec) {
-      push(
-        finalObjs,
-        reduce(
-          tag.__emotion_spec,
-          (accum, spec) => {
-            push(accum, spec.objs)
-            if (spec.content) {
-              push(accum, spec.content.apply(null, map(spec.vars, getValue)))
-            }
-            accum.push(spec.cls)
-            return accum
-          },
-          []
-        )
+    push(
+      finalObjs,
+      reduce(
+        newSpec,
+        (accum, spec) => {
+          push(accum, spec.objs)
+          if (spec.content) {
+            push(accum, spec.content.apply(null, map(spec.vars, getValue)))
+          }
+          accum.push(spec.cls)
+          return accum
+        },
+        []
       )
-      localTag = tag.__emotion_spec[0].tag
-    }
-
-    push(finalObjs, objs)
-
-    finalObjs.push(cls)
-
-    if (content) {
-      push(finalObjs, content.apply(null, map(vars, getValue)))
-    }
+    )
 
     if (props.className) {
       push(finalObjs, props.className.split(' '))
@@ -92,16 +91,7 @@ export default function(tag, cls, objs, vars = [], content) {
   }
 
   Styled.displayName = `styled(${componentTag})`
-  const spec = {
-    vars,
-    content,
-    objs,
-    tag,
-    cls
-  }
-  Styled.__emotion_spec = tag.__emotion_spec
-    ? tag.__emotion_spec.concat(spec)
-    : [spec]
+  Styled.__emotion_spec = newSpec
   Styled.__emotion_class = cls
   return Styled
 }

test/__snapshots__/react.test.js.snap

@@ -210,7 +210,6 @@ exports[`styled composes 1`] = `
 
 <h1
   className="glamor-0 glamor-1 legacy__class glamor-2"
-  scale={2}
 >
   hello world
 </h1>
@@ -259,7 +258,6 @@ exports[`styled composes with objects 1`] = `
 
 <h1
   className="glamor-0 glamor-1 legacy__class glamor-2"
-  scale={2}
 >
   hello world
 </h1>
@@ -302,7 +300,6 @@ exports[`styled function in expression 1`] = `
 
 <h1
   className="glamor-0 glamor-1 legacy__class glamor-2"
-  scale={2}
 >
   hello world
 </h1>
@@ -533,6 +530,23 @@ exports[`styled prop filtering 1`] = `
 </a>
 `;
 
+exports[`styled prop filtering on composed styled components that are string tags 1`] = `
+.glamor-2 {
+  background-color: hotpink;
+  color: green;
+}
+
+<a
+  aria-label="some label"
+  className="glamor-0 glamor-1 glamor-2"
+  data-wow="value"
+  href="link"
+  is={true}
+>
+  hello world
+</a>
+`;
+
 exports[`styled random expressions 1`] = `
 .glamor-1 {
   font-size: 1rem;

test/macro/__snapshots__/react.test.js.snap

@@ -69,7 +69,6 @@ exports[`styled composes 1`] = `
 
 <h1
   className="glamor-0 glamor-1 glamor-2"
-  scale={2}
 >
   hello world
 </h1>
@@ -119,7 +118,6 @@ exports[`styled composes with objects 1`] = `
 
 <h1
   className="glamor-0 glamor-1 glamor-2"
-  scale={2}
 >
   hello world
 </h1>
@@ -144,7 +142,6 @@ exports[`styled function in expression 1`] = `
 
 <h1
   className="glamor-0 glamor-1 glamor-2"
-  scale={2}
 >
   hello world
 </h1>

test/react.test.js

@@ -607,6 +607,31 @@ describe('styled', () => {
 
     expect(tree).toMatchSnapshot()
   })
+  test('prop filtering on composed styled components that are string tags', () => {
+    const BaseLink = styled.a`background-color: hotpink;`
+    const Link = styled(BaseLink)`color: green;`
+
+    const tree = renderer
+      .create(
+        <Link
+          a
+          b
+          wow
+          prop
+          filtering
+          is
+          cool
+          aria-label="some label"
+          data-wow="value"
+          href="link"
+        >
+          hello world
+        </Link>
+      )
+      .toJSON()
+
+    expect(tree).toMatchSnapshot()
+  })
   test('throws if undefined is passed as the component', () => {
     expect(
       () => styled(undefined)`display: flex;`