Соберите строки из файлов css и сохраните их в новый файл css - PullRequest
1 голос
/ 09 января 2020

У меня есть процесс объединения нескольких css файлов в один.

css1. css:

@namespace xlink "http://www.w3.org/1999/xlink";
use[xlink|href="#favorite-icon-svg"] {
  fill:#dbdbdb;
  fill-opacity:0;
}

css2. css:

body {
  background-color: red;
}

css3. css:

@namespace svg url(http://www.w3.org/2000/svg);
svg|a {
  text-decoration: none;
}

необходимо преобразовать во все. css:

@namespace xlink "http://www.w3.org/1999/xlink";
@namespace svg url(http://www.w3.org/2000/svg);

use[xlink|href="#favorite-icon-svg"] {
  fill:#dbdbdb;
  fill-opacity:0;
}
body {
  background-color: red;
}
svg|a {
  text-decoration: none;
}

Некоторые из этих css файлов могут содержать @namespace директива, которую нужно поместить в верхнюю часть файла css, где он используется. Проблема состоит в том, что конкатенация делает некоторые директивы @namespace размещенными в середине нового файла, что нарушает их функциональность.

Задача может быть разделена на два этапа:

  1. собирать все вхождения директивы @namespace и поместите их в отдельный css файл
  2. , объедините все css файлы (включая @namespaces, разделенные одной на первой позиции) в один css файл

Result Файл css будет иметь директивы @namespace в начале файла, следующего за содержимым всех исходных файлов.

Я не могу составить шаг 1, где мне нужно go просмотреть список предоставленных файлов (определяется в наборе файлов, шаблонах или включенном определении), посмотрите на содержимое и выберите @namespaces, например, с помощью некоторого шаблона регулярного выражения Затем следует поместить найденные @namespaces в отдельный файл (это должно быть более легкой частью шага 1).

Любые советы?

1 Ответ

2 голосов
/ 10 января 2020

Это может быть подходящей отправной точкой.

<property name="namespace_file" value="namespaces.css" />
<property name="other_file" value="other.css" />
<property name="all_file" value="all.css" />

<delete>
  <fileset dir="." includes="${namespace_file} ${other_file} ${all_file}" />
</delete>

<concat destfile="${namespace_file}">
  <fileset dir="css_files" includes="*.css" />
  <filterchain>
    <linecontainsregexp>
      <regexp pattern="^@namespace" />
    </linecontainsregexp>
  </filterchain>
</concat>

<concat destfile="${other_file}">
  <fileset dir="css_files" includes="*.css" />
  <filterchain>
    <linecontainsregexp negate="true">
      <regexp pattern="^@namespace" />
    </linecontainsregexp>
  </filterchain>
</concat>

<concat destfile="${all_file}">
  <fileset dir="." includes="${namespace_file} ${other_file}" />
</concat>

В этом примере:

  • Исходные файлы css находятся в каталоге css_files.
  • Создаются два рабочих файла: один для пространств имен, один для остальных css.
  • Используются две задачи Ant <concat>: одна для сбора пространств имен один для остальных.
  • Каждый concat использует цепочку фильтров с регулярным выражением.
  • Третий concat объединяет собранные пространства имен с остальными css в одном файле с именем all.css.
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...