implement gatsby-plugin-jss

[vovacodes]

this also adds a new lifecycle callback onClientRender to Browser API.
It is called when the initial render of a Gatsby App is done on the client.

[gatsbybot]

Deploy preview ready!

Built with commit ac3d08f

https://deploy-preview-1431--using-drupal.netlify.com

[gatsbybot]

Deploy preview failed.

Built with commit ac3d08f

https://app.netlify.com/sites/gatsbygram/deploys/59778bc9424ef2018a48eaab

[KyleAMathews]

This looks awesome! Thanks!

Any reason not to use https://www.gatsbyjs.org/docs/browser-apis/#onClientEntry?

[gatsbybot]

Deploy preview ready!

Built with commit ac3d08f

https://deploy-preview-1431--gatsbyjs.netlify.com

[vovacodes]

@KyleAMathews, when onClientEntry is called the <style> tag generated by JSS on the client is not yet in the DOM, so if at this moment we remove the one generated on the server there will be no styles applied to the html until ReactDOM.render is executed and JSS inserted the "client-side" styles to the DOM. This may cause the page to flash from styled view to unstyled and back to styled again.

[KyleAMathews]

So from this discussion it looks like they've solved the SSR/client hydration issues for the next version of JSS https://github.com/cssinjs/react-jss/pull/107

I'd rather not add an special-case API to work around a bug in another library... could we just add JSS support with the client styles hydration not quite working knowing this will get fixed soon on the next release?

[KyleAMathews]

@wizardzloy Ok with taking out the new API? Would love to get this in soon!

[KyleAMathews]

Also could you add a very simple example site similar to the example sites for other css plugins.

[vovacodes]

@kof could you please confirm that with react-jss v7.0.0 we don't need to remove the SSR-generated <style> tag after rendering on the client?

@KyleAMathews

Also could you add a very simple example site similar to the example sites for other css plugins.

Could you please provide a link to one of those for a reference?

[kof]

Removing critical css style tag is still required after application was mounted. Just added a note to the readme of react-jss. It was previously documented in the core only.

We never perceived this as a bug and had no plans to change it for now for basically 2 reasons:

1. it is easy to remove a style node
2. It gives you some freedom in how you would like to implement ssr styles and critical styles.

Also note that not removing it might have no negative consequences. It will though if resulting runtime css differs to the ssr and conflicts, leading to ssr overriding the client-side. This might happen though in some cases, so better remove it.

[KyleAMathews]

@kof I don't understand why removing the SSR styles is necessary. Are styles generated differently during SSR? Why would it matter if they're there or not?

[kof]

@kof I don't understand why removing the SSR styles is necessary. Are styles generated differently during SSR? Why would it matter if they're there or not?

JSS has http://cssinjs.org/json-api?v=v8.1.0#function-values which is mutative. On the server, one specific state is used, on the client, state might change over time, but the same CSS rule is used which has the same selector, but a different property.

[KyleAMathews]

But if the initial props used are the same on both server and client we're fine?

[kof]

yes, as long as props don't change at runtime, also not in the future.

…

On Jul 15, 2017 17:18, "Kyle Mathews" ***@***.***> wrote: But if the initial props used are the same on both server and client we're fine? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#1431 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AADOWJ7VVtZhfDLzNyax3uwYIJAiavp5ks5sONg5gaJpZM4OR5zG> .

[vovacodes]

@KyleAMathews I really like the idea of keeping the API surface as small as possible but doesn't onClientRender look quite logical to allow the plugins to hook to? We build Gatsby on top of React and this hook maps perfectly to the React's API do you see any particular issue with having it onboard?

[kof]

Mb it helps if you show more useful use cases. I understand the hesitation for adding a new hook function which needs to be maintained when there is only one particular use case which sounds like an optional. Mb its good to see a general usefulness using some examples.

[KyleAMathews]

Change the version to 1.0.0

[KyleAMathews]

yes, as long as props don't change at runtime, also not in the future.

Ok, so to be safe they'd definitely need removed.

This is a low-risk API to add and there's perhaps other use cases and I'd definitely like to support JSS. Let's change the name of the API though to onInitialClientRender as the current name makes it seem like it'll be called on every render.

[vovacodes]

@KyleAMathews Thanks for the review and feedback, I changed the name of the hook to onInitialClientRender, added using-jss website to the examples, updated the version of react-jss to the latest stable version - 7.0.2

[KyleAMathews]

Awesome! Really happy to have a JSS plugin added!

[KyleAMathews]

Deploy preview failed.

Built with commit ac3d08f

https://app.netlify.com/sites/using-glamor/deploys/59778bca424ef2018a48eabd

[KyleAMathews]

Deploy preview failed.

Built with commit ac3d08f

https://app.netlify.com/sites/using-contentful/deploys/59778bcb424ef2018a48eac3

[jlengstorf]

Hiya @wzrdzl! 👋

This is definitely late, but on behalf of the entire Gatsby community, I wanted to say thank you for being here.

Gatsby is built by awesome people like you. Let us say “thanks” in two ways:

1. We’d like to send you some Gatsby swag. As a token of our appreciation, you can go to the Gatsby Swag Store and log in with your GitHub account to get a coupon code good for one free piece of swag. (We’ve got t-shirts and hats, plus some socks that are really razzing our berries right now.)
2. If you’re not already part of it, we just invited you to join the Gatsby organization on GitHub. This will add you to our team of maintainers. You’ll receive an email shortly asking you to confirm. By joining the team, you’ll be able to label issues, review pull requests, and merge approved pull requests.

If you have questions, please don’t hesitate to reach out to us: tweet at @gatsbyjs and we’ll come a-runnin’.

Thanks again! 💪💜