Token Coverage Script

What does it do?

One of the principles we should follow while implementing the token system is that as many of the the component tokens as possible should be used. This might seem obvious but can be annoying in practice since the developer has to keep track of the usage manually. The coverage script automates this process of monitoring the utilization of the tokens.

How does it work?

The script collects all the token maps from the _component.scss and the _elements.scss files and checks if they are being used in any scss files in the styles/src or components/src directories. By doing this the script calculates the total number of found & missing tokens as well as the coverage percentage.

How can it be used?

The script can be called with pnpm tokens:usage. Doing it like that will result in all the maps (and thus tokens) being included in the check. While implementing a certain component, the specific map can be specified like this pnpm tokens:usage --maps post-button for example.