@crossed/styled/lib/module/plugins/MediaQueries.js

A universal & performant styling library for React Native, Next.js & React

import { convertKeyToCss, normalizeUnitPixel } from "./utils";
let cacheBreakpoints = {};
let Dimensions;
let Platform;
const MediaQueriesPlugin = (breakpoints) => {
  cacheBreakpoints = breakpoints;
  return {
    name: "MediaQueriesPlugin",
    test: ["media"],
    apply: function MediaQueriesApply({ styles, addClassname, props, isWeb }) {
      if (props && !Dimensions && !Platform) {
        Dimensions = require("react-native").Dimensions;
        Platform = require("react-native").Platform;
      }
      Object.entries(styles).forEach(
        ([key, values]) => {
          const breakpointsValue = normalizeUnitPixel(
            "width",
            breakpoints[key],
            isWeb
          );
          if (values) {
            Object.entries(values).forEach(([keyProperty, valueProperty]) => {
              if (Platform && Dimensions && Platform.OS !== "web") {
                if (breakpoints[key] < Dimensions.get("window").width) {
                  addClassname({
                    body: {
                      [``]: {
                        [keyProperty]: valueProperty
                      }
                    }
                  });
                }
              } else {
                const valueNormalized = normalizeUnitPixel(
                  keyProperty,
                  valueProperty,
                  isWeb
                );
                const body = {
                  [`${key}:${convertKeyToCss(keyProperty)}-[${typeof valueNormalized === "number" ? valueNormalized : valueNormalized == null ? void 0 : valueNormalized.replace(/ /g, "-")}]`]: {
                    [keyProperty]: valueNormalized
                  }
                };
                addClassname({
                  wrapper: (str) => `@media (min-width: ${breakpointsValue}) { ${str} }`,
                  body
                });
                if (props && typeof window !== "undefined" && Dimensions) {
                  if (breakpoints[key] < Dimensions.get("window").width) {
                    addClassname({ body });
                  }
                }
              }
            });
          }
        }
      );
    }
  };
};
export {
  MediaQueriesPlugin,
  cacheBreakpoints
};
//# sourceMappingURL=MediaQueries.js.map