Вышла версия 1.2.0 библиотеки Phoenix LiveView — обновиться можно просто поменяв номер в mix.exs. Главная фича — колоцированный CSS. В версии 1.1 уже можно было класть JavaScript и хуки прямо в HEEx-шаблоны, теперь то же самое работает и со стилями. Достаточно добавить в шаблон тег <style> с атрибутом :type = {MyApp.ColocatedCSS}, и на этапе компиляции LiveView вытащит содержимое в папку phoenix-colocated внутри _build. Оттуда его подхватит бандлер (Tailwind или Esbuild) и переработает как обычный CSS.
Чтобы стили из одного компонента не вылезали на всю страницу, их нужно scoping — для этого в современном CSS есть правило @scope. Оно принимает корневой селектор и опциональный селектор границы. LiveView автоматически проставляет на корневых элементах всех шаблонов атрибут phx-r, а на корнях компонента с колоцированным CSS — ещё и уникальный атрибут phx-css-*. Получается правило вида @scope ([phx-css-foo]) to ([phx-r]) { p { font-weight: bold; } } — теперь жирным станет только тот параграф, что внутри шаблона my_list, а соседние p на странице не тронуты. Правда, phx-r нужно включать отдельно через конфиг config :phoenix_live_view, root_tag_attribute: "phx-r" — это opt-in. Из-за колоцированного CSS пришлось переписать компиляцию HEEx: теперь она сначала токенизируется, потом парсится — так проще обрабатывать макрокомпоненты, не усложняя остальной код.
В самой версии 1.2.0 scoping по умолчанию не включён: браузеры ещё не везде поддерживают @scope (на момент июня 2026). Вместо этого LiveView даёт @behaviour, который можно реализовать для своего способа scoping — хоть тот же @scope, хоть другой метод. Из мелочей: появился Phoenix.LiveView.HTMLFormatter.TagFormatter — можно форматировать <script> и <style> в HEEx через любой инструмент (в документации пример с prettier). Структуры Phoenix.LiveView.JS теперь автоматически кодируются при отправке через push_event, если используется Jason или встроенный JSON. HEEx-аннотации для отладки можно настраивать на уровне модуля. Тестовые предупреждения группируются по категориям. Выделена отдельная документация для JavaScript-клиента. Спасибо Dashbit за спонсорство. Кодит Стеффен.