Problema con URI dati e Unione file CSS


9

L'unione di file CSS Magento sta fingendo il nome host nel mio uris di dati perché RegEx in Mage_Core_Model_Design_Package( beforeMergeCss) non funziona come previsto. Dovrebbe anteporre il nome host ai percorsi delle immagini relative, ma non agli URI dei dati.

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

Risultato dopo l'unione:

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

Come evitarlo? Non sono riuscito a scoprire come correggere la sintassi del RegEx usato. (L'uso di una GIF non è una vera soluzione per me)

Risposte:


13

In iphone.css magento usa anche URI di dati ma senza virgolette, prova a fare lo stesso

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

Nel tuo caso invece di

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

dovresti usare

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

Scusa, lo sapevo. Il problema è che il codice CSS fa parte del framework di base, che è collegato al mio progetto tramite Bower. Potrei sicuramente modificare il codice, ma tutti i miei colleghi che lavorano al progetto avrebbero fatto lo stesso. Ad ogni aggiornamento. Quale sarebbe il RegEx corretto per tutti i tipi (con virgolette singole, doppie virgolette e senza virgolette)?
michael

Risposta aggiornata
oleksii.svarychevskyi,

Se la mia risposta ti ha aiutato, contrassegnala come accettata.
oleksii.svarychevskyi,

Questa risposta ha impedito la compilazione di altre risorse CSS. L'altra risposta di @jblandry è stata quella che abbiamo usato per risolvere tutto.
FactoryAidan

4

In realtà questa regexp copre più casi

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

Soprattutto questi dati svg ottimizzati con gradienti: http://codepen.io/tigt/post/optimizing-svgs-in-data-uris


Questa risposta ha RISOLTO TUTTI i problemi senza interrompere nulla. La risposta "altro" (attualmente accettata) ha risolto una cosa, ma ne ha spezzate molte altre. Questo dovrebbe essere cambiato nella risposta accettata.
FactoryAidan

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.