Excess pseudo element

  • Full report name: Unexpected pseudo element
  • Status: ERROR
  • Related to: components
  • Summary: a component or component child has an unexpected pseudo element
  • How to fix: remove the css declarations responsibe for the pseudo element

A component element or a component's child element has an unexpected and visble pseudo element. The pseudo element must be removed (either entirely or at least from the rendering tree) make the component or component child compliant with the pattern library. The pseudo element counts as removed if one of the following conditions is met:

  1. the CSS rules for the pseudo element do no longer apply to the parent element in question
  2. it is removed from the page's rendering tree using display: none
  3. it is made ineffective by setting its content property to none

A pseudo element may be de facto invisible and still cause this error, as Warhol is not yet smart enough to always recognize de facto invisibility. The following pseudo element is an example of such de facto invisibility that will still cause an error:

.foo::before {
  content: "";     /* not none, but no visible text */
  display: inline; /* takes up no space as long as no other properties apply */

We are working on making Warhol smarter, but for the moment we rather err on the side of caution.

See also