Open c4lliope opened 1 year ago
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.
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
toassets/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 inlib/pain_web/live/demo.ex
, on address0.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 myconfig/dev.exs
: