We’re launching Lyria 3.5 in Google Flow Music, with advances across musicality, lyrics, vocals, and creative control
deepmind.google·6d ago
AI Engineering
Hacker News·Jun 14·5 min read
Phoenix LiveView 1.2 Released
TL;DR
Prior to LiveView 1.2, developers faced challenges in managing CSS styles that could unintentionally affect other components. LiveView 1.2 introduces Colocated CSS, allowing styles to be defined directly within HEEx templates and scoped using the @scope rule.
✦ Why It Matters
Engineers can now write scoped CSS directly in templates, reducing style conflicts and improving component modularity.
Key Takeaways
- Update your mix.exs to use LiveView 1.2.
- Utilize Colocated CSS for better style management.
- Implement the @scope rule for scoped styles.
- Integrate with bundlers like Tailwind or Esbuild.
Full Summary
In previous versions of Phoenix LiveView, managing CSS styles across components could lead to unintended styling conflicts. LiveView 1.2 addresses this by introducing Colocated CSS, which allows developers to write CSS directly within HEEx templates.
This version builds on the Colocated JavaScript feature, enabling styles to be extracted at compile time into a designated folder for processing by bundlers like Tailwind or Esbuild. The new @scope rule helps to limit the application of styles to specific components by using unique attributes to identify the root of a template.
This approach not only enhances the organization of styles but also ensures that they do not interfere with other elements on the page. By controlling how HEEx compiles to HTML, developers can achieve better encapsulation of styles.
Overall, this update significantly improves the developer experience and the maintainability of applications.