Function media

src/internal/utilities.ts:75–93

(mediaQuery: MediaQuery, ...objects: (NestedCSSProperties | undefined | null | false)[])

 * ```
 */
export const media = (mediaQuery: MediaQuery, ...objects: (NestedCSSProperties | undefined | null | false)[]): NestedCSSProperties => {
  const mediaQuerySections: string[] = [];
  if (mediaQuery.type) mediaQuerySections.push(mediaQuery.type);
  if (mediaQuery.orientation) mediaQuerySections.push(`(orientation: ${mediaQuery.orientation})`);
  if (mediaQuery.minWidth) mediaQuerySections.push(`(min-width: ${mediaLength(mediaQuery.minWidth)})`);
  if (mediaQuery.maxWidth) mediaQuerySections.push(`(max-width: ${mediaLength(mediaQuery.maxWidth)})`);
  if (mediaQuery.minHeight) mediaQuerySections.push(`(min-height: ${mediaLength(mediaQuery.minHeight)})`);
  if (mediaQuery.maxHeight) mediaQuerySections.push(`(max-height: ${mediaLength(mediaQuery.maxHeight)})`);
  if (mediaQuery.prefersColorScheme) mediaQuerySections.push(`(prefers-color-scheme: ${mediaQuery.prefersColorScheme})`);

  const stringMediaQuery = `@media ${mediaQuerySections.join(' and ')}`;

  const object: NestedCSSProperties = {
    $nest: {
      [stringMediaQuery]: extend(...objects)
    }
  };
  return object;
}

const mediaLength = (value: number | string) =>
  typeof value === 'string' ? value : `${value}px`;