Как я могу сравнить 2 CSS-файла, чтобы увидеть, являются ли они * семантически * идентичными?

Question

Я выполняю рефакторинг некоторого кода SCSS и хочу убедиться, что сгенерированный код CSS не изменяется семантически , даже если он изменяется буквально . Рефакторинг состоит из создания миксина и замены фрагмента кода, дублированного во многих местах, включением миксина.

Проблема в том, что в некоторых местах атрибут a был указан до атрибута b, но в других местах он был обратным. Использование миксина, конечно, дает последовательный порядок для всех его применений. Таким образом, простое сравнение текста дает разницу, которую я не хочу.

Например, если я начну с этого кода:

.foo {
  background: white;
  color: brown;
}

.bar {
  color: brown;
  background: white;
}

... и затем рефакторинг егоto:

@mixin my-colors {
  background: white;
  color: brown;
}

.foo {
  @include my-colors
}

.bar {
  @include my-colors
}

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

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

Answer 1

Вы можете сделать это с помощью программы. Если вы вставите атрибуты в массивы для предыдущей версии и вычтете атрибуты из массива в последующей версии, измененный логически класс приведет к созданию пустого массива. Слишком просто в Ruby!

Answer 2

Есть несколько способов сделать это. Если вы используете редактор кода, например Notepad ++, у него есть функция для сравнения двух открытых полей. У каждого редактора кода есть это. Есть даже онлайн-инструменты, которые могут сравнивать два текста / кода, такие как https://www.diffchecker.com.