4

How can I use Ant to concatenate a list of CSS files, specified in 1 external CSS file with @imports?

The CSS file that specifies css files and file order looks like this:

 @import url('header.css');
 @import url('footer.css');
 @import url('module/module1.css');
 @import url('module/module2.css');

I want Ant to load and concat all files specified in the css into a single file. Is this possible?

1 Answer 1

3

You can do this using an Ant loadfile task, followed by a concat.

Here's an example, the linecontainsregexp might be optional, if your css file with the import statements contains only import statements, with one per line. (If that css file is more complex, then the below will need refinement.)

<loadfile property="master.css" srcfile="master.css">
    <filterchain>
        <linecontainsregexp>
            <regexp pattern="@import url" />
        </linecontainsregexp>
        <replaceregex pattern=".*'(.*)'.*" replace="\1," />
        <striplinebreaks/>
    </filterchain>
</loadfile>

The result of that is a property containing a comma-delimited list of the css files in the required order. An Ant filelist can then be used to specify them in the concatenation:

<concat destfile="all.css">
    <filelist files="${master.css}" />
</concat>
Sign up to request clarification or add additional context in comments.

1 Comment

Works amazingly well. A million thanks! You also just solved another "impossible" problem; that a fileslist (that is a real file) seems not respect order when concatenating. Putting the fileslist as a comma separated property variable is clever.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.