kripod/otion

Collected styles get cleared upon HMR on SSR development

jackyef opened this issue · 3 comments

jackyef commented

Description

This might be more of a question, but here it goes.

I am currently trying to write a boilerplate with preact + otion SSR. Everything works well on production, but there is a small issue on development.

Before any HMR happens, I am getting the extracted CSS correctly,

{
  style: '<style id="__otion">._zjik7{display:flex}._1y5pc60{color:white}._ppce79{height:20vmin}._1opdq3a{animation:_x7zxwf infinite 1.6s ease-in-out alternate}._2ji30f{width:80%}._hq6nwu{background:#333333}._1fr108o{border:1px solid #282c34}._1v03bf2{padding:2rem}._4zleql{display:block}._boonzp{width:30vw}._xsvpxu{margin:2rem auto}@media(max-width:600px){._17oe20f{padding:1.25rem}}@media(max-width:600px){._1ve5e7k{width:auto}}._1azakc{text-align:center}._13867xz{background-color:#282c34}._1uiai01{min-height:100vh}._qdeacm{flex-direction:column}._1h3rtzg{align-items:center}._f7ay7b{justify-content:center}._ski4pt{font-size:calc(10px + 2vmin)}._k19fg7{object-fit:contain}._17inu87{max-height:24vmin}._je8g23{pointer-events:none}._8dk3vg{margin-bottom:1rem}._1flj9lk{text-align:left}._1irf8uk{border-radius:2rem}@keyframes _x7zxwf{from{transform:scale(1)}to{transform:scale(1.06)}}</style>'
}

But after making any changes to the code, HMR is triggered and the next request will not get CSS anymore.

{ style: '<style id="__otion"></style>' }

I might be doing something wrong here, but I am not sure what. Here is the code that handle the SSR part.

Reproduction

  1. Clone the repo https://github.com/jackyef/preact-otion-snowpack
  2. Install dependencies: yarn
  3. Run the client static assets server: yarn start
  4. Run the SSR dev server: yarn dev:server
  5. Go to localhost:8001, the HTML document will include the extracted CSS.
  6. Make any changes to server/index.tsx, wait for HMR to trigger
  7. Go to localhost:8001 again, now the HTML document will no longer include CSS.

Expected behavior

After HMR, the CSS should still exist, or at least there is a way to make this happen on development with HMR.

Actual behavior

After HMR triggers, the CSS no longer exist on SSR.

Environment


## System:
 - OS: Windows 10 10.0.18363
 - CPU: (8) x64 Intel(R) Core(TM) i7-3770 CPU @ 3.40GHz
 - Memory: 4.10 GB / 15.97 GB
## Binaries:
 - Node: 12.18.0 - D:\Program Files\NodeJS\node.EXE
 - Yarn: 1.16.0 - D:\Program Files\Yarn\bin\yarn.CMD
 - npm: 6.14.4 - D:\Program Files\NodeJS\npm.CMD
## Browsers:
 - Chrome: 85.0.4183.83
 - Edge: Spartan (44.18362.449.0)
 - Internet Explorer: 11.0.18362.1
## npmPackages:
 - otion: ^0.6.1 => 0.6.1
kripod commented

Thank you for reporting! You seem to be doing everything fine.

During development, server-side prerendering of styles isn't required. Please make sure that the DOMInjector is in use on the client side for debugging. It should emit a visible output to the <style id="__otion"> tag.

jackyef commented

Thank you for your response!

I can see everything works fine after the JS is executed on the client side, the styles are injected to the <style id="__otion"> tag as well.

During development, server-side prerendering of styles isn't required.

While I do agree with this in most cases, but in some cases we might want to develop and test SSR on development, which is the thing I am trying to achieve here. Currently it works, but after HMR triggers, the VirtualInjector would lose all of its styles. Is there something I am missing here?

  • 👍1
kripod commented

After HMR, the server has no chance to inject styles into the HTML anymore, so the VirtualInjector won't have an effect. I'm closing this as the behavior seems to be as intended by your detailed description. Thank you for asking these questions!

  • 👍1