gulp-uncss с эквалайзером высоты в Zurb Foundation

Question

Я пытаюсь использовать gulp-uncss удалить ненужный CSS с сайта Zurb Foundation.

На сайте я использую Эквалайзер Фонда, чтобы сделать две колонки одинаковой высоты. Это работает путем добавления data- приписать элементу:

<div data-equalizer>
  <div data-equalizer-watch>
  <div>
  <div data-equalizer-watch>
  <div>
<div>

Когда страница загружается, Foundation определяет высоту двух элементов и внедряет встроенный стиль, чтобы установить высоту элементов на большую из двух высот элемента. Результат:

<div data-equalizer>
  <div data-equalizer-watch style="height: 256px;">
  <div>
  <div data-equalizer-watch style="height: 256px;">
  <div>
<div>

Когда я добавлю gulp-uncss к моему gulpfile.js эквалайзер больше не работает. data- атрибуты все еще присутствуют в файле HTML, но встроенные стили не добавляются.

Я пытался использовать ignore вариант в gulp-uncss игнорировать height но не повезло. Встроенный стиль больше не добавляется в документ HTML.

Есть ли вариант в gulp-uncss что позволит эквалайзеру делать свою работу?

Answer 1

Я смог получить gulp-uncss работая с использованием ignore параметр в UnCSS,

Добавление:

ignore: [/^meta.foundation/, /f-topbar-fixed/, /contain-to-grid/, /sticky/, /fixed/]

в uncss() сохранил все необходимые CSS. Наиболее важным из них является /^meta.foundation так как это позволяет Foundation JS внедрять стили. Остальные значения /f-topbar-fixed, contain-to-grid, /sticky/ а также /fixed/ все они специфичны для модулей Foundation JS, которые я использую. Вышеуказанная работа для .sticky topbar.

Если вы используете другие модули JS, вам нужно определить, какие классы вводятся и добавить их в ignore массив.