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 like vscode-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:

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:

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 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:

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:

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 with a warning, but you can still use this macro.

License

MIT

jhen0409 / css-to-rn.macro