partial jsx (expressions)

test/fixtures/partials.js

@@ -0,0 +1,20 @@
+export default class {
+  renderTest() {
+    return <p>test</p>
+  }
+
+  render () {
+    const test = <div>{this.renderTest}</div>
+
+    return (
+      <div>
+        {test}
+        <style jsx>{`
+          p {
+            color: red;
+          }
+        `}</style>
+      </div>
+    )
+  }
+}

test/fixtures/partials.out.js

@@ -0,0 +1,18 @@
+import _JSXStyle from "styled-jsx/style";
+
+export default class {
+  renderTest() {
+    return <p data-jsx={"1891769468"}>test</p>
+  }
+
+  render () {
+    const test = <div data-jsx={"1891769468"}>{this.renderTest}</div>
+
+    return (
+      <div data-jsx={"1891769468"}>
+        {test}
+        <_JSXStyle css={"p[data-jsx=\"1891769468\"] {color: red;}"} data-jsx={"1891769468"} />
+      </div>
+    )
+  }
+}

test/index.js

@@ -65,3 +65,9 @@ test('mixed global and scoped', async t => {
   const out = await read('./fixtures/mixed-global-scoped.out.js')
   t.is(code, out.trim())
 })
+
+test('works with partial jsx (expressions)', async t => {
+  const {code} = await transform('./fixtures/partials.js')
+  const out = await read('./fixtures/partials.out.js')
+  t.is(code, out.trim())
+})