Using

The asset pipeline in XSL stylesheets

Namespace

Since the asset pipeline uses namespaced functions, the namespace http://git.io/sym-asset-pipeline needs to be declared in the ‘xsl:stylesheet’ tag.

<xsl:stylesheet version="1.0"
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
    xmlns:ap="http://git.io/sym-asset-pipeline"
    exclude-result-prefixes="ap">

CSS

CSS files are specified using the ‘css-url’ function.

<link rel="stylesheet" href="{ap:css-url('application')}" media="screen"/>

Asset Pipeline will look for a file called application.css or application.css.php in that order. If neither file exists and if a CSS preprocessor extension is installed then application.<preprocessor file extension> or application.<preprocessor file extension>.php will be looked for.

JavaScript

JavaScript files are specified using the ‘js-url’ function.

<script src="{ap:js-url('application')}"></script>

Asset Pipeline will look for a suitable file in the same way as for CSS.

Images and other non-code files

Files other than CSS/JS are specified using the url-for function.

<img src="{ap:url('picture.jpg')}" />

Data

Data in base 64 format can be included using the data function.

<img src="{ap:data('picture.jpg')}" />

The above will be rendered as:

<img src="data:image/jpeg;base64,iVBORw0KGgo....." />

Using PHP within CSS and JS

To embed PHP, add the PHP extension to the file name, e.g. styles.css.php. In the example below, the URL for pattern.png will be inserted.

body {
    background-image: url(<?php include 'ap.url://pattern.png' ?>);
    background-repeat: repeat;
}

The above will render on page load as:

body {
    background-image: url(/pattern.png/?mode=pipeline);
    background-repeat: repeat;
}

The code below shows how to include base 64 data instead of a URL:

body {
    background-image: url(<?php include 'ap://pattern.png' ?>);
    background-repeat: repeat;
}

Manifest files

PHP can be used to include a number of code files into a single file.

<!-- application.css.php -->

<?php

include 'ap://main.css';
include 'ap://home.styl';
include 'ap://articles'; //The pipeline will look for a suitable file such as 'articles.css' or 'articles.styl'

Precompiling assets for production

When a website is put into production, there is no longer any need to recompile assets on page load.

Specifying the files to be precompiled

Non-text files will be compiled automatically. Code files must be specified, and this is done by putting a comma-separated list of files in the ‘Precompile Code Files’ field on Symphony’s Preferences page.

How to precompile

Select ‘Precompile Assets’ from Symphony’s System menu.