Directives


Directives are special CSS Custom Properties that you can use in your pattern libraries to help Warhol to understand your components even better. Warhol extracts as much data as possible from your component library's HTML and CSS as possible, but not all possible design information can be gathered from just style and markup.

Consider the following definition of a navigation list component:

<!-- component definition in the pattern library -->

<ul class="navigation">
  <li>Home</li>
  <li>About</li>
  <li class="active">Shop</li>
  <li>Contact</li>
</ul>

<style>
li.active {
  font-weight: bold;
}
</style>

Warhol can figure out that there are two different kinds of list items and, when checking production, will hold the two different kinds of list items to different standards. But Warhol can not know from just HTML and CSS if the navigation list can contain more than one active list item. Directives are a way to augment your component definitions with this sort of additional information.

To make sure that there can only ever be one active list item, a must-no-match directive is just what we need:

<!-- component definition in the pattern library -->

<ul class="navigation">
  <li>Home</li>
  <li>About</li>
  <li class="active">Shop</li>
  <li>Contact</li>
</ul>

<style>
li.active {
  font-weight: bold;
  /* The following selector must never match any active list item */
  --warhol-must-not-match: "li.active ~ li.active";
}
</style>

It is important to note that directives are a feature that you only use in your pattern libraries! Directives only add to the data Warhol collects when analyzing the pattern library and have no use in production web pages.


Table of Contents