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.

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

Make auto-prefix util isomorphic #591

Merged
merged 1 commit into from
Apr 28, 2015

Conversation

troutowicz
Copy link
Contributor

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 pushed a commit that referenced this pull request Apr 28, 2015
@hai-cea hai-cea merged commit 77daca2 into mui:master Apr 28, 2015
@hai-cea
Copy link
Member

hai-cea commented Apr 28, 2015

Thanks @troutowicz ! 👍

@troutowicz troutowicz deleted the isomorphic_autoprefix branch May 2, 2015 04:52
@mozmorris
Copy link

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
Copy link
Contributor Author

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

@mozmorris
Copy link

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
Copy link
Contributor Author

That's a good question :)

@davidshariff
Copy link

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
Copy link

@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
Copy link

@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.

@zannager zannager added the package: styles Specific to @mui/styles. Legacy package, @material-ui/styled-engine is taking over in v5. label Mar 23, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
package: styles Specific to @mui/styles. Legacy package, @material-ui/styled-engine is taking over in v5.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

6 participants