search

cssinjs / styled-jss

Styled Components on top of JSS.
http://cssinjs.org/styled-jss
MIT License
217 stars 25 forks source link

react-jss and styled-jss in the same app #60

Open hburrows opened 6 years ago

hburrows commented 6 years ago

Moving discussion from react-jss..... I've been using both react-jss and styled-jss in the same app. This has worked fine until upgrading to the most recent versions of jss, react-jss, and styled-jss. Everything works fine during development but when I bundle my app with NODE_ENV=production I end of with duplicate className conflicts.

After some investigation I concluded that styled-jss does not honor anything in context put there by react-jss's JssProvider. Most of my styled-jss use is in a separate, sharable package. styled-jss does not declare react-jss as a dependency so I"m not sure this is technically a bug. However, my expectation was that they'd work together -- especially since they both target react apps. More importantly.... for the benefit of the jss ecosystem... and getting stuff to "just work" I wonder if styled-jss should honor what JssProvider puts there and I guess make react-jss and dependency?

I'm going to explore a "custom JSS" setup and try to share a className generator between the 2... but this seems like a lot of friction for 2 packages that I would expect to work well together. Curious what your thoughts are ?

@kof mentioned "Initially they were not meant to be be used together, but I think in theory they should do so if they turn out to be complementary. I think we are not aware right now of complementarity." They're a different approach to styling your app. I tend to use styled-jss for structural components (flexbox layouts and stuff like that) and react-jss for more component centric styling. It's arguable whether that's complimentary or not... but I'm struggling to understand why they wouldn't be designed to work well together so it's up to the end-user to decide when to use which. Since they're part of the same cssinjs org and both target React apps my expectation was that they'd work together.

kof commented 6 years ago

@hburrows have you tried latest versions, do we still have collisions?

hburrows commented 6 years ago

@kof I configure createStyled and JssProvider to use the same className generator and that solves the issue. Would the latest versions solve that without the custom className generator?

kof commented 6 years ago

We added instance id, which should avoid collisions between instances, try it.

On Jan 22, 2018 03:23, "Howard Burrows" notifications@github.com wrote:

@kof https://github.com/kof I configure createStyled and JssProvider to use the same className generator and that solves the issue. Would the latest versions solve that without the custom className generator?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/cssinjs/styled-jss/issues/60#issuecomment-359307796, or mute the thread https://github.com/notifications/unsubscribe-auth/AADOWFXn2L--NIpd02KeD9Z2fq1JrUL4ks5tM_ENgaJpZM4Qkjs9 .