What is colocated CSS in Phoenix LiveView 1.2?

Colocated CSS allows developers to embed CSS styles directly within HEEx templates, scoped to specific components, reducing style conflicts and improving modularity.

Is the @scope rule fully supported in browsers?

No, the @scope rule is not yet well supported across browsers and remains an experimental feature in LiveView 1.2. Developers can implement custom scoping strategies.

How do I enable colocated CSS in my LiveView project?

You need to update your mix.exs to include ~> 1.2.0 for phoenix_live_view and use the new compile-time configuration for root_tag_attribute if desired. The feature is opt-in and requires some setup.

What other improvements are included in LiveView 1.2?

Additional enhancements include automatic encoding of JS structs during push events, configurable HEEx debug annotations, and a new TagFormatter behaviour for script and style tags.

Will scoping be enabled by default in future versions?

It is currently not planned to enable scoping by default due to browser support issues. Future support depends on browser compatibility and community feedback. Source: Hacker News

Phoenix LiveView 1.2 Released - The Idea Magazine

TL;DR

Phoenix LiveView 1.2 has been released, adding support for colocated CSS, new compile-time features, and minor improvements. The update enhances component styling and developer flexibility.

Phoenix LiveView 1.2 is now available, introducing colocated CSS support and several small but impactful enhancements for Elixir developers working with real-time web applications.

The release of Phoenix LiveView 1.2 builds on previous versions by adding colocated CSS, allowing developers to embed and scope CSS directly within HEEx templates. This feature leverages the experimental @scope rule, enabling CSS rules to be limited to specific component boundaries. The update also includes new compile-time configurations, such as the optional injection of phx-r attributes for template boundary identification, and improvements like automatic encoding of Phoenix.LiveView.JS structs during push events.

Other minor enhancements include customizable HEEx debug annotations, configurable test warnings, and a new TagFormatter behaviour for formatting