-
Notifications
You must be signed in to change notification settings - Fork 263
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add support for expressions within template literals (#80)
* Add support for expressions within template literals * Add support for expressions in selectors and media queries * Replace longer expressions first to avoid substring replacements * Destructure param in findStyles * Throw upon usage of vars from the closure * Use babylon and babel-traverse instead of babel-core * findStyles should return a path * Refactor benchmark and add expressions * Fix typo
- Loading branch information
Showing
12 changed files
with
327 additions
and
40 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,20 +1,30 @@ | ||
import {readFileSync} from 'fs' | ||
import {resolve} from 'path' | ||
import Benchmark from 'benchmark' | ||
import {Suite} from 'benchmark' | ||
import {transform as babel} from 'babel-core' | ||
|
||
import plugin from '../src/babel' | ||
|
||
const read = path => readFileSync(resolve(__dirname, path), 'utf8') | ||
const fixture = read('./fixtures/babel.js') | ||
const makeTransform = fixturePath => { | ||
const fixture = readFileSync( | ||
resolve(__dirname, fixturePath), | ||
'utf8' | ||
) | ||
|
||
module.exports = new Benchmark({ | ||
name: 'Babel transform', | ||
minSamples: 500, | ||
fn: () => { | ||
babel(fixture, { | ||
babelrc: false, | ||
plugins: [plugin] | ||
}) | ||
} | ||
}) | ||
return () => babel(fixture, { | ||
babelrc: false, | ||
plugins: [plugin] | ||
}) | ||
} | ||
|
||
const benchs = { | ||
basic: makeTransform('./fixtures/basic.js'), | ||
withExpressions: makeTransform('./fixtures/with-expressions.js') | ||
} | ||
|
||
const suite = new Suite('styled-jsx Babel transform') | ||
|
||
module.exports = | ||
suite | ||
.add('basic', benchs.basic) | ||
.add('with expressions', benchs.withExpressions) |
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,41 @@ | ||
const c = 'red' | ||
const color = i => i | ||
|
||
export const Test1 = () => ( | ||
<div> | ||
<span>test</span> | ||
<span>test</span> | ||
<p></p><p></p><p></p><p></p><p></p><p></p><p></p> | ||
<p><span></span></p><p><span></span></p><p><span></span></p> | ||
<p></p><p></p><p></p><p></p><p></p><p></p><p></p> | ||
<p><span></span></p><p><span></span></p><p><span></span></p> | ||
<p></p><p></p><p></p><p></p><p></p><p></p><p></p> | ||
<p><span></span></p><p><span></span></p><p><span></span></p> | ||
<Component /> | ||
<style jsx>{` | ||
span { color: red; } | ||
p { color: ${c}; } | ||
`}</style> | ||
</div> | ||
) | ||
|
||
export const Test2 = () => <span>test</span> | ||
|
||
export default class { | ||
render() { | ||
return ( | ||
<div> | ||
<p>test</p> | ||
<style jsx>{` | ||
p { color: ${color(c)}; } | ||
`}</style> | ||
<style jsx>{` | ||
p { color: red; } | ||
`}</style> | ||
<style jsx>{` | ||
p { color: red; } | ||
`}</style> | ||
</div> | ||
) | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,22 @@ | ||
const color = 'red' | ||
const otherColor = 'green' | ||
const mediumScreen = '680px' | ||
|
||
export default () => ( | ||
<div> | ||
<p>test</p> | ||
<style jsx>{`p.${color} { color: ${otherColor} }`}</style> | ||
<style jsx>{'p { color: red }'}</style> | ||
<style jsx global>{`body { background: ${color} }`}</style> | ||
<style jsx>{`p { color: ${color} }`}</style> | ||
<style jsx>{`p { color: ${darken(color)} }`}</style> | ||
<style jsx>{`p { color: ${darken(color) + 2} }`}</style> | ||
<style jsx>{` | ||
@media (min-width: ${mediumScreen}) { | ||
p { color: green } | ||
p { color ${`red`}} | ||
} | ||
p { color: red }` | ||
}</style> | ||
</div> | ||
) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,15 @@ | ||
import _JSXStyle from 'styled-jsx/style'; | ||
const color = 'red'; | ||
const otherColor = 'green'; | ||
const mediumScreen = '680px'; | ||
|
||
export default (() => <div data-jsx={2520901095}> | ||
<p data-jsx={2520901095}>test</p> | ||
<_JSXStyle styleId={414042974} css={`p.${ color }[data-jsx="2520901095"] {color: ${ otherColor } }`} /> | ||
<_JSXStyle styleId={188072295} css={"p[data-jsx=\"2520901095\"] {color: red }"} /> | ||
<_JSXStyle styleId={806016056} css={`body { background: ${ color } }`} /> | ||
<_JSXStyle styleId={924167211} css={`p[data-jsx="2520901095"] {color: ${ color } }`} /> | ||
<_JSXStyle styleId={3469794077} css={`p[data-jsx="2520901095"] {color: ${ darken(color) } }`} /> | ||
<_JSXStyle styleId={945380644} css={`p[data-jsx="2520901095"] {color: ${ darken(color) + 2 } }`} /> | ||
<_JSXStyle styleId={4106311606} css={`@media (min-width: ${ mediumScreen }) {p[data-jsx="2520901095"] {color: green }p[data-jsx="2520901095"] {color ${ `red` }}}p[data-jsx="2520901095"] {color: red }`} /> | ||
</div>); |
Oops, something went wrong.