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

Question

I have a process of concatenation several css files into single one.

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;
}

need to be converted into 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;
}

Some of those css files may contain @namespace directive which needs to be placed at the top of the css file where it is used. Problem is that concatenation makes some @namespace directives placed in the middle of the new file which brokes their functionality.

The task can be divided into two steps:

collect all occurencies of @namespace directives and put it into separate css file
concatenate all css files (including @namespaces separated one at first position) into single css file

Resulting css file will have @namespace directives at the begining of the file following of the content of all the original files.

I am unable compose step 1 where I need to go through the list of provided files (defined in fileset, patternset or included definition) look at the content and pick @namespaces e.g. by some regexp pattern. Puting found @namespaces into separate file should follow (this should be the easier part of step 1).

Any advices?

martin clayton · Accepted Answer · 2020-01-09 23:49:30Z

This might be a suitable starting point.

<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>

In this example:

The source css files are in the css_files directory.
Two work files are created: one for the namespaces, one for the rest of the css.
Two Ant <concat> tasks are used: one to gather the namespaces, one for the rest.
Each concat uses a filterchain with a regular expression.
A third concat joins the collected namespaces to the rest of the css in a single file called all.css.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related