Проблема с URI данных и слиянием файлов CSS

9

CSS-файл Magento объединяет имя хоста с моим data-uris, потому что RegEx в Mage_Core_Model_Design_Package( beforeMergeCss) не работает должным образом . Он должен добавлять имя хоста к относительным путям изображения, но не к URI данных.

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

CSS-код:

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

Результат после слияния:

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

Как этого избежать? Я не мог узнать, как исправить синтакс, использованный RegEx. (Использование GIF не является реальным решением для меня)

— Майкл
источник

13

В iphone.css magento также использует URI данных, но без кавычек, попробуйте сделать то же самое

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

В вашем случае вместо

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

вы должны использовать

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

— oleksii.svarychevskyi
источник

Извините, я знал это. Проблема в том, что CSS-код является частью основы фреймворка, который связан с моим проектом через Bower. Я, конечно, мог бы редактировать код, но все мои коллеги, работающие над проектом, сделали бы то же самое. На каждом обновлении. Что будет правильным RegEx для всех типов (с одинарными, двойными и без кавычек)?

— Майкл

Ответ обновлен.

— oleksii.svarychevskyi

Если мой ответ помог вам, отметьте его как принятый.

— Алексей.Сваричевский

Этот ответ сломал другие активы CSS от компиляции. Другим ответом @jblandry было то, что мы в конечном итоге использовали, чтобы исправить все.

— FactoryAidan

4

На самом деле это регулярное выражение охватывает больше случаев

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

Особенно это оптимизированные данные SVG с градиентами: http://codepen.io/tigt/post/optimizing-svgs-in-data-uris

— jblandry
источник

Этот ответ исправил все проблемы, не нарушая ничего. «Другой» (в настоящее время принятый) ответ исправил одну вещь, но сломал много других. Это должно быть изменено на принятый ответ.

— FactoryAidan

2

У меня та же проблема (все еще присутствует в Magento версии 1.9.3.1), поэтому я создал модуль для решения этой ошибки: https://github.com/just-better/magento1-css-merge-data-uri- исправление

— Рой
источник

Все еще присутствует в 1.9.3.4 (начиная с 1.7.)

— sv3n