Posted By

FatFolderDesigner on 09/18/11

Tagged

Versions (?)

Last Edited at 09/18/11 06:40am

Statistics

Viewed 864 times

Favorited by 0 user(s)

Related snippets

CSS minifier and color replaces

/ Published in: PHP

With this file you can load stylesheets and minify the code while changing colors. The stylesheets are loaded using file_get_contents and you can attach them one after another if you have multiple sheets. The colors are replaces based on a variable thats commented out of the css code, an example of the way thats formatted is below the cod block. The minification is done with a regular expression that removes all comments, line breaks, and un-needed spaces. The color replacement is done with a different regular expression and the colorize function that takes the variable and returns a color. You can use whatever method you want to get the color, but I personally am using variables from a Wordpress plugin (and stores using the Wordpress options function) to give users color customizability of their site.

If you have any questions or comments you can post a comment here or at the link, there is also a more in depth explanation at the link if your interested.

UPDATE: improved it's ability to find colors in the CSS declaration, also added the "transparent" keyword in as something it can find.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML

// php code that does the work
<?php
require('../../../wp-load.php');
function colorize($m){
	// Your code to get the new color goes here, in this case it's grabbing a stored value from a Wordpress plugin.
	$c=get_option('tc_'.$m[4]);
	$m[3] = $c;
	if($c!=''){
		return $c;
	}else{
		return $m[0];
	}
}
header("Content-type: text/css");
$css = file_get_contents('style.css');
$css = preg_replace('~/\*.*\*/|\n|\t|(?<=:)\s+|(?<={)\s+|(?<=})\s+|(?<=,)\s+|\s+(?=;)|\s+(?={)|\s+(?=})|\s+(?<=:)~sU','',preg_replace_callback('~((transparent|#[A-F0-9a-f]{6}))(?=(.)+(?=/\*#(.+)#\*/))~U','colorize',$css));
echo $css;
?>
 
// example of the css before colorization, note the comment
element {
	padding: 0;
	margin: 0 10px;
	color: #000000;/*#c_t#*/
}
 
// how it looks after colorization, note the color.
element {
	padding: 0;
	margin: 0 10px;
	color: #FF0000;
}
 
// older version, doesn't grab color codes as well, missing transparent keyword.
<?php
function colorize($v){
	//whatever code you use to turn variable $v into color $c, very dependent on your specific implementation.
	return $c;
}
header("Content-type: text/css");
$css = file_get_contents('style.css');
$css = preg_replace('~/\*.*\*/|\n|\t|(?<=:)\s+|(?<={)\s+|(?<=})\s+|(?<=,)\s+|\s+(?=;)|\s+(?={)|\s+(?=})~sU','',preg_replace_callback('~#[A-F0-9a-f]{3,8}(?=;/\*#([\d\w\s]+)(:(.+))?#\*/)~U','colorize',$css));
echo $css;
?>