styled-breakpoints/styled-breakpoints/with-orientation/index.prod.js

Simple and powerful css breakpoints for styled-components and emotion

// @ts-check

/**
 * @typedef {Object} Options
 * @property {string} mediaQuery - The media query string (e.g., '@media screen').
 * @property {string} orientation - The orientation type (e.g., 'portrait' or 'landscape').
 * @property {(condition: boolean, message?: string) => void} [invariant] - An invariant function.
 */

/**
 * Creates a media query string that includes orientation criteria.
 *
 * @param {Options} options - Options for generating the media query.
 * @returns - The media query string with orientation criteria.
 */
exports.withOrientation = ({ mediaQuery, orientation }) =>
  `${mediaQuery} and (orientation: ${orientation})`;