https://github.com/taixw2/babel-plugin-react-native-style

Improve the writing stylesheet experience
https://github.com/taixw2/babel-plugin-react-native-style

Last synced: 5 days ago
JSON representation

Improve the writing stylesheet experience

• Host: GitHub
• URL: https://github.com/taixw2/babel-plugin-react-native-style
• Owner: taixw2
• License: mit
• Created: 2019-04-14T05:26:22.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2023-01-05T17:54:55.000Z (almost 2 years ago)
• Last Synced: 2024-10-10T20:20:09.676Z (about 1 month ago)
• Language: TypeScript
• Size: 4.5 MB
• Stars: 6
• Watchers: 2
• Forks: 2
• Open Issues: 30
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# babel-plugin-react-native-style

Improve the writing stylesheet experience

[![Package Quality](https://npm.packagequality.com/shield/babel-plugin-react-native-style.svg?style=flat)](https://packagequality.com/#?package=babel-plugin-react-native-style)

[![Travis](https://img.shields.io/travis/taixw2/babel-plugin-react-native-style.svg?style=flat)](https://travis-ci.org/taixw2/babel-plugin-react-native-style)

[![GitHub package.json version](https://img.shields.io/github/package-json/v/taixw2/babel-plugin-react-native-style.svg)](https://github.com/taixw2/babel-plugin-react-native-style)

This plugin is a highly recommended supplement to the base stylesheet library of react native, offering some useful features:

- compilation rpx

- supporting space values: `padding: "20rpx 20pt 10"`

## output

```javascript

// 1. border: '1 solid #fff'

// --->output

borderWidth: 1,

borderStyle: 'solid',

borderColor: '#fff',

// 2. rpx

// height: '1rpx'

// --->output

var __RPX = require('babel-plugin-react-native-style-runtime').__RPX;

height: __RPX(1)

// 3. padding: '1 2rpx'

// --->output

var __RPX = require('babel-plugin-react-native-style-runtime').__RPX;

paddingTop: 1,

paddingBottom: 1,

paddingLeft: __RPX(2),

paddingRight: __RPX(2)

// ...support list

// padding, margin, border, borderRadius, ...

```

## Quick start

Install the plugin first:

```bash

npm install babel-plugin-react-native-style-runtime babel-plugin-react-native-style --save-dev

```

or use `yarn`

```bash

yarn add babel-plugin-react-native-style-runtime babel-plugin-react-native-style -D

```

Then add it to your babel configuration:

```json

{

  "plugins": ["react-native-style"]

}

```

## License

Licensed under the MIT License,Copyright (c) 2019 ouyangxin.

See [LICENSE.md](./LICENSE) for more information.