I’ve been using CSS preprocessor languages for a while. I’ve tried Less, Sass and have adopted Stylus for most of my projects. All three make creating, maintaining and minimizing complicated style sheets easier, but come at the price of having to recompile after every update. Part of the appeal of script languages like PHP, JavaScript, HTML and CSS is that you don’t have to recompile to test changes, which speeds up development. The power of using a CSS preprocessor easily outweighs the inconvenience of compiling the code, but it still left me looking for a better way to integrate them into my workflow.

So I decided to write a PHP wrapper class for CSS preprocessors to integrate them into my Zend Framework 2 applications. This lets me trigger a CSS update in a controller or with a listener that updates the CSS when it is out of date. It also lets me use CSS preprocessors to include CSS inline in view templates, but I’ll go into that in another post. The result is I can edit Less, Sass or Stylus files and the changed CSS immediately shows up in my development environment without having to go back to the command line and all it takes is a minimal amount of configuration in my application.

I included the classes in the Spork ZF2 Library. The source code for the classes is available on GitHub here and there is some documentation in README.md.

Once you have the preprocessor installed and the classes are available in your application all you need to do is configure your application to use the Update Listener, tell it which preprocessor to use, where your source files are and where you want the CSS to go. Here is the basic configuration to use Stylus.

    'css-update' => array(
        'compiler' => 'cssStylus',
        'builds' => array(
            array(
                'source' => 'path/to/source',
                'destination' => 'path/to/destination',
                'includes' => array('path/to/include') // optional
                'compress' => true // optional
            ),
        ),
    ),
    'service_manager' => array(
        'invokables' => array(
            'cssStylus' => 'Spork\CSS\Stylus',
            'cssUpdateListener' => 'Spork\CSS\UpdateListener', 
        ),
    ),
    'listeners' => array(
        'cssUpdateListener',
    ),

A couple notes. I do not recommend using this in a production environment. I use this in my development environment and uploaded the CSS files to my production environment. The destination folder must be writable by the webserver.