Remove Tapestry Default Css files

Explanation

By default, Tapestry includes 4 css files. Although these 4 files are small, according to PageSpeed Insights, we have to wait for these files to carry on processing the page.

In my webapps, I usually delete these files and include the parts needed for each case.

For example, If I don´t work with tree's, I can remove directly tapestry5/tree.css.

Example

@Contribute(JavaScriptStack.class)
@Core
public static void addAppModules(final OrderedConfiguration<StackExtension> configuration) {

	/**
	 * Remove the default css with null value
	 */
	configuration.override("exception-frame.css", null);
	// configuration.override("tapestry.css", null);
	configuration.override("tapestry-console.css", null);
	configuration.override("tree.css", null);

}

Source

/* Applied to an input element to provide feedback that something is waiting on an Ajax request:
   examples include server-side validation, or autocompletion. An Ajax "throbber" is displayed
   on the right side of the field. */
input.ajax-wait {
    background: url(ajax-loader.gif) no-repeat center right;
}

th[data-grid-column-sort] a {
    padding-right: 20px;
    background: url(../core/sortable.png) no-repeat right;
}

th[data-grid-column-sort=ascending] a {
    background-image: url(../core/sort-asc.png);
}

th[data-grid-column-sort=descending] a {
    background-image: url(../core/sort-desc.png);
}

/* Some support for the built-in DateField component. */

div.datefield-popup.well {
    position: absolute;
    z-index: 1000;
    margin-top: 2px;
}

/* Numeric fields should have their content right-aligned. */
.numeric {
    text-align: right;
}

@-webkit-keyframes pageloading-mask-fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: .50
    }
}

@-moz-keyframes pageloading-mask-fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: .50
    }
}

/** Added via JavaScript when a page is initially loaded, then removed after all page initializations occur. */
.pageloading-mask {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1040;
    background-color: #000;
    opacity: 0;
    animation-name: pageloading-mask-fade-in;
    animation-duration: 250ms;
    animation-delay: 250ms;
    animation-fill-mode: forwards;
    -webkit-animation-name: pageloading-mask-fade-in;
    -webkit-animation-duration: 250ms;
    -webkit-animation-delay: 250ms;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-name: pageloading-mask-fade-in;
    -moz-animation-duration: 250ms;
    -moz-animation-delay: 250ms;
    -moz-animation-fill-mode: forwards;
}

.pageloading-mask div {
    height: 100%;
    background: url(pageloader-mask.gif) no-repeat center center;
}