Cacher is the code snippet organizer for pro developers

import { css } from 'styled-components';
import { media, highDPI } from './media';

import mobileSpriteImg from '../../assets/generated/museum-mobile-sprite.png';
import mobileSpriteRetinaImg from '../../assets/generated/museum-mobile-sprite-2x.png';
import mobileSpriteManifest from '../../assets/generated/museum-mobile-sprites.json';

import tabletSpriteImg from '../../assets/generated/museum-tablet-sprite.png';
import tabletSpriteRetinaImg from '../../assets/generated/museum-tablet-sprite-2x.png';
import tabletSpriteManifest from '../../assets/generated/museum-tablet-sprites.json';

import desktopSpriteImg from '../../assets/generated/museum-desktop-sprite.png';
import desktopSpriteRetinaImg from '../../assets/generated/museum-desktop-sprite-2x.png';
import desktopSpriteManifest from '../../assets/generated/museum-desktop-sprites.json';

const buildSprite = (manifest, spriteImg, spriteRetinaImg) => (imageName) => {
  if (process.env.NODE_ENV === 'development') {
    if (!manifest[imageName]) {
      throw new Error(`No image named "${imageName}" available in sprite!`);
    }
  }

  const data = manifest[imageName] || { normal: {}, retina: {} };


  return css`
    background-image: url(${spriteImg});
    background-position: -${data.normal.x}px -${data.normal.y}px;
    width: ${data.normal.width}px;
    height: ${data.normal.height}px;
    
    ${highDPI`
      background-image: url(${spriteRetinaImg});
      background-position: -${data.retina.x / 2}px -${data.retina.y / 2}px;
      background-size: ${data.retina.total_width / 2}px ${data.retina.total_height / 2}px;
    `}
  `;
};

const mobileSprite = buildSprite(mobileSpriteManifest, mobileSpriteImg, mobileSpriteRetinaImg);
const tabletSprite = buildSprite(tabletSpriteManifest, tabletSpriteImg, tabletSpriteRetinaImg);
const desktopSprite = buildSprite(desktopSpriteManifest, desktopSpriteImg, desktopSpriteRetinaImg);

export const mobile = mobileSprite;

export const tablet = (name) => media.tablet`
  ${tabletSprite(name)}
`;

export const desktop = (name) => media.tabletLandscape`
  ${desktopSprite(name)}
`;

import { css } from 'styled-components';
const sizes = {
  desktopFull: 1920,
  desktopWide: 1440,
  desktop: 1280,
  tabletLandscape: 1024,
  tablet: 768,
  mobile: 320,
};

const getWindowWidth = () => window.innerWidth;

export const media = Object.keys(sizes).reduce((accumulator, label) => {
  accumulator[label] = (...args) => css`
    @media (min-width: ${sizes[label]}px) {
      ${css(...args)}
    }
  `;
  return accumulator;
}, {});

export const highDPI = (...args) => css`
  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    ${css(...args)}
  }
`;

export const isMobile = () => {
  const width = getWindowWidth();
  return width < sizes.tablet;
};

export const isTablet = () => {
  const width = getWindowWidth();
  return width >= sizes.tablet && width < sizes.tabletLandscape;
};

export const isTabletLandscape = () => {
  const width = getWindowWidth();
  return width >= sizes.tabletLandscape && width < sizes.desktop;
};

export const isDesktop = () => {
  const width = getWindowWidth();
  return width >= sizes.desktop;
};