What is colocated CSS in LiveView 1.2?

Colocated CSS allows developers to define CSS styles directly within HEEx templates, scoped to specific components using attributes and partial support for CSS scoping rules.

Is full CSS scoping supported in LiveView 1.2?

No, full CSS scoping using the @scope rule is not yet supported across browsers. LiveView 1.2 offers partial, experimental support with custom configuration options.

What other improvements are included in LiveView 1.2?

Improvements include customizable formatting for and tags, automatic encoding of JS structs during push_event, and configurable HEEx debug annotations and test warnings.

How do I enable colocated CSS in my project?

Update your mix.exs dependency to ~> 1.2.0 and re-fetch dependencies. Use the tag within your HEEx templates to define styles.

What is the significance of this release for Elixir developers?

This release simplifies styling and improves component modularity in LiveView applications, making it easier to build maintainable, real-time web interfaces. Source: Hacker News

Phoenix LiveView 1.2 Released

TL;DR

Phoenix LiveView 1.2 has been officially released, adding support for colocated CSS and several small but impactful improvements. The update simplifies styling in LiveView components and enhances template compilation, though full CSS scoping remains experimental.

Phoenix LiveView 1.2 is now available, introducing colocated CSS support and several improvements to template compilation and JavaScript handling, aimed at enhancing developer experience.

The new release, version 1.2, enables developers to colocate CSS within HEEx templates, leveraging the @scope rule and phx-r attributes to scope styles to specific components. This builds upon existing colocated JavaScript features introduced in LiveView 1.1.

While the framework now supports colocated CSS, full CSS scoping using the @scope rule is not yet included due to limited browser support. Instead, LiveView offers a configurable approach with a custom phx-r attribute and a partial implementation of the @scope rule, allowing early adopters to experiment with scoped styles.

Additional improvements include the ability to customize the formatting of