SSR styles for dynamic input are partially missing
nlopin opened this issue · 3 comments
Hello guys!
I'm trying to trace what goes wrong with the styles of my application. I have a next.js app that uses an internal design system written with styled-components. The setup is done precisely the same way as in the example. Input component in the design system has rather complex logic of using the label as a placeholder and moving it up when user types (https://wave.free-now.com/components/input#example):
When I use development mode, the app works as expected and all styles are in place. However, when I build and start production build, I see a particular piece of CSS is not delivered from the server.
In the picture below, the left side contains response from the production server, right side — the code from development:
On the left side, there is only one :focus class, but the right side contains two of those. So when the user types, the input changes class names, but no styles for this state were shipped.
I'm trying to understand a reason and how can I fix the thing. What is the solution for such situation?
Hi what version of styled-components are you using?
My app is having problems since update to 5.2.x I've mismatch between some of ssr classnames and csr.
It looks like that .babelrc plugin configuration is not being used so { ssr: true } is not being used
@bigpetecz I have 4.4.x
In the end, it looks like the issue is not related to the plugin. I tried to make a demo of the issue with no luck. I'm closing the bug and will reopen it if I have a good reason.