Новая CSS-инфраструктура Chrome DevTools
Крити Сапра написала статью про обновлённый подход подключения CSS в кодовой базе Chrome DevTools — "Modernising CSS infrastructure in DevTools".
В кодовой базе DevTools очень долгое время использовалась устаревшая модульная система. С её помощью происходило разрешение зависимостей между JS-файлами и подключение CSS. При переходе на TypeScript возник вопрос отказа от старой модульной системы и миграции существующих стилей. Самым подходящим вариантом стала автоматическая конвертация стилей в JS-файлы, которые экспортируют объект CSSStyleSheet
. Таким образом из любого сконвертированного файла можно импортировать стили и применить их к веб-компонентам с помощью adoptedStyleSheets
.
Такое решение позволило избавиться от проблемы дублирования стилей, от потенциальной коллизии названия классов и подготовило код для дальнейшей миграции на CSS Module Scripts. В статье также говорится о том, что сама спецификация CSS Module Scripts родилась из задачи обновления модульной системы в DevTools.
https://developer.chrome.com/blog/modernising-css-infra-in-devtools/