Socket
Socket
Sign inDemoInstall

cngen

Package Overview
Dependencies
5
Maintainers
1
Versions
1
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

    cngen

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


Version published
Maintainers
1
Install size
30.3 kB
Created

Readme

Source

cngen

Build status NPM version js-xo-style

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)

NameTypeDescription
declarationObjectThe 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

Keywords

FAQs

Last updated on 03 Sep 2015

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc