How to use @reshadow/utils - 10 common examples

ImportDeclaration(p) {
                const {source, specifiers} = p.node;

                if (cssFileRe && cssFileRe.test(source.value)) {
                    const file = utils.resolveDependency({
                        filename: source.value,
                        basedir: path.dirname(filename),
                    });

                    const code = fs
                        .readFileSync(file)
                        .toString()
                        // escape backticks and backslashes
                        .replace(/[`\\]/g, '\\$&');

                    const append = t.taggedTemplateExpression(
                        t.identifier(addImport('css')),
                        t.templateLiteral(
                            [
                                t.templateElement({
                                    raw: code,

}

                depth++;

                const {openingElement} = node;

                let elementName = getElementName(openingElement.name);

                elementName = elementName.replace(/^use\./, 'use:');

                let isElement = true;

                if (elementName.startsWith('use:')) {
                    elementName = elementName.replace('use:', 'use--');
                    openingElement.name = t.JSXIdentifier('div');
                } else if (utils.isCustomElement(elementName)) {
                    if (options.elementFallback) {
                        openingElement.name = t.JSXIdentifier(
                            typeof options.elementFallback === 'boolean'
                                ? 'div'
                                : options.elementFallback,
                        );
                    }
                } else if (!/[^A-Z]\w+/.test(elementName)) {
                    isElement = false;
                }

                elementMap.set(elementPath, {elementName});

                const spreads = [];

                if (openingElement.attributes.length > 0) {

)
                    : null;

                const {openingElement, closingElement} = node;

                let elementName = getElementName(openingElement.name);

                elementName = elementName.replace(/^use\./, 'use:');

                let isElement = true;

                if (elementName.startsWith('use:')) {
                    elementName = elementName.replace('use:', 'use--');
                    openingElement.name = t.JSXIdentifier('div');
                } else if (
                    utils.isCustomElement(elementName) &&
                    !(
                        options.filterElement &&
                        options.filterElement(elementName)
                    )
                ) {
                    if (options.elementFallback) {
                        openingElement.name = t.JSXIdentifier(
                            typeof options.elementFallback === 'boolean'
                                ? 'div'
                                : options.elementFallback,
                        );
                    }
                } else if (!/[^A-Z]\w+/.test(elementName)) {
                    isElement = false;
                }

ImportDeclaration(p) {
                const {source, specifiers} = p.node;

                if (cssFileRe && cssFileRe.test(source.value)) {
                    const file = utils.resolveDependency({
                        filename: source.value,
                        basedir: path.dirname(filename),
                    });

                    const code = fs.readFileSync(file).toString();

                    const append = t.taggedTemplateExpression(
                        t.identifier(addImport('css')),
                        t.templateLiteral(
                            [
                                t.templateElement({
                                    raw: code,
                                    cooked: code,
                                }),
                            ],
                            [],

JSXOpeningElement(node) {
                if (!(node.name && t.isJSXIdentifier(node.name))) return;

                const {name} = node.name;

                if (!utils.isCustomElement(name)) return;

                let asAttr;
                for (const attr of node.attributes) {
                    if (
                        !(
                            t.isJSXAttribute(attr) &&
                            t.isJSXIdentifier(attr.name)
                        )
                    )
                        continue;
                    if (attr.name.name === 'as') {
                        asAttr = attr;
                        break;
                    }
                }

.replace(/\/\*__reshadow-styles__:"(.*?)"\*\//, (match, dep) => {
            const depPath = utils.resolveDependency({
                filename: dep,
                basedir: path.dirname(filepath),
            });

            this.dependency(depPath);

            return '';
        });

(match, code) => {
                const hash = `${utils.getFileHash(filepath)}_${++index}`;
                const filename = `${hash}.css`;

                virtualModules.writeModule(
                    path.resolve(cacheDirectory, filename),
                    code
                        .replace(/\\"/g, '"')
                        .replace(/\\'/g, "'")
                        .replace(/\\n/g, '\n'),
                );

                return `require('.cache/reshadow/${filename}')`;
            },
        )

) {
                        value = attrValue.expression.quasis[0].value.raw;
                    } else if (options.onlyString) {
                        context.report({
                            node: asAttr.value,
                            message:
                                '`as` attribute should be the static string',
                        });

                        return;
                    }
                } else {
                    value = attrValue.value;
                }

                if (options.onlyExisting && !utils.tags.has(value)) {
                    context.report({
                        node: asAttr.value,
                        message: 'Nonexistent html tag',
                    });
                }
            },
        };

WrappedComponent.styledComponentId = 'id';

        return WrappedComponent;
    };

    const result = create();

    result.attrs = attrs => create({attrs});
    result.create = create;

    return result;
};

const styled = Base => createStyled(Base);

tags.forEach(tag => {
    styled[tag] = createStyled(tag);
});

export * from 'theming';
export {createGlobalStyle} from '@reshadow/styled/global';

export function isStyledComponent(target) {
    return target && typeof target.styledComponentId === 'string';
}

export {css, keyframes, ThemeConsumer};

export default styled;

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