hgs-gulp-react-native-stylesheet-css v1.4.4

hgs-gulp-react-native-stylesheet-css

Gulp plugin for converting CSS files to React Native StyleSheets. this package fork from gulp-react-native-stylesheet-css

Install

npm install hgs-gulp-react-native-stylesheet-css --save-dev

You can use it with react-native-extended-stylesheet

Basic usage

var gulp = require('gulp'),
  sass = require('gulp-sass'),
  reactNativeStylesheetCss = require('gulp-react-native-stylesheet-css');

gulp.task('styles', function () {
  gulp
    .src('./src/sass/*.scss')
    .pipe(sass())
    .pipe(reactNativeStylesheetCss())
    .pipe(gulp.dest('./dist/sass/'));
});

SASS or any other CSS preprocessor is not required. Plain .CSS files may be used.

Example output

Example using SASS as a preprocessor:

Input

#header {
  margin-bottom: 20;
  box-shadow: 0 2px 4px rgba(52, 21, 23, 0.32);

  .btn {
    padding: 3 8;
    text-align: center;
    transform: scale(0.8) translateY(4px) rotate3d(20deg, 5deg, 10deg);
  }
}

Output

var React = require('react-native');
var { StyleSheet } = React;
module.exports = StyleSheet.create({
    "header": {
        "marginBottom": 20,
        "shadowColor": "rgb(52,21,23)",
        "shadowOffset": {
            "width": 0,
            "height": 2
        },
        "shadowOpacity": 0.32,
        "shadowRadius": 4
    },
    "header btn": {
        "paddingTop": 3,
        "paddingBottom": 3,
        "paddingRight": 8,
        "paddingLeft": 8,
        "textAlign": "center"
        "transform": [
            { "scale": 0.8 },
            { "translateY": 4 },
            { "rotateX": "20deg" },
            { "rotateY": "5deg" },
            { "rotateZ": "10deg" }
        ]
    }
});

Properties supported

Any property found in your CSS will be camelCased. By default, this plugin will always output values as JavaScript Number or Boolean objects when appropriate. Values with units attached, including "em" and "px," will be output without their unit suffixes.

Special-case properties

The following properties output different keys to satisfy React Native's requirements. Unless otherwise noted, the values for each correspond with CSS3.

Options

Additional options can be passed to the plugin to customize its output. For example:

    ...
    .pipe(reactNativeStylesheetCss({ outputPlainObject: true }))
    .pipe(reactNativeStylesheetCss({ withExtendedStyleSheet: true }))
    ...

Supported options:

About

Licensed under MIT. Based off of the works of gulp-react-native-css and react-native-css.