Make auto-prefix util isomorphic

[troutowicz]

Allow server side use of the auto-prefix util. Also check falseyness of the returned prefixed string in the singleHyphened method as the Modernizr.prefixed method seems to return false in some instances when using PhantomJS.

[hai-cea]

Thanks @troutowicz ! 👍

[mozmorris]

I'm guessing there's no workaround for differences between server and client side rendering as the sever-side won't know what it needs to prefix? @hai-cea @troutowicz

[troutowicz]

@mozmorris The differences should not matter. Pre-render server side without prefixing, then prefix once on the client.

[mozmorris]

Cool, I guess I was just thinking about the potential for FOUC.

Could you see that being a problem? flexbox for example; Safari (Desktop & Mobile) needs the prefix right? So the first render wouldn't look right.

[troutowicz]

That's a good question :)

[davidshariff]

Any update on this? I'm building an isomorphic app and having a similar problem with the <hr> elements generated from <TextField />:

the markup being generated is different on the client or server
(client) bottom:8px;margin:0;false:content-box;bo
(server) bottom:8px;margin:0;-moz-box-sizing:cont

[mozmorris]

@davidshariff for this reason I couldn't continue with this set of components. The FOUC wasn't going to cut it. Hacks like hiding everything until the JS (and prefixed styles) had loaded defeated one purpose of rendering on the server.

I think I prefer being able to extract my styles into a separate stylesheet and generate the critical path using a library like https://github.com/pocketjoso/penthouse. Perhaps that's sooo 2014.

I'm still not decided about all this stuff anyway.

[ryanblakeley]

@davidshariff I'm running into the same issue.

After reading about CSS Modules yesterday, I'm wondering if they might fit in nicely for this problem. The diff prefixes might be pushed into the stylesheets, and the markup on the server and client would be able to match.