167 lines
2.8 KiB
JavaScript
167 lines
2.8 KiB
JavaScript
|
import styles from './styles'
|
||
|
|
||
|
const styles2 = require('./styles2')
|
||
|
|
||
|
// external only
|
||
|
export const Test1 = () => (
|
||
|
<div>
|
||
|
<p>external only</p>
|
||
|
<style jsx>{styles}</style>
|
||
|
<style jsx>{styles2}</style>
|
||
|
</div>
|
||
|
)
|
||
|
|
||
|
// external and static
|
||
|
export const Test2 = () => (
|
||
|
<div>
|
||
|
<p>external and static</p>
|
||
|
<style jsx>{`
|
||
|
p {
|
||
|
color: red;
|
||
|
}
|
||
|
`}</style>
|
||
|
<style jsx>{styles}</style>
|
||
|
</div>
|
||
|
)
|
||
|
|
||
|
// external and dynamic
|
||
|
export const Test3 = ({ color }) => (
|
||
|
<div>
|
||
|
<p>external and dynamic</p>
|
||
|
<style jsx>{`
|
||
|
p {
|
||
|
color: ${color};
|
||
|
}
|
||
|
`}</style>
|
||
|
<style jsx>{styles}</style>
|
||
|
</div>
|
||
|
)
|
||
|
|
||
|
// external, static and dynamic
|
||
|
export const Test4 = ({ color }) => (
|
||
|
<div>
|
||
|
<p>external, static and dynamic</p>
|
||
|
<style jsx>{`
|
||
|
p {
|
||
|
display: inline-block;
|
||
|
}
|
||
|
`}</style>
|
||
|
<style jsx>{`
|
||
|
p {
|
||
|
color: ${color};
|
||
|
}
|
||
|
`}</style>
|
||
|
<style jsx>{styles}</style>
|
||
|
</div>
|
||
|
)
|
||
|
|
||
|
// static only
|
||
|
export const Test5 = () => (
|
||
|
<div>
|
||
|
<p>static only</p>
|
||
|
<style jsx>{`
|
||
|
p {
|
||
|
display: inline-block;
|
||
|
}
|
||
|
`}</style>
|
||
|
<style jsx>{`
|
||
|
p {
|
||
|
color: red;
|
||
|
}
|
||
|
`}</style>
|
||
|
</div>
|
||
|
)
|
||
|
|
||
|
// static and dynamic
|
||
|
export const Test6 = ({ color }) => (
|
||
|
<div>
|
||
|
<p>static and dynamic</p>
|
||
|
<style jsx>{`
|
||
|
p {
|
||
|
display: inline-block;
|
||
|
}
|
||
|
`}</style>
|
||
|
<style jsx>{`
|
||
|
p {
|
||
|
color: ${color};
|
||
|
}
|
||
|
`}</style>
|
||
|
</div>
|
||
|
)
|
||
|
|
||
|
// dynamic only
|
||
|
export const Test7 = ({ color }) => (
|
||
|
<div>
|
||
|
<p>dynamic only</p>
|
||
|
<style jsx>{`
|
||
|
p {
|
||
|
color: ${color};
|
||
|
}
|
||
|
`}</style>
|
||
|
</div>
|
||
|
)
|
||
|
|
||
|
// dynamic with scoped compound variable
|
||
|
export const Test8 = ({ color }) => {
|
||
|
if (color) {
|
||
|
const innerProps = { color }
|
||
|
|
||
|
return (
|
||
|
<div>
|
||
|
<p>dynamic with scoped compound variable</p>
|
||
|
<style jsx>{`
|
||
|
p {
|
||
|
color: ${innerProps.color};
|
||
|
}
|
||
|
`}</style>
|
||
|
</div>
|
||
|
)
|
||
|
}
|
||
|
}
|
||
|
|
||
|
// dynamic with compound variable
|
||
|
export const Test9 = ({ color }) => {
|
||
|
const innerProps = { color }
|
||
|
|
||
|
return (
|
||
|
<div>
|
||
|
<p>dynamic with compound variable</p>
|
||
|
<style jsx>{`
|
||
|
p {
|
||
|
color: ${innerProps.color};
|
||
|
}
|
||
|
`}</style>
|
||
|
</div>
|
||
|
)
|
||
|
}
|
||
|
|
||
|
const foo = 'red'
|
||
|
|
||
|
// dynamic with constant variable
|
||
|
export const Test10 = () => (
|
||
|
<div>
|
||
|
<p>dynamic with constant variable</p>
|
||
|
<style jsx>{`
|
||
|
p {
|
||
|
color: ${foo};
|
||
|
}
|
||
|
`}</style>
|
||
|
</div>
|
||
|
)
|
||
|
|
||
|
// dynamic with complex scope
|
||
|
export const Test11 = ({ color }) => {
|
||
|
const items = Array.from({ length: 5 }).map((item, i) => (
|
||
|
<li className="item" key={i}>
|
||
|
<style jsx>{`
|
||
|
.item {
|
||
|
color: ${color};
|
||
|
}
|
||
|
`}</style>
|
||
|
Item #{i + 1}
|
||
|
</li>
|
||
|
))
|
||
|
|
||
|
return <ul className="items">{items}</ul>
|
||
|
}
|