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.

Sign up for GitHub

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

Jump to bottom

display: flex busted for StyleSheetServer #66

Closed
kentcdodds opened this issue Apr 29, 2016 · 8 comments
Closed

display: flex busted for StyleSheetServer #66

kentcdodds opened this issue Apr 29, 2016 · 8 comments

Comments

@kentcdodds
Copy link
Contributor

Hi there! I'm not sure what's going on, but in version 0.3.0, there's a bug with StyleSheetServer. Here's a reproducible example:

const {StyleSheet, css: aphroditeCSS, StyleSheetServer} = require('aphrodite')

const {html, css} = StyleSheetServer.renderStatic(() => {
  const styles = StyleSheet.create({body: {display: 'flex'}})
  const className = aphroditeCSS(styles.body)
  return `<html><body class=${className}">hi</body></html>`
})

console.log(css.content)

This will log:

.body_poyjc{display:flex,-webkit-flex,-ms-flexbox,-moz-box,-webkit-box !important;}

As you can see, that's an invalid value for display. My hope is that someone familiar with the codebase will see this and immediately know what's going on. But for me, I have no idea why that's happening.

Note:

I cannot reproduce it outside of a server rendering context (see here)

screen shot 2016-04-29 at 11 07 54 am

<style type="text/css" data-aphrodite="">.body_poyjc{display:-webkit-box !important;display:-moz-box !important;display:-ms-flexbox !important;display:-webkit-flex !important;display:flex !important;}</style>
@kentcdodds
Copy link
Contributor Author

Oh, and to be clear/complete, I'm using:

  • node - v6
  • npm - v3.8.5
  • aphrodite - v0.3.0

@kentcdodds
Copy link
Contributor Author

If someone gives me direction on this, I'd happily submit a pull request 👍

@xymostech
Copy link
Contributor

Huh! That's very interesting! I'll look into it. I wish we had a "sandbox" where we could play around with this stuff, it's hard to test out the generated CSS right now :P

@xymostech
Copy link
Contributor

It looks the new version of inline-style-prefix-all is giving different results than an older version did. Using version 1.0.5 (which we have in our package.json) is working fine for me, but updating to version 1.1.0 is breaking things. :(

robinweser/inline-style-prefix-all@545af4f seems to be the offending commit. This probably should have been a major version bump for them, instead of a minor version. I guess we should pin to version 1.0.5?

@kentcdodds
Copy link
Contributor Author

kentcdodds commented Apr 29, 2016 •
edited
Loading

I wish we had a "sandbox" where we could play around with this stuff

Maybe this is helpful? http://www.webpackbin.com/4Ja0Rc2l-?

Or this: http://esnextb.in/?gist=918dda026d65d313adfa0498aca5de6a

@kentcdodds
Copy link
Contributor Author

Anyway, yes, that should have been a version bump. Here's what I recommend:

  1. Pin the dependency in aphrodite.
  2. Release a patch release of aphrodite
  3. File an issue on inline-style-prefix-all and let them decide how they want to deal with it
  4. Update inline-style-prefix-all when they've dealt with it
  5. (optionally) Release another patch release of aphrodite with that update

kentcdodds referenced this issue in robinweser/inline-style-prefix-all Apr 29, 2016
@rtsao
Return array of fallback values
545af4f
@xymostech
Copy link
Contributor

Well since aphrodite generates CSS, I'd like to have a sandbox that shows you the generated css!

Okay, I'm making a new release now.

@kentcdodds
Copy link
Contributor Author

I'd like to have a sandbox that shows you the generated css!

Would definitely be cool to have an app that does this. We could probably do this in jsbin... :-)

@xymostech xymostech mentioned this issue Apr 29, 2016
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@xymostech @kentcdodds