Package Exports

css-to-react-native-transform

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (css-to-react-native-transform) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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:

.myClass {
  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
  }
}

API

Transform CSS

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";
  }
}

CSS Media Queries (experimental)

The API for CSS Media Queries might change in the future

transform(
  `
  .container {
    background-color: #f00;
  }

  @media (orientation: landscape) {
    .container {
      background-color: #00f;
    }
  }
`,
  { parseMediaQueries: true },
);

↓ ↓ ↓ ↓ ↓ ↓

{
  __mediaQueries: {
    "@media (orientation: landscape)": {
      expressions: [
        {
          feature: "orientation",
          modifier: undefined,
          value: "landscape",
        },
      ],
      inverse: false,
      type: "all",
    },
  },
  container: {
    backgroundColor: "#f00",
  },
  "@media (orientation: landscape)": {
    container: {
      backgroundColor: "#00f",
    },
  },
}

Limitations

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.