# css-template

> convert css string to style object. Useful for inline styling in React

Latest version **0.2.3** (published 2017-01-08) · ISC license · 0 weekly downloads

## Install

```sh
npm install css-template
pnpm add css-template
yarn add css-template
bun add css-template
```

## 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.2.3 |
| Published | 2017-01-08 |
| First published | 2016-09-27 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 34 |
| Author | Tung Vu |
| Maintainers | tungv |
| Keywords | css, template, react, styling |

## Links

- npm: https://www.npmjs.com/package/css-template
- Repository: https://github.com/tungv/css-template
- Homepage: https://github.com/tungv/css-template#readme
- Issues: https://github.com/tungv/css-template/issues
- npm.io page: https://npm.io/package/css-template

## 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.2.3 (latest) — 2017-01-08
- 0.2.2 — 2016-09-28
- 0.2.1 — 2016-09-28
- 0.2.0 — 2016-09-28
- 0.1.4 — 2016-09-28
- 0.1.3 — 2016-09-28
- 0.1.2 — 2016-09-28
- 0.1.1 — 2016-09-28
- 0.1.0 — 2016-09-27
- 0.0.1 — 2016-09-27

## README

# css-template
Reduce context-switching when defining `style` in React Component.

To use inline styles in React, you often find yourself writing this type of code:

```js
const styles = {
  title: {
    borderBottomLeftRadius: '10px',
    //    ^     ^   ^       ^    ^^
    //    |     |   |       |    ||___ annoying trailing comma
    //    |     |   |       |____|____ annoying JS quotes
    //    |_____|___|_________________ annoying camel case
    //
    //    (╯°□°）╯︵ ┻━┻ I WANT CSS BACK!!!
  }
}
```

With `css-template`, those times are gone! Instead of writing this:

```js
// THIS IS BAD FOR YOUR EYES
const styles = {
  title: {
    marginTop: '10px',
    fontSize: '120%',
    lineHeight: '1.5',
    textAlign: 'center',
    backgroundColor: 'rgba(100, 255, 100, 0.7)',
  },
  footer: {
    width: 'calc(100% - 16px)',
    textAlign: 'right',
    marginTop: '20px',
  }
};
```

you can write something like this

```js
// THIS IS BETTER
const styles = {
  title: css`{
    margin-top: 10px;
    font-size: 120%;
    line-height: 1.5;
    text-align: center;
    background-color: rgba(100, 255, 100, 0.7);
  }`,
  footer: css`{
    width: calc(100% - 16px);
    text-align: right;
    margin-top: 20px;
  }`,
};
```

# Supported Features

- translate snake-case to camelCase

  ```js
    css`margin-top: 20px` // will be translated to { marginTop: '20px' }
  ```

- multiple lines with optional brackets for better visuals

  ```js
    css`{
      padding: 10px;
      margin: 10px;
    }`

    // is equivalent to
    css`
      padding: 10px;
      margin: 10px;
    `
  ```

- optional final semicolon

  ```js
    css`padding: 10px`

    // is equivalent to
    css`padding: 10px;`
  ```

- multiple rules in one line

  ```js
    css`padding: 10px; margin: 10px`
  ```

- compose other style objects

  ```js
    const bigFont = css`font-size: 200%`
    const underlined = css`text-decoration: underline`

    const myStyle = css`{
      composes: ${bigFont};
      composes: ${underlined};
      padding: 10px;
      margin: 10px;
    }`

  ```

# Installation

```bash
npm i -S css-template
```

# Usages

```js
import css from 'css-template';

const COLOR_MAIN = 'white';
const BACKGROUND_MAIN = '#336699';
const awesomeStyles = css`font-size: 200%`;

const styles = {
  header: css`{
    padding: 10px 0 20px 10px;
    text-align: center;
  }`,
  main: css`{
    composes: ${awesomeStyles};
    color: ${COLOR_MAIN};
    background-color: ${BACKGROUND_MAIN};
  }`
};

const MyComponent = (props) => (
  <div>
    <div style={styles.header}>
      {props.header}
    </div>
    <div style={styles.main}>
      {props.main}
    </div>
  </div>
);
```

# ROADMAP

- [x] `composes: ${otherStyles};` just like postcss composes feature
- [ ] optional auto-prefixer
- [ ] spread numeric values like `padding: ${[10, 20, 0, 10]}px;`

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