3

Tengo un módulo en que se encarga de buscar todos los archivos css de una carpeta, "minificarlos" y escribir todo el contenido en un nuevo css.

private function cssFile($css_file, $widget_id = '') {
    $css = '';
    $css .= file_get_contents($css_file);
    $css = preg_replace('!/\*[^*]*\*+([^/][^*]*\*+)*/!', '', $css);
    $css = str_replace(': ', ':', $css);
    $css = str_replace(array("\n", "\t", '  ', '    ', '    '), '', $css);
    return $css;
}

¿De qué manera puedo agregar un prefijo a cada uno de las clases e Ids?

No puedo hacer un str_replace porque me afectaría los colores: rgba(0,0,0,0.5), #fff;

3
  • Normalmente después de cada clase o id tendrías una coma (,) o una llave ({), tal vez por ese lado puedas encontrar la regex que necesites.
    – Shaz
    Commented el 7 sept. 2016 a las 19:26
  • Jeje, ya estoy en ello. Con una regex creo que es imposible o no llego a tanto pero con 2 igual se puede. Si me sale todo bien publico la respuesta enseguida. Gracias por tu comentario. Commented el 7 sept. 2016 a las 20:06
  • Podrías agregar algunos de ejemplos que dices que no has podidos modificar con expresiones regulares?
    – El Asiduo
    Commented el 9 sept. 2016 a las 8:05

2 respuestas 2

1

Podrías buscar todos los # y . que estén seguidos por { sin tener ninguna } en el medio.


RegEx

/[#.]\K(?=[a-z0-9][^{}]*+{)/i


Descripción

  • [#.] - Coincide con 1 caracter que sea # o .
  • \K - Resetea la coincidencia (para que el # o . no se incluya en el reemplazo)
  • (?=[a-z0-9][^{}]*+{) Lookahead (tiene que coincidir, pero no consume caracteres) para:
    • [a-z0-9] - El nombre de la clase o id debería empezar con una letra o número
    • [^{}]*+ - seguido de cualquier caracter que no sea { ni }
    • { - y luego el { que abre el estilo.
  • /i - Para que coincida con mayúsculas y minúsculas.


Código

function prefijarClasesYIds($css_file, $prefijo = '') {
    return preg_replace( '/[#.]\K(?=[a-z0-9][^{}]*+{)/i', $prefijo, $css_file);
}


Ejemplo

$css_file = "
                a:hover, a:visited, a.unId {
                    prop: #aaa;
                }

                body, #fff, a:link {
                    prop: #bbb;
                }

                .algun_id, #clase1, #clase2.otroId {
                    prop: #ddd;
                }
            ";

$ejPrefijo = "PREFIJO";
$css_file = prefijarClasesYIds( $css_file, $ejPrefijo);

echo $css_file;


Resultado

a:hover, a:visited, a.PREFIJOunId {
    prop: #aaa;
}

body, #PREFIJOfff, a:link {
    prop: #bbb;
}

.PREFIJOalgun_id, #PREFIJOclase1, #PREFIJOclase2.PREFIJOotroId {
    prop: #ddd;
}

Demo en Ideone



Nota: Se asume que ya eliminaste los comentarios antes de esta función. Y quizás podría fallar con algún ejemplo raro, pero en ese caso, agregá ese ejemplo en la pregunta y lo adapto.

1
  • Hola, gracias por tu respuesta. Funciona muy bien tu Regex! Commented el 10 sept. 2016 a las 8:48
1

A través de Regex me resultó imposible dado que hay valores dentro del css que no se pueden diferenciar con un solo patron, ejemplo #Id, #comentario, #fff. Aunque no estoy orgulloso de mi código basado en str_replace es lo único que me funciona correctamente.

Lo comparto por si a alguien le resulta útil:

private function cssFile($css_file, $id = '') {
    $css = '';
    $css .= file_get_contents($css_file);
    $css = preg_replace('!/\*[^*]*\*+([^/][^*]*\*+)*/!', '', $css);
    $css = str_replace(
        array(": ", "\n", "\t", ", ", "    ", "}#", " {", "}.", ",.", " > "),
        array(':', "","", ",", "", "}#".$id."#", "{", "}#".$id.".", ",#".$id.".", ">")
    , $css);

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.