How to use Ant to concatenate CSS files from external CSS @import file

ant, build, css

Solution

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>

Problem

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?

Original source