packages/fela-dom/src/dom/__tests__/__snapshots__/render-test.js.snap
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`render (development) should correctly sort rules 1`] = `
"<html>
<head>
<style data-fela-type=\"RULE\" type=\"text/css\"></style>
</head>
<body></body>
</html>"
`;
exports[`render (development) should create style nodes and render CSS rules 1`] = `
"<html>
<head>
<style data-fela-type=\"FONT\" type=\"text/css\">
@font-face {
font-weight: 300;
src: url('../Lato.ttf') format('truetype');
font-family: \"Lato\"
}
</style>
<style data-fela-type=\"KEYFRAME\" type=\"text/css\">
@-webkit-keyframes k1 {
0% {
color: yellow
}
100% {
color: orange
}
}
@-moz-keyframes k1 {
0% {
color: yellow
}
100% {
color: orange
}
}
@keyframes k1 {
0% {
color: yellow
}
100% {
color: orange
}
}
</style>
<style data-fela-type=\"RULE\" type=\"text/css\"></style>
</head>
<body></body>
</html>"
`;
exports[`render (development) should not overwrite rehydrated styles 1`] = `
"<html>
<head>
<style type=\"text/css\" data-fela-rehydration=\"5\" data-fela-type=\"RULE\">
.b {
color: yellow
}
.c:hover {
color: red
}
</style>
<style type=\"text/css\" data-fela-rehydration=\"5\" data-fela-type=\"RULE\" data-fela-support=\"true\">
@supports (display:flex) {
.e {
color: green
}
}
</style>
<style type=\"text/css\" data-fela-rehydration=\"5\" data-fela-type=\"RULE\" media=\"(max-width: 800px)\">
.d {
color: blue
}
</style>
</head>
<body></body>
</html>"
`;
exports[`render (development) should not render multiple times 1`] = `
"<html>
<head>
<style data-fela-type=\"RULE\" type=\"text/css\"></style>
</head>
<body></body>
</html>"
`;
exports[`render (production) should correctly sort rules 1`] = `
[
{
"_media": "",
"_support": false,
"_type": "RULE",
"style": {
"0_.a": {
"color": "blue",
},
"1_.e": {
"color": "red",
},
"2_.c:hover": {
"color": "red",
},
"3_.f:hover": {
"color": "blue",
},
"4_.b:focus-within": {
"color": "black",
},
"5_.d:active": {
"color": "yellow",
},
},
},
]
`;
exports[`render (production) should create style nodes and render CSS rules 1`] = `
[
{
"_media": "",
"_support": false,
"_type": "RULE",
"style": {
"0_.a": {
"background-color": "red",
},
"1_.b": {
"color": "blue",
},
},
},
{
"_type": "KEYFRAME",
"style": "@-webkit-keyframes k1{0%{color:yellow}100%{color:orange}}@-moz-keyframes k1{0%{color:yellow}100%{color:orange}}@keyframes k1{0%{color:yellow}100%{color:orange}}",
},
{
"_type": "FONT",
"style": "@font-face{font-weight:300;src:url('../Lato.ttf') format('truetype');font-family:\"Lato\"}",
},
]
`;
exports[`render (production) should not overwrite rehydrated styles 1`] = `
[
{
"_media": "",
"_support": false,
"_type": "RULE",
"style": {
"0_.b": {
"color": "yellow",
},
"1_.f": {
"background-color": "red",
},
"2_.g": {
"color": "blue",
},
"3_.c:hover": {
"color": "red",
},
},
},
{
"_media": "",
"_support": "true",
"_type": "RULE",
"style": {
"(display:flex)": {
"0_.e": {
"color": "green",
},
},
"(display:grid)": {
"0_.h": {
"color": "black",
},
},
},
},
{
"_media": "(max-width: 800px)",
"_support": false,
"_type": "RULE",
"style": {
"0_.d": {
"color": "blue",
},
},
},
{
"_media": "",
"_support": "true",
"_type": "RULE",
"style": {
"(display:flex)": {
"0_.e": {
"color": "green",
},
},
"(display:grid)": {
"0_.h": {
"color": "black",
},
},
},
},
]
`;
exports[`render (production) should not render multiple times 1`] = `
[
{
"_media": "",
"_support": false,
"_type": "RULE",
"style": {
"0_.a": {
"background-color": "red",
},
"1_.b": {
"color": "blue",
},
},
},
]
`;