Explicación

Tapestry no ofrece soporte para unir ficheros Css a modo de Stack como ocurre con Javascript (mientra no finalizan el Jira TAP5-1377). Sin embargo, podemos utilizar varios mecanismos para poder simular ese comportamiento.

Ejemplo 1 con Maven

Podemos unir multiples ficheros mediante un plugin de Maven e importarlo en nuestra Página.

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

El plugin se encuentra en el siguiente repositorio:

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

Por último, en nuestra página/layout tendremos que importar cada uno de los css individuales y el stack css generado y, en función del modo de ejecución (PRODUCTION_MODE=true) importar uno u otro.

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

	}

}

Ejemplo 2 con less

Podemos unir multiples ficheros css y less en uno solo creando un fichero less que importe los ficheros necesarios.

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