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.