Styling with styled-jsx and React renderer

[ussuritiger]

I am trying to use React renderer with style-jsx but cannot make styling work. Babel and Webpack is properly configured so the build is going well. Markup with styled-jsx unique classes is rendered correctly inside SkateJS custom element however styling itself is missing. Any ideas on why styled-jsx does not work inside custom elements build with SkateJS? Thanks.

[treshugart]

It's almost certainly because styled-jsx is inserting styles into the head and Skate creates a shadow root. Related issue: vercel/styled-jsx#28.

If you're not doing anything super crazy with your styles, you can try using something like https://github.com/treshugart/shadow-css.

[ussuritiger]

Thanks @treshugart for quick reply. In my case React components need to be shared between React project and web components. React project uses styled-jsx so it would be nice to make SkateJS web components able to use that shared React components with styled-jsx using React renderer.

Another thing I was trying to do is to use flush from styled-jsx/server like explained here: https://github.com/zeit/styled-jsx#server-side-rendering. So the idea is to get all styles with flush and put them inside SkateJS component in the same way I can put just <style>...</style> element inside SkateJS web component. However this does not work for me either. Any ideas about this approach?

[treshugart]

Is there a way for you to share a working example, gist or some code? Happy to take it from there to try and get something working.

I'll see if I can ping Zeit to see if they've found an easier solution for this.

[treshugart]

Pinged: vercel/styled-jsx#28 (comment).

[ussuritiger]

I've created a very simple demo: https://github.com/ussuritiger/skatejs-react-styled-jsx

The only difference with real case is that shared components are installed with yarn/npm from GitHub (in this demo shared React component is in ./src/shared-components folder).

Thanks for your time and enthusiasm. Hopefully you have some ideas how to make this combination work.

[ussuritiger]

Hey @treshugart, did you have a chance to look at the example I’ve provided?

[treshugart]

Hey @ussuritiger. Sorry for the late reply. That link is 404'ing.

[ussuritiger]

Sorry, please have a look, it is back @treshugart

[OKNoah]

@ussuritiger 404 again...