https://github.com/creaworks-labs/postcss-react-bender

PostCSS plugin to process react-bender styling features with scss like syntax.
https://github.com/creaworks-labs/postcss-react-bender

css-in-js cssnext postcss postcss-plugin react-native styled-components stylesheet

Last synced: about 1 month ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/creaworks-labs/postcss-react-bender
• Owner: creaworks-labs
• License: mit
• Created: 2018-10-21T15:09:57.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2019-03-13T11:08:42.000Z (almost 6 years ago)
• Last Synced: 2024-12-05T16:08:08.480Z (about 2 months ago)
• Topics: css-in-js, cssnext, postcss, postcss-plugin, react-native, styled-components, stylesheet
• Language: JavaScript
• Size: 104 KB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

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.