tack

On the fly pseudo-class generation for functional CSS.

This package allows you to generate pseudo-class variations of CSS classes at runtime. When used with Tachyons or Basscss, it entirely alleviates the need for pseudo-class specific selectors.

Installation

$ npm install --save tack-css

Usage

First, import tack:

import tack from 'tack-css';

After your functional styles are loaded, call tack.hash to seed the style index:

tack.hash();

The tack function takes a pseudo-class and a list of CSS classes and returns a list of generated CSS classes that target the pseudo-class.

tack('hover', 'b--blue', 'blue') // => 'b--blue--tack-hover blue--tack-hover'

The specific permutation of pseudo-class and CSS classes are generated and added to the DOM the first time tack sees them. They are re-used afterwards.

License

MIT © Justin Vaillancourt