Excess pseudo element

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

A component element or a component's child element has an unexpected and visible 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 (only for ::before and ::after)

A pseudo element may be effectively invisible and still cause this error, if the reason for its invisibility is not due to one of the above conditions. Warhol is not (yet) smart enough to always detect invisibility. The following pseudo element is an example of an invisible pseudo element that will still cause this 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 #

Join our Slack Community

Any question not answered yet? You want to get the latest information on Warhol and discuss new features? Join our Slack Community.