# postcss-react-bender

> PostCSS plugin to process react-bender styling features with scss-like syntax.

Latest version **0.2.3** (published 2019-04-06) · MIT license · 0 weekly downloads

## Install

```sh
npm install postcss-react-bender
pnpm add postcss-react-bender
yarn add postcss-react-bender
bun add postcss-react-bender
```

## 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.2.3 |
| Published | 2019-04-06 |
| First published | 2018-12-12 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 11 |
| Unpacked size | 285.8 KB |
| Known vulnerabilities | 0 (+6 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Ömer Düzyol |
| Maintainers | omerduzyol |
| Keywords | postcss, css, postcss-plugin, react, react-native, scss, jss, css-in-js |

## Links

- npm: https://www.npmjs.com/package/postcss-react-bender
- Repository: https://github.com/creaworks-labs/postcss-react-bender
- Issues: https://github.com/creaworks-labs/postcss-react-bender/issues
- npm.io page: https://npm.io/package/postcss-react-bender

## Dependencies (11)

- [fbjs](https://npm.io/package/fbjs.md) ^0.8.5
- [lodash](https://npm.io/package/lodash.md) ^4.17.11
- [postcss](https://npm.io/package/postcss.md) ^6.0.16
- [prop-types](https://npm.io/package/prop-types.md) ^15.6.2
- [postcss-for](https://npm.io/package/postcss-for.md) ^2.1.1
- [loader-utils](https://npm.io/package/loader-utils.md) ^1.1.0
- [postcss-import](https://npm.io/package/postcss-import.md) ^12.0.0
- [css-to-react-native](https://npm.io/package/css-to-react-native.md) ^2.2.2
- [postcss-nested-vars](https://npm.io/package/postcss-nested-vars.md) ^1.0.0
- [postcss-conditionals](https://npm.io/package/postcss-conditionals.md) ^2.1.0
- [postcss-define-property](https://npm.io/package/postcss-define-property.md) ^0.5.0

## 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) — 2019-04-06
- 0.2.2 — 2019-04-06
- 0.2.1 — 2019-04-06
- 0.2.0 — 2019-03-12
- 0.1.1 — 2018-12-15
- 0.1.0 — 2018-12-12

## README

# PostCSS React Bender [![Build Status][ci-img]][ci]

[PostCSS] plugin to process react-bender styling features with scss like syntax..

[PostCSS]: https://github.com/postcss/postcss
[ci-img]:  https://travis-ci.org/omerduzyol/postcss-react-bender.svg
[ci]:      https://travis-ci.org/omerduzyol/postcss-react-bender

### Input Style

```css
#Screen {
  font-size: 25;

  .square {
    margin-top: 10px;
    width: 25;
    height: 55;
    background-color: 'yellow';
    align-items: 'center';
    justify-content: 'center';
  }

  #View {
    width: 100;
    height: 50;
    background-color: 'red';
  }

  #Text.underline {
    text-decoration: underline;
    font-size: 20px;
  }
}

#Text {
  .underline {
    text-decoration: underline;
  }
}
```

### Output Bender
```json
{
  "Screen": {
    ".square": {
      "alignItems": "center",
      "backgroundColor": "yellow",
      "height": 55,
      "justifyContent": "center",
      "marginTop": "10pt",
      "width": 25,
    },
    "Text.underline": {
      "fontSize": 20,
      "textDecorationColor": "black",
      "textDecorationLine": "underline",
      "textDecorationStyle": "solid",
    },
    "View": {
      "backgroundColor": "red",
      "height": 50,
      "width": 100,
    },
    "fontSize": 25,
  },
  "Text": {
    ".underline": {
      "textDecorationColor": "black",
      "textDecorationLine": "underline",
      "textDecorationStyle": "solid",
    },
  },
}
```

## General Usage

```js
postcss([ require('postcss-react-bender') ])
    .process(srcFile)
    .then(result => {
        console.log('Transformed', result.bender)
    })
```

## ReactNative Usage
Please refer to transformer options *react-bender* repository.

See [PostCSS] docs for examples for your environment.

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