Fix CSS parsing by stripping BOM

[kienstra]

Steps to reproduce

1. Activate the Essence Pro Genesis theme (or use the wp_enqueue_style() snippet below in another theme)
2. View the source of the front page
3. Expected: the ionicons stylesheet should have more that 0 bytes in the <style amp-custom>:

4. Actual: the stylesheet has 0 bytes...it seems that it's stripped in tree-shaking:

This stylesheet is enqueued in the Essence Pro theme's functions.php:

wp_enqueue_style(
	'ionicons',
	'//unpkg.com/ionicons@4.1.2/dist/css/ionicons.min.css',
	array(),
	CHILD_THEME_VERSION
);

This PR outputs the ionicons @font-face, as shown in the 'Expected' screenshot. Still, this approach probably needs more thought.

This issue doesn't look to exist on other Genesis themes that use an ionicons stylesheet. They use a different URL for the stylesheet, and it seems to appear fine.

[hellofromtonya]

@kienstra What's the status on this PR?

[kienstra]

Status

Hi @hellofromtonya,
This PR is still in progress. It might need a different approach. I'll continue working on it in the next few days.

[kienstra]

Byte Order Mark
Steps to reproduce

1. Activate the Essence Pro theme, or simply use this snippet:

wp_enqueue_style(
	'ionicons',
	'https://unpkg.com/ionicons@4.1.2/dist/css/ionicons.min.css',
);

2. Checkout 62ca70c from this PR's branch. Without that commit, the Ionicons stylesheet doesn't display at all.
3. Go to the AMP URL for the homepage
4. Expected: The ionicons font loads, and the search and menu icons at the top of the page display
5. Actual: The ionicons fonts don't load, as the stylesheet seems to render with the “\ufeff” character (the Byte Order Mark):

Strangely, the “\ufeff” character wasn't a problem on the non-AMP endpoint. That character seems to be at the very beginning of the stylesheet, though it's not normally visible:

https://unpkg.com/ionicons@4.1.2/dist/css/ionicons.min.css

If you run this snippet inside PhpStorm, it'll show that the character is in the file:

preg_match( '/\x{FEFF}/u', wp_remote_get( 'https://unpkg.com/ionicons@4.1.2/dist/css/ionicons.min.css' )['body'] )

So 35c7386 removes this character from the concatenated CSS.

I'm not sure this is the right solution, but it has worked so far as a workaround.

[kienstra]

Request For Review

Hi @westonruter,
Could you please review this PR, captured in https://github.com/studiopress/genesis-amp/issues/38?

Thanks!

[westonruter]

@kienstra I think the issue is fully resolved simply be stripping the BOM before the CSS is parsed. I believe this is a bug with the PHP-CSS-Parser, so I've opened MyIntervals/PHP-CSS-Parser#150.

Please take a look to confirm. I'm now seeing the expected @font-face in the custom styles:

@font-face{font-family:"Ionicons";src:url("//unpkg.com/ionicons@4.1.2/dist/fonts/ionicons.eot?v=4.1.1");src:url("//unpkg.com/ionicons@4.1.2/dist/fonts/ionicons.eot?v=4.1.1#iefix") format("embedded-opentype"),url("//unpkg.com/ionicons@4.1.2/dist/fonts/ionicons.woff2?v=4.1.1") format("woff2"),url("//unpkg.com/ionicons@4.1.2/dist/fonts/ionicons.woff?v=4.1.1") format("woff"),url("//unpkg.com/ionicons@4.1.2/dist/fonts/ionicons.ttf?v=4.1.1") format("truetype"),url("//unpkg.com/ionicons@4.1.2/dist/fonts/ionicons.svg?v=4.1.1#Ionicons") format("svg");font-weight:normal;font-style:normal}

[kienstra]

Looks Good, Thanks For Fixing

Hi @westonruter,
Thanks for moving the removal of the BOM higher, and removing the line from the conditional.

As expected, the Ionicons load on AMP endpoints with Essence Pro:

I bumped the cache group locally to force re-processing the stylesheet, but there's of course no need to bump that here.