从 css 个文件中收集字符串并将它们保存到新的 css 个文件中

Collect strings from css files and persist them into new css file

我有一个将几个 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;
}

需要转换成all.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 文件

生成的 css 文件将在所有原始文件内容之后的文件开头具有 @namespace 指令。

我无法编写第 1 步,我需要浏览提供的文件列表(在文件集、模式集或包含的定义中定义)查看内容并选择 @namespaces,例如通过一些正则表达式模式。 将找到的@namespaces 放入单独的文件中(这应该是步骤 1 中比较容易的部分)。

有什么建议吗?

这可能是一个合适的起点。

<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.
  • 的文件中