# css-safe-classname

> Utility methods for creating and validating safe CSS classnames from string input

Latest version **0.1.5** (published 2020-12-07) · MIT license · 0 weekly downloads

## Install

```sh
npm install css-safe-classname
pnpm add css-safe-classname
yarn add css-safe-classname
bun add css-safe-classname
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.5 |
| Published | 2020-12-07 |
| First published | 2020-10-30 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 17.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Tyler Hawkins |
| Maintainers | thawkin3 |
| Keywords | class, classname, css, safe css classname, string, valid css classname |

## Links

- npm: https://www.npmjs.com/package/css-safe-classname
- Repository: https://github.com/thawkin3/css-safe-classname
- Issues: https://github.com/thawkin3/css-safe-classname/issues
- npm.io page: https://npm.io/package/css-safe-classname

## 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

- 0.1.5 (latest) — 2020-12-07
- 0.1.4 — 2020-10-30
- 0.1.3 — 2020-10-30
- 0.1.2 — 2020-10-30
- 0.1.1 — 2020-10-30

## README

# css-safe-classname

[![npm](https://img.shields.io/npm/v/css-safe-classname)](https://www.npmjs.com/package/css-safe-classname)
[![Build Status](https://travis-ci.com/thawkin3/css-safe-classname.svg?branch=master)](https://travis-ci.com/thawkin3/css-safe-classname)
[![Codecov](https://img.shields.io/codecov/c/github/thawkin3/css-safe-classname)](https://codecov.io/gh/thawkin3/css-safe-classname)
[![npm bundle size](https://img.shields.io/bundlephobia/minzip/css-safe-classname)](https://bundlephobia.com/result?p=css-safe-classname)
[![npm](https://img.shields.io/npm/dt/css-safe-classname)](https://www.npmjs.com/package/css-safe-classname)
[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)
[![Conventional Commits](https://img.shields.io/badge/Conventional%20Commits-1.0.0-yellow.svg)](https://conventionalcommits.org)
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://github.com/prettier/prettier)

This library is a lightweight solution containing utility methods for creating and validating safe CSS classnames from string input.

This project is published on npm as [css-safe-classname](https://www.npmjs.com/package/css-safe-classname).

## Installation

```sh
yarn add css-safe-classname

# or npm install css-safe-classname
```

## Usage

### ES Modules

```js
import { createSafeCssClassname, isValidCssClassname } from 'css-safe-classname'

const originalInputString = 'your#css.classname>here'

console.log(isValidCssClassname(originalInputString))
// outputs: false

const safeCssClassname = createSafeCssClassname(originalInputString)
console.log(safeCssClassname)
// outputs: yourcssclassnamehere
```

### CommonJS Modules

```js
var cssSafeClassname = require('css-safe-classname')

var originalInputString = 'your#css.classname>here'

console.log(cssSafeClassname.isValidCssClassname(originalInputString))
// outputs: false

var safeCssClassname = cssSafeClassname.createSafeCssClassname(
  originalInputString
)
console.log(safeCssClassname)
// outputs: yourcssclassnamehere
```

## Contributing

Please see the [Contributing Guidelines](CONTRIBUTING.md).

## Code of Conduct

The [Code of Conduct](CODE_OF_CONDUCT.md) can be found here.

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