search

cssinjs / jss

JSS is an authoring tool for CSS which uses JavaScript as a host language.
https://cssinjs.org
MIT License
7.06k stars 397 forks source link

Add a rehydrate function #677

Open kof opened 6 years ago

kof commented 6 years ago

Initially I went against creating a separate rehydrate function, because we decided to not actually do rehydration, but instead just regenerate the styles, because it is fast enough and more robust.

So if I did `jss.rehydrate('.style-selector')´ it would be basically inserting the styles after this element and just removing the old style node.

Now as some people had issues with mismatching selectors from SSR, it makes sense to add some more logic to rehydrate, which will make sure in dev mode that user gets proper error report.

  1. Check that client and server setup uses the same NODE_ENV
  2. Check the module id matches between ssr and client (first part - module id)
    • Check the JSS versions matching between ssr and client
    • if hot reload is used and modules are reevaluated, a mismatch is possible
  3. Check the JSS instances counter matches between ssr and client. (second part - Jss instance id)
  4. If last part is not matching (rule id)
  5. Support streaming (https://github.com/cssinjs/react-jss/issues/203)

All checks could be done for e.g. if ssr generates a comment string which contains the information (dev mode only). Rehydration call checks the comment and prints a warning or error.

kof commented 6 years ago

cc @jedwards1211

Aetherall commented 6 years ago

Indeed, It could be really usefull to have those error reports. Actually managing packages which uses jss as dependency is a pain