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)

Improve this question

3 Answers 3

Reset to default
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:)([^)]+)\\)/
Improve this answer
4
  • 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
    Commented Feb 14, 2014 at 6:53
  • Answer updated.
    – oleksii.svarychevskyi
    Commented Feb 14, 2014 at 10:49
  • If my answer helped you please mark it as accepted.
    – oleksii.svarychevskyi
    Commented Feb 15, 2014 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
    Commented Mar 7, 2019 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

Improve this answer
1
  • 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
    Commented Mar 7, 2019 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

Improve this answer
1
  • Still present in 1.9.3.4 (since 1.7.)
    – sv3n
    Commented Jul 30, 2017 at 22:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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