❤
npm
Sign UpSign In

babel-plugin-react-native-css-shorthand

1.0.1 • Public • Published

Babel Plugin for ReactNative CSS Shorthand

This plugin will let you define margin & padding within React Native StyleSheet similar to CSS shorthands.

Example

Input

import {StyleSheet} from 'react-native';
 
const styles = StyleSheet.create({
  container: {
    margin: [0, 10],
    padding: [5, 20, 10]
  }
});
 
export default styles;

Output

import {StyleSheet} from 'react-native';
 
const styles = StyleSheet.create({
  container: {
    marginTop: 0,
    marginRight: 10,
    marginBottom: 0,
    marginLeft: 10,
    paddingTop: 5,
    paddingRight: 20,
    paddingBottom: 10,
    paddingLeft: 20
  }
});
 
export default styles;

Installation

$ npm install --save-dev babel-preset-react-native babel-plugin-react-native-css-shorthand

Then, create a .babelrc in your project root with the following content:

{
  "presets": ["react-native"],
  "plugins" : ["babel-plugin-react-native-css-shorthand"]
}

TODO

  • Add test
  • Add borderWidth support

Readme

Keywords

Package Sidebar

Install

npm i babel-plugin-react-native-css-shorthand

Repository

github.com/torifat/babel-plugin-react-native-css-shorthand

Homepage

github.com/torifat/babel-plugin-react-native-css-shorthand#readme

Weekly Downloads

2

Version

1.0.1

License

MIT

Last publish

Collaborators

  • rifat
Try on RunKit
Report malware