I have noticed that AMP removes the unused CSS classes I have in my stylesheet. This prevents me from adding those classes to HTML elements using amp-bind when a user clicks a button.
on="submit-success: AMP.setState({'disliked_clicked': event.response.disliked_clicked})"
<div id="liked" [class]="liked_clicked">Add CSS class when clicked</div>
The value of disliked_clicked depends on the server logic but it will either be "class-one" or "class-two", for example.
In my stylesheet I have:
.class-one {
some styles
}
.class-two {
some styles
}
These two classes are not found in the source code, I assume that AMP removed them because they are not initially applied to any HTML.
I found a workaround by including an empty div that has the styles applied to it in the HTML.
<div class="class-one class-two">I have no practical purpose</div>
I don't want to include empty divs throughout my templates so that AMP doesn't remove initially unused CSS classes. Is there another way to get AMP to stop removing these classes?
