What is new in Phoenix LiveView 1.2?

LiveView 1.2 introduces colocated CSS support, improvements to JavaScript encoding, configurable HEEx debug annotations, and other minor enhancements.

How do I enable colocated CSS in my project?

Update your mix.exs dependency to require '~> 1.2.0' for phoenix_live_view, re-fetch dependencies, and add CSS within your HEEx templates using the :type attribute. Refer to the documentation for detailed setup instructions.

Is CSS scoping fully supported in LiveView 1.2?

No. Full CSS scoping support using the @scope rule is not yet supported across browsers. LiveView 1.2 provides an experimental, opt-in approach, but actual scoping features are still under development.

What are the main benefits of colocated CSS?

Colocated CSS allows styles to be embedded directly within component templates, improving modularity, reducing global CSS conflicts, and simplifying style management.

What features are planned for future LiveView releases?

Future updates are expected to include broader CSS scoping support, enhanced developer tooling, and further improvements to component encapsulation and styling strategies. Source: Hacker News

Phoenix LiveView 1.2 Released

TL;DR

Phoenix LiveView 1.2 has been officially released, adding colocated CSS capabilities and small enhancements. Developers can now embed CSS directly within HEEx templates, with ongoing work on CSS scoping support.

Phoenix LiveView 1.2.0 has been officially released, introducing colocated CSS support and other improvements, enabling developers to embed CSS directly within HEEx templates.

The new version, LiveView 1.2, builds on previous work by allowing developers to colocate CSS in HEEx templates, similar to how colocated JavaScript is handled. This is achieved through the use of the :type attribute, which extracts CSS content into a dedicated folder during compilation, facilitating integration with bundlers like Tailwind or Esbuild.

One of the key features is the potential for CSS scoping using the @scope rule, which allows rules to apply only within specific component boundaries. However, full browser support for @scope is limited at this time. The LiveView team has implemented an opt-in configuration for scoping via a new compile-time setting, but actual scoping functionality remains experimental and not shipped by default.

In addition to CSS features, LiveView 1.2 introduces several smaller enhancements: a new behavior for formatting