Wondering what’s next for npm?Check out our public roadmap! »

    grunt-react-native-css

    1.0.0 • Public • Published

    grunt-react-native-css Build Status npm

    A wrapper for react-native-css, a css to react-native StyleSheet Syntax by @sabeurthabti 👏

    Getting Started

    This plugin requires Grunt ~0.4.5

    If you haven't used Grunt before, be sure to check out the Getting Started guide, as it explains how to create a Gruntfile as well as install and use Grunt plugins. Once you're familiar with that process, you may install this plugin with this command:

    npm install grunt-react-native-css --save-dev

    Once the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:

    grunt.loadNpmTasks('grunt-react-native-css');

    The "react_native_css" task

    Overview

    In your project's Gruntfile, add a section named react_native_css to the data object passed into grunt.initConfig().

    grunt.initConfig({
      react_native_css: {
        options: {
          // Task-specific options go here.
        },
        your_target: {
          // Target-specific file lists and/or options go here.
        },
      },
    });

    Options

    options.pretty

    Type: Boolean Default value: false

    Passes the --pretty option to react-native-css which outputs a multiline js StyleSheet file.

    options.literal

    Type: Boolean Default value: false

    Passes the --literal option to react-native-css which outputs a simple js object instead of a StyleSheet.create() object.

    Usage Example

    grunt.initConfig({
      react_native_css: {
        default_options: {
          options: {},
          files: {
            'dest/style.js': ['src/style.css', 'src/vars.css'],
          },
        },
      },
    });

    About watching

    This plugin does not wrap the use of the -w flag for react-native-css because grunt has it's own file watcher under the hood. Just install :

    npm install grunt-contrib-watch --save-dev

    Add the task to you GruntFile

    grunt.loadNpmTasks('grunt-contrib-watch');

    And tell watch to fire the react_native_css task on file changes

    watch: {
      react_native_css: {
        files: ['**/*.css', '**/*.scss'],
        tasks: ['react_native_css'],
        options: {
          interrupt: true,
        },
      },
    }

    Contributing

    In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code using Grunt.

    Release History

    V 1.0.0 Transfer ownership from @alexmick to @feedly

    V 0.1.6 Documentation update

    V 0.1.5 Support react-native-css --literal flag

    Option literal now supported as added in https://github.com/sabeurthabti/react-native-css/pull/29

    V 0.1.4 react-native-css source update

    Use the official react-native-css instead of personal fork

    V 0.1.3 Async update

    Improve reliability of async task

    V 0.1.1 Initial Release

    Integrates with alexmick/react-native-css, waiting for PR #28 to switch to official npm module

    Install

    npm i grunt-react-native-css

    DownloadsWeekly Downloads

    3

    Version

    1.0.0

    License

    MIT

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar