SSR and prefix breaks layout about flexbox-react

[hampusohlsson]

That makes sense. I'm using styled-components and their v2/next branch... works great with SSR! I'll use my own fork of your lib in the meantime, let me know if you need any help!

[nachoaIvarez]

Ok, copied. I will resume my styled-components port.

[nachoaIvarez]

v4.3.0 is up @hampusohlsson. Should be working now.

[hampusohlsson]

Btw, I looked through your source-code and saw that you depend on rofrischmann/inline-style-prefixer which is probably generating those properties.. Digging even deeper, this style of concatenating display props seem to have originated from internal behavior in the React core, see facebook/react#2020.

Edit:
My guess is there was an update to Chrome that removed the support for this style of css?
Support was dropped in React 15.

[nachoaIvarez]

Mhm. So, while this approach you are proposing works, it doesn't quite follows the API design I intended with this library, which is not having a single proprietary concept on it. To use this library you don't need to learn anything. And having a noPrefix doesn't continues that idea, I'm afraid. I'm starting to think the best approach would be to get rid of inline-style-prefixer and move to something like glamor, aphrodite, or styled-components under the hood. Yes, this would imply a major re-write of the library, but the library is not big, so it's totally doable. I feel bad because I'm genuinely grateful to you for taking the time to submit an issue, investigate on it and submit a PR, but this is not the approach we should follow, in my opinion. Ideally everything should work as it is, both SSR and CSR, in a frictionless, transparent way. I'll try to migrate to glamor, aphrodite, or styled-components shortly and see how it goes.

[nachoaIvarez]

Hey @hampusohlsson, I have good news.

All of those libraries I mentioned on my comment (glamor, aphrodite, or styled-components) are listed here, using the library. They are using the static version of the library. It's actually a minimal change!

I'll publish the fix right away. And the size of the library is going to be smaller now!

[hampusohlsson]

Hey, thanks for the quick turnaround. I actually tried that, but the static version also outputs concatenated string so it is the same problem -even worse actually, the layout doesn't work at all since the client code uses the same property.

[nachoaIvarez]

But that's weird, styled-components, glamor and all those libraries work when SSR 🤔

[hampusohlsson]

The issue is that you can't do the right thing using inline styles (one display prop on each row). Styled-components outputs classnames with css injected into the body, so they have no problem generating multiple lines.

[hampusohlsson]

Wow! That was fast 😅 will try it out in a few hours.

[hampusohlsson]

Hey @nachoaIvarez, I just tried v4.3.0 but my SSR doesn't render any output -- I see that you are using [email protected] in the package.json. It's the styled-components@next branch that has support for SSR. If you don't want to rely on a third party beta branch, perhaps you too could create a next branch that does until styled-components v2 lands in master?

[hampusohlsson]

FYI, works perfectly with styled-components v2! Just tried it in a local branch 😄