Merge pull request #7487 from ampproject/fix/complex-css-values

westonruter · web-flow · commit f8249c1506f7 · 2023-03-16T09:11:37.000-07:00
Fix failure to parse complex CSS values
diff --git a/composer.json b/composer.json
@@ -17,7 +17,7 @@
     "ampproject/amp-toolbox": "0.11.3",
     "cweagans/composer-patches": "~1.0",
     "fasterimage/fasterimage": "1.5.0",
-    "sabberworm/php-css-parser": "8.4.0"
+    "sabberworm/php-css-parser": "dev-master#cc791ad"
   },
   "require-dev": {
     "automattic/vipwpcs": "^2.2",
@@ -94,9 +94,9 @@
         "Remove 'match' keyword from uses <https://github.com/sebastianbergmann/phpunit/issues/4373>": "patches/remove-match-keyword.patch"
       },
       "sabberworm/php-css-parser": {
-        "1. Add additional validation for size unit <https://github.com/sabberworm/PHP-CSS-Parser/pull/350>": "https://github.com/westonruter/PHP-CSS-Parser/commit/5b1d6a4abe43f4311d9b4674913ca665ed8c43aa.diff",
-        "2. Validate name-start code points for identifier <https://github.com/westonruter/PHP-CSS-Parser/pull/2>": "https://github.com/westonruter/PHP-CSS-Parser/commit/9f96bc97fcb1e848a2f6ca6f658009996883dffc.diff",
-        "3. Fix parsing CSS selectors which contain commas <https://github.com/westonruter/PHP-CSS-Parser/pull/1>": "https://github.com/westonruter/PHP-CSS-Parser/commit/dc18ba737fd6a611189a5b83729396500676f8dd.diff"
+        "1. Validate name-start code points for identifier <https://github.com/westonruter/PHP-CSS-Parser/pull/2>": "https://github.com/sabberworm/PHP-CSS-Parser/compare/cc791ad...westonruter:PHP-CSS-Parser:fix/malformed-identifier-without-tests.diff",
+        "2. Fix parsing CSS selectors which contain commas <https://github.com/westonruter/PHP-CSS-Parser/pull/1>": "https://github.com/sabberworm/PHP-CSS-Parser/compare/cc791ad...westonruter:PHP-CSS-Parser:fix/selector-comma-parsing-without-tests.diff",
+        "3. Parse simple expressions <https://github.com/sabberworm/PHP-CSS-Parser/pull/389>": "https://github.com/sabberworm/PHP-CSS-Parser/compare/cc791ad...westonruter:PHP-CSS-Parser:fix/expression-parsing-without-tests.diff"
       }
     }
   },
diff --git a/composer.lock b/composer.lock
diff --git a/includes/sanitizers/class-amp-style-sanitizer.php b/includes/sanitizers/class-amp-style-sanitizer.php
@@ -1658,7 +1658,7 @@ private function fetch_external_stylesheet( $url ) {
 	 */
 	private function get_parsed_stylesheet( $stylesheet, $options = [] ) {
 		$cached         = true;
-		$cache_group    = 'amp-parsed-stylesheet-v39'; // This should be bumped whenever the PHP-CSS-Parser is updated or parsed format is updated.
+		$cache_group    = 'amp-parsed-stylesheet-v40'; // This should be bumped whenever the PHP-CSS-Parser is updated or parsed format is updated.
 		$use_transients = $this->should_use_transient_caching();
 
 		// @todo If ValidationExemption::is_px_verified_for_node( $this->current_node ) then keep !important.
diff --git a/tests/php/test-amp-style-sanitizer.php b/tests/php/test-amp-style-sanitizer.php
@@ -860,6 +860,44 @@ public function get_link_and_style_test_data() {
 				],
 				[],
 			],
+			'complex_css_values' => [
+				'
+				<html>
+					<head>
+						<style>
+							body {
+								background: green;
+								width: calc((100vw - 100px) / 2);
+								height: 100px;
+							}
+						</style>
+						<style>
+							:where(body) {
+								width: min(var(--container-max-width), 100% - calc(var(--container-padding) * 2));
+								margin-inline: auto;
+							}
+						</style>
+						<style>
+							body {
+								--wp--preset--font-size--huge: 42px;
+								--wp--preset--font-size--small: clamp(.875rem,.875rem + ((1vw - .48rem)*0.24),1rem);
+								--wp--preset--font-size--medium: clamp(1rem,1rem + ((1vw - .48rem)*0.24),1.125rem);
+								--wp--preset--font-size--large: clamp(1.5rem,1.5rem + ((1vw - .48rem)*0.24),1.625rem);
+								--wp--preset--font-size--normal: 16px;
+							}
+						</style>
+					</head>
+					<body>
+					</body>
+				</html>
+				',
+				[
+					'body{background:green;width:calc(( 100vw - 100px ) / 2);height:100px}',
+					':where(body){width:min(var(--container-max-width),100% - calc(var(--container-padding) * 2));margin-inline:auto}',
+					'body{--wp--preset--font-size--huge:42px;--wp--preset--font-size--small:clamp(.875rem,.875rem + ((1vw - .48rem) * .24),1rem);--wp--preset--font-size--medium:clamp(1rem,1rem + ((1vw - .48rem) * .24),1.125rem);--wp--preset--font-size--large:clamp(1.5rem,1.5rem + ((1vw - .48rem) * .24),1.625rem);--wp--preset--font-size--normal:16px}',
+				],
+				[],
+			],
 		];
 	}
 
