Match style objects containing CSS Media Queries with React Native

This library is based on React Native Extended StyleSheet's CSS Media Queries implementation.

npm install react-native-css-media-query-processor --save-dev

or

yarn add react-native-css-media-query-processor --dev

You can use this library together with css-to-react-native-transform to transform a string of CSS containing media queries to an React Native style object.

Notice that there is no syntax validation for CSS media queries. This is done to ensure that the media query matching is as fast as possible. If you want to validate the media queries, you should do that when they are parsed to style objects (that's what css-to-react-native-transform does).

Given that React Native returns the following dimensions:

import { Dimensions } from "react-native";
Dimensions.get("window");
// => { width: 110, height: 100 }

App.css:

.foo {
  color: red;
}

.bar {
  font-size: 1rem;
}

@media (min-width: 50px) and (max-width: 150px) {
  .foo {
    color: blue;
  }
  .bar {
    font-size: 2rem;
  }
}

↓ ↓ ↓ ↓ ↓ ↓

import styles from "./App.css";
import transform from "css-to-react-native-transform";
import { process } from "react-native-css-media-query-processor";

process(transform(styles, { parseMediaQueries: true }));

↓ ↓ ↓ ↓ ↓ ↓

{
  foo: {
    color: "blue"
  },
  bar: {
    fontSize: 32
  }
}