TypeScriptでstyled-components内のmediaQueryを管理する。

背景

styled-componentsを利用することが多いのですが、プロジェクト全体でMediaQueryの指定がバラバラだったり、max-widthとmin-widthが混合していてキモチ悪かった😥のでヘルパーを用意することでmediaQueryを管理しました。

コード

TypeScriptで書きました！！！よかったら参考にしてください。

mediaHelper.ts

type ScreenType = "desktop" | "tablet" | "phone";

const sizes: { [key in ScreenType]: number } = {
  desktop: 1024,
  tablet: 768,
  phone: 560,
};

export const media = (Object.keys(sizes) as Array<keyof typeof sizes>).reduce(
  (acc, key) => {
    acc[key] = (style: String) => {
      return `@media (max-width: ${sizes[key]}px) { ${style} }`;
    };
    return acc;
  },
  {} as { [key in ScreenType]: Function }
);