@re-flex/ui/BaseLine/index.js

Re-Flex ui library

import { useTheme } from "@re-flex/styles";
import { camelToKebabCase, fastMemoize, isObject } from "@re-flex/utils";
import React, { Fragment } from "react";
import useIsomorphicEffect from "../hooks/useIsomorphicEffect";
import AppBaseLineInitialStyle from "./App.styled";
import resetCss from "./reset";
const Object2CSS = fastMemoize((json) => {
    const selectors = Object.keys(json);
    return selectors
        .map((selector) => {
        const definition = json[selector];
        const rules = Object.keys(definition);
        const result = rules
            .map((rule) => {
            let ruleKebab = camelToKebabCase(rule, "");
            if (isObject(definition[rule])) {
                return Object2CSS(definition[rule]);
            }
            else {
                return `${ruleKebab}:${definition[rule]}`;
            }
        })
            .join(";");
        return `${selector}{${result}}`;
    })
        .join("");
});
const BaseLine = ({ children }) => {
    const theme = useTheme();
    useIsomorphicEffect(() => {
        const setupDefinitions = setTimeout(() => {
            const ReflexRootStyles = {
                ...AppBaseLineInitialStyle(theme),
                ...resetCss,
            };
            requestAnimationFrame(() => {
                let reflexStyle = document.querySelector("style.__reflex_style");
                if (!!reflexStyle) {
                    reflexStyle.innerHTML = Object2CSS(ReflexRootStyles);
                }
                else {
                    reflexStyle = document.createElement("style");
                    reflexStyle.className = "__reflex_style";
                    reflexStyle.innerHTML = Object2CSS(ReflexRootStyles);
                    document.head.prepend(reflexStyle);
                }
            });
        }, 3);
        return () => clearTimeout(setupDefinitions);
    }, [theme.palette.type]);
    return React.createElement(Fragment, null, children);
};
export default BaseLine;