Class names with stati.propValue

Stati's own classnames, for class lists with conditions in them.

SNP 063 #13B Filed stati css

eta
<%
  const variant = 'primary';
  const isActive = true;
  const large = false;
  const hasIcon = false;
%>
<a class="<%= stati.propValue(
  'btn',
  `btn-${variant}`,
  isActive && 'is-active',
  { 'btn-lg': large, 'btn-disabled': !isActive },
  ['icon', hasIcon && 'icon-left']
) %>">Read more</a>

That renders class="btn btn-primary is-active icon":

  • Strings and numbers are kept and falsy values (false, null, undefined, '', 0) dropped, so the conditions can sit right in the list.
  • An object adds each key whose value is truthy, an array its truthy items.
  • It works for any attribute that takes space-separated words, such as rel or a data- attribute that holds a list.
  • It isn't for gluing a URL or an ID together. Use a template literal there: href="<%= `/tags/${tag}` %>".

With Tailwind there's a bonus: every class it returns is also written to .stati/tailwind-classes.html, so a class built at render time, like `bg-${color}-500`, makes it into the CSS once that file is in Tailwind's content.

In the Stati docs: stati.propValue() and Dynamic classes with propValue.