cngen

Generate CSS classnames from declarations, works splendid together with e.g. React

Why?

Generating classnames according to the contents of a CSS declaration solves the biggest problem with large scale CSS, i.e. the fact that it cascades. See unistyle for how to use this in a scalable way.

Installation

Install cngen using npm:

npm install --save cngen

Usage

Module usage

var cngen = require('cngen');
 
cngen({
  color: '#FFF',
  fontSize: '10px'
});
// _e80a8a8

Property order is not important, i.e. two declarations with the same properties but in a different order gives the same classname, e.g:

var cngen = require('cngen');
 
cngen({
  color: '#FFF',
  fontSize: '10px'
});
// _e80a8a8
 
cngen({
  fontSize: '10px',
  color: '#FFF'
});
// _e80a8a8

Usage together with e.g. React

Have a look at unistyle for how this fits together with React.

API

cngen(declaration)

Name	Type	Description
declaration	Object	The CSS declaration to generate a classname for

Returns: String, a generated classname, which consists of a "_" followed by a hexadecimal string (generated with short-hash).

License

MIT © Joakim Carlstein