Есть какой-то инструмент для сравнения и объединения стилей из файлов css?

Question

[Александр Синицын]

Надо сравнить файл с файлом и добавить только те стили которых там ещё нет.

Comments

[xmoonlight]

Я не знаток, но, как мне кажется, можно написать на JS за 1-2 часа.

Answer 1

[ildar r. khasanshin]

1 сделать рез.копии двух файлов
2 пройтись по каждому через csscomb.com - после этого будет наглядно видно различающиеся блоки
3 синхронизировать файлы через winmerge.org (win) или meldmerge.org (unix)

Answer 2

[xmoonlight]

Речь идёт о создании critical.css, который будет содержать все основные стили.

Через файловую структуру:
1. Нужно распарсить файл со стилями в "дерево" зависимых объектов (сохраняя топологию вложенности/зависимостей стилей внутри каждой из веток отдельно взятого стиля)
2. Затем выполнить объединение полученных структур ("деревьев")
3. На основе полученного "дерева" (после операции объединения) - создать новый файл.

Через рендеринг:
Кравлером в автоматическом режиме через инъекцию JS, который будет собирать стили для всех объектов DOM для каждой страницы и затем делать операцию объединения ("merge").
Возможные проблемы, которые мне видятся:
1. одинаковые идентификаторы с разными стилями для объектов, находящихся на разных страницах.
2. оптимизация стилей при создании общего стиля с учётом media-запросов и т.д.

Задачка - не простая...

Answer 3

[Павел Радьков]

winmerge.org/?lang=ru или другие подобные инструменты (даже в total commander есть похожий функционал).

Comments

[Александр Синицын]

Кажется они сравнивают файлы, а не строят дерево css-стилей.

Answer 4

[Алексей]

Вдруг кому пригодится:
Если знакомы с IDE Sublime Text, то есть специальный плагин для сравнения содержимого двух файлов ( загуглите: sublime text compare side by side). Плагин только покажет различия, менять придётся ручками.

Comments

[ildar r. khasanshin]

если одинаковые или схожие блоки в двух файлах находятся в разных местах, то проблематично будет синхронизировать, поэтому шаг два необходим будет в этом случае

[ildar r. khasanshin]

в compare side by side неудобно вручную переносить блоки
я настроил через https://github.com/colinta/SublimeFileDiffs вызов meldmerge.org
и через горячую клавишу сравнение текущей вкладки со следующей https://habrahabr.ru/post/148842/

Answer 5

[Владислав]

PhpStorm \ WebStorm View - Compare With

Comments

[ildar r. khasanshin]

я так понял Александру Синицыну нужно не просто сравнить файлы, а логический анализ css - поэтому как вариант предложил ему вначале отсортировать блоки/строки в двух файлах и потом уже сравнивать через спец. софт