Jetpack Tweaks: Decode child selectors > in Custom CSS

public_html/wp-content/mu-plugins/jetpack-tweaks/css-sanitization.php

@@ -12,6 +12,7 @@
 add_action( 'admin_notices',              __NAMESPACE__ . '\notify_import_rules_stripped'  );
 add_action( 'csstidy_optimize_subvalue',  __NAMESPACE__ . '\sanitize_csstidy_subvalues'    );
 add_action( 'safecss_parse_pre',          __NAMESPACE__ . '\update_csstidy_safelist', 0    );
+add_filter( 'wp_get_custom_css',          __NAMESPACE__ . '\filter_custom_css' );
 
 /**
  * Sanitize CSS saved through the Core/Jetpack editor inside the Customizer
@@ -222,3 +223,16 @@ function update_csstidy_safelist() {
 		$GLOBALS['csstidy']['all_properties'] = array_merge( $GLOBALS['csstidy']['all_properties'], $properties_for_csstidy );
 	}
 }
+
+/**
+ * Replace encoded > in CSS with a > so that CSS rules are valid.
+ *
+ * Remove this once the root issue is fixed in https://github.com/Automattic/jetpack/issues/21603.
+ *
+ * @param string $css CSS pulled in from the Custom CSS post type.
+ *
+ * @return string
+ */
+function filter_custom_css( $css ) {
+	return str_replace( '>', '>', $css );
+}

public_html/wp-content/mu-plugins/tests/test-jetpack-css-sanitization.php

@@ -0,0 +1,64 @@
+<?php
+
+namespace WordCamp\Tests;
+
+use WP_UnitTestCase;
+
+defined( 'WPINC' ) || die();
+
+/**
+ * Class Test_Jetpack_CSS_Sanitization
+ *
+ * @group mu-plugins
+ * @group jetpack-tweaks
+ * @group jetpack-css
+ *
+ * @package WordCamp\Tests
+ */
+class Test_Jetpack_CSS_Sanitization extends WP_UnitTestCase {
+
+	/**
+	 * Test that no selector characters are encoded.
+	 */
+	public function test_selectors_not_encoded() {
+		$input = <<<CSS
+.class > p,
+p ~ span,
+h2 + p,
+col || td,
+.pseudo:visited,
+.pseudo::before,
+[title],
+a[href="https://example.org"],
+a[title*='an example'],
+span[data-emoji~=🐈‍⬛]
+span[attr$="한글"] {
+	color: lightcoral;
+}
+CSS;
+
+		$post = wp_update_custom_css_post( $input );
+		$this->assertNotWPError( $post );
+
+		$output = wp_get_custom_css();
+		$this->assertEquals( $input, $output );
+	}
+
+	/**
+	 * Test that HTML code is correcly stripped.
+	 */
+	public function test_html_not_allowed() {
+		$input = <<<CSS
+/* HTML-ish code should be stripped */
+<class> p {
+	color: lightcoral;
+}
+CSS;
+
+		$post = wp_update_custom_css_post( $input );
+		$this->assertNotWPError( $post );
+
+		$output = wp_get_custom_css();
+		$this->assertNotEquals( $input, $output );
+	}
+}