Problema com URIs de dados e mesclagem de arquivos CSS

9

A mesclagem de arquivos CSS do Magento está fingindo o nome do host para meus dados-uris porque o RegEx in Mage_Core_Model_Design_Package( beforeMergeCss) não funciona conforme o esperado. Ele deve incluir o nome do host nos caminhos de imagem relativos, mas não nos URIs de dados.

$cssUrl = '/url\\(\\s*(?!data:)([^\\)\\s]+)\\s*\\)?/';
$contents = preg_replace_callback($cssUrl, array($this, '_cssMergerUrlCallback'), $contents);

Código CSS:

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

Resultado após mesclagem:

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

Como evitar isso? Não consegui descobrir como corrigir a sintaxe do RegEx usado. (Usar um GIF não é uma solução real para mim)

magento-1.8 css bug regex Michael
fonte

Respostas:

13

No iphone.css, o magento também usa URI de dados, mas sem aspas, tente fazer o mesmo

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

No seu caso, em vez de 

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

você deveria usar

/url\\(\\s*(?![\"\']?data:)([^)]+)\\)/
oleksii.svarychevskyi
fonte
Desculpe, eu sabia disso. O problema é que o código CSS faz parte da estrutura básica, que está vinculada ao meu projeto via bower. Eu certamente poderia editar o código, mas todos os meus colegas que trabalham no projeto teriam feito o mesmo. Em toda atualização. Qual seria o RegEx correto para todos os tipos (com aspas simples, aspas duplas e sem aspas)?
22614 Michael
Resposta atualizada.
Oleksii.svarychevskyi
Se minha resposta ajudou, marque-a como aceita.
Oleksii.svarychevskyi
Essa resposta impediu que outros recursos css fossem compilados. A outra resposta do @jblandry foi o que acabamos usando que corrigiu tudo.
FactoryAidan
4

Na verdade, esse regexp cobre mais casos

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

Especialmente esses dados svg otimizados com gradientes: http://codepen.io/tigt/post/optimizing-svgs-in-data-uris

jblandry
fonte
Esta resposta corrigiu todos os problemas sem quebrar nada. A resposta 'outro' (atualmente aceito) corrigiu uma coisa, mas quebrou muitas outras. Isso deve ser alterado para a resposta aceita.
FactoryAidan