css-to-react-native-transform

A lightweight wrapper on top of css-to-react-native to allow valid CSS to be turned into React Native Stylesheet objects.

Example:

.my-class {
  font-size: 18px;
  line-height: 24px;
  color: red;
}

.other {
  padding: 1rem;
}

is transformed to:

{
  myClass: {
    fontSize: 18,
    lineHeight: 24,
    color: "red"
  },
  other: {
    paddingBottom: 16,
    paddingLeft: 16,
    paddingRight: 16,
    paddingTop: 16
  }
}

import transform from "css-to-react-native-transform";
// or const transform = require("css-to-react-native-transform").default;

transform(`
  .foo { 
    color: #f00; 
  }
`); // => { foo: { color: "#f00" } }

• For rem unit the root element font-size is currently set to 16 pixels. A setting needs to be implemented to allow the user to define the root element font-size.
• There is also support for the box-shadow shorthand, and this converts into shadow- properties. Note that these only work on iOS.