Minimiza y ordena el CSS de tu theme de WordPress "al vuelo"

Beware: This post was published 8 years ago and its content may be outdated.

Ayer publicaron en Anieto2k una versión del compactador de CSS de Barry van Oudtshoorn que además de comptactar el CSS, ordena los atributos alfabéticamente.

Me ha parecido una idea bastante interesante adaptar un poco el compactador de Anieto2k a WordPress, con el objetivo de tener un archivo css fácil de modificar a la vez que el visitante cargase un CSS más ligero. No os penséis que he reescrito el script ni que he modificado mucho el código, realmente los cambios son insignificantes.

Para aplicar la compresión de CSS a nuestro theme de WordPress tenemos que crear un archivo llamado style.php. En él pondremos el siguiente código:

<?php
header('Content-type: text/css');
// Compresor de CSS por Anieto2k
class StyleSheetCompressor {
private $cssFile;
private $selectors = array();
function __construct($cssContent = '', $cleanComments = true){
$this->cssFile = $cssContent;
// Borramos comentarios
if ($cleanComments)
$this->cssFile = preg_replace('!/*[^*]**+([^/][^*]**+)*/!', '', $this->cssFile);
$selectors = array();
// Obtenemos todos los selectores
$partes = explode("}", $this->cssFile);
foreach($partes as $parte) {
if (!empty($parte))
array_push($this->selectors, new SelectorCSS($parte."}"));
}
}
function get($cleanSpaces = true){
$salida = '';
foreach($this->selectors as $selector) {
$salida .= $selector->get($cleanSpaces)."n";
}
// Borramos saltos de linea, espacios,...
if ($cleanSpaces)
$salida = str_replace(array("t", "n", "r"), '', $salida);
return $salida;
}
}
/*
 SelectorCSS
*/
class SelectorCSS{
private $properties = array();
private $selector;
function __construct($selector = ''){
$parts = explode("{", $selector);
if (count($parts) < 2) {
die("Selector " + selector +" incompleto");
}
$this->selector = trim($parts[0]);
$contents = trim($parts[1]);
if (strlen($contents) == 0) {
die("Selector " + selector + "vacio");
}
if (substr($contents,strlen($contents) -1 ,1) != '}'){
die("Selector "+selector+" no est&aacute; cerrado");
}
$contents = substr($contents, 0, $contents - 2);
$this->properties = explode(';', $contents);
}
function get(){
$str = $this->selector.'{';
natcasesort($this->properties);
foreach($this->properties as $property) {
if (!empty($property))
$str .= $property.";";
}
$str .= '}';
return $str;
}
}
// Fin de Compresor de CSS
$contenido = file_get_contents('style.css');
$styleSheet = new StyleSheetCompressor($contenido);
echo $styleSheet->get(true);
?>

En la línea 99, cambiad style.css por el nombre de vuestro archivo CSS (aunque la mayoría de las veces bastará con style.css).

A continuación abrid el archivo header.php de vuestro theme y buscad una línea similar a esta:

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />

Reemplazadla por esta otra:

<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/style.php" type="text/css" media="screen" />

¡Y listo! Ahora si queremos modificar el CSS basta con editar el archivo style.css, que mantiene la estructura, los espacios, comentarios y demás cosas que nos facilitan la edición, mientras que el compresor se dedica a comprimir el CSS para cada visita.