Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

CSS markup mismatch between server and client, provokes hydration error #2326

Closed
HorusGoul opened this issue Jul 2, 2022 · 2 comments
Closed

CSS markup mismatch between server and client, provokes hydration error #2326

HorusGoul opened this issue Jul 2, 2022 · 2 comments

Comments

@HorusGoul
Copy link

HorusGoul commented Jul 2, 2022 •
edited

The problem

After upgrading to React Native Web 0.18, the markup CSS from the Server and the markup CSS from the Client have different spacing rules, and because of that, it triggers a hydration error when using React Native Web with Remix.

Server Style Element Markup 
<style id="react-native-stylesheet">[stylesheet-group="0"]{}
body{margin:0;}
button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}
html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0);}
input::-webkit-search-cancel-button,input::-webkit-search-decoration,input::-webkit-search-results-button,input::-webkit-search-results-decoration{display:none;}
[stylesheet-group="1"]{}
.css-11aywtz{-moz-appearance:textfield;-webkit-appearance:none;background-color:rgba(0,0,0,0.00);border-bottom-left-radius:0px;border-bottom-right-radius:0px;border-top-left-radius:0px;border-top-right-radius:0px;border:0 solid black;box-sizing:border-box;font:14px -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;margin:0px;padding:0px;resize:none;}
.css-175oi2r{align-items:stretch;background-color:rgba(0,0,0,0.00);border:0 solid black;box-sizing:border-box;display:flex;flex-basis:auto;flex-direction:column;flex-shrink:0;list-style:none;margin:0px;min-height:0px;min-width:0px;padding:0px;position:relative;text-decoration:none;z-index:0;}
.css-1qaijid{background-color:rgba(0,0,0,0.00);border:0 solid black;box-sizing:border-box;color:inherit;display:inline;font:inherit;list-style:none;margin:0px;padding:0px;text-align:inherit;text-decoration:none;white-space:inherit;word-wrap:break-word;}
.css-1rynq56{background-color:rgba(0,0,0,0.00);border:0 solid black;box-sizing:border-box;color:rgba(0,0,0,1.00);display:inline;font:14px -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;list-style:none;margin:0px;padding:0px;text-align:inherit;text-decoration:none;white-space:pre-wrap;word-wrap:break-word;}
.css-9pa8cd{bottom:0px;height:100%;left:0px;opacity:0;position:absolute;right:0px;top:0px;width:100%;z-index:-1;}
[stylesheet-group="2"]{}
.r-13awgt0{flex:1;}
.r-1awa8pu{border-bottom-color:rgba(101,119,134,1.00);border-left-color:rgba(101,119,134,1.00);border-right-color:rgba(101,119,134,1.00);border-top-color:rgba(101,119,134,1.00);}
.r-1d4xg89{border-bottom-color:rgba(170,184,194,1.00);border-left-color:rgba(170,184,194,1.00);border-right-color:rgba(170,184,194,1.00);border-top-color:rgba(170,184,194,1.00);}
.r-1j16mh1{border-bottom-left-radius:100%;border-bottom-right-radius:100%;border-top-left-radius:100%;border-top-right-radius:100%;}
.r-1jkafct{border-bottom-left-radius:2px;border-bottom-right-radius:2px;border-top-left-radius:2px;border-top-right-radius:2px;}
.r-1jyn79y{border-bottom-color:rgba(0,150,136,1.00);border-left-color:rgba(0,150,136,1.00);border-right-color:rgba(0,150,136,1.00);border-top-color:rgba(0,150,136,1.00);}
.r-1phboty{border-bottom-style:solid;border-left-style:solid;border-right-style:solid;border-top-style:solid;}
.r-1udh08x{overflow-x:hidden;overflow-y:hidden;}
.r-4a18lf{border-bottom-color:rgba(255,0,0,1.00);border-left-color:rgba(255,0,0,1.00);border-right-color:rgba(255,0,0,1.00);border-top-color:rgba(255,0,0,1.00);}
.r-60ke3l{border-bottom-color:rgba(0,128,0,1.00);border-left-color:rgba(0,128,0,1.00);border-right-color:rgba(0,128,0,1.00);border-top-color:rgba(0,128,0,1.00);}
.r-9x6qib{border-bottom-color:rgba(204,214,221,1.00);border-left-color:rgba(204,214,221,1.00);border-right-color:rgba(204,214,221,1.00);border-top-color:rgba(204,214,221,1.00);}
.r-crgep1{margin:0px;}
.r-d045u9{border-bottom-width:2px;border-left-width:2px;border-right-width:2px;border-top-width:2px;}
.r-edyy15{padding:8px;}
.r-fx7oqy{border-bottom-color:rgba(0,0,255,1.00);border-left-color:rgba(0,0,255,1.00);border-right-color:rgba(0,0,255,1.00);border-top-color:rgba(0,0,255,1.00);}
.r-krxsd3{display:-webkit-box;}
.r-rs99b7{border-bottom-width:1px;border-left-width:1px;border-right-width:1px;border-top-width:1px;}
.r-t60dpp{padding:0px;}
.r-xoduu5{display:inline-flex;}
.r-ywje51{margin:auto;}
[stylesheet-group="2.2"]{}
.r-105ug2t{pointer-events:auto!important;}
.r-10ptun7{height:16px;}
.r-10xqauy{padding-top:env(safe-area-inset-top);}
.r-11j9u27{visibility:hidden;}
.r-11mpjr4{background-color:rgba(223,223,223,1.00);}
.r-11udlyb{background-color:rgba(0,150,136,1.00);}
.r-11yh6sk{overflow-x:hidden;}
.r-127358a{animation-name:r-9p3sdl;}
.r-12vffkv>*{pointer-events:auto;}
.r-12vffkv{pointer-events:none!important;}
.r-13qz1uu{width:100%;}
.r-13tjlyg{transition-duration:0.1s;}
.r-14lw9ot{background-color:rgba(255,255,255,1.00);}
.r-14sbq61{background-color:rgba(33,150,243,1.00);}
.r-150rngu{-webkit-overflow-scrolling:touch;}
.r-16y2uox{flex-grow:1;}
.r-1777fci{justify-content:center;}
.r-17bb2tj{animation-duration:0.75s;}
.r-17leim2{background-repeat:repeat;}
.r-18u37iz{flex-direction:row;}
.r-19wmn03{width:20px;}
.r-19z077z{touch-action:none;}
.r-1abnn5w{animation-play-state:paused;}
.r-1acpoxo{width:36px;}
.r-1awozwy{align-items:center;}
.r-1ay1djp{animation-duration:1s;}
.r-1c6unfx{forced-color-adjust:none;}
.r-1d2f490{left:0px;}
.r-1d5kdc7{flex-direction:column-reverse;}
.r-1dernwh{height:70%;}
.r-1ei5mc7{cursor:inherit;}
.r-1euycsn{flex-direction:row-reverse;}
.r-1ewcgjf{box-shadow:0px 1px 3px rgba(0,0,0,0.5);}
.r-1fe0xdi{left:0%;}
.r-1ff274t{text-align:right;}
.r-1i6wzkk{-moz-transition-property:opacity;-webkit-transition-property:opacity;transition-property:opacity;}
.r-1i93rbr{right:0%;}
.r-1ielgck{animation-duration:300ms;}
.r-1iln25a{word-wrap:normal;}
.r-1janqcz{width:16px;}
.r-1knl56f{animation-name:r-1hunrpy;}
.r-1ldzwu0{animation-timing-function:linear;}
.r-1loqt21{cursor:pointer;}
.r-1mlwlqe{flex-basis:auto;}
.r-1mrlafo{background-position:0;}
.r-1muvv40{animation-iteration-count:infinite;}
.r-1niwhzg{background-color:rgba(0,0,0,0.00);}
.r-1ny4l3l{outline-style:none;}
.r-1ocf4r9{scroll-snap-type:y mandatory;}
.r-1otgn73{touch-action:manipulation;}
.r-1p0dtai{bottom:0px;}
.r-1pi2tsx{height:100%;}
.r-1qc3rpd{transform:scaleY(-1);}
.r-1qd0xha{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;}
.r-1qdbj55{animation-name:r-ndfo3d;}
.r-1r8g8re{height:36px;}
.r-1rnoaur{overflow-y:auto;}
.r-1ro7rbe{right:100%;}
.r-1sncvnh{transform:translateZ(0px);}
.r-1sxrcry{background-size:auto;}
.r-1ub1aon{transform:translateY(100%);}
.r-1udbk01{text-overflow:ellipsis;}
.r-1uypc71{animation-timing-function:ease-in;}
.r-1wbh5a2{flex-shrink:1;}
.r-1wyyakw{z-index:-1;}
.r-1xcajam{position:fixed;}
.r-1xnzce8{-moz-user-select:-webkit-text;-moz-user-select:text;-webkit-user-select:-webkit-text;-webkit-user-select:text;user-select:-webkit-text;user-select:text;}
.r-2eszeu::-webkit-scrollbar{display:none}
.r-2eszeu{scrollbar-width:none;}
.r-30o5oe{-moz-appearance:none;-ms-appearance:none;-webkit-appearance:none;appearance:none;}
.r-3s2u2q{white-space:nowrap;}
.r-417010{z-index:0;}
.r-4gszlv{background-size:cover;}
.r-4v7adb{height:5px;}
.r-633pao{pointer-events:none!important;}
.r-6dt33c{opacity:1;}
.r-6taxm2:-ms-input-placeholder{color:var(--placeholderTextColor);opacity:1;}
.r-6taxm2::-moz-placeholder{color:var(--placeholderTextColor);opacity:1;}
.r-6taxm2::-webkit-input-placeholder{color:var(--placeholderTextColor);opacity:1;}
.r-6taxm2::placeholder{color:var(--placeholderTextColor);opacity:1;}
.r-7b7h2f{left:100%;}
.r-7cikom{font-size:inherit;}
.r-7q8q6z{cursor:default;}
.r-8akbws{-webkit-box-orient:vertical;}
.r-97e31f{padding-bottom:env(safe-area-inset-bottom);}
.r-9ji8r7{transform:translateY(0%);}
.r-ah5dr5>*{pointer-events:none;}
.r-ah5dr5{pointer-events:auto!important;}
.r-buy8e9{overflow-y:hidden;}
.r-bv2aro{padding-left:env(safe-area-inset-left);}
.r-c68hjy{color:rgba(161,161,161,1.00);}
.r-cpa5s6{scroll-snap-align:start;}
.r-dkge59{background-color:rgba(170,184,194,1.00);}
.r-dnmrzs{max-width:100%;}
.r-eafdt9{transition-duration:0.15s;}
.r-ehq7j7{background-size:contain;}
.r-eqz5dr{flex-direction:column;}
.r-fdjqy7{text-align:left;}
.r-g3mlsw{animation-name:r-t2lo5v;}
.r-gtdqiz{position:-webkit-sticky;position:sticky;}
.r-h2q2x{transform:scaleX(-1);}
.r-hxflta{padding-right:env(safe-area-inset-right);}
.r-ipm5af{top:0px;}
.r-j300sb{animation-name:r-1rx4pb;}
.r-jwli3a{color:rgba(255,255,255,1.00);}
.r-k200y{align-self:flex-start;}
.r-lltvgl{overflow-x:auto;}
.r-lrvibr{-moz-user-select:none;-webkit-user-select:none;user-select:none;}
.r-majxgm{font-weight:500;}
.r-mfh4gg{scroll-snap-type:x mandatory;}
.r-mhe3cw{z-index:10;}
.r-nvplwv{animation-timing-function:ease-out;}
.r-orgf3d{opacity:0;}
.r-q4m81j{text-align:center;}
.r-rs94m5{background-image:url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgdmVyc2lvbj0iMS4xIgogICB2aWV3Qm94PSIwIDAgMSAxIgogICBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWluWU1pbiBtZWV0Ij4KICA8cGF0aAogICAgIGQ9Ik0gMC4wNDAzODA1OSwwLjYyNjc3NjcgMC4xNDY0NDY2MSwwLjUyMDcxMDY4IDAuNDI5Mjg5MzIsMC44MDM1NTMzOSAwLjMyMzIyMzMsMC45MDk2MTk0MSB6IE0gMC4yMTcxNTcyOSwwLjgwMzU1MzM5IDAuODUzNTUzMzksMC4xNjcxNTcyOSAwLjk1OTYxOTQxLDAuMjczMjIzMyAwLjMyMzIyMzMsMC45MDk2MTk0MSB6IgogICAgIGlkPSJyZWN0Mzc4MCIKICAgICBzdHlsZT0iZmlsbDojZmZmZmZmO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTpub25lIiAvPgo8L3N2Zz4K");}
.r-sfbmgh{z-index:9999;}
.r-tsynxw{text-transform:uppercase;}
.r-u6sd8q{background-repeat:no-repeat;}
.r-u8s1d{position:absolute;}
.r-u92y06{background-color:rgba(255,165,0,1.00);}
.r-vvn4in{background-position:center;}
.r-x3cy2q{background-size:100% 100%;}
.r-xx3c9p{animation-name:r-imtty0;}
.r-z80fyv{height:20px;}
.r-zchlnj{right:0px;}
@-webkit-keyframes r-1hunrpy{0%{transform:translateY(100%);}100%{transform:translateY(0%);}}
@-webkit-keyframes r-1rx4pb{0%{transform:translateX(-100%);}100%{transform:translateX(400%);}}
@-webkit-keyframes r-9p3sdl{0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}}
@-webkit-keyframes r-imtty0{0%{opacity:0;}100%{opacity:1;}}
@-webkit-keyframes r-ndfo3d{0%{transform:translateY(0%);}100%{transform:translateY(100%);}}
@-webkit-keyframes r-t2lo5v{0%{opacity:1;}100%{opacity:0;}}
@keyframes r-1hunrpy{0%{transform:translateY(100%);}100%{transform:translateY(0%);}}
@keyframes r-1rx4pb{0%{transform:translateX(-100%);}100%{transform:translateX(400%);}}
@keyframes r-9p3sdl{0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}}
@keyframes r-imtty0{0%{opacity:0;}100%{opacity:1;}}
@keyframes r-ndfo3d{0%{transform:translateY(0%);}100%{transform:translateY(100%);}}
@keyframes r-t2lo5v{0%{opacity:1;}100%{opacity:0;}}</style>
Client Style Element Markup 
<style id="react-native-stylesheet">[stylesheet-group="0"] { }
body { margin: 0px; }
html { text-size-adjust: 100%; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
input::-webkit-search-cancel-button, input::-webkit-search-decoration, input::-webkit-search-results-button, input::-webkit-search-results-decoration { display: none; }
[stylesheet-group="1"] { }
.css-11aywtz { appearance: none; background-color: rgba(0, 0, 0, 0); border-radius: 0px; border: 0px solid black; box-sizing: border-box; font: 14px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; margin: 0px; padding: 0px; resize: none; }
.css-175oi2r { align-items: stretch; background-color: rgba(0, 0, 0, 0); border: 0px solid black; box-sizing: border-box; display: flex; flex-basis: auto; flex-direction: column; flex-shrink: 0; list-style: none; margin: 0px; min-height: 0px; min-width: 0px; padding: 0px; position: relative; text-decoration: none; z-index: 0; }
.css-1qaijid { background-color: rgba(0, 0, 0, 0); border: 0px solid black; box-sizing: border-box; color: inherit; display: inline; font: inherit; list-style: none; margin: 0px; padding: 0px; text-align: inherit; text-decoration: none; white-space: inherit; overflow-wrap: break-word; }
.css-1rynq56 { background-color: rgba(0, 0, 0, 0); border: 0px solid black; box-sizing: border-box; color: rgb(0, 0, 0); display: inline; font: 14px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; list-style: none; margin: 0px; padding: 0px; text-align: inherit; text-decoration: none; white-space: pre-wrap; overflow-wrap: break-word; }
.css-9pa8cd { inset: 0px; height: 100%; opacity: 0; position: absolute; width: 100%; z-index: -1; }
[stylesheet-group="2"] { }
.r-13awgt0 { flex: 1 1 0%; }
.r-1awa8pu { border-color: rgb(101, 119, 134); }
.r-1d4xg89 { border-color: rgb(170, 184, 194); }
.r-1j16mh1 { border-radius: 100%; }
.r-1jkafct { border-radius: 2px; }
.r-1jyn79y { border-color: rgb(0, 150, 136); }
.r-1phboty { border-style: solid; }
.r-1udh08x { overflow: hidden; }
.r-4a18lf { border-color: rgb(255, 0, 0); }
.r-60ke3l { border-color: rgb(0, 128, 0); }
.r-9x6qib { border-color: rgb(204, 214, 221); }
.r-crgep1 { margin: 0px; }
.r-d045u9 { border-width: 2px; }
.r-edyy15 { padding: 8px; }
.r-fx7oqy { border-color: rgb(0, 0, 255); }
.r-krxsd3 { display: -webkit-box; }
.r-rs99b7 { border-width: 1px; }
.r-t60dpp { padding: 0px; }
.r-xoduu5 { display: inline-flex; }
.r-ywje51 { margin: auto; }
[stylesheet-group="2.2"] { }
.r-105ug2t { pointer-events: auto !important; }
.r-10ptun7 { height: 16px; }
.r-10xqauy { padding-top: env(safe-area-inset-top); }
.r-11j9u27 { visibility: hidden; }
.r-11mpjr4 { background-color: rgb(223, 223, 223); }
.r-11udlyb { background-color: rgb(0, 150, 136); }
.r-11yh6sk { overflow-x: hidden; }
.r-127358a { animation-name: r-9p3sdl; }
.r-12vffkv > * { pointer-events: auto; }
.r-12vffkv { pointer-events: none !important; }
.r-12vffkv>*{pointer-events:auto;}
.r-13qz1uu { width: 100%; }
.r-13tjlyg { transition-duration: 0.1s; }
.r-14lw9ot { background-color: rgb(255, 255, 255); }
.r-14sbq61 { background-color: rgb(33, 150, 243); }
.r-150rngu { }
.r-16y2uox { flex-grow: 1; }
.r-1777fci { justify-content: center; }
.r-17bb2tj { animation-duration: 0.75s; }
.r-17leim2 { background-repeat: repeat; }
.r-18u37iz { flex-direction: row; }
.r-19wmn03 { width: 20px; }
.r-19z077z { touch-action: none; }
.r-1abnn5w { animation-play-state: paused; }
.r-1acpoxo { width: 36px; }
.r-1awozwy { align-items: center; }
.r-1ay1djp { animation-duration: 1s; }
.r-1c6unfx { forced-color-adjust: none; }
.r-1d2f490 { left: 0px; }
.r-1d5kdc7 { flex-direction: column-reverse; }
.r-1dernwh { height: 70%; }
.r-1ei5mc7 { cursor: inherit; }
.r-1euycsn { flex-direction: row-reverse; }
.r-1ewcgjf { box-shadow: rgba(0, 0, 0, 0.5) 0px 1px 3px; }
.r-1fe0xdi { left: 0%; }
.r-1ff274t { text-align: right; }
.r-1i6wzkk { transition-property: opacity; }
.r-1i93rbr { right: 0%; }
.r-1ielgck { animation-duration: 300ms; }
.r-1iln25a { overflow-wrap: normal; }
.r-1janqcz { width: 16px; }
.r-1knl56f { animation-name: r-1hunrpy; }
.r-1ldzwu0 { animation-timing-function: linear; }
.r-1loqt21 { cursor: pointer; }
.r-1mlwlqe { flex-basis: auto; }
.r-1mrlafo { background-position: 0px center; }
.r-1muvv40 { animation-iteration-count: infinite; }
.r-1niwhzg { background-color: rgba(0, 0, 0, 0); }
.r-1ny4l3l { outline-style: none; }
.r-1ocf4r9 { scroll-snap-type: y mandatory; }
.r-1otgn73 { touch-action: manipulation; }
.r-1p0dtai { bottom: 0px; }
.r-1pi2tsx { height: 100%; }
.r-1qc3rpd { transform: scaleY(-1); }
.r-1qd0xha { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
.r-1qdbj55 { animation-name: r-ndfo3d; }
.r-1r8g8re { height: 36px; }
.r-1rnoaur { overflow-y: auto; }
.r-1ro7rbe { right: 100%; }
.r-1sncvnh { transform: translateZ(0px); }
.r-1sxrcry { background-size: auto; }
.r-1ub1aon { transform: translateY(100%); }
.r-1udbk01 { text-overflow: ellipsis; }
.r-1uypc71 { animation-timing-function: ease-in; }
.r-1wbh5a2 { flex-shrink: 1; }
.r-1wyyakw { z-index: -1; }
.r-1xcajam { position: fixed; }
.r-1xnzce8 { user-select: text; }
.r-2eszeu { }
.r-2eszeu::-webkit-scrollbar { display: none; }
.r-30o5oe { appearance: none; }
.r-3s2u2q { white-space: nowrap; }
.r-417010 { z-index: 0; }
.r-4gszlv { background-size: cover; }
.r-4v7adb { height: 5px; }
.r-633pao { pointer-events: none !important; }
.r-6dt33c { opacity: 1; }
.r-6taxm2::-webkit-input-placeholder { color: var(--placeholderTextColor); opacity: 1; }
.r-6taxm2::placeholder { color: var(--placeholderTextColor); opacity: 1; }
.r-7b7h2f { left: 100%; }
.r-7cikom { font-size: inherit; }
.r-7q8q6z { cursor: default; }
.r-8akbws { -webkit-box-orient: vertical; }
.r-97e31f { padding-bottom: env(safe-area-inset-bottom); }
.r-9ji8r7 { transform: translateY(0%); }
.r-ah5dr5 > * { pointer-events: none; }
.r-ah5dr5 { pointer-events: auto !important; }
.r-ah5dr5>*{pointer-events:none;}
.r-buy8e9 { overflow-y: hidden; }
.r-bv2aro { padding-left: env(safe-area-inset-left); }
.r-c68hjy { color: rgb(161, 161, 161); }
.r-cpa5s6 { scroll-snap-align: start; }
.r-dkge59 { background-color: rgb(170, 184, 194); }
.r-dnmrzs { max-width: 100%; }
.r-eafdt9 { transition-duration: 0.15s; }
.r-ehq7j7 { background-size: contain; }
.r-eqz5dr { flex-direction: column; }
.r-fdjqy7 { text-align: left; }
.r-g3mlsw { animation-name: r-t2lo5v; }
.r-gtdqiz { position: sticky; }
.r-h2q2x { transform: scaleX(-1); }
.r-hxflta { padding-right: env(safe-area-inset-right); }
.r-ipm5af { top: 0px; }
.r-j300sb { animation-name: r-1rx4pb; }
.r-jwli3a { color: rgb(255, 255, 255); }
.r-k200y { align-self: flex-start; }
.r-lltvgl { overflow-x: auto; }
.r-lrvibr { user-select: none; }
.r-majxgm { font-weight: 500; }
.r-mfh4gg { scroll-snap-type: x mandatory; }
.r-mhe3cw { z-index: 10; }
.r-nvplwv { animation-timing-function: ease-out; }
.r-orgf3d { opacity: 0; }
.r-q4m81j { text-align: center; }
.r-rs94m5 { background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgdmVyc2lvbj0iMS4xIgogICB2aWV3Qm94PSIwIDAgMSAxIgogICBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWluWU1pbiBtZWV0Ij4KICA8cGF0aAogICAgIGQ9Ik0gMC4wNDAzODA1OSwwLjYyNjc3NjcgMC4xNDY0NDY2MSwwLjUyMDcxMDY4IDAuNDI5Mjg5MzIsMC44MDM1NTMzOSAwLjMyMzIyMzMsMC45MDk2MTk0MSB6IE0gMC4yMTcxNTcyOSwwLjgwMzU1MzM5IDAuODUzNTUzMzksMC4xNjcxNTcyOSAwLjk1OTYxOTQxLDAuMjczMjIzMyAwLjMyMzIyMzMsMC45MDk2MTk0MSB6IgogICAgIGlkPSJyZWN0Mzc4MCIKICAgICBzdHlsZT0iZmlsbDojZmZmZmZmO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTpub25lIiAvPgo8L3N2Zz4K"); }
.r-sfbmgh { z-index: 9999; }
.r-tsynxw { text-transform: uppercase; }
.r-u6sd8q { background-repeat: no-repeat; }
.r-u8s1d { position: absolute; }
.r-u92y06 { background-color: rgb(255, 165, 0); }
.r-vvn4in { background-position: center center; }
.r-x3cy2q { background-size: 100% 100%; }
.r-xx3c9p { animation-name: r-imtty0; }
.r-z80fyv { height: 20px; }
.r-zchlnj { right: 0px; }
@-webkit-keyframes r-1hunrpy { 
  0% { transform: translateY(100%); }
  100% { transform: translateY(0%); }
}
@-webkit-keyframes r-1rx4pb { 
  0% { transform: translateX(-100%); }
  100% { transform: translateX(400%); }
}
@-webkit-keyframes r-9p3sdl { 
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@-webkit-keyframes r-imtty0 { 
  0% { opacity: 0; }
  100% { opacity: 1; }
}
@-webkit-keyframes r-ndfo3d { 
  0% { transform: translateY(0%); }
  100% { transform: translateY(100%); }
}
@-webkit-keyframes r-t2lo5v { 
  0% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes r-1hunrpy { 
  0% { transform: translateY(100%); }
  100% { transform: translateY(0%); }
}
@keyframes r-1rx4pb { 
  0% { transform: translateX(-100%); }
  100% { transform: translateX(400%); }
}
@keyframes r-9p3sdl { 
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes r-imtty0 { 
  0% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes r-ndfo3d { 
  0% { transform: translateY(0%); }
  100% { transform: translateY(100%); }
}
@keyframes r-t2lo5v { 
  0% { opacity: 1; }
  100% { opacity: 0; }
}</style>
Hydration Error 
Warning: Prop `dangerouslySetInnerHTML` did not match. Server: "[stylesheet-group=\"0\"]{}\nbody{margin:0;}\nbutton::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}\nhtml{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0);}\ninput::-webkit-search-cancel-button,input::-webkit-search-decoration,input::-webkit-search-results-button,input::-webkit-search-results-decoration{display:none;}\n[stylesheet-group=\"1\"]{}\n.css-accessibilityImage-9pa8cd{bottom:0px;height:100%;left:0px;opacity:0;position:absolute;right:0px;top:0px;width:100%;z-index:-1;}\n.css-text-1rynq56{background-color:rgba(0,0,0,0.00);border:0 solid black;box-sizing:border-box;color:rgba(0,0,0,1.00);display:inline;font:14px -apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif;list-style:none;margin:0px;padding:0px;text-align:inherit;text-decoration:none;white-space:pre-wrap;word-wrap:break-word;}\n.css-textHasAncestor-1qaijid{background-color:rgba(0,0,0,0.00);border:0 solid black;box-sizing:border-box;color:inherit;display:inline;font:inherit;list-style:none;margin:0px;padding:0px;text-align:inherit;text-decoration:none;white-space:inherit;word-wrap:break-word;}\n.css-textinput-11aywtz{-moz-appearance:textfield;-webkit-appearance:none;background-color:rgba(0,0,0,0.00);border-bottom-left-radius:0px;border-bottom-right-radius:0px;border-top-left-radius:0px;border-top-right-radius:0px;border:0 solid black;box-sizing:border-box;font:14px -apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif;margin:0px;padding:0px;resize:none;}\n.css-view-175oi2r{align-items:stretch;background-color:rgba(0,0,0,0.00);border:0 solid black;box-sizing:border-box;display:flex;flex-basis:auto;flex-direction:column;flex-shrink:0;list-style:none;margin:0px;min-height:0px;min-width:0px;padding:0px;position:relative;text-decoration:none;z-index:0;}\n[stylesheet-group=\"2\"]{}\n.r-borderColor-1awa8pu{border-bottom-color:rgba(101,119,134,1.00);border-left-color:rgba(101,119,134,1.00);border-right-color:rgba(101,119,134,1.00);border-top-color:rgba(101,119,134,1.00);}\n.r-borderColor-1d4xg89{border-bottom-color:rgba(170,184,194,1.00);border-left-color:rgba(170,184,194,1.00);border-right-color:rgba(170,184,194,1.00);border-top-color:rgba(170,184,194,1.00);}\n.r-borderColor-1jyn79y{border-bottom-color:rgba(0,150,136,1.00);border-left-color:rgba(0,150,136,1.00);border-right-color:rgba(0,150,136,1.00);border-top-color:rgba(0,150,136,1.00);}\n.r-borderColor-4a18lf{border-bottom-color:rgba(255,0,0,1.00);border-left-color:rgba(255,0,0,1.00);border-right-color:rgba(255,0,0,1.00);border-top-color:rgba(255,0,0,1.00);}\n.r-borderColor-60ke3l{border-bottom-color:rgba(0,128,0,1.00);border-left-color:rgba(0,128,0,1.00);border-right-color:rgba(0,128,0,1.00);border-top-color:rgba(0,128,0,1.00);}\n.r-borderColor-9x6qib{border-bottom-color:rgba(204,214,221,1.00);border-left-color:rgba(204,214,221,1.00);border-right-color:rgba(204,214,221,1.00);border-top-color:rgba(204,214,221,1.00);}\n.r-borderColor-fx7oqy{border-bottom-color:rgba(0,0,255,1.00);border-left-color:rgba(0,0,255,1.00);border-right-color:rgba(0,0,255,1.00);border-top-color:rgba(0,0,255,1.00);}\n.r-borderRadius-1j16mh1{border-bottom-left-radius:100%;border-bottom-right-radius:100%;border-top-left-radius:100%;border-top-right-radius:100%;}\n.r-borderRadius-1jkafct{border-bottom-left-radius:2px;border-bottom-right-radius:2px;border-top-left-radius:2px;border-top-right-radius:2px;}\n.r-borderStyle-1phboty{border-bottom-style:solid;border-left-style:solid;border-right-style:solid;border-top-style:solid;}\n.r-borderWidth-d045u9{border-bottom-width:2px;border-left-width:2px;border-right-width:2px;border-top-width:2px;}\n.r-borderWidth-rs99b7{border-bottom-width:1px;border-left-width:1px;border-right-width:1px;border-top-width:1px;}\n.r-display-krxsd3{display:-webkit-box;}\n.r-display-xoduu5{display:inline-flex;}\n.r-flex-13awgt0{flex:1;}\n.r-margin-crgep1{margin:0px;}\n.r-margin-ywje51{margin:auto;}\n.r-overflow-1udh08x{overflow-x:hidden;overflow-y:hidden;}\n.r-padding-edyy15{padding:8px;}\n.r-padding-t60dpp{padding:0px;}\n[stylesheet-group=\"2.2\"]{}\n.r-WebkitBoxOrient-8akbws{-webkit-box-orient:vertical;}\n.r-WebkitOverflowScrolling-150rngu{-webkit-overflow-scrolling:touch;}\n.r-alignItems-1awozwy{align-items:center;}\n.r-alignSelf-k200y{align-self:flex-start;}\n.r-animationDuration-17bb2tj{animation-duration:0.75s;}\n.r-animationDuration-1ay1djp{animation-duration:1s;}\n.r-animationDuration-1ielgck{animation-duration:300ms;}\n.r-animationIterationCount-1muvv40{animation-iteration-count:infinite;}\n.r-animationKeyframes-127358a{animation-name:r-animation-9p3sdl;}\n.r-animationKeyframes-1knl56f{animation-name:r-animation-1hunrpy;}\n.r-animationKeyframes-1qdbj55{animation-name:r-animation-ndfo3d;}\n.r-animationKeyframes-g3mlsw{animation-name:r-animation-t2lo5v;}\n.r-animationKeyframes-j300sb{animation-name:r-animation-1rx4pb;}\n.r-animationKeyframes-xx3c9p{animation-name:r-animation-imtty0;}\n.r-animationPlayState-1abnn5w{animation-play-state:paused;}\n.r-animationTimingFunction-1ldzwu0{animation-timing-function:linear;}\n.r-animationTimingFunction-1uypc71{animation-timing-function:ease-in;}\n.r-animationTimingFunction-nvplwv{animation-timing-function:ease-out;}\n.r-appearance-30o5oe{-moz-appearance:none;-ms-appearance:none;-webkit-appearance:none;appearance:none;}\n.r-backgroundColor-11mpjr4{background-color:rgba(223,223,223,1.00);}\n.r-backgroundColor-11udlyb{background-color:rgba(0,150,136,1.00);}\n.r-backgroundColor-14lw9ot{background-color:rgba(255,255,255,1.00);}\n.r-backgroundColor-14sbq61{background-color:rgba(33,150,243,1.00);}\n.r-backgroundColor-1niwhzg{background-color:rgba(0,0,0,0.00);}\n.r-backgroundColor-dkge59{background-color:rgba(170,184,194,1.00);}\n.r-backgroundColor-u92y06{background-color:rgba(255,165,0,1.00);}\n.r-backgroundImage-rs94m5{background-image:url(\"data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgdmVyc2lvbj0iMS4xIgogICB2aWV3Qm94PSIwIDAgMSAxIgogICBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWluWU1pbiBtZWV0Ij4KICA8cGF0aAogICAgIGQ9Ik0gMC4wNDAzODA1OSwwLjYyNjc3NjcgMC4xNDY0NDY2MSwwLjUyMDcxMDY4IDAuNDI5Mjg5MzIsMC44MDM1NTMzOSAwLjMyMzIyMzMsMC45MDk2MTk0MSB6IE0gMC4yMTcxNTcyOSwwLjgwMzU1MzM5IDAuODUzNTUzMzksMC4xNjcxNTcyOSAwLjk1OTYxOTQxLDAuMjczMjIzMyAwLjMyMzIyMzMsMC45MDk2MTk0MSB6IgogICAgIGlkPSJyZWN0Mzc4MCIKICAgICBzdHlsZT0iZmlsbDojZmZmZmZmO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTpub25lIiAvPgo8L3N2Zz4K\");}\n.r-backgroundPosition-1mrlafo{background-position:0;}\n.r-backgroundPosition-vvn4in{background-position:center;}\n.r-backgroundRepeat-17leim2{background-repeat:repeat;}\n.r-backgroundRepeat-u6sd8q{background-repeat:no-repeat;}\n.r-backgroundSize-1sxrcry{background-size:auto;}\n.r-backgroundSize-4gszlv{background-size:cover;}\n.r-backgroundSize-ehq7j7{background-size:contain;}\n.r-backgroundSize-x3cy2q{background-size:100% 100%;}\n.r-bottom-1p0dtai{bottom:0px;}\n.r-boxShadow-1ewcgjf{box-shadow:0px 1px 3px rgba(0,0,0,0.5);}\n.r-color-c68hjy{color:rgba(161,161,161,1.00);}\n.r-color-jwli3a{color:rgba(255,255,255,1.00);}\n.r-cursor-1ei5mc7{cursor:inherit;}\n.r-cursor-1loqt21{cursor:pointer;}\n.r-cursor-7q8q6z{cursor:default;}\n.r-flexBasis-1mlwlqe{flex-basis:auto;}\n.r-flexDirection-18u37iz{flex-direction:row;}\n.r-flexDirection-1d5kdc7{flex-direction:column-reverse;}\n.r-flexDirection-1euycsn{flex-direction:row-reverse;}\n.r-flexDirection-eqz5dr{flex-direction:column;}\n.r-flexGrow-16y2uox{flex-grow:1;}\n.r-flexShrink-1wbh5a2{flex-shrink:1;}\n.r-fontFamily-1qd0xha{font-family:-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif;}\n.r-fontSize-7cikom{font-size:inherit;}\n.r-fontWeight-majxgm{font-weight:500;}\n.r-forcedColorAdjust-1c6unfx{forced-color-adjust:none;}\n.r-height-10ptun7{height:16px;}\n.r-height-1dernwh{height:70%;}\n.r-height-1pi2tsx{height:100%;}\n.r-height-1r8g8re{height:36px;}\n.r-height-4v7adb{height:5px;}\n.r-height-z80fyv{height:20px;}\n.r-justifyContent-1777fci{justify-content:center;}\n.r-left-1d2f490{left:0px;}\n.r-left-1fe0xdi{left:0%;}\n.r-left-7b7h2f{left:100%;}\n.r-maxWidth-dnmrzs{max-width:100%;}\n.r-opacity-6dt33c{opacity:1;}\n.r-opacity-orgf3d{opacity:0;}\n.r-outlineStyle-1ny4l3l{outline-style:none;}\n.r-overflowX-11yh6sk{overflow-x:hidden;}\n.r-overflowX-lltvgl{overflow-x:auto;}\n.r-overflowY-1rnoaur{overflow-y:auto;}\n.r-overflowY-buy8e9{overflow-y:hidden;}\n.r-paddingBottom-97e31f{padding-bottom:env(safe-area-inset-bottom);}\n.r-paddingLeft-bv2aro{padding-left:env(safe-area-inset-left);}\n.r-paddingRight-hxflta{padding-right:env(safe-area-inset-right);}\n.r-paddingTop-10xqauy{padding-top:env(safe-area-inset-top);}\n.r-placeholderTextColor-6taxm2:-ms-input-placeholder{color:var(--placeholderTextColor);opacity:1;}\n.r-placeholderTextColor-6taxm2::-moz-placeholder{color:var(--placeholderTextColor);opacity:1;}\n.r-placeholderTextColor-6taxm2::-webkit-input-placeholder{color:var(--placeholderTextColor);opacity:1;}\n.r-placeholderTextColor-6taxm2::placeholder{color:var(--placeholderTextColor);opacity:1;}\n.r-pointerEvents-105ug2t{pointer-events:auto!important;}\n.r-pointerEvents-12vffkv>*{pointer-events:auto;}\n.r-pointerEvents-12vffkv{pointer-events:none!important;}\n.r-pointerEvents-633pao{pointer-events:none!important;}\n.r-pointerEvents-ah5dr5>*{pointer-events:none;}\n.r-pointerEvents-ah5dr5{pointer-events:auto!important;}\n.r-position-1xcajam{position:fixed;}\n.r-position-gtdqiz{position:-webkit-sticky;position:sticky;}\n.r-position-u8s1d{position:absolute;}\n.r-right-1i93rbr{right:0%;}\n.r-right-1ro7rbe{right:100%;}\n.r-right-zchlnj{right:0px;}\n.r-scrollSnapAlign-cpa5s6{scroll-snap-align:start;}\n.r-scrollSnapType-1ocf4r9{scroll-snap-type:y mandatory;}\n.r-scrollSnapType-mfh4gg{scroll-snap-type:x mandatory;}\n.r-scrollbarWidth-2eszeu::-webkit-scrollbar{display:none}\n.r-scrollbarWidth-2eszeu{scrollbar-width:none;}\n.r-textAlign-1ff274t{text-align:right;}\n.r-textAlign-fdjqy7{text-align:left;}\n.r-textAlign-q4m81j{text-align:center;}\n.r-textOverflow-1udbk01{text-overflow:ellipsis;}\n.r-textTransform-tsynxw{text-transform:uppercase;}\n.r-top-ipm5af{top:0px;}\n.r-touchAction-19z077z{touch-action:none;}\n.r-touchAction-1otgn73{touch-action:manipulation;}\n.r-transform-1qc3rpd{transform:scaleY(-1);}\n.r-transform-1sncvnh{transform:translateZ(0px);}\n.r-transform-1ub1aon{transform:translateY(100%);}\n.r-transform-9ji8r7{transform:translateY(0%);}\n.r-transform-h2q2x{transform:scaleX(-1);}\n.r-transitionDuration-13tjlyg{transition-duration:0.1s;}\n.r-transitionDuration-eafdt9{transition-duration:0.15s;}\n.r-transitionProperty-1i6wzkk{-moz-transition-property:opacity;-webkit-transition-property:opacity;transition-property:opacity;}\n.r-userSelect-1xnzce8{-moz-user-select:-webkit-text;-moz-user-select:text;-webkit-user-select:-webkit-text;-webkit-user-select:text;user-select:-webkit-text;user-select:text;}\n.r-userSelect-lrvibr{-moz-user-select:none;-webkit-user-select:none;user-select:none;}\n.r-visibility-11j9u27{visibility:hidden;}\n.r-whiteSpace-3s2u2q{white-space:nowrap;}\n.r-width-13qz1uu{width:100%;}\n.r-width-19wmn03{width:20px;}\n.r-width-1acpoxo{width:36px;}\n.r-width-1janqcz{width:16px;}\n.r-wordWrap-1iln25a{word-wrap:normal;}\n.r-zIndex-1wyyakw{z-index:-1;}\n.r-zIndex-417010{z-index:0;}\n.r-zIndex-mhe3cw{z-index:10;}\n.r-zIndex-sfbmgh{z-index:9999;}\n@-webkit-keyframes r-animation-1hunrpy{0%{transform:translateY(100%);}100%{transform:translateY(0%);}}\n@-webkit-keyframes r-animation-1rx4pb{0%{transform:translateX(-100%);}100%{transform:translateX(400%);}}\n@-webkit-keyframes r-animation-9p3sdl{0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}}\n@-webkit-keyframes r-animation-imtty0{0%{opacity:0;}100%{opacity:1;}}\n@-webkit-keyframes r-animation-ndfo3d{0%{transform:translateY(0%);}100%{transform:translateY(100%);}}\n@-webkit-keyframes r-animation-t2lo5v{0%{opacity:1;}100%{opacity:0;}}\n@keyframes r-animation-1hunrpy{0%{transform:translateY(100%);}100%{transform:translateY(0%);}}\n@keyframes r-animation-1rx4pb{0%{transform:translateX(-100%);}100%{transform:translateX(400%);}}\n@keyframes r-animation-9p3sdl{0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}}\n@keyframes r-animation-imtty0{0%{opacity:0;}100%{opacity:1;}}\n@keyframes r-animation-ndfo3d{0%{transform:translateY(0%);}100%{transform:translateY(100%);}}\n@keyframes r-animation-t2lo5v{0%{opacity:1;}100%{opacity:0;}}" Client: "[stylesheet-group=\"0\"] { }\nbody { margin: 0px; }\nhtml { text-size-adjust: 100%; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }\ninput::-webkit-search-cancel-button, input::-webkit-search-decoration, input::-webkit-search-results-button, input::-webkit-search-results-decoration { display: none; }\n[stylesheet-group=\"1\"] { }\n.css-accessibilityImage-9pa8cd { inset: 0px; height: 100%; opacity: 0; position: absolute; width: 100%; z-index: -1; }\n.css-text-1rynq56 { background-color: rgba(0, 0, 0, 0); border: 0px solid black; box-sizing: border-box; color: rgb(0, 0, 0); display: inline; font: 14px -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif; list-style: none; margin: 0px; padding: 0px; text-align: inherit; text-decoration: none; white-space: pre-wrap; overflow-wrap: break-word; }\n.css-textHasAncestor-1qaijid { background-color: rgba(0, 0, 0, 0); border: 0px solid black; box-sizing: border-box; color: inherit; display: inline; font: inherit; list-style: none; margin: 0px; padding: 0px; text-align: inherit; text-decoration: none; white-space: inherit; overflow-wrap: break-word; }\n.css-textinput-11aywtz { appearance: none; background-color: rgba(0, 0, 0, 0); border-radius: 0px; border: 0px solid black; box-sizing: border-box; font: 14px -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif; margin: 0px; padding: 0px; resize: none; }\n.css-view-175oi2r { align-items: stretch; background-color: rgba(0, 0, 0, 0); border: 0px solid black; box-sizing: border-box; display: flex; flex-basis: auto; flex-direction: column; flex-shrink: 0; list-style: none; margin: 0px; min-height: 0px; min-width: 0px; padding: 0px; position: relative; text-decoration: none; z-index: 0; }\n[stylesheet-group=\"2\"] { }\n.r-borderColor-1awa8pu { border-color: rgb(101, 119, 134); }\n.r-borderColor-1d4xg89 { border-color: rgb(170, 184, 194); }\n.r-borderColor-1jyn79y { border-color: rgb(0, 150, 136); }\n.r-borderColor-4a18lf { border-color: rgb(255, 0, 0); }\n.r-borderColor-60ke3l { border-color: rgb(0, 128, 0); }\n.r-borderColor-9x6qib { border-color: rgb(204, 214, 221); }\n.r-borderColor-fx7oqy { border-color: rgb(0, 0, 255); }\n.r-borderRadius-1j16mh1 { border-radius: 100%; }\n.r-borderRadius-1jkafct { border-radius: 2px; }\n.r-borderStyle-1phboty { border-style: solid; }\n.r-borderWidth-d045u9 { border-width: 2px; }\n.r-borderWidth-rs99b7 { border-width: 1px; }\n.r-display-krxsd3 { display: -webkit-box; }\n.r-display-xoduu5 { display: inline-flex; }\n.r-flex-13awgt0 { flex: 1 1 0%; }\n.r-margin-crgep1 { margin: 0px; }\n.r-margin-ywje51 { margin: auto; }\n.r-overflow-1udh08x { overflow: hidden; }\n.r-padding-edyy15 { padding: 8px; }\n.r-padding-t60dpp { padding: 0px; }\n[stylesheet-group=\"2.2\"] { }\n.r-WebkitBoxOrient-8akbws { -webkit-box-orient: vertical; }\n.r-WebkitOverflowScrolling-150rngu { }\n.r-alignItems-1awozwy { align-items: center; }\n.r-alignSelf-k200y { align-self: flex-start; }\n.r-animationDuration-17bb2tj { animation-duration: 0.75s; }\n.r-animationDuration-1ay1djp { animation-duration: 1s; }\n.r-animationDuration-1ielgck { animation-duration: 300ms; }\n.r-animationIterationCount-1muvv40 { animation-iteration-count: infinite; }\n.r-animationKeyframes-127358a { animation-name: r-animation-9p3sdl; }\n.r-animationKeyframes-1knl56f { animation-name: r-animation-1hunrpy; }\n.r-animationKeyframes-1qdbj55 { animation-name: r-animation-ndfo3d; }\n.r-animationKeyframes-g3mlsw { animation-name: r-animation-t2lo5v; }\n.r-animationKeyframes-j300sb { animation-name: r-animation-1rx4pb; }\n.r-animationKeyframes-xx3c9p { animation-name: r-animation-imtty0; }\n.r-animationPlayState-1abnn5w { animation-play-state: paused; }\n.r-animationTimingFunction-1ldzwu0 { animation-timing-function: linear; }\n.r-animationTimingFunction-1uypc71 { animation-timing-function: ease-in; }\n.r-animationTimingFunction-nvplwv { animation-timing-function: ease-out; }\n.r-appearance-30o5oe { appearance: none; }\n.r-backgroundColor-11mpjr4 { background-color: rgb(223, 223, 223); }\n.r-backgroundColor-11udlyb { background-color: rgb(0, 150, 136); }\n.r-backgroundColor-14lw9ot { background-color: rgb(255, 255, 255); }\n.r-backgroundColor-14sbq61 { background-color: rgb(33, 150, 243); }\n.r-backgroundColor-1niwhzg { background-color: rgba(0, 0, 0, 0); }\n.r-backgroundColor-dkge59 { background-color: rgb(170, 184, 194); }\n.r-backgroundColor-u92y06 { background-color: rgb(255, 165, 0); }\n.r-backgroundImage-rs94m5 { background-image: url(\"data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgdmVyc2lvbj0iMS4xIgogICB2aWV3Qm94PSIwIDAgMSAxIgogICBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWluWU1pbiBtZWV0Ij4KICA8cGF0aAogICAgIGQ9Ik0gMC4wNDAzODA1OSwwLjYyNjc3NjcgMC4xNDY0NDY2MSwwLjUyMDcxMDY4IDAuNDI5Mjg5MzIsMC44MDM1NTMzOSAwLjMyMzIyMzMsMC45MDk2MTk0MSB6IE0gMC4yMTcxNTcyOSwwLjgwMzU1MzM5IDAuODUzNTUzMzksMC4xNjcxNTcyOSAwLjk1OTYxOTQxLDAuMjczMjIzMyAwLjMyMzIyMzMsMC45MDk2MTk0MSB6IgogICAgIGlkPSJyZWN0Mzc4MCIKICAgICBzdHlsZT0iZmlsbDojZmZmZmZmO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTpub25lIiAvPgo8L3N2Zz4K\"); }\n.r-backgroundPosition-1mrlafo { background-position: 0px center; }\n.r-backgroundPosition-vvn4in { background-position: center center; }\n.r-backgroundRepeat-17leim2 { background-repeat: repeat; }\n.r-backgroundRepeat-u6sd8q { background-repeat: no-repeat; }\n.r-backgroundSize-1sxrcry { background-size: auto; }\n.r-backgroundSize-4gszlv { background-size: cover; }\n.r-backgroundSize-ehq7j7 { background-size: contain; }\n.r-backgroundSize-x3cy2q { background-size: 100% 100%; }\n.r-bottom-1p0dtai { bottom: 0px; }\n.r-boxShadow-1ewcgjf { box-shadow: rgba(0, 0, 0, 0.5) 0px 1px 3px; }\n.r-color-c68hjy { color: rgb(161, 161, 161); }\n.r-color-jwli3a { color: rgb(255, 255, 255); }\n.r-cursor-1ei5mc7 { cursor: inherit; }\n.r-cursor-1loqt21 { cursor: pointer; }\n.r-cursor-7q8q6z { cursor: default; }\n.r-flexBasis-1mlwlqe { flex-basis: auto; }\n.r-flexDirection-18u37iz { flex-direction: row; }\n.r-flexDirection-1d5kdc7 { flex-direction: column-reverse; }\n.r-flexDirection-1euycsn { flex-direction: row-reverse; }\n.r-flexDirection-eqz5dr { flex-direction: column; }\n.r-flexGrow-16y2uox { flex-grow: 1; }\n.r-flexShrink-1wbh5a2 { flex-shrink: 1; }\n.r-fontFamily-1qd0xha { font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif; }\n.r-fontSize-7cikom { font-size: inherit; }\n.r-fontWeight-majxgm { font-weight: 500; }\n.r-forcedColorAdjust-1c6unfx { forced-color-adjust: none; }\n.r-height-10ptun7 { height: 16px; }\n.r-height-1dernwh { height: 70%; }\n.r-height-1pi2tsx { height: 100%; }\n.r-height-1r8g8re { height: 36px; }\n.r-height-4v7adb { height: 5px; }\n.r-height-z80fyv { height: 20px; }\n.r-justifyContent-1777fci { justify-content: center; }\n.r-left-1d2f490 { left: 0px; }\n.r-left-1fe0xdi { left: 0%; }\n.r-left-7b7h2f { left: 100%; }\n.r-maxWidth-dnmrzs { max-width: 100%; }\n.r-opacity-6dt33c { opacity: 1; }\n.r-opacity-orgf3d { opacity: 0; }\n.r-outlineStyle-1ny4l3l { outline-style: none; }\n.r-overflowX-11yh6sk { overflow-x: hidden; }\n.r-overflowX-lltvgl { overflow-x: auto; }\n.r-overflowY-1rnoaur { overflow-y: auto; }\n.r-overflowY-buy8e9 { overflow-y: hidden; }\n.r-paddingBottom-97e31f { padding-bottom: env(safe-area-inset-bottom); }\n.r-paddingLeft-bv2aro { padding-left: env(safe-area-inset-left); }\n.r-paddingRight-hxflta { padding-right: env(safe-area-inset-right); }\n.r-paddingTop-10xqauy { padding-top: env(safe-area-inset-top); }\n.r-placeholderTextColor-6taxm2::-webkit-input-placeholder { color: var(--placeholderTextColor); opacity: 1; }\n.r-placeholderTextColor-6taxm2::placeholder { color: var(--placeholderTextColor); opacity: 1; }\n.r-pointerEvents-105ug2t { pointer-events: auto !important; }\n.r-pointerEvents-12vffkv > * { pointer-events: auto; }\n.r-pointerEvents-12vffkv { pointer-events: none !important; }\n.r-pointerEvents-12vffkv>*{pointer-events:auto;}\n.r-pointerEvents-633pao { pointer-events: none !important; }\n.r-pointerEvents-ah5dr5 > * { pointer-events: none; }\n.r-pointerEvents-ah5dr5 { pointer-events: auto !important; }\n.r-pointerEvents-ah5dr5>*{pointer-events:none;}\n.r-position-1xcajam { position: fixed; }\n.r-position-gtdqiz { position: sticky; }\n.r-position-u8s1d { position: absolute; }\n.r-right-1i93rbr { right: 0%; }\n.r-right-1ro7rbe { right: 100%; }\n.r-right-zchlnj { right: 0px; }\n.r-scrollSnapAlign-cpa5s6 { scroll-snap-align: start; }\n.r-scrollSnapType-1ocf4r9 { scroll-snap-type: y mandatory; }\n.r-scrollSnapType-mfh4gg { scroll-snap-type: x mandatory; }\n.r-scrollbarWidth-2eszeu { }\n.r-scrollbarWidth-2eszeu::-webkit-scrollbar { display: none; }\n.r-textAlign-1ff274t { text-align: right; }\n.r-textAlign-fdjqy7 { text-align: left; }\n.r-textAlign-q4m81j { text-align: center; }\n.r-textOverflow-1udbk01 { text-overflow: ellipsis; }\n.r-textTransform-tsynxw { text-transform: uppercase; }\n.r-top-ipm5af { top: 0px; }\n.r-touchAction-19z077z { touch-action: none; }\n.r-touchAction-1otgn73 { touch-action: manipulation; }\n.r-transform-1qc3rpd { transform: scaleY(-1); }\n.r-transform-1sncvnh { transform: translateZ(0px); }\n.r-transform-1ub1aon { transform: translateY(100%); }\n.r-transform-9ji8r7 { transform: translateY(0%); }\n.r-transform-h2q2x { transform: scaleX(-1); }\n.r-transitionDuration-13tjlyg { transition-duration: 0.1s; }\n.r-transitionDuration-eafdt9 { transition-duration: 0.15s; }\n.r-transitionProperty-1i6wzkk { transition-property: opacity; }\n.r-userSelect-1xnzce8 { user-select: text; }\n.r-userSelect-lrvibr { user-select: none; }\n.r-visibility-11j9u27 { visibility: hidden; }\n.r-whiteSpace-3s2u2q { white-space: nowrap; }\n.r-width-13qz1uu { width: 100%; }\n.r-width-19wmn03 { width: 20px; }\n.r-width-1acpoxo { width: 36px; }\n.r-width-1janqcz { width: 16px; }\n.r-wordWrap-1iln25a { overflow-wrap: normal; }\n.r-zIndex-1wyyakw { z-index: -1; }\n.r-zIndex-417010 { z-index: 0; }\n.r-zIndex-mhe3cw { z-index: 10; }\n.r-zIndex-sfbmgh { z-index: 9999; }\n@-webkit-keyframes r-animation-1hunrpy { \n  0% { transform: translateY(100%); }\n  100% { transform: translateY(0%); }\n}\n@-webkit-keyframes r-animation-1rx4pb { \n  0% { transform: translateX(-100%); }\n  100% { transform: translateX(400%); }\n}\n@-webkit-keyframes r-animation-9p3sdl { \n  0% { transform: rotate(0deg); }\n  100% { transform: rotate(360deg); }\n}\n@-webkit-keyframes r-animation-imtty0 { \n  0% { opacity: 0; }\n  100% { opacity: 1; }\n}\n@-webkit-keyframes r-animation-ndfo3d { \n  0% { transform: translateY(0%); }\n  100% { transform: translateY(100%); }\n}\n@-webkit-keyframes r-animation-t2lo5v { \n  0% { opacity: 1; }\n  100% { opacity: 0; }\n}\n@keyframes r-animation-1hunrpy { \n  0% { transform: translateY(100%); }\n  100% { transform: translateY(0%); }\n}\n@keyframes r-animation-1rx4pb { \n  0% { transform: translateX(-100%); }\n  100% { transform: translateX(400%); }\n}\n@keyframes r-animation-9p3sdl { \n  0% { transform: rotate(0deg); }\n  100% { transform: rotate(360deg); }\n}\n@keyframes r-animation-imtty0 { \n  0% { opacity: 0; }\n  100% { opacity: 1; }\n}\n@keyframes r-animation-ndfo3d { \n  0% { transform: translateY(0%); }\n  100% { transform: translateY(100%); }\n}\n@keyframes r-animation-t2lo5v { \n  0% { opacity: 1; }\n  100% { opacity: 0; }\n}"
    at style
    at head
    at html
    at App (http://localhost:3000/build/root-PNHQ2THB.js:34:25)
    at RemixRoute (http://localhost:3000/build/_shared/chunk-Q6XSDDLP.js:2527:3)
    at Routes2 (http://localhost:3000/build/_shared/chunk-Q6XSDDLP.js:2510:7)
    at Router (http://localhost:3000/build/_shared/chunk-Q6XSDDLP.js:735:15)
    at RemixCatchBoundary (http://localhost:3000/build/_shared/chunk-Q6XSDDLP.js:1020:10)
    at RemixErrorBoundary (http://localhost:3000/build/_shared/chunk-Q6XSDDLP.js:945:5)
    at RemixEntry (http://localhost:3000/build/_shared/chunk-Q6XSDDLP.js:2407:12)
    at RemixBrowser (http://localhost:3000/build/_shared/chunk-Q6XSDDLP.js:3110:27)
    at App

Could the usage of cssText cause this?

react-native-web/packages/react-native-web/src/exports/StyleSheet/dom/createOrderedCSSStyleSheet.js

Line 45 in 379da30

const cssText = cssRule.cssText;

How to reproduce

I can't use CodeSandbox, since it doesn't support pnpm, so here's a repo:
Simplified test case: https://github.com/HorusGoul/rnw-css-hydration-bug-error-repro

Steps to reproduce:

  1. Install deps with pnpm, pnpm install
  2. Run the dev server: pnpm dev
  3. In incognito mode, or in a browser that has no extensions that could alter the DOM, visit http://localhost:3000.

You can also use https://rnw-css-hydration-bug-error-repro.vercel.app/ without installing anything, but the hydration error gets omitted by the react production build.

In that page, I logged both outputs, the SSR style markup, and the Client one.

Expected behavior

Server markup should match client markup. In this case, the styles are the same, but the formatting is different.

Environment (include versions). Did this work in previous versions?
This was working before the internal refactor of Stylesheet (0.17).

  • React Native for Web (version): 0.18.2
  • React (version): 18.2.0
  • Browser: *

Thank you!
@necolas
Copy link
Owner

necolas commented Jul 2, 2022

This hydration mismatch should never happen in practice because the client shouldn't be using server APIs.

https://github.com/HorusGoul/rnw-css-hydration-bug-error-repro/blob/main/app/entry.client.tsx#L22

You're trying to re-render the entire document contents again.

I can't use CodeSandbox, since it doesn't support pnpm

Why are you using pnpm for the example? That doesn't seem necessary.

@necolas necolas closed this as completed Jul 2, 2022
@rdsedmundo
Copy link

I was trying to debug why our website started to break randomly in production when a URL Scroll-To-Text text fragment was added in the URL, and came across this issue which isn't exactly what happened to us but related, so I'll leave the issue I reported to the Chrome Team for future reference here in case it helps anyone: GoogleChromeLabs/text-fragments-polyfill#153

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@necolas @rdsedmundo @HorusGoul