csjs-native

covert regular css, PostCss, SASS...etc into JS object literals to be used with react native or any framework that uses JS object literals.

csjs-native enables you to use the environment tools provided by CSJS such as PostCss babel plugin, Syntax highlighting and css auto complete.

Features:

• Regular css (no camel casing/object literals) - see example below
• Import .css file into React Native - Docs
• PostCss, SASS, LESS, CSSnext ...etc. - Docs
• Full power of js in css if you choose to. - see example below
• Syntax highlighting - Docs
• Css auto-complete - Docs
• Framework agnostic - Docs
• Share components across platform (Web, iOS, Android) - Docs
• Single file component if you choose to (js, jsx, css) - see example below below
• Tiny & zero dependencies ~3KB

Install

npm install csjs-native --save

Example

import { AppRegistry, Text, View } from 'react-native';
import React from 'react';
import csjs from 'csjs-native';

const primary_color = 'blue';

const styles = csjs`
  .welcome {
    font-size: 30;
    color: ${primary_color};
  }
  .container {
    flex : 1;
    justify-content: center;
    align-items: center
  }
`

const Example = ()=> (
      <View style={styles.container}>
        <Text style={styles.welcome}>
            Welcome to csjs native
        </Text>
      </View>
    )

AppRegistry.registerComponent('example', () => Example);

.

Screenshot

This demonstrate syntax highlighting and auto complete