Sự cố với URI dữ liệu và Hợp nhất tệp CSS

Hợp nhất tệp CSS Magento đang giả vờ tên máy chủ lưu trữ dữ liệu của tôi vì RegEx in Mage_Core_Model_Design_Package( beforeMergeCss) không hoạt động như mong đợi. Nó nên thêm tên máy chủ vào đường dẫn hình ảnh tương đối, nhưng không phải cho URI dữ liệu.

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

Mã CSS:

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

Kết quả sau khi hợp nhất:

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

Làm thế nào để tránh điều này? Tôi không thể tìm ra cách sửa synthax của RegEx đã sử dụng. (Sử dụng GIF không phải là giải pháp thực sự với tôi)

Trong iphone.css magento cũng sử dụng URI dữ liệu nhưng không có dấu ngoặc kép, hãy thử làm tương tự

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

Trong trường hợp của bạn thay vì

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

bạn nên sử dụng

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

Trên thực tế regrec này bao gồm nhiều trường hợp hơn

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

Đặc biệt dữ liệu svg được tối ưu hóa này với độ dốc: http://codepen.io/tigt/post/optimizing-svgs-in-data-uris

Tôi cũng gặp vấn đề tương tự (vẫn có trong phiên bản Magento 1.9.3.1) vì vậy tôi đã tạo một mô-đun để giải quyết lỗi này: https://github.com/just-better/magento1-css-merge-data-uri- sửa chữa