react-native-styler.jsx

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

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

import Styler from './react-native-styler';

Styler.UTIL = {
    deg: (num) => num + 'deg'
}
Styler.THEME = {
    baseFont: 15
}


const $ = Styler.create(({baseFont}, {deg}) => {
    return {
        wrapper: {
            margin: 50,
            transform: [{rotate: deg(10)}]
        },
        'static-text': {
            fontSize: baseFont * 1.2,
        },
        'static': {
            backgroundColor: 'gray',
        },
        'dynamic': {
            borderWidth: 2,
            margin: 5,
            transform: [{rotate: deg(-10)}]
        },
        'dynamic-true': {
            borderColor: 'green'
        },
        'dynamic-false': {
            borderColor: 'red'
        },
        'direct': {
            borderWidth: 2,
            borderColor: 'black'
        },
        'direct-text': {
            fontSize: baseFont * 2.5,
        },
        'fuck': {
            backgroundColor: 'pink'
        }
    }
});

class styler_dev extends Component {
    render() {
        console.log(123, $, $.wrapper);

        return (
            <View style={$.wrapper}>
                <View style={$('static')}>
                    <Text style={$('static-text')}>static</Text>

                    <View style={$('dynamic', {
                        'dynamic-true': true,
                        'dynamic-false': false,
                    }, 'fuck')}>
                        <Text>dynamic</Text>

                        <View style={$.direct}>
                            <Text style={$('direct-text')}>direct</Text>
                        </View>
                    </View>
                </View>
            </View>
        );
    }
}



AppRegistry.registerComponent('styler_dev', () => styler_dev);


// ----------------------------------------------------------------------
// ----------------------------------------------------------------------
// ----------------------------------------------------------------------

import {Platform, StyleSheet} from 'react-native';
import _, {toArray, isFunction, isString, isObject, filter} from 'lodash';


// helpers
const _isDevMode = true; // todo: change to proccess.env or else

function filterThruthySelectors(selectorHash){
    return _(selectorHash)
        .reduce((memo, value, key) => value ? memo.concat(key) : memo, [])
}

const RESTRICTED_RULES = [
    'constructor', '__proto__', 'hasOwnProperty',
    'isPrototypeOf', 'propertyIsEnumerable', 'toString',
    'toLocaleString', 'valueOf', 'get', 'set',
];

const filterRestricted = (rule) => RESTRICTED_RULES.indexOf(rule) === -1;
const filterRestrictedDev = (rule) => {
    const isNonRestricted = RESTRICTED_RULES.indexOf(rule) === -1;
    !isNonRestricted && console.warn(`[STYLER]: Styles-rule "${rule}" is restricted`);
    return isNonRestricted
}
function _getDataFromRulesHandles(rulesHandle) {
    return isFunction(rulesHandle) ? rulesHandle(Stylers.THEME, Stylers.UTIL) : rulesHandle
}
function _wrapPlatforms(rules) {
    rules['ios'] && rules['ios'] = Platform.select({'ios': rules['ios']});
    rules['android'] && rules['android'] = Platform.select({'android': rules['android']});
    return rules;
}
function prepareRules(rulesHandles) {
    return StyleSheet.create.apply(StyleSheet,
        _(rulesHandles)
            .map(_getDataFromRulesHandles)
            .map(_wrapPlatforms)
            .filter(_isDevMode ? filterRestricted : filterRestrictedDev)
            .value()
    );
}

// STYLERS
function Stylers() {
    return Stylers.create.apply(this, arguments)
}

Stylers.UTIL = {};
Stylers.THEME = {};

Stylers.create = function () {
    const rules = prepareRules(toArray(arguments));

    const getRules = (selector) => {
        if (isObject(selector)) {
            return filterThruthySelectors(selector)
                .map(_isDevMode ? getRuleDev : getRule)
        }

        return rules[selector];
    };
    const getRule = (key) => rules[key];
    const getRuleDev = (key) => {
        if (!rules[key]) {
            console.warn(`[STYLER]: Selector "${key}" is not find in`, rules);
            return
        }
        return rules[key]
    };

    // getter (perfomance tight place)
    function styler() {
        return StyleSheet.flatten(toArray(arguments).map(getRules));
    }

    // assign all rules to getter properties, for direct 'index' access
    Object.assign(styler, rules);

    return styler;
};

export default Stylers;