PostCSS React Native
PostCSS plugin to make react native stylesheets
IN DEVELOPMENT Currently a proof of concept. It roughly based on react-native-css although it shares no code.
Capablities
- Recalculate stylesheet based on media queries and current dimensions.
- -ios,-android vendor prefixes.
- Supports px, vh, vw,in, pt,em,pc,vmin,vax units.
- handles border shorthand.
- handles margin shorthand.
- supports checked pseudo selector.
- handles most font properties.
- Transitions
- Imports
- Implement content, before and after pseudo's.
- Nested selectors (partial support)
- Percentage units.
- Nice import from. I.E import from styles rather than dist.
- filter properties not supported by react-native. Tricky, because it is component dependent.
- Support regular react (currently only react-native).
- Support background images, via Image with children.
Usage
See [PostCSS] docs for examples for your environment.
Watcher Usage
Since most React Native environments do not have a css pipeline you can use the prn watcher.
$ npm install postcss-react-native $ ./node_modules/.bin/prn -d dist -w ./style
Usage
You should be able to include the said css via regular require
styles/SpecialComponent.css
Write your css using namespaces to import component. EX: ./styles/component.css
;;
Then import your component.
import React Component from 'react';import View from 'react-native';import styles StyledText from './dist/component.css'; return <View => <StyledText>Your Text Here</StyledText>//your stuff here.</View>