Django-compressor: Sass, resultados diferentes usando y sin compresor, causando errores de análisis

Creado en 15 feb. 2017  ·  11Comentarios  ·  Fuente: django-compressor/django-compressor

Hola, tengo un problema al usar Bootstrap 4 alpha 6. Encontré que todo el CSS después de la inclusión de BS4 fue ignorado por el navegador. Profundizó y encontró un error de análisis del CSS generado.

Estoy usando Django 1.8.17, Compressor 2.1.1, Sass 3.4.22

Documentaré aquí el primer error de análisis que encontré.

El error es la comilla doble " en stroke='rgba(0, 0, 0, 0.5")', mientras que debería ser stroke='rgba(0, 0, 0, 0.5)' . Esto provoca errores de análisis en el documento.

Línea no válida (a través del compresor de dj)

.navbar-light .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0, 0, 0, 0.5")' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E"); }

Línea válida (a través de sass direct)

.navbar-light .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0, 0, 0, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E"); }

Coincide con la versión precompilada.

Fuente de _background-image_

$navbar-light-toggler-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-light-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E"), "#", "%23") !default;

$navbar-light-color:                rgba($black,.5) !default;

$black:  #000 !default;

Cómo generamos a través del compresor de dj

{% compress css %}
<link rel="stylesheet" type="text/x-scss" media="screen" charset="utf-8"
    href="/static/bootstrap/scss/bootstrap.scss" />
{% endcompress %}

COMPRESS_PRECOMPILERS = (
    ('text/coffeescript', 'coffee --compile --stdio'),
    ('text/x-sass', 'sass {{infile}} {{outfile}} --load-path {}'.format(LIB_PATH)),
    ('text/x-scss', 'sass --scss {{infile}} {{outfile}} --load-path {}'.format(LIB_PATH)),
)
bug
Fuente
picture wjdp

Todos 11 comentarios

se ve bastante mal. Se agradecería cualquier ayuda para solucionar este problema, es probable que no tenga tiempo para las próximas semanas.

karyon picture karyon en 15 feb. 2017

Voy a intentarlo. No estoy familiarizado con su base de código, por lo que cualquier consejo sobre dónde comenzar / cualquier corazonada sería muy valioso.

wjdp picture wjdp en 15 feb. 2017

Un par de pensamientos:

  • ¿Ocurre esto con COMPRESS_ENABLED = False ?
  • ¿Puedes comprobar que la versión de Sass es la misma? (Lo siento por esto, pero en teoría todo lo que hace el compresor es entregar la entrada a Sass para que sea procesada; obviamente algo está sucediendo, pero quiero descartar esto).
carltongibson picture carltongibson en 15 feb. 2017

@carltongibson :

  • Ya se está ejecutando con COMPRESS_ENABLED = False , el mismo resultado observado con la configuración True .
  • Así es como estoy comprobando la versión sass. Ejecutar el servidor en ese entorno
$ sass -v 
Sass 3.4.22 (Selective Steve)

He intentado incluir la versión sass o un archivo bootstrap.css preconstruido en un bloque de compresor seguido de un archivo que solo contiene un body b ackground: green como una luz de verificación para CSS válido / analizable. Me estoy poniendo 'verde' para la versión .css prediseñada, pero no para .sass, donde el compresor crea bootstrap.

wjdp picture wjdp en 15 feb. 2017

@wjdp OK Gracias. Mmm.

En ese caso, ¿puedo sugerir poner un punto de interrupción en Compressor.precompile ? En primer lugar, ¿se pasa correctamente content ?

Entonces, en hunks() es correcto el value devuelto por el precompilador?

carltongibson picture carltongibson en 16 feb. 2017

Estoy investigando esto ahora mismo. el problema es el mismo que el # 764. CssAbsoluteFilter usa r'url\(([^\)]+)\)' para hacer coincidir las URL y, por lo tanto, se detiene en el primer paréntesis de cierre. dado que las expresiones regulares no son capaces de lidiar con un número arbitrario de paréntesis anidados, veo tres opciones:

  1. lidiar con exactamente un nivel de paréntesis anidado porque eso debería ser suficiente para cualquiera
  2. hazlo correctamente con una lógica de coincidencia más inteligente
  3. use alguna biblioteca para analizar el css.

No quiero dedicar mucho tiempo a esto y estoy estudiando la opción 1, si alguien quiere crear una solución más sólida, me complacerá revisarla.

karyon picture karyon en 16 feb. 2017
👍1

solución propuesta en # 828. en realidad no maneja paréntesis anidados en absoluto, solo espera comillas de cierre si hay unas de apertura (por lo que url("data:...stroke='rgba(0, 0, 0, 0.5) no coincidirán) y, para estar seguro, los uris de datos se ignoran por completo.

karyon picture karyon en 16 feb. 2017
👍1

@wjdp, ¿ podrías darle una oportunidad al # 828? Debería hacer lo que necesita, pero una prueba de su parte sería una buena confirmación.

carltongibson picture carltongibson en 16 feb. 2017

Haré

wjdp picture wjdp en 16 feb. 2017

@carltongibson Puedo confirmar que PR me ha solucionado este problema. ¡Gracias @karyon por tu trabajo tan rápido! :sonrisa:

wjdp picture wjdp en 16 feb. 2017

Impresionante 👏🏽 gracias por el seguimiento.

carltongibson picture carltongibson en 17 feb. 2017
¿Fue útil esta página
0 / 5 - 0 calificaciones

Temas relacionados

markstahler picture markstahler  ·  17Comentarios
jgirdner picture jgirdner  ·  3Comentarios
badbye picture badbye  ·  10Comentarios
ghost picture ghost  ·  20Comentarios
polmuz picture polmuz  ·  20Comentarios