Merge pull request #4300 from ampproject/fix/4197-invalid-css

Require unreleased version of PHP-CSS-Parser

composer.json

@@ -14,7 +14,7 @@
     "ext-spl": "*",
     "cweagans/composer-patches": "1.6.7",
     "fasterimage/fasterimage": "1.5.0",
-    "sabberworm/php-css-parser": "8.3.0"
+    "sabberworm/php-css-parser": "dev-master#134f4e6"
   },
   "require-dev": {
     "dealerdirect/phpcodesniffer-composer-installer": "0.6.2",
@@ -42,6 +42,7 @@
     "patches": {
       "sabberworm/php-css-parser": {
         "Fix parsing CSS selectors which contain commas <https://github.com/sabberworm/PHP-CSS-Parser/pull/138>": "https://github.com/sabberworm/PHP-CSS-Parser/commit/fa139f65c5b098ae652c970b25e6eb03fc495eb4.diff",
+        "Fix validation of selectors": "patches/php-css-parser-138-extended.patch",
         "Validate name-start code points for identifier <https://github.com/sabberworm/PHP-CSS-Parser/pull/185>": "patches/php-css-parser-pull-185.patch"
       }
     }
@@ -55,5 +56,12 @@
     "psr-4": {
       "Amp\\AmpWP\\Tests\\": "tests/php/src/"
     }
-  }
+  },
+  "repositories": [
+    {
+      "type": "vcs",
+      "url": "https://github.com/sabberworm/PHP-CSS-Parser.git",
+      "no-api": true
+    }
+  ]
 }

includes/sanitizers/class-amp-style-sanitizer.php

@@ -1442,7 +1442,7 @@ private function get_parsed_stylesheet( $stylesheet, $options = [] ) {
 		$parsed      = null;
 		$cache_key   = null;
 		$cached      = true;
-		$cache_group = 'amp-parsed-stylesheet-v25'; // This should be bumped whenever the PHP-CSS-Parser is updated or parsed format is updated.
+		$cache_group = 'amp-parsed-stylesheet-v26'; // This should be bumped whenever the PHP-CSS-Parser is updated or parsed format is updated.
 
 		$cache_impacting_options = array_merge(
 			wp_array_slice_assoc(

patches/php-css-parser-138-extended.patch

@@ -0,0 +1,19 @@
+Index: lib/Sabberworm/CSS/Property/Selector.php
+===================================================================
+--- lib/Sabberworm/CSS/Property/Selector.php	(revision 134f4e62fe8ab9f316425f3c0f480b3f4f52d804)
++++ lib/Sabberworm/CSS/Property/Selector.php	(date 1581832944211)
+@@ -41,12 +41,12 @@
+ 	private $iSpecificity;
+
+ 	public static function isValid($sSelector) {
+-		return preg_match("/^([a-zA-Z0-9\x{00A0}-\x{FFFF}_\^\$\|\*\=\"\'\~\[\]\(\)\-\s\.:#\+\>]*|\s*?[\+-]?\d+\%\s*)$/u", $sSelector);
++		return preg_match("/^([a-zA-Z0-9,@\\\x{00A0}-\x{FFFF}_\^\$\|\*\=\"\'\~\[\]\(\)\-\s\.:#\+\>]*|\s*?[\+-]?\d+\%\s*)$/u", $sSelector);
+ 	}
+
+ 	public function __construct($sSelector, $bCalculateSpecificity = false) {
+ 		if (!Selector::isValid($sSelector)) {
+-			throw new UnexpectedTokenException("Selector did not match '/^([a-zA-Z0-9\x{00A0}-\x{FFFF}_\^\$\|\*\=\"\'\~\[\]\(\)\-\s\.:#\+\>]*|\s*?[\+-]?\d+\%\s*)$/u'.", $sSelector, "custom");
++			throw new UnexpectedTokenException("Selector did not match '/^([a-zA-Z0-9,@\\\x{00A0}-\x{FFFF}_\^\$\|\*\=\"\'\~\[\]\(\)\-\s\.:#\+\>]*|\s*?[\+-]?\d+\%\s*)$/u'.", $sSelector, "custom");
+ 		}
+ 		$this->setSelector($sSelector);
+ 		if ($bCalculateSpecificity) {

tests/php/test-amp-style-sanitizer.php

@@ -240,6 +240,13 @@ public function get_body_style_attribute_data() {
 					'.lg\:w-full{width:100%}',
 				],
 			],
+			'semicolon_outside_of_rule_in_media_query'      => [
+				'<style>@media (max-width: 450px) { .sidebar { padding: 0; }; } .sidebar { margin: 0 auto; }</style><div class="sidebar"></div>',
+				'<div class="sidebar"></div>',
+				[
+					'@media (max-width: 450px){.sidebar{padding:0}}.sidebar{margin:0 auto}',
+				],
+			],
 		];
 	}