8

Magento CSS file merge is pretending the hostname to my data-uris because the RegEx in Mage_Core_Model_Design_Package (beforeMergeCss) does not work as expected. It should prepend hostname to relative image paths, but not to Data URIs.

$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;

Result after merge:

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

How to avoid this? I couldn't find out how to correct the synthax of the used RegEx. (Using a GIF is not a real solution to me)

12

In iphone.css magento also uses data URI but without quotes, try to do the same

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

In your case instead of

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

you should use

/url\\(\\s*(?![\"\']?data:)([^)]+)\\)/
  • Sorry, I knew that. Problem is that the CSS-code is part of the foundation framework, which is linked to my project via bower. I surely could edit the code, but all my colleagues working on the project would have do the same. On every update. What would be the correct RegEx for all types (with single quotes, double quotes and without quotes)? – michael Feb 14 '14 at 6:53
  • Answer updated. – oleksii.svarychevskyi Feb 14 '14 at 10:49
  • If my answer helped you please mark it as accepted. – oleksii.svarychevskyi Feb 15 '14 at 22:54
  • This answer broke other css assets from being compiled. The other answer from @jblandry was what we ended up using that fixed everything. – FactoryAidan Mar 7 at 23:32
3

Actually this regexp covers more cases

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

Especially this optimized svg data with gradients: http://codepen.io/tigt/post/optimizing-svgs-in-data-uris

  • This answer FIXED ALL issues without breaking anything. The 'other' (currently accepted) answer fixed one thing but broke many others. This should be changed to the accepted answer. – FactoryAidan Mar 7 at 23:29
2

I'd the same issue (still present in Magento version 1.9.3.1) so I've created a module to solve this bug: https://github.com/just-better/magento1-css-merge-data-uri-fix

  • Still present in 1.9.3.4 (since 1.7.) – sv3n Jul 30 '17 at 22:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.