IceBeat

Una de las mejores formas de entender los plugins en CSSing es creando un ejemplo y para ello vamos a crear un plugin para definir variables propietarias.

Los plugins en CSSing funcionan definiendo acciones y elementos que llaman a una función, recibiendo una serie de parámetros y devolviendolos analizados.

Para crear una regla arroba tenemos que definir el elemento @define, para ello lo añadimos a la clase con la función add_atrule.

CSSing:add_atrule('define','dml_atrule_define'); 

Aquí podemos ver como el primer parámetro es el nombre de la regla y el segundo la función que se llama.constancia de la regla @define.

¿Que es lo que envía CSSing?

Ejemplo:

@define {
rosa: #d8327b;
gris: #808080;
}
Array
(
[atrule] => define
[pseudoclass] => Array()
[precontent] => 
[key] => 437b9d7bb6f58
[content] => 
rosa: #d8327b;
gris: #808080;
[type] => property
)

Algunos parámetros aparecen vacíos porque no los contiene la regla.Existen 3 tipos de reglas, inline que es el tipico @import,property como es este caso y block como las regla @media.

Ahora vamos a ver el código para conseguir el contenido.

global $dml_define_array;
$dml_define_array = array();
function dml_atrule_define($params) {
global $dml_define_array;
        extract($params);
        switch($type) {
            case 'property': $dml_define_array = array_merge($dml_define_array,CSSing::get_propertys($content)); break;
        }
        return false;
    }

Al llamar a la función comprobamos que el tipo sea valido y si es así parseamos el contenido para conseguir un array con las propiedades.

Con esto tenemos el 50% del plugin, ahora nos quedaría sustituir los valores en el CSS, para ellos utilizamos la acción preblock que se llama después de analizar las reglas arroba y antes del parseo de bloques CSS.

CSSing::add_action_preblock('define','dml_action_preblock_define');
function dml_action_preblock_define($css_string) {
        global $dml_define_array;
        if(!count($dml_define_array)) return $css_string;
        foreach($dml_define_array as $var=>$value) {
            $css_string= str_replace('define('.$var.')',$value,$css_string);
        }
        return $css_string;
    }

En este caso la función recibe una cadena y devuelve el CSS parseado.

Puede parecer algo complejo por el desconocimiento de las acciones y los elementos pero se pueden conseguir bastantes cosas con muy pocas lineas.

Y con esto hemos conseguido crear un plugin para CSSing.