9

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)

sv3n
  • 11,657
  • 7
  • 40
  • 73
michael
  • 153
  • 8

3 Answers3

13

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:)([^)]+)\\)/
oleksii.svarychevskyi
  • 5,136
  • 1
  • 16
  • 22
  • 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 06: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 07 '19 at 23:32
4

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

jblandry
  • 41
  • 2
  • 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 07 '19 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

Roy
  • 394
  • 2
  • 12