Corey Worrell

CSS Compressor

So I've been noticing quite a few articles lately about speeding up your website, and compressing static files and all that. It got me thinking, and I started to mess around with some ideas I had.

Now I know there are a lot of CSS compressors on the web today, but most of them involve copying and pasting your code into a textarea, and it giving you a compressed version that you have to upload to your server and reference in your HTML document. But what if you have 4 or 5 different style sheets that you are going to be editing quite a bit, and don't want to bother having to merge your code and compress it all the time.

That's why I created this little PHP script that you throw on your server, tell it which CSS files you want compressed, and then it does all the work for you, serving up a nice, lightweight CSS file. And the best part is that you can still open up your CSS files like normal and edit them anytime.

So now, just reference that one PHP file in your HTML document:

<link rel="stylesheet" type="text/css" href="css.php" />

The best part is that the script creates a compressed file and caches it until the next time you update any of your CSS files.

UPDATE:

I created an alternate version where you define the css files in the URI instead of as an array. I think this is more widely used and allows you to easily modify which files you want to use. The only difference is the way you reference the link tag:

<link rel="stylesheet" type="text/css" src="css.php?reset,grid,styles" />

This file is named 'css.alt.php' in the ZIP download below.

Download

Example:

reset.css

html, body, div, span, a,
form, table, tr, td, ul, li {
    margin : 0px;
    padding : 0px;
}

grid.css

.container_12 {width:960px; float:left;}
.container_12 .grid_1 {width:60px;}
.container_12 .grid_2 {width:120px;}

styles.css

body {
    font : 12px/16px Helvetica, Arial, sans-serif;
    text-align : center;
    background : #000 url('../img/body_bg.jpg') top center no-repeat;
}

Will generate the following:

html,body,div,span,a,form,table,tr,td,ul,li{margin:0;padding:0}.container_12{width:960px;float:left}.container_12 .grid_1{width:60px}.container_12 .grid_2{width:120px}body{font:12px/16px Helvetica,Arial,sans-serif;text-align:center;background:#000 url('../img/body_bg.jpg') top center no-repeat}

Preview:

<?php
/**
 * Easily compress all your CSS files into one streamlined file.
 * This file strips your CSS of all unnecessary line breaks, spaces, and characters.
 *
 * @author   Corey Worrell
 * @url      http://coreyworrell.com
 * @version  1.0
 *
 * Usage:
 * <link rel="stylesheet" type="text/css" href="css.php?reset,grid,styles" />
 *
 * Example folder structure:
 * httpdocs
 *   - css
 *      - css.php
 *      - grid.css
 *      - reset.css
 *      - styles.css
 *   - js
 *   - img
 *   - index.html
 */

// Name of generated "cache" file (w/out '.css' extension)
$compressed = 'compressed';
// End configuration

function bad_request()
{
	header('HTTP/1.1 400 Bad Request');
	echo 'HTTP/1.1 400 Bad Request';
	exit;
}

$url = parse_url($_SERVER['REQUEST_URI']);
$files = explode(',', $url['query']);

$compress = FALSE;

if (file_exists($compressed.'.css'))
{
	foreach ($files as $file)
	{
		if ( ! file_exists($file.'.css'))
		{
			bad_request();
		}
		
		if ($time = filemtime($file.'.css') AND $time > filemtime($compressed.'.css'))
		{
			$compress = TRUE;
		}
	}
}

if (file_exists($compressed.'.css') AND ! $compress)
{
	$css = file_get_contents($compressed.'.css');
}
else
{
	$file = '';
	$css  = '';
	
	foreach ($files as $file)
	{
		if ( ! file_exists($file.'.css'))
		{
			bad_request();
		}
		
		$css .= file_get_contents($file.'.css');
	}

	$replace = array
	(
		'/\s+/' 									=> ' ',
		'/[\s+]?(;|:|{|}|,)[\s+]?/' 				=> '$1',
		'/[\t\r\n]/' 								=> '',
		'/\/\*(.*?)\*\//' 							=> '',
		'/;}/' 										=> '}',
		'/}(\s+)?/' 								=> '}',
		'/#([\da-f])\1([\da-f])\2([\da-f])\3/i' 	=> '#$1$2$3',
		'/([^\d])0(px|em|pt|ex|%|pc|cm|in|mm)/i'	=> '${1}0',
	);

	$css = trim(preg_replace(array_keys($replace), array_values($replace), $css));
	
	$handle = fopen($compressed.'.css', 'w');
			  fwrite($handle, $css);
			  fclose($handle);
}

header('Content-type: text/css');

echo $css;

Hopefully you can find this useful, and be sure to let me know of any bugs or improvements you can find.