Prevent erroneously tree-shaking keyframe selectors like 'from', 'to'…

…, and percentages

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

@@ -693,7 +693,7 @@ private function fetch_external_stylesheet( $url ) {
 	private function process_stylesheet( $stylesheet, $options = array() ) {
 		$parsed      = null;
 		$cache_key   = null;
-		$cache_group = 'amp-parsed-stylesheet-v7';
+		$cache_group = 'amp-parsed-stylesheet-v8';
 
 		$cache_impacting_options = array_merge(
 			wp_array_slice_assoc(
@@ -972,6 +972,13 @@ function( $selector ) {
 			$length           = count( $split_stylesheet );
 			for ( $i = 0; $i < $length; $i++ ) {
 				if ( $before_declaration_block === $split_stylesheet[ $i ] ) {
+
+					// Skip keyframe-selector, which is can be: from | to | <percentage>.
+					if ( preg_match( '/^((from|to)\b|-?\d+(\.\d+)?%)/i', $split_stylesheet[ $i + 1 ] ) ) {
+						$stylesheet[] = str_replace( $between_selectors, '', $split_stylesheet[ ++$i ] ) . $split_stylesheet[ ++$i ];
+						continue;
+					}
+
 					$selectors   = explode( $between_selectors . ',', $split_stylesheet[ ++$i ] );
 					$declaration = $split_stylesheet[ ++$i ];
 

tests/test-amp-style-sanitizer.php

@@ -421,6 +421,11 @@ public function get_amp_selector_data() {
 				'audio{border:solid 1px yellow}',
 				'amp-audio{border:solid 1px yellow}',
 			),
+			'keyframes' => array(
+				'<div>test</div>',
+				'span {color:red;} @keyframes foo { from: { opacity:0; } 50% {opacity:0.5} 75%,80% { opacity:0.6 } to { opacity:1 }  }',
+				'@keyframes foo{from:{opacity:0}50%{opacity:.5}75%,80%{opacity:.6}to{opacity:1}}',
+			),
 		);
 	}