IceBeat

Ya tenemos aceptado el proyecto en sourceforge.net, vamos lentos pero vamos ;p.
Se aceptan colaboraciones para traducir la release, el ingles no es lo mio.

Muchas gracias GNU/Hydrus por ayudarme con el proyecto. La release ya esta terminada solo queda ponerla bonita.

Lastima que los dias solo sean de 24 horas.

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?

CSSing devuelve un array con información sobre esa regla, es decir, claves, pseudoclasses, contenido, tipo de regla… Veamos un print_r.

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.

Este es mi nuevo proyecto y es el hermano mayor de CSScompiler . CSSing es una nueva forma de ver las hojas estilos, usa la misma sintaxis que CSS pero interpreta y genera el código necesario para interactuar con otros lenguajes.

Gracias a su sistema de plugins puedes crear tus necesidades y aplicarlas de la forma mas sencilla en tu CSS. Obviamente tiene ciertas limitaciones pero con un poco de imaginación nada es imposible.

Entre los plugins que he creado puedes añadir textos a los input, aplicar eventos de ratón a divs, aplicar un clase según el navegador, definir constantes para usarlas en el CSS.

Puedes mirar una demo y ver en acción algunos plugins.

Posdata: Pronto listo para descargar.