Problem mit Daten-URIs und Zusammenführung von CSS-Dateien

9

Beim Zusammenführen von Magento-CSS-Dateien wird der Hostname für meine Daten-Uris vorgetäuscht, da RegEx in Mage_Core_Model_Design_Package( beforeMergeCss) nicht wie erwartet funktioniert. Der Hostname sollte relativen Bildpfaden vorangestellt werden, nicht jedoch Daten-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;

Ergebnis nach dem Zusammenführen:

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

Wie vermeide ich das? Ich konnte nicht herausfinden, wie die Synthax des verwendeten RegEx korrigiert werden kann. (Die Verwendung eines GIF ist für mich keine echte Lösung.)

magento-1.8 css bug regex Michael
quelle

Antworten:

13

In iphone.css verwendet magento auch Daten-URI, aber versuchen Sie, dies ohne Anführungszeichen zu tun

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

In deinem Fall statt 

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

du solltest benutzen

/url\\(\\s*(?![\"\']?data:)([^)]+)\\)/
oleksii.svarychevskyi
quelle
Entschuldigung, das wusste ich. Problem ist, dass der CSS-Code Teil des Foundation Frameworks ist, das über Bower mit meinem Projekt verknüpft ist. Ich könnte den Code sicherlich bearbeiten, aber alle meine Kollegen, die an dem Projekt arbeiten, hätten dasselbe getan. Bei jedem Update. Was wäre das richtige RegEx für alle Typen (mit einfachen Anführungszeichen, doppelten Anführungszeichen und ohne Anführungszeichen)?
Michael
Antwort aktualisiert.
oleksii.svarychevskyi
Wenn meine Antwort Ihnen geholfen hat, markieren Sie sie bitte als akzeptiert.
oleksii.svarychevskyi
Diese Antwort hat die Kompilierung anderer CSS-Assets verhindert. Die andere Antwort von @jblandry war, dass wir letztendlich alles repariert haben.
FactoryAidan
4

Tatsächlich deckt dieser reguläre Ausdruck mehr Fälle ab

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

Insbesondere diese optimierten SVG-Daten mit Verläufen: http://codepen.io/tigt/post/optimizing-svgs-in-data-uris

jblandry
quelle
Diese Antwort hat ALLE Probleme behoben, ohne etwas zu beschädigen. Die 'andere' (derzeit akzeptierte) Antwort hat eine Sache behoben, aber viele andere gebrochen. Dies sollte in die akzeptierte Antwort geändert werden.
FactoryAidan