Проблема с 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 не является реальным решением для меня)

magento-1.8 css bug regex Майкл
источник

Ответы:

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