fix(SSR): change the unreliable pseudo class ":first-child" to ":first-of-type" #253
Conversation
cheton
added
🏗️ work in progress
|
Successfully deployed af97905 to https://trendmicro-frontend.github.io/styled-ui-demo/pr-253/ |
|
Successfully deployed 0fc3bb9 to https://trendmicro-frontend.github.io/styled-ui-demo/pr-253/ |
|
Successfully deployed c81f723 to https://trendmicro-frontend.github.io/styled-ui-demo/pr-253/ |
|
Successfully deployed dab6c84 to https://trendmicro-frontend.github.io/styled-ui-demo/pr-253/ |
|
Successfully deployed de1c205 to https://trendmicro-frontend.github.io/styled-ui-demo/pr-253/ |
|
Successfully deployed 1303e98 to https://trendmicro-frontend.github.io/styled-ui-demo/pr-253/ |
cheton
requested review from
tinaClin,
roth1002,
austinhung81 and
joshuatai
and removed request for
roth1002
|
Successfully deployed 8604402 to https://trendmicro-frontend.github.io/styled-ui-demo/pr-253/ |
|
Successfully deployed d976524 to https://trendmicro-frontend.github.io/styled-ui-demo/pr-253/ |
|
Successfully deployed 6503856 to https://trendmicro-frontend.github.io/styled-ui-demo/pr-253/ |
|
This issue has been reported by at least three Cloud One service frontend teams (C1C, CS, FSS) and all waiting on this fix. Thank you style UI team for making this fix available 🚀 👍 |
|
Successfully deployed b554752 to https://trendmicro-frontend.github.io/styled-ui-demo/pr-253/ |
Problem description
In emotion v10+, a new warning is thrown if you use
:first-child,:nth-child, or:nth-last-childselectors in a styled component or css prop value. This is because, when using SSR, the style element is injected immediately above (prepended) the associated component.Problems surrounding SSR injection of <style> and unreliability of :first-child selectors
emotion-js/emotion#1178
Suggested workaround
Changing the unreliable pseudo class
:first-childto:first-of-type. This only works if all sibling elements are of the same type.