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 classes and returns a list of generated classes.

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

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

Limitations

Because tack uses the Document.styleSheets API to index styles, the style sheets with the classes you wish to augment must adhere to the browser's same-origin policy and reside on the page's domain or have appropriate CORS headers set.

How does it work?

tack.hash() builds an index of simple CSS selectors to rules. Then, tack uses the index to generate derivative classes that are injected into the document at runtime.

License

MIT © Justin Vaillancourt