# twirl-js

> Write CSS objects as template literals

Latest version **0.0.10** (published 2017-06-06) · MIT license · 0 weekly downloads

## Install

```sh
npm install twirl-js
pnpm add twirl-js
yarn add twirl-js
bun add twirl-js
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.10 |
| Published | 2017-06-06 |
| First published | 2017-06-06 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 12 |
| Author | Benjamin Johnson |
| Maintainers | benjaminj6 |
| Keywords | css-in-js, css, template-literal, javascript |

## Links

- npm: https://www.npmjs.com/package/twirl-js
- Repository: https://github.com/benjaminj6/twirl-js
- Homepage: https://github.com/benjaminj6/twirl-js#readme
- Issues: https://github.com/benjaminj6/twirl-js/issues
- npm.io page: https://npm.io/package/twirl-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

- 0.0.10 (latest) — 2017-06-06
- 0.0.9 — 2017-06-06
- 0.0.7 — 2017-06-06
- 0.0.6 — 2017-06-06
- 0.0.3 — 2017-06-06
- 0.0.5 — 2017-06-06
- 0.0.4 — 2017-06-06
- 0.0.2 — 2017-06-06
- 0.0.1 — 2017-06-06

## README

# **twirl-js**
### **Create CSS-in-JS Object Literals with Template Strings**

[![Build Status](https://travis-ci.org/benjaminj6/twirl-js.svg?branch=master)](https://travis-ci.org/benjaminj6/twirl-js)
[![codecov](https://codecov.io/gh/benjaminj6/twirl-js/branch/master/graph/badge.svg)](https://codecov.io/gh/benjaminj6/twirl-js)
[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg)](https://github.com/prettier/prettier)
![](http://img.badgesize.io/benjaminj6/twirl-js/master/src/parse.js.svg?compression=gzip&label=size_(gzip)&color=blue)

## **Usage**

### Install

```javascript
npm install --save twirl-js
```

### Write styles!

```javascript
import twirl from 'twirl-js'

const background = 'papayawhip'
const size = 18

const css = twirl`
  background: ${background}
  font-size: ${size}px
  color: '#000'
`

console.log(css) // { background: 'papayawhip', 'font-size': '18px', color: '#000' }
```

## **Contributing**

Found a bug? Have a feature request or found a way to increase performance? I'd love any input, so feel free to [open an issue](https://github.com/benjaminj6/twirl-js/issues) or [submit a pull request.](https://github.com/benjaminj6/twirl-js/pulls)

For pull requests, all I ask is that you run the tests and format your code first (you can use the `npm test` and `npm run format` to do so). And if you've created a new feature, I just ask that you add tests to cover whatever amazing thing you've added 😎

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