I’m not sure how I feel about the CSS integration. Nor the collocated JS that was somewhat recently released.
On one hand, yes it is convenient, but on the other it could become a huge mess. It reminds me of Rails 2.x where it became almost impossible to debug, or fix front end code that used rjs or whatever it was called. Because disparate snippets of JS were littered throughout your code base in files that were hard to find.
I’m sure the Phoenix team has put a lot of effort into it, and I truly hope it slaps. I myself am just really hesitant to use it, when CSS files and non colocated JS work just fine. I’ll probably be waiting a couple years before giving it a try
I quite like the colocated JS. I much prefer to define a components "hook" code inside the component. I think you could abuse it, I would never put colocated JS just in some template to include it "just to avoid writing a js file" but for keeping `email_validator.js` code right next to the `email_input` component, its quite nice I think.
The nature of them being basically forced to inherit the module name means its pretty obvious that `MyAppWeb.Admin.Components.EmailValidator` is in the `MyAppWeb.Admin.Components` module. I also think it probably strongly depends on how much JS you actually have, most of my liveview apps have it "here and there" to enhance something or minor DOM fiddling, if you are booting react components everywhere and have some other pile of existing js code, its probably not so good.
Surface, vue, and svelte have all have colocated css and js for ages. It usually results in easier to maintain code, without having to resort to unsolutions like tailwind
Global styles can still be global, but component level styles stay at the component level
To be honest that's copied from the JS frameworks. I tend to agree with you but sometimes scoped CSS is nice to have.