Skip to content

Account for toggleClass in CSS tree shaker #1820

@westonruter

Description

@westonruter

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:

// 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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions