0.0.9 • Published 8 years ago
babel-plugin-transform-react-native-style-optimizer v0.0.9
babel-plugin-transform-react-native-style-optimizer
Optimize inline style attributes in react-native. Removes duplicate style definitions and moves styles to a StyleSheet.
Example
In
<View style={[{ width: 100, height: 100 }]} />;
<View style={[
{ width: 100, height: 200 },
{ height: 100, width: 100 },
{ width: 100, height: 200 },
{ width: 100, height: 100 }
]}
/>;
Out
<View style={[_styles.s0]} />;
<View style={[_styles.s1, _styles.s0]} />;
const _styles = require("react-native").StyleSheet.create({
s0: { width: 100, height: 100 },
s1: { width: 100, height: 200 }
});
Installation
npm install --save-dev babel-plugin-transform-react-native-style-optimizer
Usage
Via .babelrc
(Recommended)
.babelrc
{
"plugins": ["transform-react-native-style-optimizer"]
}
Via CLI
babel --plugins transform-react-native-style-optimizer script.js
Via Node API
require("babel-core").transform("code", {
plugins: ["transform-react-native-style-optimizer"]
});