Prevent CSS tree shaking from removing selectors with classes mentioned in [class] amp-bind attributes

[westonruter]

This is a follow-up on #1048, and in particular this #1048 (comment) from @camelburrito:

usually the [class names] associated with amp-bind can be searchable in the dom (string search), even that would be a little risky because there could be string concat etc happening

I suspect that dynamic class names (constructed via concatenation) would be less likely than static ones, since dynamic class names would depend on having a correspondingly dynamic stylesheet. This doesn't seem likely.

With the changes in this PR, with the following markup:

<amp-state id="mySidebar">
	<script type="application/json">
		{"expanded": false}
	</script>
</amp-state>
<aside class="sidebar" [class]="mySidebar.expanded ? 'expanded' : ''">...</aside>

And given the following CSS:

.sidebar { display:none }
.sidebar.expanded { display:block }

The second style rule will no longer be removed when tree shaking is being performed.

This should greatly reduce the amount of times that someone has to manually inform style sanitizer of the dynamic_element_selectors, for example:

add_filter( 'amp_content_sanitizers', function( $sanitizers ) {
	if ( ! isset( $sanitizers['AMP_Style_Sanitizer']['dynamic_element_selectors'] ) ) {
		$sanitizers['AMP_Style_Sanitizer']['dynamic_element_selectors'] = array();
	}
	$sanitizers['AMP_Style_Sanitizer']['dynamic_element_selectors'] = array_merge(
		$sanitizers['AMP_Style_Sanitizer']['dynamic_element_selectors'],
		array(
			'amp-list',
			'amp-live-list',
			'[submit-error]',
			'[submit-success]',
			'.expanded', // <= Added.
			'.sidebar-open', // <= Added.
		)
	);
	return $sanitizers;
} );

[kienstra]

Approved

Hi @westonruter,
Thanks, this looks good and works as expected. I also saw the issue of the .sidebar.expanded selector being stripped in the develop branch.

But with this PR, it appears as expected.

[amedina]

LGTM

[camelburrito]

Thank you!! This looks great!