[Using a plugin] Scoped CSS changes require two page reloads.

Describe the bug

The main reason I chose to use Surface is for the inline, scoped styling rules per-component. Amazing!

Sadly, there is a synchronization issue on the live page reloads; compiling the CSS from assets/css/_components.css to assets/css/app.css requires longer than the live page reload takes to complete.

(This could be because I am including a Tailwind plugin called DaisyUI, bulking up my CSS.)

Regardless, my in-component CSS changes only appear after a second file-save. Both file saves reload the page. On the first pass, no changes have been applied to the CSS. Some duration after the first reload, the _components.css is changed on disk, so any additional file save reloads the page again and applies those changes.

How to reproduce it

This issue appears in my codebase for a client. You could clone and run https://base.bingo/code/pain/src/branch/daisy - a basic Phoenix LiveView app using Surface, and the daisyui NPM package as a Tailwind plugin. I'm running these experiments in lib/pain_web/live/demo.ex, on address 0.0.0.0:4000/demo.

This is my initial experience using Surface, so there is a chance this is a common issue.

The behavior you expected

Synchronized scoped-CSS changes appearing on each reload.

Your Environment

Surface: v0.11.0 LiveView: v0.19.5 Elixir: v1.15.4

Additional Approaches

I had no luck adding _components.css to my config/dev.exs:

config :pain, PainWeb.Endpoint,
  reloadable_compilers: [:gettext, :elixir, :app, :surface],
  live_reload: [
    patterns: [
      ~r"lib/pain_web/(controllers|live|components)/.*(ex|heex|sface|js)$",
      ~r"assets/css/_components.css",
      ~r"priv/catalogue/.*(ex)$",
      ~r"priv/gettext/.*(po)$",
      ~r"priv/static/.*(js|css|png|jpeg|jpg|gif|svg)$",
    ]
  ]

This problem is based on the high reload duration caused by including the DaisyUI plugin in my assets/tailwind.config.js. Another issue I had come across someplace recommended dropping the plugin, and using the CDN approach for adding DaisyUI to the codebase.

Once I began including DaisyUI from the CDN, the scoped CSS rules began applying on each page reload, as hoped.

Since this is a single case of a larger class of problems, can anyone recommend how to pause LiveReload as long as the CSS is being recalculated? I can imagine other cases where coders go crazy on this issue, if many CSS rules all need compilation. The CDN is a nice bypass in my case, though a real solution should be possible also.

surface-ui / surface