データURIとCSSファイルのマージに関する問題


9

Mage_Core_Model_Design_PackagebeforeMergeCss)のRegExが期待どおりに機能しないため、Magento CSSファイルのマージはホスト名を私のdata-urisに見せかけています。ホスト名を相対画像パスの前に付加する必要がありますが、データURIの前には付加しません。

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

CSSコード:

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

マージ後の結果:

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

これを回避するには?使用したRegExのシンタックスを修正する方法を見つけることができませんでした。(GIFを使用することは私にとって実際の解決策ではありません)

回答:


13

iphone.cssでは、magentoもデータURIを使用しますが、引用符なしで、同じことを実行してください

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

あなたの場合ではなく

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

あなたは使うべきです

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

すみません、それは知っていました。問題は、CSSコードが基盤フレームワークの一部であり、bowerを介して私のプロジェクトにリンクされていることです。確かにコードを編集することはできましたが、プロジェクトに携わっているすべての同僚が同じことをしたでしょう。すべての更新。すべてのタイプ(単一引用符、二重引用符あり、引用符なし)の正しいRegExは何ですか?
マイケル2014

回答を更新しました。
oleksii.svarychevskyi

私の回答が役に立った場合は、承認済みとしてマークしてください。
oleksii.svarychevskyi 14

この回答により、他のcssアセットがコンパイルされなくなりました。@jblandryからのもう1つの答えは、最終的にすべてを修正したものを使用することでした。
FactoryAidan

4

実際、この正規表現はより多くのケースをカバーしています

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

特に、この最適化されたグラデーションのsvgデータ:http : //codepen.io/tigt/post/optimizing-svgs-in-data-uris


この答えは何も壊すことなくすべての問題を修正しました。「その他」(現在受け入れられている)の回答は、1つのことを修正しましたが、他の多くを破りました。これは承認された回答に変更する必要があります。
FactoryAidan

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.