# suitnames

> A simple utility to manage CSS modules with SUIT CSS -like naming conventions on React

Latest version **1.0.1** (published 2016-05-04) · MIT license · 0 weekly downloads

## Install

```sh
npm install suitnames
pnpm add suitnames
yarn add suitnames
bun add suitnames
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2016-05-04 |
| First published | 2016-04-26 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Pavel Pertsev |
| Maintainers | morhetz |
| Keywords | suitcss, cssmodules, classname, component, css, react, utility |

## Links

- npm: https://www.npmjs.com/package/suitnames
- Repository: https://github.com/morhetz/suitnames
- Homepage: https://github.com/morhetz/suitnames#readme
- Issues: https://github.com/morhetz/suitnames/issues
- npm.io page: https://npm.io/package/suitnames

## Alternatives

- [style-dictionary](https://npm.io/package/style-dictionary.md) — 2.0M weekly downloads
- [postcss-merge-idents](https://npm.io/package/postcss-merge-idents.md) — 1.7M weekly downloads
- [@fontsource/noto-sans](https://npm.io/package/@fontsource/noto-sans.md) — 93.0K weekly downloads
- [uglifycss](https://npm.io/package/uglifycss.md) — 71.6K weekly downloads
- [mat4-interpolate](https://npm.io/package/mat4-interpolate.md) — 23.3K weekly downloads

## Recent versions

- 1.0.1 (latest) — 2016-05-04
- 1.0.0 — 2016-04-26

## README

# suitnames

suitnames is a simple utility to manage CSS modules with SUIT CSS -like naming
conventions on React.

Shamefully based on [bem-classnames](https://github.com/pocotan001/bem-classnames),
which is in turn
inspired by [classnames](https://github.com/JedWatson/classnames).

``` sh
npm install suitnames
```

## Usage

``` js
var styles = require('style.css');
var sx = require('suitnames').bind(styles);

sx('elementSelector')
sx('BlockSelector', this.props)
sx(/* [...props|className] */);
```

**Simple**

Attention: classes would be added only if they are exported from cssmodules
style, otherwise they would be skipped.
Works best with `localIdentName=[name]-[local]`.

``` js
var styles = require('Button.css');
var sx = require('suitnames').bind(styles);

sx('Button', { color: 'green', block: true });  // "Button-Button Button--color-green Button--block"
sx({ disabled: true });  // "Button--disabled"
sx('a b', ['c', 'd']);  // "Button-a Button-b Button-c Button-d"
```

**Custom prefix**

``` js
// Default prefixes:
//
// sx.settings = {
//   prefix: '-',
//   separator: '-'
// };

sx.settings.prefix = '_';
sx.settings.separator = '---';
sx(styles, { flat: true });  // => styles['_flat']
sx(styles, { country: 'gb' });  // => styles['_country---gb']
```

---
_Source: https://npm.io/package/suitnames · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._