How to use @reshadow/core - 10 common examples

})
            .replace(/"?}?__QUOTE__{?"?/g, '')
            .replace(/\{(\w+)\}:(\s*true)?/g, (match, $1, $2) => {
                if ($2) {
                    return `${$1}: ${$1}`;
                }

                return `${$1}:`;
            })
            // use __styles__ instead of styled to improve the dynamic values changes reaction
            .replace(
                new RegExp(
                    `${reshadowImport}\\.${escapeRegExp(KEYS.__style__)}`,
                    'g',
                ),
                `__styles__.$${KEYS.__style__}`,
            );

        let result = `${code}`;
        if (style.content) {
            result += `${style.content}`;
        }

        result += markup;

        return {code: result};
    },
});

.replace(/__use__/g, 'use')
            .replace(/__PLACEHOLDER__\d+__/g, match => {
                return placeholders[match];
            })
            .replace(/"?}?__QUOTE__{?"?/g, '')
            .replace(/\{(\w+)\}:(\s*true)?/g, (match, $1, $2) => {
                if ($2) {
                    return `${$1}: ${$1}`;
                }

                return `${$1}:`;
            })
            // use __styles__ instead of styled to improve the dynamic values changes reaction
            .replace(
                new RegExp(
                    `${reshadowImport}\\.${escapeRegExp(KEYS.__style__)}`,
                    'g',
                ),
                `__styles__.$${KEYS.__style__}`,
            );

        let result = `${code}`;
        if (style.content) {
            result += `${style.content}`;
        }

        result += markup;

        return {code: result};
    },
});

let mixinsHash = '';
        let parsed;

        const vars = {};
        const mixins = {};
        const mixinVars = {};
        const mixinTokens = [];
        const mixinUses = {};

        for (let i = 1, len = arguments.length; i < len; i++) {
            let value = arguments[i];

            if (value === null || value === undefined) {
                mixins[i] = '';
            } else if (typeof value === 'object') {
                if (!(KEYS.__style__ in value)) {
                    value = css([obj2css(value)]);
                }

                Object.assign(mixinVars, value[KEYS.__style__]);
                mixinsHash += '_' + value[KEYS.__hash__];
                mixins[i] = value[KEYS.__css__];

                /** replace &{...} for mixins */
                if (mixins[i].slice(0, 2) === '&{') {
                    mixins[i] = mixins[i].slice(2, -1);
                }

                mixinTokens.push(value);
                Object.assign(mixinUses, value[KEYS.__use__]);
            } else {
                const name = '--' + hash + '_' + i;

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

    props.style = style;

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

}

                        useAttr.argument.arguments[0].properties.push(...uses);

                        spreads.push(useAttr.argument);
                    }

                    if (options.target === 'vue') {
                        indexesToRemove.forEach(i => {
                            openingElement.attributes.splice(i, 1);
                        });

                        if (__style__) {
                            openingElement.attributes.push(
                                t.jSXAttribute(
                                    t.JSXIdentifier(KEYS.__style__),
                                    t.JSXExpressionContainer(__style__),
                                ),
                            );
                        }

                        if (useAttr) {
                            openingElement.attributes.push(useAttr);
                        }

                        return;
                    }
                }

                if (spreads.length > 0) {
                    if (__style__) {
                        props.push(getProp(KEYS.__style__, __style__));

if (!isMixin) {
                __css__(parsed.css, cacheKey);
            }

            parsed.tokens = create([parsed.tokens].concat(mixinTokens));

            parsed.tokens[KEYS.__hash__] = cacheKey;
            parsed.tokens[KEYS.__css__] = parsed.css;

            cache[cacheKey] = parsed;
        }

        const tokens = Object.create(cache[cacheKey].tokens);

        tokens[KEYS.__style__] = Object.assign(vars, mixinVars);
        return tokens;
    }

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);

    if (style && result.props.style === props.style) {

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;
});

const use = obj => {
    const result = {attrs: {}};
    result.attrs[KEYS.__use__] = obj;
    return result;
};

const parse = (
    code,
    hash,
    {isMixin, elements, attributes, onlyNamespaced, classes},
) => {
    const options = {
        prefix: !isMixin,
    };

    stylis.set(options);

    const tokens = Object.create(null);
    tokens[KEYS.__use__] = {};
    const postfix = '_' + hash;

    const rules = Object.create(null);

    let skip = false;

    stylis.use(null)(function(
        context,
        content,
        selectors,
        parent,
        line,
        column,
    ) {
        if (skip) return;