Merge branch 'add/1094-convert_css_selectors' of github.com:Automatti…

…c/amp-wp into add/1094-convert_css_selectors
ampproject · May 31, 2018 · 592aca7 · 592aca7
2 parents 1b8405a + 19db2c1
commit 592aca7
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 13 deletions.
diff --git a/includes/sanitizers/class-amp-style-sanitizer.php b/includes/sanitizers/class-amp-style-sanitizer.php
@@ -949,6 +949,16 @@ private function prepare_stylesheet( $stylesheet_string, $options = array() ) {
 			$pattern .= preg_quote( $after_declaration_block, '#' );
 			$pattern .= '#s';
 
+			$dynamic_selector_pattern = null;
+			if ( ! empty( $this->args['dynamic_element_selectors'] ) ) {
+				$dynamic_selector_pattern = implode( '|', array_map(
+					function( $selector ) {
+						return preg_quote( $selector, '#' );
+					},
+					$this->args['dynamic_element_selectors']
+				) );
+			}
+
 			$split_stylesheet = preg_split( $pattern, $stylesheet_string, -1, PREG_SPLIT_DELIM_CAPTURE );
 			$length           = count( $split_stylesheet );
 			for ( $i = 0; $i < $length; $i++ ) {
@@ -966,6 +976,11 @@ private function prepare_stylesheet( $stylesheet_string, $options = array() ) {
 						// Remove attribute selectors to eliminate false negative, such as with `.social-navigation a[href*="example.com"]:before`.
 						$reduced_selector = preg_replace( '/\[\w.*?\]/', '', $reduced_selector );
 
+						// Ignore any selector terms that occur under a dynamic selector.
+						if ( $dynamic_selector_pattern ) {
+							$reduced_selector = preg_replace( '#((?:' . $dynamic_selector_pattern . ')(?:\.[a-z0-9_-]+)*)[^a-z0-9_-].*#si', '$1', $reduced_selector . ' ' );
+						}
+
 						$reduced_selector = preg_replace_callback(
 							'/\.([a-zA-Z0-9_-]+)/',
 							function( $matches ) use ( $selector, &$selectors_parsed ) {
@@ -1858,16 +1873,6 @@ private function finalize_stylesheet_set( $stylesheet_set ) {
 			) );
 		}
 
-		$dynamic_selector_pattern = null;
-		if ( $should_tree_shake && ! empty( $this->args['dynamic_element_selectors'] ) ) {
-			$dynamic_selector_pattern = '#' . implode( '|', array_map(
-				function( $selector ) {
-					return preg_quote( $selector, '#' );
-				},
-				$this->args['dynamic_element_selectors']
-			) ) . '#';
-		}
-
 		$stylesheet_set['processed_nodes'] = array();
 
 		$final_size = 0;
@@ -1884,8 +1889,6 @@ function( $selector ) {
 					$selectors = array();
 					foreach ( $selectors_parsed as $selector => $parsed_selector ) {
 						$should_include = (
-							( $dynamic_selector_pattern && preg_match( $dynamic_selector_pattern, $selector ) )
-							||
 							(
 								// If all class names are used in the doc.
 								(

diff --git a/tests/test-amp-style-sanitizer.php b/tests/test-amp-style-sanitizer.php
@@ -279,6 +279,7 @@ public function get_link_and_style_test_data() {
 					'<html amp><head><meta charset="utf-8">',
 					'<style amp-custom>b.foo, form [submit-success] b, div[submit-failure] b, form.unused b { color: green }</style>',
 					'<style amp-custom>.dead-list li .highlighted, amp-live-list li .highlighted { background: yellow }</style>',
+					'<style amp-custom>article.missing amp-live-list li .highlighted { background: yellow }</style>',
 					'<style amp-custom>body amp-list .portland { color:blue; }</style>',
 					'</head><body>',
 					'<form method="post" action-xhr="https://example.com/subscribe" target="_top"><div submit-success><template type="amp-mustache"><b>Thanks</b>, {{name}}}</template></div></form>',
@@ -289,6 +290,7 @@ public function get_link_and_style_test_data() {
 				array(
 					'form [submit-success] b,div[submit-failure] b{color:green}',
 					'amp-live-list li .highlighted{background:yellow}',
+					'',
 					'body amp-list .portland{color:blue}',
 				),
 				array(),
@@ -341,6 +343,11 @@ public function test_link_and_style_elements( $source, $expected_stylesheets, $e
 		$actual_stylesheets = array_values( $sanitizer->get_stylesheets() );
 		$this->assertCount( count( $expected_stylesheets ), $actual_stylesheets );
 		foreach ( $expected_stylesheets as $i => $expected_stylesheet ) {
+			if ( empty( $expected_stylesheet ) ) {
+				$this->assertEmpty( $actual_stylesheets[ $i ] );
+				continue;
+			}
+
 			if ( false === strpos( $expected_stylesheet, '{' ) ) {
 				$this->assertContains( $expected_stylesheet, $actual_stylesheets[ $i ] );
 			} else {
@@ -362,7 +369,17 @@ public function get_amp_selector_data() {
 			'img' => array(
 				sprintf( '<div><img class="logo" src="%s" width="200" height="100"></div>', admin_url( 'images/wordpress-logo.png' ) ),
 				'div img.logo{border:solid 1px red}',
-				'div amp-img.logo,div amp-anim.logo{border:solid 1px red}', // Note that amp-anim is not tree-shaken because amp-anim is added to dynamic_element_selectors.
+				'div amp-img.logo{border:solid 1px red}', // Note amp-anim is still tree-shaken because it doesn't occur in the DOM.
+			),
+			'img-missing-class' => array(
+				sprintf( '<div><img class="logo" src="%s" width="200" height="100"></div>', admin_url( 'images/wordpress-logo.png' ) ),
+				'div img.missing{border:solid 1px red}',
+				'', // Tree-shaken because missing class doesn't occur in the DOM.
+			),
+			'img-and-anim' => array(
+				sprintf( '<div><img class="logo" src="%s" width="200" height="100"><img class="spinner" src="%s" width="200" height="100"></div>', admin_url( 'images/wordpress-logo.png' ), admin_url( 'images/spinner-2x.gif' ) ),
+				'div img{border:solid 1px red}',
+				'div amp-img,div amp-anim{border:solid 1px red}',
 			),
 			'img_with_amp_img' => array(
 				'<div></div>',
@@ -374,6 +391,11 @@ public function get_amp_selector_data() {
 				'div amp-img.logo img{object-fit:cover}',
 				'div amp-img.logo img{object-fit:cover}',
 			),
+			'img-tree-shaking' => array(
+				sprintf( '<article><img class="logo" src="%s" width="200" height="100"></article>', admin_url( 'images/wordpress-logo.png' ) ),
+				'div img.logo{border:solid 1px red}',
+				'', // The selector is removed because there is no div element.
+			),
 			'playbuzz' => array(
 				'<p>hello</p><div class="pb_feed" data-item="226dd4c0-ef13-4fee-850b-7be32bf6d121"></div>',
 				'p + div.pb_feed{border:solid 1px blue}',