css-to-rn.macro
Convert CSS to React Native style sheet at build time with babel macros, using
css-to-react-native-transform
.
- A lightweight way to write CSS for React Native
- Use CSS to write React Native styles without take startup time for parse in JS runtime
- Support editor plugin that detect
css
template literal likevscode-styled-components
Installation
$ npm install --save-dev css-to-rn.macro
You'll also need to install and configure babel-plugin-macros
if you haven't already.
Example
Input:
const styles = StyleSheet
Output:
const styles = StyleSheet
Media Queries support
The css-to-react-native-transform
allow parsing the CSS Media Queries, and you can use it with react-native-css-media-query-processor
This is example for change styles with platform:
const styles = StyleSheet
Limitations
Unable to parse unknown values in CSS template literal, for example:
const height = Math * 100css` .container { height: ; }`
Due to the height
is random number, so it's unknown value at build time.
It will just fallback to css-to-react-native-transform
with a warning, but you can still use this macro.