What is colocated CSS in LiveView 1.2?

Colocated CSS allows developers to embed CSS directly inside HEEx templates, simplifying component styling and reducing external dependencies.

Does LiveView 1.2 support full CSS scoping?

No, full CSS scoping via @scope is not included due to limited browser support. Instead, manual scoping with the 'phx-r' attribute is provided as an alternative.

How do I enable colocated CSS in my project?

Update your mix.exs dependency to '~> 1.2.0' and follow the documentation to embed tags with the appropriate :type attribute inside your HEEx templates.

Are there any other significant improvements in LiveView 1.2?

Yes, improvements include customizable formatting for and tags, automatic encoding of JS structs, and configurable HEEx debug annotations.

When will full CSS scoping support be available?

The timeline depends on browser support for @scope; no specific date has been announced. The LiveView team is monitoring progress and may include native scoping in future versions. Source: Hacker News

Phoenix LiveView 1.2 Released

TL;DR

Phoenix LiveView 1.2 has been officially released, adding support for colocated CSS and other enhancements. The update simplifies styling within LiveView components, though full CSS scoping remains experimental due to browser support issues.

Phoenix LiveView 1.2.0 has been officially released, adding support for colocated CSS within HEEx templates, along with several smaller improvements. The update allows developers to colocate CSS with their components, streamlining styling workflows in Phoenix LiveView applications.

The key feature in LiveView 1.2 is the introduction of colocated CSS, building on previous work for colocated JavaScript. Developers can now embed CSS directly inside HEEx templates using a special

Phoenix LiveView 1.2 Released

Author

TechieUS Team

Share article