Problema con URI de datos y combinación de archivos CSS

9

La fusión de archivos CSS de Magento está simulando el nombre de host a mi data-uris porque el RegEx en Mage_Core_Model_Design_Package( beforeMergeCss) no funciona como se esperaba. Debe anteponer el nombre de host a las rutas de imagen relativas, pero no a los URI de datos.

$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 después de la fusión:

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

¿Cómo evitar esto? No pude descubrir cómo corregir el sinthax del RegEx usado. (Usar un GIF no es una solución real para mí)

magento-1.8 css bug regex Miguel
fuente

Respuestas:

13

En iphone.css, magento también usa URI de datos pero sin comillas, intente hacer lo mismo

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

En tu caso en lugar de 

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

Deberías usar

/url\\(\\s*(?![\"\']?data:)([^)]+)\\)/
oleksii.svarychevskyi
fuente
Lo siento, lo sabía. El problema es que el código CSS es parte del marco básico, que está vinculado a mi proyecto a través de Bower. Seguramente podría editar el código, pero todos mis colegas que trabajan en el proyecto habrían hecho lo mismo. En cada actualización. ¿Cuál sería el RegEx correcto para todos los tipos (con comillas simples, comillas dobles y sin comillas)?
michael
Respuesta actualizada
oleksii.svarychevskyi
Si mi respuesta lo ayudó, márquelo como aceptado.
oleksii.svarychevskyi
Esta respuesta rompió la compilación de otros activos de CSS. La otra respuesta de @jblandry fue lo que terminamos usando que solucionó todo.
FactoryAidan
4

En realidad, esta expresión regular cubre más casos

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

Especialmente estos datos SVG optimizados con gradientes: http://codepen.io/tigt/post/optimizing-svgs-in-data-uris

jblandry
fuente
Esta respuesta FIJA TODOS los problemas sin romper nada. La respuesta 'otro' (actualmente aceptado) arregló una cosa pero rompió muchas otras. Esto debe cambiarse a la respuesta aceptada.
FactoryAidan