Merge pull request #1221 from Automattic/add/html-lang-tree-shaking

Tree-shake CSS selectors for HTML elements that target non-active languages
ampproject · Jun 22, 2018 · c74a97a · c74a97a
2 parents 554400c + 087b5ef
commit c74a97a
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 0 deletions.
diff --git a/includes/sanitizers/class-amp-style-sanitizer.php b/includes/sanitizers/class-amp-style-sanitizer.php
@@ -709,6 +709,9 @@ private function process_stylesheet( $stylesheet, $options = array() ) {
 			wp_array_slice_assoc(
 				$this->args,
 				array( 'should_locate_sources', 'parsed_cache_variant' )
+			),
+			array(
+				'language' => get_bloginfo( 'language' ), // Used to tree-shake html[lang] selectors.
 			)
 		);
 
@@ -1850,6 +1853,7 @@ private function finalize_styles() {
 	private function ampify_ruleset_selectors( $ruleset ) {
 		$selectors = array();
 		$changes   = 0;
+		$language  = get_bloginfo( 'language' );
 		foreach ( $ruleset->getSelectors() as $old_selector ) {
 			$selector = $old_selector->getSelector();
 
@@ -1859,6 +1863,23 @@ private function ampify_ruleset_selectors( $ruleset ) {
 				continue;
 			}
 
+			// Automatically remove selectors that are for another language (and thus are irrelevant). This is safe because amp-bind'ed [lang] is not allowed.
+			$is_other_language = (
+				preg_match( '/^html\[lang(?P<starts_with>\^?)=([\'"]?)(?P<lang>.+?)\2\]/', $selector, $matches )
+				&&
+				(
+					empty( $matches['starts_with'] )
+					?
+					$language !== $matches['lang']
+					:
+					substr( $language, 0, strlen( $matches['lang'] ) ) !== $matches['lang']
+				)
+			);
+			if ( $is_other_language ) {
+				$changes++;
+				continue;
+			}
+
 			$edited_selectors = array( $selector );
 			foreach ( $this->selector_mappings as $html_selector => $amp_selectors ) { // Note: The $selector_mappings array contains ~6 items.
 				$html_pattern = '/(?<=^|[^a-z0-9_-])' . preg_quote( $html_selector ) . '(?=$|[^a-z0-9_-])/i';

diff --git a/tests/test-amp-style-sanitizer.php b/tests/test-amp-style-sanitizer.php
@@ -324,6 +324,13 @@ public function get_link_and_style_test_data() {
 				),
 				array(),
 			),
+			'unamerican_selectors_removed' => array( // USA is used for convenience here. No political statement intended.
+				'<html amp><head><meta charset="utf-8"><style>html[lang=en-US] {color:red} html[lang="en-US"] {color:white} html[lang^=en] {color:blue} html[lang="en-CA"] {color:red}  html[lang^=ar] { color:green; } html[lang="es-MX"] { color:green; }</style></head><body><span>Test</span></body></html>',
+				array(
+					'html[lang=en-US]{color:red}html[lang="en-US"]{color:white}html[lang^=en]{color:blue}',
+				),
+				array(),
+			),
 		);
 	}
 
@@ -336,6 +343,9 @@ public function get_link_and_style_test_data() {
 	 * @param array  $expected_errors      Expected error codes.
 	 */
 	public function test_link_and_style_elements( $source, $expected_stylesheets, $expected_errors = array() ) {
+		add_filter( 'locale', function() {
+			return 'en_US';
+		} );
 		$dom = AMP_DOM_Utils::get_dom( $source );
 
 		$error_codes = array();