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.)

— Michael
quelle

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

2

Ich hätte das gleiche Problem (immer noch in Magento Version 1.9.3.1 vorhanden), also habe ich ein Modul erstellt, um diesen Fehler zu beheben: https://github.com/just-better/magento1-css-merge-data-uri- Fix

— Roy
quelle

Noch vorhanden in 1.9.3.4 (seit 1.7.)

— sv3n