How to use @reshadow/runtime - 6 common examples

class GlobalStyle extends React.Component {
    render() {
        // eslint-disable-next-line
        const {style} = this.props;
        if (style) {
            for (const name in style) {
                document.documentElement.style.setProperty(name, style[name]);
            }
        }

        return null;
    }
}

const globalReshadowStyled = createReshadowStyled((as, props) => {
    const style = coreStyled[KEYS.__style__];

    props.style = style;

    return React.createElement(GlobalStyle, props);
}, globalCSS);

export const createGlobalStyle = (strs, ...values) =>
    styled(GlobalStyle).create({
        wrap: (element, strs) => strs,
        styled: globalReshadowStyled,
    })(strs, ...values);

import React from 'react';
import {
    createStyled as createReshadowStyled,
    createCSS,
} from '@reshadow/runtime';
import coreStyled, {KEYS} from '@reshadow/core';
import stylis from 'stylis';
import styled from '.';

const globalCSS = createCSS({
    parse: code => {
        stylis.use(null);
        return {css: stylis('', code), tokens: {}};
    },
});

class GlobalStyle extends React.Component {
    render() {
        // eslint-disable-next-line
        const {style} = this.props;
        if (style) {
            for (const name in style) {
                document.documentElement.style.setProperty(name, style[name]);
            }
        }

export function jsx() {
    const args = Array.prototype.slice.call(arguments);
    let element = args[0];
    if (typeof element === 'string' && !tags.has(element)) {
        args[0] = 'div';
    } else if (typeof element === 'function') {
        element = getDisplayName(element);
    }
    args[1] = map(element, args[1]);
    return React.createElement.apply(null, args);
}

export {css, use, create, keyframes};

const reactStyled = createStyled(elem => {
    const style = styled[KEYS.__style__];
    let result = styled(elem);
    if (style && result) {
        result = React.cloneElement(result, {
            style: Object.assign({}, style, result.props.style),
        });
    }
    return result;
});

reactStyled.jsx = jsx;

export default reactStyled;

const nextArgs = Object.create(args);
        for (const index in functions) {
            let value = functions[index](data);
            if (typeof value === 'string') {
                value = mixin(value);
            }

            while (typeof value === 'function') value = value(data);

            nextArgs[index] = value;
        }
        return __css__.apply(null, nextArgs);
    };
}

const reshadowStyled = createReshadowStyled((element, as, props, filtered) => {
    const style = coreStyled[KEYS.__style__];

    if (style) {
        props.style = Object.assign({}, style, props.style);
    }

    props = map(element, props);

    if (filtered) {
        for (let i = 0; i < filtered.length; i++) {
            delete props[filtered[i]];
        }
    }

    const result = React.createElement(as, props);

const styledProps = ['as', 'theme'];
const blacklist = new Set([...styledProps, 'color']);

const filterProps = props => {
    const nextProps = {};
    const filtered = Object.create(styledProps);
    Object.keys(props).forEach(prop => {
        nextProps[prop] = props[prop];
        if (blacklist.has(prop) || !isReactProp(prop)) {
            filtered.push(prop);
        }
    });
    return {props: nextProps, filtered};
};

const __css__ = createCSS({
    elements: false,
    classes: false,
    attributes: true,
    onlyNamespaced: true,
});

const mixin = value => {
    if (value[0] === "'" || value[0] === '"' || value.indexOf(':') === -1) {
        return value;
    }

    return __css__([value]);
};

function css() {
    const str = [...arguments[0]];

if (options.attrs) {
                    for (const attr in options.attrs) {
                        const value = options.attrs[attr];
                        props[attr] =
                            typeof value === 'function' ? value(props) : value;
                    }
                }
                props.theme = props.theme || contextTheme;
                const as = props.as || tag;
                const localValues = this.mapValues(props);

                let localWrapper = wrapper;

                if (localMixin) {
                    localWrapper = wrap(elementClassName, [...strs, '']);

                    while (typeof localMixin === 'function') {
                        localMixin = localMixin(props);
                    }

                    if (typeof localMixin === 'string') {
                        localMixin = css([localMixin]);
                    }

                    localValues.push(localMixin);
                }

                const args = [localWrapper];

                args.push.apply(args, localValues);