Explanation

Tapestry does not allow joining css files in Stack mode as we can do with Javascript (Jira TAP5-1377). However, we can do some procedures to simulate this behavior.

Example 1 with Maven

We can join several files with a Maven plugin and import the result file into our page.

<plugin>
	<groupId>croche.maven</groupId>
	<artifactId>maven-merge-file-plugin</artifactId>
	<version>0.4</version>
	<executions>
		<execution>
			<id>merge-css-files</id>
			<phase>process-resources</phase>
			<goals>
				<goal>merge</goal>
			</goals>
			<configuration>
				<merges>
					<merge>
						<targetFile>target/classes/META-INF/assets/css/stack.min.css</targetFile>
						<sourceDirs>
							<sourceDir>src/main/resources/META-INF/assets/css</sourceDir>
						</sourceDirs>
						<includes>
							<include>file1.css</include>
							<include>file2.css</include>
						</includes>
					</merge>
				</merges>
			</configuration>
		</execution>
	</executions>
</plugin>

You can download the Maven plugin on the repository below:

<pluginRepositories>
	<pluginRepository>
		<id>croche-releases</id>
		<url>http://croche.googlecode.com/svn/repository/releases</url>
	</pluginRepository>
</pluginRepositories>

Finally, we have to import each css and the generated stack in our pages/layout. Depending on the executing mode (PRODUCTION_MODE=true) we have to import one or another.

public class CssStackPage {

	@Environmental
	private JavaScriptSupport javaScriptSupport;

	@Inject
	@Symbol(SymbolConstants.PRODUCTION_MODE)
	private boolean productionMode;

	@Inject
	@Path("css/stack.min.css")
	private Asset stackMinCss;

	@Inject
	@Path("css/file1.css")
	private Asset file1Css;

	@Inject
	@Path("css/file2.css")
	private Asset file2Css;

	public void setupRender() {

		/**
		 * Css styles
		 */
		if (productionMode) {
			javaScriptSupport.importStylesheet(stackMinCss);
		}
		else {
			javaScriptSupport.importStylesheet(file1Css);
			javaScriptSupport.importStylesheet(file2Css);
		}

	}

}

Example 2 with less

We can join several css and less files in only one by creating a less file that imports the required files.

@import (inline) "./file1.css";
@import (inline) "./file2.css";

Source

/*
 * AUTOCOMPLETE
 */
.autocomplete-form .tt-dropdown-menu .tt-suggestion{
   padding: 3px 5px!important;
}
.autocomplete-form .autocomplete-item{
   margin: 2px 0;
   overflow: hidden;
}
.autocomplete-form .autocomplete-item .img-container{
   float: left;
   width: 50px;
}
.autocomplete-form .autocomplete-item .img-container img{
   margin: 0;   
}
.autocomplete-form .autocomplete-item .text-container{
   float:left;
   margin-left: 5px;
   width: calc(100% - 55px);
}
.autocomplete-form .autocomplete-item .cat, .autocomplete-item .cat strong{
   font-weight: 300;
   font-size: 11px;
   display: inline-block;
}