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

— Miguel
fuente

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

2

Tenía el mismo problema (todavía presente en Magento versión 1.9.3.1), así que he creado un módulo para resolver este error: https://github.com/just-better/magento1-css-merge-data-uri- reparar

— Roy
fuente

Todavía presente en 1.9.3.4 (desde 1.7.)

— sv3n