Raise and issue and I will add you. After a PR.
React-native-css turns valid CSS/SASS into the Facebook subset of CSS.
Global
npm install react-native-css -gReact-native-css comes with a cli and you can watch a file and compile it.
# example 1
react-native-css -i INPUT_CSS_FILE -o OUTPUT_JS_FILE --watch# example 2
react-native-css -i INPUT_CSS_FILE -o OUTPUT_JS_FILE --watch --pretty# example 3
react-native-css INPUT_CSS_FILE OUTPUT_JS_FILE -wreact-native-css -i style.css -o style.js -wFlags
- "-w" or "--watch" - watch for changes and recompile.
- "-i" takes a input (optional)
- "-o" takes an output path (optional)
- "-p" or "--pretty" - pretty print the resulting compiled output
- "-l" or "--literal" - generates a javascript literal object without StyleSheet.create wrapper
Given the following CSS:
description {
margin-bottom: 20px;
font-size: 18px;
text-align: center;
color: #656656;
}
container {
padding: 30px;
margin-top: 65px;
align-items: center;
display: block;
}React-native-css will generate to the following:
// style.js
module.exports = require('react-native').StyleSheet.create(
{"description":{"marginBottom":20,"fontSize":18,"textAlign":"center","color":"#656656"},"container":{"padding":30,"marginTop":65,"alignItems":"center"}}
);You can make use of --literal argument and instead it will generate:
// style.js
module.exports = {
"description":{"marginBottom":20,"fontSize":18,"textAlign":"center","color":"#656656"},"container":{"padding":30,"marginTop":65,"alignItems":"center"}
}// require the generated style file
var styles = require('./style.js')
//{"description":{"marginBottom":20,"fontSize":18,"textAlign":"center","color":"#656656"},"container":{"padding":30,"marginTop":65,"alignItems":"center"}}
class SearchPage extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.description}>
Buy
</Text>
</View>
);
}
}
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent