Improve TypeScript support for media templates

Typing media templates can be cumbersome. I’ve spent a fair amount of time to figure out the following type declarations and casts compliant with TypeScript’s strict mode:

import { ThemedCssFunction } from 'styled-components';
import { css } from './styled-components';
import ThemeInterface from './theme';

const sizes = {
  small: 600,
  medium: 1024,
  large: 1440,
  xlarge: 1920,
};

// Iterate through the sizes and create a media template
export const media = (Object.keys(sizes) as (keyof typeof sizes)[]).reduce(
  (acc, label) => {
    acc[label] = (first: any, ...interpolations: any[]) => css`
      @media (min-width: ${sizes[label]}px) {
        ${css(first, ...interpolations)}
      }
    `;

    return acc;
  },
  {} as { [key in keyof typeof sizes]: ThemedCssFunction<ThemeInterface> },
);

One of the possible solutions is writing docs including the aforementioned code snippet. An other way to get around the issue and lower the amount of boilerplate code required even for vanilla JS projects is to create a method which encapsulates the functionality above:

import { mediaTemplates } from 'styled-components';

const media = mediaTemplates({
  small: 600,
  medium: 1024,
  large: 1440,
  xlarge: 1920,
});

[kachkaev]

Many thanks for your suggestion @fabb! I refactored my media templates as you suggest and all typescript issues were gone, plus I got better autoformatting by Prettier in a couple of places 🎉

Wondering if docs could be changed to this:

const customMediaQuery = (maxWidth: number) =>
  `@media (max-width: ${maxWidth}px)`;

const media = {
  custom: customMediaQuery,
  desktop: customMediaQuery(922),
  tablet: customMediaQuery(768),
  phone: customMediaQuery(576)
};

const Content = styled.div`
  height: 3em;
  width: 3em;
  background: papayawhip;

  /* Now we have our methods on media and can use them instead of raw queries */
  ${media.desktop} {
    background: dodgerblue;
  }
  ${media.tablet} {
    background: mediumseagreen;
  }
  ${media.phone} {
    background: palevioletred;
  }
`;

render(<Content />);

• Looks much simpler and easier to read
• 100% understood by Prettier
• Perfectly works in TS with no added magic
• Is probably a bit faster because additional calls to css`...` are removed 🎉

@probablyup do you think this would make sense? I can submit a PR if that’s potentially interesting.

[fabb]

Imho writing media templates as template functions is not a good idea, because linting, syntax highlighting and auto completion won‘t work with its content css.

It is way eqsier and imho better to just create strings with the @media definitions:

const phone = „@media (max-width: 480px)“

const MyComponent = styled.div`
    background: palevioletred;
    ${phone} {
        background: dodgerblue;
    }
`

The media definitions could also read from the theme, this would work similarly.