Mecanik/cloudflare-image-resizing-worker

Font-URL in woocommerce.css replaced after Autoptimize css aggregation

Closed this issue · 1 comments

IntricateGrapeVine commented

First, thank you for this great piece of code! Amazing work and runs like a charm. I would have never managed to approach CF image resizing without this.

In our setup however the worker replaces a URL of the "star.eot" and "woocommerce.eot" (originally loaded in woocommerce.css) after the css files have been aggregated and optimized by the Autoptimze Wordpress Plugin. This breaks the display of the star rating in the shop and causes 404 errors in the logs like

404 | GET /wp-content/plugins/woocommerce/assets/fonts/star.eot);src:url(/example.com/wp-content/plugins/woocommerce/assets/fonts/star.eot HTTP/1.0

How to reproduce:

  1. woocommerce.css default loads the font
@font-face{
	font-family:star;
	src:url(../fonts/star.eot); [...]
  1. Autoptimize rewrites this during aggregation to
@font-face{
	font-family:star;
	src:url(//example.com/wp-content/plugins/woocommerce/assets/css/../fonts/star.eot); [...]
  1. CF Worker picks up the URL, rewrites and breaks
@font-face{
	font-family:star;
	src:url('//example.com/cdn-cgi/image/quality=80,format=auto,onerror=redirect,metadata=none/wp-content/plugins/woocommerce/assets/css/../fonts/star.eot); [...]

How I fixed it (not sure if this breaks other worker functions in turn...):

I have surrounded line 435 of the worker with this if clause

if(originalBody.indexOf("woocommerce/assets/") === -1) { 
    let result = originalBody.replace(rgxCss, `url('$1${CDN}$2$3')`);
}

But I assume it would be better to adjust the original regular expression to not pick up this path rather than to prevent the worker code from doing its magic.

Hope this information is clear enough and can be reproduced

Mecanik commented

Hi,

Sorry for the delay, please test the latest version. The regex has been improved and you should not have such issue.

Regards

  • 👍1