How to stop AMP from removing unused CSS classes?

346 Views Asked by At

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?

0

There are 0 best solutions below