index.js

//----------------------------------------------------------------------//
//                          Import NPM modules                          //
//----------------------------------------------------------------------//

var styleInject = require('style-inject');


//----------------------------------------------------------------------//
//                       Private helper functions                       //
//----------------------------------------------------------------------//

function joinLines(lines) {

    return lines.join('\n');

}

function generateOpacity(value) {

    return '    opacity: ' + value + ';';

}

function generateTransformTranslateX(value) {

    return joinLines([
        '    -webkit-transform: translateX(' + value + ');',
        '            transform: translateX(' + value + ');'
    ]);

}

function generateTransformTranslateY(value) {

    return joinLines([
        '    -webkit-transform: translateY(' + value + ');',
        '            transform: translateY(' + value + ');'
    ]);

}

function makeTransitionOpacity(durationMs) {

    return joinLines([
        '    -webkit-transition: opacity ' + durationMs + 'ms ease-in-out;',
        '            transition: opacity ' + durationMs + 'ms ease-in-out;'
    ]);

}

function makeTransitionTransform(durationMs) {

    return joinLines([
        '    -webkit-transition: -webkit-transform ' + durationMs + 'ms ease-in-out;',
        '            transition:         transform ' + durationMs + 'ms ease-in-out;'
    ]);

}


//----------------------------------------------------------------------//
//                          Exported function                           //
//----------------------------------------------------------------------//

module.exports = function (config) {

    var generator  = null;
    var transition = null;

    switch (config.type) {
        case 'opacity':
            generator  = generateOpacity;
            transition = makeTransitionOpacity;
            break;
        case 'translateX':
            generator  = generateTransformTranslateX;
            transition = makeTransitionTransform;
            break;
        case 'translateY':
            generator  = generateTransformTranslateY;
            transition = makeTransitionTransform;
            break;
        default:
            throw new Error('Unknown type: ' + config.type);
    }

    var css = joinLines([

        '/* This stylesheet was dynamically generated by rctg-injector */',

        '.' + config.name + '-enter {',
        generator(config.enterStart),
        '}',

        '.' + config.name + '-enter.' + config.name + '-enter-active {',
        generator(config.enterFinish),
        transition(config.durationMs),
        '}',

        '.' + config.name + '-leave {',
        generator(config.leaveStart),
        '}',

        '.' + config.name + '-leave.' + config.name + '-leave-active {',
        generator(config.leaveFinish),
        transition(config.durationMs),
        '}'

    ]);

    styleInject(css);

};