# vanilla-css-in-js

> Vanilla JavaScript CSS-in-JS

Latest version **2.0.1** (published 2019-04-24) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install vanilla-css-in-js
pnpm add vanilla-css-in-js
yarn add vanilla-css-in-js
bun add vanilla-css-in-js
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 2.0.1 |
| Published | 2019-04-24 |
| First published | 2018-04-27 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >=8.0.0 |
| Dependencies | 0 |
| Unpacked size | 7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Zac Anger |
| Maintainers | zacanger |
| Keywords | css, css-in-js, style, vanilla, vanilla-css-in-js, vanillajs |

## Links

- npm: https://www.npmjs.com/package/vanilla-css-in-js
- Repository: https://github.com/zacanger/vanilla-css-in-js
- Homepage: https://github.com/zacanger/vanilla-css-in-js#readme
- Issues: https://github.com/zacanger/vanilla-css-in-js/issues
- npm.io page: https://npm.io/package/vanilla-css-in-js

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

- 2.0.1 (latest) — 2019-04-24
- 2.0.0 — 2019-04-23
- 1.0.4 — 2018-08-17
- 1.0.3 — 2018-04-28
- 1.0.2 — 2018-04-28
- 1.0.1 — 2018-04-28
- 1.0.0 — 2018-04-27
- 0.5.0 — 2018-04-27
- 0.4.0 — 2018-04-27
- 0.3.0 — 2018-04-27
- 0.2.0 — 2018-04-27
- 0.1.0 — 2018-04-27
- 0.0.1 — 2018-04-27

## README

# vanilla-css-in-js

Vanilla JavaScript CSS-in-JS

--------

## Installation

`npm i vanilla-css-in-js`

## Usage

This library doesn't support a whole lot. No media queries, no extraction into a
stylesheet, no nested selectors, no states (hover/focus/active). This is the
bare minimum I need to comfortably write styles in plain JS for very small
projects. If you need something with any features at all, I highly recommend
checking out [cxs](https://github.com/cxs-css/cxs).

Example:

```javascript
// rules :: { [key: string]: string }
// style :: rules -> HTMLElement -> void
// create :: string -> HTMLElement
// createStyled  :: string -> rules -> HTMLElement

const { style, create, createStyled } = require('vanilla-css-in-js')
// or const style = require('vanilla-css-in-js')
// or import { style, create, createStyled } from 'vanilla-css-in-js'
// or import style, { create, createStyled } from 'vanilla-css-in-js'
// do what you want, really

// style
const cardStyle = {
  margin: '8px',
  border: '1px solid rebeccapurple'
}
const styleCard = style(cardStyle)
document.getElementsByTagName('section').forEach((card) => {
  styleCard(card)
})

// create
const header = create('h1')

// createStyled
const paragraph = createStyled('p')
const p = paragraph({
  fontSize: '16px',
  color: '#202020'
})
```

## License

[MIT](./LICENSE.md)

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