HeadlinesBriefing favicon HeadlinesBriefing.com

Phoenix LiveView 1.2 Adds Colocated CSS and Scope Support

Hacker News •
×

Phoenix LiveView 1.2 drops today, swapping its mix.exs requirement from "~> 1.1" to "~> 1.2.0". The update brings Colocated CSS support, letting developers embed style tags directly in HEEx templates. By marking tags with :type={MyApp.ColocatedCSS}, LiveView extracts the CSS at compile time, routing it to the normal build pipeline for Tailwind or Esbuild for modern front‑end toolchains.

Under the hood, LiveView now injects a unique phx‑r attribute on every root element, enabling the experimental @scope rule to confine CSS to a component’s boundaries. Although browsers still lack full support, the framework ships a pluggable @behaviour for custom scoping, giving teams immediate control over style isolation without waiting for standardization across all production environments.

Other tweaks include a TagFormatter behaviour for pretty‑printing <script> and <style> tags, automatic JSON encoding of Phoenix.LiveView.JS structs, and per‑module HEEx debug annotations. Documentation now separates the JavaScript client, and test warnings can be scoped by category. The release credits sponsor Dashbit and invites feedback via the Elixir forum or BlueSky to address any remaining edge cases.