Django-compressor: Sass, разные результаты с использованием компрессора и без него, что вызывает ошибки парсинга

Созданный на 15 февр. 2017 · 11Комментарии · Источник: django-compressor/django-compressor

Здравствуйте, у меня возникла проблема при использовании Bootstrap 4 alpha 6. Обнаружено, что все CSS после включения BS4 игнорируются браузером. Покопался глубже и обнаружил ошибку парсинга сгенерированного css.

Я использую Django 1.8.17, Compressor 2.1.1, Sass 3.4.22

Я задокументирую здесь первую обнаруженную мной ошибку синтаксического анализа.

Ошибка - это двойная кавычка " в stroke='rgba(0, 0, 0, 0.5")', тогда как она должна быть stroke='rgba(0, 0, 0, 0.5)' . Это вызывает ошибки синтаксического анализа в документе.

Неверная линия (через компрессор 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"); }

Действительная строка (через 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"); }

Соответствует предварительно скомпилированной версии.

Источник _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;

Как мы генерируем через диджейский компрессор

{% 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

Источник

wjdp

Все 11 Комментарий

выглядит довольно плохо. любая помощь по исправлению этого будет оценена, у меня, вероятно, не будет времени в ближайшие недели.

karyon 15 февр. 2017

Я пойду. Я не знаком с вашей кодовой базой, поэтому любые указания о том, с чего начать / любые догадки, были бы очень ценными.

wjdp 15 февр. 2017

Пару мыслей:

Это происходит с COMPRESS_ENABLED = False ?
Можете ли вы дважды проверить, что версия Sass такая же? (Извините за это, но теоретически все, что делает компрессор, передает входные данные Sass для обработки - очевидно, что-то происходит, но я хочу исключить это.)

carltongibson 15 февр. 2017

@carltongibson :

Уже работает с COMPRESS_ENABLED = False , тот же результат наблюдается при установке True .
Вот как я проверяю версию sass. Запуск сервера в этой среде

$ sass -v 
Sass 3.4.22 (Selective Steve)

Я попытался включить либо версию sass, либо предварительно созданный файл bootstrap.css в блок компрессора, за которым следует файл, содержащий только тело b ackground: green в качестве контрольной лампы для действительного / анализируемого CSS. Я получаю «зеленый» для предварительно созданной версии .css, но не для .sass, где компрессор создает бутстрап.

wjdp 15 февр. 2017

@wjdp ОК Спасибо. Хм.

В таком случае могу я предложить поставить точку останова в Compressor.precompile ? Во-первых, правильно ли передан content ?

Тогда в hunks() верна ли value возвращенная прекомпилятором?

carltongibson 16 февр. 2017

я изучаю это прямо сейчас. проблема такая же, как # 764. CssAbsoluteFilter использует r'url\(([^\)]+)\)' для сопоставления URL-адресов и поэтому останавливается на первой закрывающей скобке. поскольку регулярное выражение не может обрабатывать произвольное количество вложенных скобок, я вижу три варианта:

иметь дело только с одним уровнем вложенных скобок, потому что этого должно быть достаточно для всех
сделайте это правильно с более интеллектуальной логикой сопоставления
используйте некоторую библиотеку для анализа css.

Я не хочу тратить на это много времени и изучаю вариант 1. Если кто-то хочет создать более надежное решение, я буду рад его просмотреть.

karyon 16 февр. 2017

👍1

предложенное исправление в №828. на самом деле он вообще не обрабатывает вложенные круглые скобки, он просто ожидает закрывающих кавычек, если есть открывающие (поэтому url("data:...stroke='rgba(0, 0, 0, 0.5) совпадают) и, чтобы быть в безопасности, uris данных вообще игнорируются.

karyon 16 февр. 2017

👍1

@wjdp не могли бы вы попробовать # 828? Он должен делать то, что вам нужно, но ваш тестовый запуск будет хорошим подтверждением.

carltongibson 16 февр. 2017

Сделаю

wjdp 16 февр. 2017

@carltongibson Могу подтвердить, что PR @karyon за очень быструю работу! :улыбка:

wjdp 16 февр. 2017

Отлично 👏🏽 спасибо за продолжение.

carltongibson 17 февр. 2017

Была ли эта страница полезной?

0 / 5 - 0 рейтинги