Formatear CSS en una sola línea o en múltiples líneas según la cantidad de propiedades.
Considere el siguiente CSS:
.foo {
color: red;
}
.bar {
color: blue;
font-size: 14px;
}
.baz { color: pink }
Mi único problema es: ¿Qué expresión regular formatearía ese código de la siguiente manera? Todas las declaraciones con una propiedad (.foo) deben estar en una sola línea. Cualquier declaración con más de una propiedad (.bar) debe permanecer en varias líneas. Las reglas de una declaración que ya están en una sola línea (.baz) deben permanecer así.
.foo { color: red }
.bar {
color: blue;
font-size: 14px;
}
.baz { color: pink }
He intentado con Notepad++, una opción obvia y poderosa, pero la expresión regular exacta se me escapa.
Lo que específicamente intenté:
Intenté una búsqueda y reemplazo usando comodines:
Buscar:
{*\r\n}
Reemplazar:
{ $1 }
davy.ai
Desafortunadamente, esta búsqueda y reemplazo no funcionará para el problema específico. Solo agregará espacios antes y después de las llaves ya existentes, no reformateará el código para que se ajuste al formato deseado.
Una posible solución:
Para reformatear el código, podemos usar la siguiente expresión regular en Notepad++:
Búsqueda:
Reemplazo:
Esto coincidirá con todas las reglas CSS con o sin múltiples declaraciones y las reformateará según el formato especificado. Así es como funciona la expresión regular:
(\t*)coincide con cualquier tabulación opcional antes del selector(\..+?)captura la clase del selector (.foo,.bar, etc.)\s*coincide con cualquier espacio opcional después del selector{([^{}]*?)\s*}captura el bloque de declaración dentro de las llaves, incluyendo cualquier espacio y salto de línea opcional después de la llave de cierre$1$2 { $3 }reemplaza el texto coincidente con el mismo selector y bloque de declaración, pero con un espacio antes y después de la llaveTen en cuenta que esta expresión regular asume que cada regla CSS comienza con un selector de clase (
.foo,.bar, etc.) y no coincide con ningún otro tipo de selectores (id, etiqueta, etc.).