hacss / core

The core Hacss library

You're probably looking for hacss/core.

This package just exists so you can run npx hacss.

core's Issues

Validate result

Consider this markup:

<h1 class="color:r">ed;</h1>

Generally speaking, Hacss is trying to match known properties, e.g. color, followed by a colon and some value (anything but whitespace), terminated by a semicolon.

Clearly r">ed is not a valid color value; but the whole color:r">ed; bit is matched anyway because it fits the pattern.

After each rule is generated, it probably needs to be validated somehow and thrown out if not valid. Perhaps it can be added in a comment at the end of the generated style sheet.

Error messaging inconsistent

Unresolved variable "red500" vs. Unresolved at-scope "@sm"

At-scope rule should be sorted to the bottom of the stylesheet

Say we have class="font-size:10px; @lg{font-size:20px}". If the @lg{font-size:20px} rule appears first, the corresponding media query will have no effect. This is because, unlike pseudo-selectors, media queries add no specificity. The only workaround that exists today is to add a priority, e.g. @lg{font-size:20px}!.

Scoping

Hacss should allow a scope to be specified. While this addresses somewhat of an edge case (Basement app), it's a lot cheaper for Hacss to add a scope than to use e.g. PostCSS.