2021-09-15 09:24:31 +02:00
|
|
|
import _JSXStyle from "styled-jsx/style";
|
|
|
|
const darken = (c)=>c
|
|
|
|
;
|
2022-03-31 00:13:40 +02:00
|
|
|
const color = 'red';
|
|
|
|
const otherColor = 'green';
|
|
|
|
const mediumScreen = '680px';
|
|
|
|
const animationDuration = '200ms';
|
|
|
|
const animationName = 'my-cool-animation';
|
2021-09-15 09:24:31 +02:00
|
|
|
const obj = {
|
2022-03-31 00:13:40 +02:00
|
|
|
display: 'block'
|
2021-09-15 09:24:31 +02:00
|
|
|
};
|
2022-03-31 00:13:40 +02:00
|
|
|
export default (({ display })=><div className={"jsx-ee922fe7eac00c5e " + _JSXStyle.dynamic([
|
2021-09-15 09:24:31 +02:00
|
|
|
[
|
2022-03-31 00:13:40 +02:00
|
|
|
"374046f7d83960f0",
|
2021-09-21 16:14:38 +02:00
|
|
|
[
|
2022-03-31 00:13:40 +02:00
|
|
|
display ? 'block' : 'none'
|
2021-09-21 16:14:38 +02:00
|
|
|
]
|
|
|
|
],
|
2021-09-15 09:24:31 +02:00
|
|
|
[
|
2022-04-11 11:59:16 +02:00
|
|
|
"f297f0e8b24d55b4",
|
2021-09-21 16:14:38 +02:00
|
|
|
[
|
|
|
|
darken(color) + 2
|
|
|
|
]
|
|
|
|
],
|
2021-09-15 09:24:31 +02:00
|
|
|
[
|
2022-03-31 00:13:40 +02:00
|
|
|
"f03bb8922a3e69b1",
|
2021-09-21 16:14:38 +02:00
|
|
|
[
|
|
|
|
darken(color)
|
|
|
|
]
|
2021-09-15 09:24:31 +02:00
|
|
|
]
|
|
|
|
])}>
|
2021-10-17 09:50:01 +02:00
|
|
|
|
2022-03-31 00:13:40 +02:00
|
|
|
<p className={"jsx-ee922fe7eac00c5e " + _JSXStyle.dynamic([
|
2021-09-15 09:24:31 +02:00
|
|
|
[
|
2022-03-31 00:13:40 +02:00
|
|
|
"374046f7d83960f0",
|
2021-09-21 16:14:38 +02:00
|
|
|
[
|
2022-03-31 00:13:40 +02:00
|
|
|
display ? 'block' : 'none'
|
2021-09-21 16:14:38 +02:00
|
|
|
]
|
|
|
|
],
|
2021-09-15 09:24:31 +02:00
|
|
|
[
|
2022-04-11 11:59:16 +02:00
|
|
|
"f297f0e8b24d55b4",
|
2021-09-21 16:14:38 +02:00
|
|
|
[
|
|
|
|
darken(color) + 2
|
|
|
|
]
|
|
|
|
],
|
2021-09-15 09:24:31 +02:00
|
|
|
[
|
2022-03-31 00:13:40 +02:00
|
|
|
"f03bb8922a3e69b1",
|
2021-09-21 16:14:38 +02:00
|
|
|
[
|
|
|
|
darken(color)
|
|
|
|
]
|
2021-09-15 09:24:31 +02:00
|
|
|
]
|
|
|
|
])}>test</p>
|
2021-10-17 09:50:01 +02:00
|
|
|
|
2022-03-31 00:13:40 +02:00
|
|
|
<_JSXStyle id={"a8107430c6c528d0"}>{`p.${color}.jsx-ee922fe7eac00c5e{color:${otherColor};display:${obj.display}}`}</_JSXStyle>
|
2021-10-17 09:50:01 +02:00
|
|
|
|
2022-03-31 00:13:40 +02:00
|
|
|
<_JSXStyle id={"94239b6d6b42c9b5"}>{"p.jsx-ee922fe7eac00c5e{color:red}"}</_JSXStyle>
|
2021-10-17 09:50:01 +02:00
|
|
|
|
2022-03-31 00:13:40 +02:00
|
|
|
<_JSXStyle id={"f0a3b803e45f3568"}>{`body{background:${color}}`}</_JSXStyle>
|
2021-10-17 09:50:01 +02:00
|
|
|
|
2022-03-31 00:13:40 +02:00
|
|
|
<_JSXStyle id={"f0a3b803e45f3568"}>{`body{background:${color}}`}</_JSXStyle>
|
2021-10-17 09:50:01 +02:00
|
|
|
|
2021-09-15 09:24:31 +02:00
|
|
|
// TODO: the next two should have the same hash
|
2021-10-17 09:50:01 +02:00
|
|
|
|
2022-03-31 00:13:40 +02:00
|
|
|
<_JSXStyle id={"accb2339a5faf0f2"}>{`p.jsx-ee922fe7eac00c5e{color:${color}}`}</_JSXStyle>
|
2021-10-17 09:50:01 +02:00
|
|
|
|
2022-03-31 00:13:40 +02:00
|
|
|
<_JSXStyle id={"accb2339a5faf0f2"}>{`p.jsx-ee922fe7eac00c5e{color:${color}}`}</_JSXStyle>
|
2021-10-17 09:50:01 +02:00
|
|
|
|
2022-03-31 00:13:40 +02:00
|
|
|
<_JSXStyle id={"f03bb8922a3e69b1"} dynamic={[
|
2021-09-15 09:24:31 +02:00
|
|
|
darken(color)
|
2021-12-08 18:54:21 +01:00
|
|
|
]}>{`p.__jsx-style-dynamic-selector{color:${darken(color)}}`}</_JSXStyle>
|
2021-10-17 09:50:01 +02:00
|
|
|
|
2022-04-11 11:59:16 +02:00
|
|
|
<_JSXStyle id={"f297f0e8b24d55b4"} dynamic={[
|
2021-09-15 09:24:31 +02:00
|
|
|
darken(color) + 2
|
2021-12-08 18:54:21 +01:00
|
|
|
]}>{`p.__jsx-style-dynamic-selector{color:${darken(color) + 2}}`}</_JSXStyle>
|
2021-10-17 09:50:01 +02:00
|
|
|
|
2022-03-31 00:13:40 +02:00
|
|
|
<_JSXStyle id={"d7df5b0be4ac2e3b"}>{`@media(min-width:${mediumScreen}){p.jsx-ee922fe7eac00c5e{color:green}p.jsx-ee922fe7eac00c5e{color:${`red`}}}p.jsx-ee922fe7eac00c5e{color:red}`}</_JSXStyle>
|
2021-10-17 09:50:01 +02:00
|
|
|
|
2022-03-31 00:13:40 +02:00
|
|
|
<_JSXStyle id={"ff76c479bb5bf1a9"}>{`p.jsx-ee922fe7eac00c5e{-webkit-animation-duration:${animationDuration};-moz-animation-duration:${animationDuration};-o-animation-duration:${animationDuration};animation-duration:${animationDuration}}`}</_JSXStyle>
|
2021-10-17 09:50:01 +02:00
|
|
|
|
2022-03-31 00:13:40 +02:00
|
|
|
<_JSXStyle id={"f4ba3ad133457656"}>{`p.jsx-ee922fe7eac00c5e{-webkit-animation:${animationDuration} forwards ${animationName};-moz-animation:${animationDuration} forwards ${animationName};-o-animation:${animationDuration} forwards ${animationName};animation:${animationDuration} forwards ${animationName}}div.jsx-ee922fe7eac00c5e{background:${color}}`}</_JSXStyle>
|
2021-10-17 09:50:01 +02:00
|
|
|
|
2021-09-15 09:24:31 +02:00
|
|
|
|
2021-10-17 09:50:01 +02:00
|
|
|
|
2022-03-31 00:13:40 +02:00
|
|
|
<_JSXStyle id={"374046f7d83960f0"} dynamic={[
|
|
|
|
display ? 'block' : 'none'
|
|
|
|
]}>{`span.__jsx-style-dynamic-selector{display:${display ? 'block' : 'none'}}`}</_JSXStyle>
|
2021-10-17 09:50:01 +02:00
|
|
|
|
2021-09-15 09:24:31 +02:00
|
|
|
// TODO: causes bad syntax
|
2021-10-17 09:50:01 +02:00
|
|
|
|
2021-09-15 09:24:31 +02:00
|
|
|
{}
|
2021-10-17 09:50:01 +02:00
|
|
|
|
2021-09-15 09:24:31 +02:00
|
|
|
</div>
|
2021-10-17 09:50:01 +02:00
|
|
|
);
|