cssMaker

A simple tool for manually concatenating CSS files from different servers into one compressed CSS file.

I wrote cssMaker because I wanted to be able to save server requests and compress CSS files that I didn't have any control over. Some of the CSS I use in my projects is managed by the GVSU webteam. Since my CMS template updates when they adjust this file, I want to make sure that all of the other sites I've designed to match update as well. cssMaker lets me pretend I have a better server infrastructure than I do while giving me the benefits of loading updated versions of other people's CSS all while loading a single, compressed file.

Installation

Since cssMaker works with GET requests, you'll need to generate a secret key to authorize your requests. Any key will work, but I recommend using an sha1 or md5 hash. You can generate those in the shell or online.

Edit the config.sample.php file, setting the $auth_key variable to the hash you just made. Save the file as config.php and save it in the same directory as cssMaker.

Update line 14 of index.php to call config.php instead of config.sample.php.

Now, upload the files to your server somewhere where you can execute them. (They should be on the same server you're going to store the CSS files you generate.)

Usage

cssMaker takes two parameters to run:

1. key: The secret key you made when installing cssMaker
2. path: The absolute path of the directory where you want your CSS file to live (no trailing slash).

The script then looks for a file called css.json in the target directory. This file should be a simple JSON file that specifies the order and URL of all the CSS files you want to add together. For instance, here is the css.json for my OPAC, where I have several files to load:

{
	"1":"http://gvsuliblabs.com/labs/opac/css/iii_stock.css",
	"2":"http://gvsu.edu/cms3/skeleton_32/files/css/base.css",
	"3":"http://gvsuliblabs.com/labs/opac/css/gvsu-nav.css",
	"4":"http://gvsu.edu/cms3/assets/741ECAAE-BD54-A816-71DAF591D1D7955C/gvsu-lib-styles-new.css",
	"5":"http://gvsuliblabs.com/labs/opac/css/iii_custom.css"
}

Here I am loading 2 stylesheets from the GVSU server, a file I created to replace the inlined navigation-related styles from my campus CMS, the stock CSS provided by the OPAC vendor, and the custom styles I wrote to modify the OPAC.

I would call cssMaker through any HTTP request like this:

http://PATH/TO/CSSMAKER/cssMaker/?key=2346ad27d7568ba9896f1b7da6b5991251debdf2&path=/PATH/TO/OPAC/CSS

The script will then parse the css.json file it finds in that directory, and based on the numerical order will begin ingesting the CSS files and then compressing them, finally outputting a file that has all of your CSS files, compressed and in order, at styles.css.

Now instead of loading all 5 of those stylesheets, you can just load styles.css that was generated by cssMaker.

Updating Files

Every time you run cssMaker it overwrites the styles.css file in your target directory, so you can set it as a cron job to run automatically. Or, you can just run it manually when you know a file has been updated. Your call.

Questions?

Drop me a line at [email protected]. Or submit an issue or a pull request.