Masalah dengan URI Data dan Penggabungan File CSS

9

Penggabungan file Magento CSS berpura-pura nama host ke ur-data saya karena RegEx di Mage_Core_Model_Design_Package( beforeMergeCss) tidak berfungsi seperti yang diharapkan. Ini harus menambahkan nama host ke jalur gambar relatif, tetapi tidak ke URI Data.

$cssUrl = '/url\\(\\s*(?!data:)([^\\)\\s]+)\\s*\\)?/';
$contents = preg_replace_callback($cssUrl, array($this, '_cssMergerUrlCallback'), $contents);

CSS-Code:

background: #fafafa url("data:image/svg+xml;base64, PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iM3B4IiB2aWV3Qm94PSIwIDAgNiAzIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA2IDMiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwb2x5Z29uIHBvaW50cz0iNS45OTIsMCAyLjk5MiwzIC0wLjAwOCwwICIvPjwvc3ZnPg==") no-repeat;

Hasil setelah penggabungan:

background: #fafafa url("http://shop12.dev/skin/frontend/shop/default/styles/data:image/svg+xml;base64")PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iM3B4IiB2aWV3Qm94PSIwIDAgNiAzIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA2IDMiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwb2x5Z29uIHBvaW50cz0iNS45OTIsMCAyLjk5MiwzIC0wLjAwOCwwICIvPjwvc3ZnPg==") no-repeat;

Bagaimana cara menghindarinya? Saya tidak bisa menemukan cara untuk memperbaiki synthax dari RegEx yang digunakan. (Menggunakan GIF bukanlah solusi nyata bagi saya)

magento-1.8 css bug regex michael
sumber

Jawaban:

13

Di iphone.css magento juga menggunakan data URI tetapi tanpa tanda kutip, coba lakukan hal yang sama

background: #fafafa url(data:image/svg+xml;base64, PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iM3B4IiB2aWV3Qm94PSIwIDAgNiAzIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA2IDMiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwb2x5Z29uIHBvaW50cz0iNS45OTIsMCAyLjk5MiwzIC0wLjAwOCwwICIvPjwvc3ZnPg==) no-repeat;

Dalam kasus Anda, bukan 

/url\\(\\s*(?!data:)([^\\)\\s]+)\\s*\\)?/

kamu harus menggunakan

/url\\(\\s*(?![\"\']?data:)([^)]+)\\)/
oleksii.svarychevskyi
sumber
Maaf, saya tahu itu. Masalahnya adalah bahwa kode-CSS adalah bagian dari kerangka dasar, yang ditautkan ke proyek saya melalui bower. Saya pasti bisa mengedit kode, tetapi semua kolega saya yang bekerja di proyek akan melakukan hal yang sama. Di setiap pembaruan. Apa yang akan menjadi RegEx yang benar untuk semua jenis (dengan tanda kutip tunggal, tanda kutip ganda dan tanpa tanda kutip)?
michael
Jawaban diperbarui.
oleksii.svarychevskyi
Jika jawaban saya membantu Anda, tandai sebagai diterima.
oleksii.svarychevskyi
Jawaban ini mematahkan aset css lainnya dari yang dikompilasi. Jawaban lain dari @jblandry adalah apa yang akhirnya kami gunakan untuk memperbaiki semuanya.
FactoryAidan
4

Sebenarnya regexp ini mencakup lebih banyak kasus

/url\\(\\s*(?![\"\']?data:)(?!\%)([^\\)\\s]+)\\s*\\)?/

Terutama data svg yang dioptimalkan ini dengan gradien: http://codepen.io/tigt/post/optimizing-svgs-in-data-uris

jblandry
sumber
Jawaban ini TETAP SEMUA masalah tanpa merusak apa pun. Jawaban 'lain' (saat ini diterima) memperbaiki satu hal tetapi menghancurkan banyak hal lainnya. Ini harus diubah menjadi jawaban yang diterima.
FactoryAidan