Problème avec les URI de données et la fusion de fichiers CSS

9

La fusion de fichiers CSS Magento prétend que le nom d'hôte de mes données-uris parce que le RegEx dans Mage_Core_Model_Design_Package( beforeMergeCss) ne fonctionne pas comme prévu. Il doit ajouter le nom d'hôte aux chemins d'image relatifs, mais pas aux URI de données.

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

Code CSS:

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

Résultat après fusion:

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

Comment éviter cela? Je n'ai pas pu trouver comment corriger le synthax du RegEx utilisé. (L'utilisation d'un GIF n'est pas une vraie solution pour moi)

magento-1.8 css bug regex Michael
la source

Réponses:

13

Dans iphone.css, magento utilise également l'URI de données mais sans guillemets, essayez de faire de même

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

Dans votre cas au lieu de 

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

Tu devrais utiliser

/url\\(\\s*(?![\"\']?data:)([^)]+)\\)/
oleksii.svarychevskyi
la source
Désolé, je le savais. Le problème est que le code CSS fait partie du framework de fondation, qui est lié à mon projet via bower. Je pourrais sûrement éditer le code, mais tous mes collègues travaillant sur le projet auraient fait de même. À chaque mise à jour. Quel serait le RegEx correct pour tous les types (avec guillemets simples, guillemets doubles et sans guillemets)?
michael
Réponse mise à jour.
oleksii.svarychevskyi
Si ma réponse vous a aidé, veuillez la marquer comme acceptée.
oleksii.svarychevskyi
Cette réponse a empêché la compilation d'autres ressources CSS. L'autre réponse de @jblandry était ce que nous avons fini par utiliser pour tout corriger.
FactoryAidan
4

En fait, cette expression rationnelle couvre plus de cas

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

Surtout ces données svg optimisées avec des dégradés: http://codepen.io/tigt/post/optimizing-svgs-in-data-uris

jblandry
la source
Cette réponse a corrigé TOUS les problèmes sans rien casser. La réponse «autre» (actuellement acceptée) a corrigé une chose mais en a cassé beaucoup d'autres. Cela devrait être changé pour la réponse acceptée.
FactoryAidan