Parallel CSS does not function with CSS Embedded Images *FIX* [#1191890]

http://drupal.org/project/parallel_css works great with advagg!
However when I included CSS Embedded Images -> http://drupal.org/project/css_emimage
the final output has broken methods for any CSS images - other than IE7 - or less (and 'anyhow' CSS Embedded Images disables itself for such old browsers <IE8)

Comments

Comment #1

Peter Bowey commented 17 June 2011 at 16:10

Sorry I have not included more succulent debug help for this, but it is way past my bed-time.
Basically, If I revert to not using parallel_css and doing my previous advagg mapping (as per http://drupal.org/node/1172012), css_emimage works fine.

Comment #2

chriscalip commented 17 June 2011 at 19:35

Assigned:

Unassigned

» chriscalip

hehe i also am interested if it was gonna fit with css_emimage. I thought having a heavier weight than css_emimage was enough. Apparently not.

I'll do a couple of drupal site scaffolds, test, debug then make necessary changes or request with css_emimage.

Comment #3

chriscalip commented 17 June 2011 at 22:24

I know a lot of folks knows this already, probably the knowledge is left unsaid, and taken as an assumption. But for the purposes of everyone getting on the same page:

Read up on Data URL scheme http://en.wikipedia.org/wiki/Data_URI_scheme and it looks like http://www.drupal.org/project/parallel_css and http://www.drupal.org/project/css_emimage are meant to be mutually exclusive on a per image basis. "Data URIs are sometimes called Uniform Resource Locators, although they do not actually locate anything remote." Meaning css_emimage will only rewrite images that are in relative state:

ul li.expanded {
  background: transparent url(images/menu-expanded.gif) no-repeat 1px .35em;
}
// TO 
ul li.expanded {
  background: transparent url(data:image/gif;base64,
  R0lGODlhCgAKAMQUAM/Q0vT09Ojr7s7Q0dLU1f7+/u/z9+Dj5tfX1+Dg4MrKyu
  fq7tfZ27m5uba2tsLCwvv7+7W1tbS0tP////P3+wAAAAAAAAAAAAAAAAAAAAAA
  AAAAAAAAAAAAAAAAAAAAACH5BAEAABQALAAAAAAKAAoAAAU0ICWOZGkCkaRKEU
  AtTzHNU/Es1JDQUzKIggZkBmkIRgTEDEEgGRyBgMNQYigUDBPlcCCFAAA7) no-repeat 1px .35em;
}

It will not rewrite anything that is with a complete url.
For example css_emimage will and "should" ignore:

background:url('http://img1.drupal.org/sites/all/themes/do/1.png');
background:url('http://img2.drupal.org/sites/all/themes/do/2.png');
background:url('http://img3.drupal.org/sites/all/themes/do/3..png');
background:url('http://img4.drupal.org/sites/all/themes/do/4.png');
background:url('http://s1.amazonaws.com/drupal_cdn/sites/all/themes/do/5.png');
background:url('http://img1.drupal.org/sites/all/themes/do/6.png');
background:url('http://img2.drupal.org/sites/all/themes/do/7.png');
background:url('http://img3.drupal.org/sites/all/themes/do/8.png');

Having said that we can have a partial integration with css_emimage because in practice css_emimage most likely will only rewrite that "Only embed images less than 32KB Internet Explorer does not support embedded images larger than 32KB. If you are not concerned about IE support you can ignore this limitation; otherwise, it is best to leave this checked."

If we have done our jobs right we should have a proper working integration already by having parallel_css as heavier than css_emimage (meaning parallel_css fires after css_emimage). If there are any errors it might be the case that our replacement routines are still replacing the images that css_emimage has replaced. This should not be the case. I will take a look at this this tomorrow.

Pretty much on a data set of :

background:url('sites/all/themes/do/1.png');
background:url('sites/all/themes/do/2.png');
background:url('sites/all/themes/do/3..png');
background:url('sites/all/themes/do/4.png');
background:url(data:image/gif;base64,R0lGODlhCgAKAMQUAM/Q0vT09Ojr7s7Q0dLU1f7+/u/z9+Dj5tfX1+Dg4MrKyufq7tfZ27m5uba2tsLCwvv7+7W1tbS0tP////P3+wAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAACH5BAEAABQALAAAAAAKAAoAAAU0ICWOZGkCkaRKEUAtTzHNU/Es1JDQUzKIggZkBmkIRgTEDEEgGRyBgMNQYigUDBPlcCCFAAA7);
background:url('sites/all/themes/do/5.png');
background:url('sites/all/themes/do/6.png');
background:url('sites/all/themes/do/7.png');
background:url('sites/all/themes/do/8.png');

The result should be:

background:url('http://img1.drupal.org/sites/all/themes/do/1.png');
background:url('http://img2.drupal.org/sites/all/themes/do/2.png');
background:url('http://img3.drupal.org/sites/all/themes/do/3..png');
background:url('http://img4.drupal.org/sites/all/themes/do/4.png');
background:url(data:image/gif;base64,R0lGODlhCgAKAMQUAM/Q0vT09Ojr7s7Q0dLU1f7+/u/z9+Dj5tfX1+Dg4MrKyufq7tfZ27m5uba2tsLCwvv7+7W1tbS0tP////P3+wAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAACH5BAEAABQALAAAAAAKAAoAAAU0ICWOZGkCkaRKEUAtTzHNU/Es1JDQUzKIggZkBmkIRgTEDEEgGRyBgMNQYigUDBPlcCCFAAA7);
background:url('http://s1.amazonaws.com/drupal_cdn/sites/all/themes/do/5.png');
background:url('http://img1.drupal.org/sites/all/themes/do/6.png');
background:url('http://img2.drupal.org/sites/all/themes/do/7.png');
background:url('http://img3.drupal.org/sites/all/themes/do/8.png');

Comment #4

chriscalip commented 17 June 2011 at 22:56

Heh, this got my attention. Confirmed, we have cases of http://domain.com/data:imageXXXXX.

What weird is that

background:url(data:image/gif;base64,R0lGODlhCgAKAMQUAM/Q0vT09Ojr7s7Q0dLU1f7+/u/z9+Dj5tfX1+Dg4MrKyufq7tfZ27m5uba2tsLCwvv7+7W1tbS0tP////P3+wAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAACH5BAEAABQALAAAAAAKAAoAAAU0ICWOZGkCkaRKEUAtTzHNU/Es1JDQUzKIggZkBmkIRgTEDEEgGRyBgMNQYigUDBPlcCCFAAA7);

should not be a match for

preg_replace_callback('/url\(\s*[\'"]?\/?(.+?)[\'"]?\s*\)/i','function_name',$contents);
preg_replace_callback('/src=\s*[\'"]?\/?(.+?)[\'"]?\s*\)/i', "function_name", $contents);

Peter how's your regex? we could probably add an exception of not (data)

Comment #5

Peter Bowey commented 18 June 2011 at 01:03

Refer #4
Many thanks Chris @chriscalip

Yes, I think that is the area (regex) to look into!
Will checkout method's....

Here is a 'live capture' of how the current 'Parallel CSS + CSS Embedded Images' deals with data:
http://www.webpagetest.org/result/110618_PX_VQ5Q/1/details/

From the 'above' we can see this incorrect method:

Request 8:

URL: http://www.peterbowey.com.au/data:image/png;base64,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
Host: www.peterbowey.com.au
IP: 165.228.91.94
Location: Sydney, Australia*
Error/Status Code: 12152
Start Offset: 2.275 s
Initial Connection: 374 ms
Time to First Byte: 811 ms
Content Download: 1189 ms
Bytes In (downloaded): 0.0 KB
Bytes Out (uploaded): 4.1 KB

Request Headers:

GET /data:image/png;base64,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 HTTP/1.1
Accept: */*
Referer: http://www.peterbowey.com.au/
Accept-Language: en-US
User-Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; PTST 2.288)
Accept-Encoding: gzip, deflate
Host: www.peterbowey.com.au
Connection: Keep-Alive
Cookie: route=a09179338e3b3d76612c2a9a3f0c1e5b

Comment #6

chriscalip commented 18 June 2011 at 00:57

Yup, you confirmed my findings it the regex it's failing.

I gotta put in some time to figure out the right regex

http://www.regular-expressions.info/lookaround.html
http://www.solmetra.com/scripts/regex/index.php

Prolly take me half an hour.. since i don't do it as much. Cooking dinner. will fix tomorrow morning. or if you can i could use the right regex :)

Comment #7

Peter Bowey commented 18 June 2011 at 05:27

Many thanks Chris @chriscalip

Here is the updated regex for Parallel CSS:

-$contents = preg_replace_callback('/url\(\s*[\'"]?\/?(.+?)[\'"]?\s*\)/i', "_parallel_css_cdn_replace_url", $contents);
+$contents = preg_replace_callback('/url\(\s*[\'"]?\/?(?!data)[\'"]?\s*\)/i', "_parallel_css_cdn_replace_url", $contents);

Note: Replace *both* instances of this 'regex' +patch in parallel_css.module.

I was inspired by reading this link -> https://github.com/ckorhonen/selectivizr/commit/e38598d3deccbdc971b6eb46...

The 'magick' is the regex part: (?!data)
The above code 'change' is still a bit 'primitive' - so I will enhance the regex - later!

Basically, we wanted 'proof of concept' first :)

*I note that there are some other CSS image types that the regex should process*
So expect a 'better regex' soon.... (smile)

A) Proof Concept: 'Live working Capture' using the new regex with Internet Explorer 9: -> http://www.webpagetest.org/result/110618_79_VR6R/2/details/

Comment #8

Peter Bowey commented 18 June 2011 at 12:35

Title:	Parallel CSS does not function with CSS Embedded Images FIX	» Parallel CSS does not function with CSS Embedded Images
Category:	bug	» support
Priority:	Major	» Normal
Status:	Patch (to be ported)	» Active

*FIX*

@chriscalip - as promised, here is a improved (clean + tight) regex:

  $contents = preg_replace_callback('/\burl\(\s*([\'"]?)(?!data:)([^\'")]+)\s*\)/i', "_parallel_css_cdn_replace_url", $contents);
  $contents = preg_replace_callback('/\bsrc\s*=\s*([\'"]?)(?!data:)([^\'")]+)\s*\)/i', "_parallel_css_cdn_replace_src", $contents);

  $contents = preg_replace_callback('/\burl\(\s*([\'"]?)(?!data:)([^\'")]+)\s*\)/i', "_parallel_css_replace_url", $contents);
  $contents = preg_replace_callback('/\bsrc\s*=\s*([\'"]?)(?!data:)([^\'")]+)\s*\)/i', "_parallel_css_replace_src", $contents);

Improved our regex with some '\b' = 'word boundary' checks (on 'url' + 'src'), and better '\s' = 'white space' checks.

Bench Test Report: = "combined IE6-IE9, + FF4.x CSS url tests pass OK"

Comment #9

Peter Bowey commented 18 June 2011 at 08:49

Title:	Parallel CSS does not function with CSS Embedded Images	» Parallel CSS does not function with CSS Embedded Images FIX
Category:	support	» bug
Priority:	Normal	» Major
Status:	Active	» Patch (to be ported)

Comment #10

Peter Bowey commented 20 June 2011 at 16:31

Title:	Parallel CSS does not function with CSS Embedded Images	» Parallel CSS does not function with CSS Embedded Images FIX
Category:	support	» bug
Priority:	Normal	» Critical
Status:	Active	» Reviewed & tested by the community

Comment #11

chriscalip commented 20 June 2011 at 16:40

hey Peter,

Got redirected to other chores this last weekend. I am looking into this now. Looks like there are a couple of bugs introduced by the new regex and i realize some bugs in the currently code after looking into this more further.

Comment #12

Peter Bowey commented 20 June 2011 at 16:47

@chriscalip

No problems Chris, the new regex I posted here has been very heavily tested and is a good pass on everything I have processed (from IE6 - IE9 - FF4.01). Also, I am pleased to report the processing time has decreased for bundling CSS aggregates! I see about a 8% performance increase. :)

Yes #8 is the new regex!

Comment #13

chriscalip commented 20 June 2011 at 17:16

Yup the regex works it just changes the assumption I made during @ the replacement functions for example

_parallel_css_replace_url($matches);

The previous function is assuming an array of 2 elements $matches[0] and $matches[1], this changes it to 3 elements [0][1][2], had to rewrite code from $matches[1] to $matches[2]

One thing I found that I am not satisfied with the code is this:

$replaced_text = "url('" . $parallel_css_settings_urls[$unique_file_id % $parallel_css_settings_count] . "/$matches[2]')";

thinking of changing to:

$replaced_text = "url('" . rtrim($parallel_css_settings_urls[$unique_file_id % $parallel_css_settings_count],'/') . "/$matches[2]')";

its a bit more expensive...

Comment #14

Peter Bowey commented 20 June 2011 at 17:35

@chriscalip

Thanks Chris, My poor [dead] mind is much too tired to comment on that 'possible' change - it is 3:08AM here!
I will leave that 'cool code' homework for you to ponder in your day-light :)

Comment #15

chriscalip commented 20 June 2011 at 17:46

Thanks Peter, ill get this done by the time you wake up. Have a good morning.

Comment #16

chriscalip commented 20 June 2011 at 22:49

http://drupalcode.org/project/parallel_css.git/commit/791445c Done.

Here are the stuff included in the improved regex :

a. no "absolute urls" http://www.drupal.org/misc/1.png
b. no data uri

Comment #17

chriscalip commented 20 June 2011 at 22:50

Status:

Reviewed & tested by the community

» Fixed

awaiting feedback then will release new version.

Comment #18

chriscalip commented 21 June 2011 at 05:23

@ comment #8
Improved our regex with some '\b' = 'word boundary' checks (on 'url' + 'src'), and better '\s' = 'white space' checks.

added improvements here:
http://drupalcode.org/project/parallel_css.git/commit/cf08bf0
:)

Comment #19

Peter Bowey commented 21 June 2011 at 11:18

@chriscalip, thanks Chris - looks good!
Will test and report!

Comment #20

Peter Bowey commented 21 June 2011 at 16:11

Refer #16 + #18

@chriscalip, I like the 'good thought' you had for:

a. no "absolute urls" http://www.drupal.org/misc/1.png
b. no data uri

I did not even think of that code 'problem'. Well done!
Thanks for including the optimized 'regex'

Comment #21

chriscalip commented 21 June 2011 at 17:12

I really like the idea of the word boundary and the better white space checks. thanks for that.

Comment #22

5 July 2011 at 17:21