Django-compressor: Sass, hasil yang berbeda menggunakan kompresor dan tanpa, menyebabkan kesalahan penguraian

Dibuat pada 15 Feb 2017 · 11Komentar · Sumber: django-compressor/django-compressor

Halo, Saya mengalami masalah saat menggunakan Bootstrap 4 alpha 6. Menemukan bahwa semua CSS setelah penyertaan BS4 diabaikan oleh browser. Gali lebih dalam dan temukan kesalahan penguraian dari css yang dihasilkan.

Saya menggunakan Django 1.8.17, Kompresor 2.1.1, Sass 3.4.22

Saya akan mendokumentasikan di sini kesalahan penguraian pertama yang saya temukan.

Kesalahannya adalah kutipan ganda " di stroke='rgba(0, 0, 0, 0.5")', padahal seharusnya stroke='rgba(0, 0, 0, 0.5)' . Ini menyebabkan kesalahan penguraian dalam dokumen.

Saluran Tidak Valid (melalui kompresor 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"); }

Jalur yang valid (melalui 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"); }

Cocok dengan versi yang telah dikompilasi sebelumnya.

Sumber _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;

Bagaimana kami menghasilkan melalui kompresor 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

Sumber

wjdp

Semua 11 komentar

terlihat sangat buruk. bantuan apa pun untuk memperbaiki ini akan dihargai, kemungkinan saya tidak akan punya waktu untuk beberapa minggu mendatang.

karyon pada 15 Feb 2017

Aku akan pergi. Saya tidak akrab dengan basis kode Anda sehingga petunjuk apa pun tentang di mana harus memulai / firasat apa pun akan sangat berharga.

wjdp pada 15 Feb 2017

Beberapa pemikiran:

Apakah ini terjadi dengan COMPRESS_ENABLED = False ?
Bisakah Anda memeriksa ulang apakah versi Sass sama? (Maaf tentang yang ini, tetapi secara teori semua kompresor lakukan adalah menyerahkan input ke Sass untuk diproses - jelas ada sesuatu yang terjadi tetapi saya ingin mengesampingkan ini.)

carltongibson pada 15 Feb 2017

@carltongibson :

Sudah berjalan dengan COMPRESS_ENABLED = False , hasil yang sama diamati dengan menyetelnya True .
Ini adalah bagaimana saya memeriksa versi sass. Menjalankan server di lingkungan itu

$ sass -v 
Sass 3.4.22 (Selective Steve)

Saya telah mencoba memasukkan versi sass atau file bootstrap.css yang sudah dibuat sebelumnya di blok kompresor diikuti oleh file yang hanya berisi body b ackground:green sebagai lampu centang untuk CSS yang valid/dapat diuraikan. Saya mendapatkan 'hijau' untuk versi .css yang dibuat sebelumnya, tetapi tidak untuk .sass—di mana kompresor membuat bootstrap.

wjdp pada 15 Feb 2017

@wjdp Oke Terima kasih. Hmmm.

Dalam hal ini, dapatkah saya menyarankan untuk meletakkan breakpoint di Compressor.precompile ? Pertama apakah content dilewatkan dengan benar?

Kemudian di hunks() apakah value dikembalikan dari precompiler benar?

carltongibson pada 16 Feb 2017

saya sedang mencari ini sekarang. masalahnya sama dengan #764. CssAbsoluteFilter menggunakan r'url\(([^\)]+)\)' untuk mencocokkan URL, dan karena itu berhenti pada tanda kurung penutup pertama. karena regex tidak mampu menangani jumlah kurung bersarang yang berubah-ubah, saya melihat tiga opsi:

berurusan dengan tepat satu tingkat kurung bersarang karena itu seharusnya cukup untuk siapa pun
lakukan dengan benar dengan logika pencocokan yang lebih cerdas
gunakan beberapa perpustakaan untuk mengurai css.

saya tidak ingin menghabiskan banyak waktu untuk ini dan sedang mencari opsi 1, jika ada yang ingin membuat solusi yang lebih kuat, saya akan senang untuk meninjaunya.

karyon pada 16 Feb 2017

👍1

perbaikan yang diusulkan di #828. itu tidak benar-benar menangani tanda kurung bersarang sama sekali, itu hanya mengharapkan tanda kutip penutup jika ada tanda kurung pembuka (jadi url("data:...stroke='rgba(0, 0, 0, 0.5) tidak cocok) dan, untuk amannya, data-uris diabaikan sama sekali.

karyon pada 16 Feb 2017

👍1

@wjdp bisakah Anda mencoba #828? Itu harus melakukan apa yang Anda butuhkan tetapi uji coba di pihak Anda akan menjadi konfirmasi yang baik.

carltongibson pada 16 Feb 2017

Harus melakukan

wjdp pada 16 Feb 2017

@carltongibson Dapat mengonfirmasi bahwa PR telah memperbaiki masalah ini untuk saya. Terima kasih @karyon atas pekerjaan Anda yang sangat cepat! :tersenyum:

wjdp pada 16 Feb 2017

Luar biasa 👏🏽 terima kasih atas tindak lanjutnya.

carltongibson pada 17 Feb 2017

Apakah halaman ini membantu?

0 / 5 - 0 peringkat