Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jhen0409/css-to-rn.macro
Convert CSS to React Native style sheet at build time with babel macros
https://github.com/jhen0409/css-to-rn.macro
babel css macro react-native
Last synced: 13 days ago
JSON representation
Convert CSS to React Native style sheet at build time with babel macros
- Host: GitHub
- URL: https://github.com/jhen0409/css-to-rn.macro
- Owner: jhen0409
- License: mit
- Created: 2018-07-03T15:00:16.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2020-05-27T12:50:11.000Z (over 4 years ago)
- Last Synced: 2024-10-20T23:09:29.657Z (20 days ago)
- Topics: babel, css, macro, react-native
- Language: JavaScript
- Homepage:
- Size: 221 KB
- Stars: 56
- Watchers: 6
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
- awesome-list - css-to-rn.macro
README
# css-to-rn.macro [](https://www.npmjs.com/package/css-to-rn.macro) [](https://travis-ci.org/jhen0409/css-to-rn.macro) [](https://greenkeeper.io/)
> Convert CSS to React Native style sheet at build time with [babel macros](https://github.com/kentcdodds/babel-plugin-macros), using [`css-to-react-native-transform`](https://github.com/kristerkari/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 like [`vscode-styled-components`](https://github.com/styled-components/vscode-styled-components)
## Installation
```bash
$ npm install --save-dev css-to-rn.macro
```
You'll also need to install and configure [`babel-plugin-macros`](https://github.com/kentcdodds/babel-plugin-macros) if you haven't already.
## Example
Input:
```js
import { StyleSheet } from 'react-native'
import css from 'css-to-rn.macro'
const styles = StyleSheet.create(
css`
.container {
flex: 1;
justify-content: center;
align-items: center;
}
`,
)
```
Output:
```js
import { StyleSheet } from 'react-native'
const styles = StyleSheet.create({
container: {
flexGrow: 1,
flexShrink: 1,
flexBasis: 0,
justifyContent: 'center',
alignItems: 'center',
},
})
```
## Media Queries support
The [`css-to-react-native-transform`](https://github.com/kristerkari/css-to-react-native-transform) allow parsing the CSS Media Queries, and you can use it with [`react-native-css-media-query-processor`](https://github.com/kristerkari/react-native-css-media-query-processor)
This is example for change styles with platform:
```js
import { Dimensions, StyleSheet } from 'react-native'
import css, { parseMedia } from 'css-to-rn.macro'
const win = Dimensions.get('window')
const matchObj = {
width: win.width,
height: win.height,
orientation: win.width > win.height ? 'landscape' : 'portrait',
'aspect-ratio': win.width / win.height,
type: 'screen',
}
const styles = StyleSheet.create(
parseMedia(
css`
.container {
flex: 1;
justify-content: center;
align-items: center;
}
@media not android {
.container {
background-color: #ccc;
}
}
`,
matchObj
),
)
```
## Limitations
#### Unable to parse unknown values in CSS template literal, for example:
```js
const height = Math.random() * 100
css`
.container {
height: ${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`](https://github.com/kristerkari/css-to-react-native-transform) with a warning, but you can still use this macro.
## License
[MIT](LICENSE.md)