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

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

var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
var MediaQueries_exports = {};
__export(MediaQueries_exports, {
  MediaQueriesPlugin: () => MediaQueriesPlugin,
  cacheBreakpoints: () => cacheBreakpoints
});
module.exports = __toCommonJS(MediaQueries_exports);
var import_utils = require("./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 = (0, import_utils.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 = (0, import_utils.normalizeUnitPixel)(
                  keyProperty,
                  valueProperty,
                  isWeb
                );
                const body = {
                  [`${key}:${(0, import_utils.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 });
                  }
                }
              }
            });
          }
        }
      );
    }
  };
};
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
  MediaQueriesPlugin,
  cacheBreakpoints
});
//# sourceMappingURL=MediaQueries.js.map