-
Notifications
You must be signed in to change notification settings - Fork 382
Description
Consider the following code:
<style amp-custom>
#concealer {
display:none;
}
#concealer.expanded {
display:block;
}
</style>
...
<button on="tap:concealer.toggleClass(class='expanded')" type=button>Toggle Expanded</button>
<div id="concealer">Some Content</div>The tree shaker will currently purge this CSS rule:
#concealer.expanded {
display:block;
}The reason is because there is no DOM element with the expanded class.
Note that the tree shaker does handle a related case, where amp-bind is used to toggle the class. It does this by extracting the string literals in [class] contained inside of it and using these as additional class names:
amp-wp/includes/sanitizers/class-amp-style-sanitizer.php
Lines 364 to 369 in 732f789
| // Find all [class] attributes and capture the contents of any single- or double-quoted strings. | |
| foreach ( $this->xpath->query( '//*/@' . AMP_DOM_Utils::get_amp_bind_placeholder_prefix() . 'class' ) as $bound_class_attribute ) { | |
| if ( preg_match_all( '/([\'"])([^\1]*?)\1/', $bound_class_attribute->nodeValue, $matches ) ) { | |
| $classes .= ' ' . implode( ' ', $matches[2] ); | |
| } | |
| } |
So with the above style, the CSS rule will not be shaken out in the equivalent amp-bind code:
<amp-state id="expanded">false</amp-state>
<button on="tap:AMP.setState({expanded: ! expanded})" type=button>Toggle Expanded</button>
<div id="concealer" [class]="expanded ? 'expanded' : '' ">Some Content</div>We need to add similar logic for the toggleClass case. This will require looking for on attributes to find ones that contain toggleClass and then considering its argument to be among the class names on the target element.