Boost: Inline SVGs stripped out of Critical CSS

[dilirity]

CSS properties with SVG tags in their values are valid so we need to make sure Boost respects that and doesn't strip them.

---

If Critical CSS generation picks up a selector that uses an SVG (for example as a background), the SVG gets stripped when Boost displays the Critical CSS in the front-end.

The stripping is because of this:

jetpack/projects/plugins/boost/app/lib/critical-css/Display_Critical_CSS.php

Line 102 in df039de

echo wp_strip_all_tags( $critical_css );

However, even if the tag wasn't stripped, it wouldn't be displayed, because the double quotes get stripped when it gets saved in the DB.

How to reproduce

• Setup Boost free;
• Add this snippet to your website (to add an ATF tag we'll add CSS with an SVG to):

add_action( 'wp_head', 'jb_add_test_svg_background' );
function jb_add_test_svg_background() {
	echo '<div class="test-svg-background">Hello</div>';
}

• Add this CSS to your theme's style.css:

/* These CSS rules will be captured by Critical CSS */
.test-svg-background {
	background:#fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' fill='%2328303d'><polygon points='0,0 10,0 5,5'/></svg>") no-repeat;
}

• Generate Critical CSS;
• Open the home page and look at the generated CSS (selector #jetpack-boost-critical-css);
• It will be missing the SVG tag.

See that broken CSS declaration is removing SVGs

• Update PHP to not strip tags by removing wp_strip_all_tags from $css;
• Check the front-end again. The SVG will be in the Critical CSS. Note that the string is not wrapped in double quotes.

As a result, the value of the background property will be broken:

You can see this selector by changing the media property of #jetpack-boost-critical-css from not all to all and then inspect .test-svg-background. Since the main style.css is loaded, you'll see the working declaration, but just below it is the broken one (that users loading the pages will see) from the Critical CSS:

Deliverable

Boost should respect SVGs and not change the CSS related to them in the generated Critical CSS.

[github-actions]

OpenAI suggested the following labels for this issue:

• [Feature Group] Content Management: The issue relates to how CSS is managed and displayed on the front-end of websites, which is a key aspect of content management.
• [Boost Feature] Critical CSS: The problem directly involves the Critical CSS feature in Boost, as SVGs are not correctly included in the generated Critical CSS.
• [Boost Feature] Performance History: Understanding the performance impact of CSS generation and how it influences site rendering is crucial for performance analysis.

[github-actions]

This issue could use some more labels, to help prioritize and categorize our work. Could you please add at least a [Type], a [Feature], and a [Pri] label?