What is colocated CSS in Phoenix LiveView 1.2?

Colocated CSS allows developers to define CSS styles directly within HEEx templates, which are then extracted and processed during compilation, improving component encapsulation and maintainability.

Is full CSS scoping supported in LiveView 1.2?

No, full CSS scoping using the @scope rule is not yet supported by default due to limited browser support. It remains an experimental feature that developers can opt into with custom strategies.

What other improvements are included in LiveView 1.2?

Additional updates include customizable formatting for and tags, automatic encoding of JS structs during push_event, and configurable debug annotations for HEEx components.

When will full support for scoped CSS be available?

This depends on browser support for the @scope rule. There is no confirmed timeline, but ongoing discussions and experimental features suggest it may arrive once compatibility improves. Source: Hacker News

Science & Technology

Phoenix LiveView 1.2 Released

Phoenix LiveView 1.2 is now available, introducing colocated CSS and small improvements to enhance component styling and developer experience.

3 minute read

Up next

Data processing agreement tracker for micro SaaS teams

TL;DR

Phoenix LiveView 1.2 has been officially released, adding support for colocated CSS in HEEx templates. The update also includes several small enhancements, but full CSS scoping remains experimental due to browser support issues.

Phoenix LiveView 1.2.0 is now available, introducing colocated CSS support for HEEx templates and various minor improvements, according to the official release notes.

The new version simplifies the process of colocating CSS within LiveView components by allowing developers to define styles directly inside HEEx templates using a dedicated

Phoenix LiveView 1.2 Released

Up next

Data processing agreement tracker for micro SaaS teams

Author

Tech Trend Trove Team

Share article