Css stack


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.


You can download the Maven plugin on the repository below:


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 {

	private JavaScriptSupport javaScriptSupport;

	private boolean productionMode;

	private Asset stackMinCss;

	private Asset file1Css;

	private Asset file2Css;

	public void setupRender() {

		 * Css styles
		if (productionMode) {
		else {



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


.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{
   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;