Skip to content

Commit

Permalink
Support multiple jsx block (components) per file (#45)
Browse files Browse the repository at this point in the history
  • Loading branch information
giuseppeg authored and rauchg committed Dec 19, 2016
1 parent d0c2a7b commit c365806
Show file tree
Hide file tree
Showing 4 changed files with 52 additions and 1 deletion.
4 changes: 3 additions & 1 deletion src/babel.js
Original file line number Diff line number Diff line change
Expand Up @@ -100,7 +100,9 @@ export default function ({types: t}) {
const styles = findStyles(path.node.children)

if (styles.length === 0) {
state.hasJSXStyle = false
if (state.file.hasJSXStyle) {
state.hasJSXStyle = false
}
return
}

Expand Down
27 changes: 27 additions & 0 deletions test/fixtures/multiple-jsx.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
const Test = () => <span>test</span>

const Test2 = () => (
<div>
<span>test</span>
<style jsx>{`
span {
color: red;
}
`}</style>
</div>
)

export default class {
render () {
return (
<div>
<p>test</p>
<style jsx>{`
p {
color: red;
}
`}</style>
</div>
)
}
}
16 changes: 16 additions & 0 deletions test/fixtures/multiple-jsx.out.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
import _JSXStyle from "styled-jsx/style";
const Test = () => <span>test</span>;

const Test2 = () => <div data-jsx={1535297024}>
<span data-jsx={1535297024}>test</span>
<_JSXStyle styleId={1535297024} css={"span[data-jsx=\"1535297024\"] {color: red;}"} />
</div>;

export default class {
render() {
return <div data-jsx={1891769468}>
<p data-jsx={1891769468}>test</p>
<_JSXStyle styleId={1891769468} css={"p[data-jsx=\"1891769468\"] {color: red;}"} />
</div>;
}
}
6 changes: 6 additions & 0 deletions test/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 multiple jsx blocks', async t => {
const {code} = await transform('./fixtures/multiple-jsx.js')
const out = await read('./fixtures/multiple-jsx.out.js')
t.is(code, out.trim())
})

0 comments on commit c365806

Please sign in to comment.