从css文件中收集字符串并将其持久保存到新的css文件中

Question

我有一个将多个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文件（包括@名称空间，在第一个位置分隔一个）合并为单个css文件

结果css文件将在所有原始文件内容之后的文件开头处带有@namespace指令。

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

有什么建议吗？

Answer 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将收集的名称空间与称为concat的单个文件中的其余CSS结合在一起。