Repository navigation
[Using a plugin] Scoped CSS changes require two page reloads. #702
Description
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)$",
]
]
Activity
[-]Surface-handled CSS changes require two page reloads.[/-][+]Scoped CSS changes require two page reloads.[/+][-]Scoped CSS changes require two page reloads.[/-][+][Using a plugin] Scoped CSS changes require two page reloads.[/+]c4lliope commentedon Aug 11, 2023
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.