Я сделал Vite-плагин, который сохраняет изменения CSS прямо в исходники

Значимый прорыв формирует отрасль ИИ: Artyx71 8 минут назад Я сделал Vite-плагин, который сохраняет изменения CSS прямо в исходники Средний 7 мин 61 JavaScript * CSS * Open source * TypeScript * ReactJS * Обзор Из песочницы Это моя первая статья на Хабре. Буду рад конструктивной критике в комментариях. Каждый раз, когда я хотел поправить отступ или цвет в процессе разработки, я делал одно и то же:открыл DevTools → нашёл элемент → поменял значение → понравилось → скопировал → переключился в редактор → нашёл файл → вставил.

Это семь шагов ради однострочного изменения. Я сделал LiveStyleSync, чтобы это был один шаг. Что это такоеLiveStyleSync добавляет небольшую панель поверх вашего Vite-приложения в режиме разработки.

Технические детали

Вы кликаете на любой элемент, редактируете CSS-свойства прямо в панели, и изменение записывается в исходный файл. Vite HMR подхватывает изменение мгновенно — без перезагрузки страницы. Клик на элемент → редактируем значение → Vite HMR обновляет браузер → исходник обновлёнНикакого копи-паста.

Никакого переключения вкладок. Быстрый стартnpm install livestylesync-overlay livestylesync-vite-plugin// vite. config from "livestylesync-vite-plugin";​export default defineConfig({ plugins: ,});// main from "livestylesync-overlay";​if (import.

Панель появится в углу приложения. Как это работает изнутриМост между CSSOM и исходным файломЭто главная техническая задача в проекте. Браузер знает CSS-правило, но не знает, в какой строке какого файла оно объявлено.

Отраслевые последствия

Нужно связать document. styleSheets с конкретным . scss файлом на диске.

У объекта CSSStyleSheet есть два пути получить источник:Случай 1 — внешний файл. Если CSS подключён через , у листа есть sheet. href вида Из этого URL можно вытащить путь.

Случай 2 — Код в оверлее читает этот атрибут:for (const sheet of Array. styleSheets)) { let fileUrl = sheet. href; // для тегов​ if (!

Событие, по словам экспертов, усилит конкуренцию в сфере ИИ.