fix: media query ts ignore

src/components/Footer/styles.ts

@@ -20,7 +20,6 @@ export const Inner = styled('div')`
     justify-content: flex-end;
     width: 100%;
     ${() => {
-      // @ts-ignore
       return mq.medium(css`
         min-width: 400px;
         max-width: 800px;
@@ -29,7 +28,6 @@ export const Inner = styled('div')`
       `);
     }};
     ${() => {
-      // @ts-ignore
       return mq.large(css`
         max-width: 1240px;
       `);
@@ -42,7 +40,6 @@ export const Left = styled('div')`
     align-items: center;
     display: none;
     ${() => {
-      // @ts-ignore
       return mq.medium(css`
         display: flex;
       `);

src/components/Header/styles.ts

@@ -76,9 +76,8 @@ export const NavBar = styled(AppBar)`
     min-height: 60px;
     display: flex;
     justify-content: center;
-    ${() => {
-      // @ts-ignore
-      return mq.medium(css`
+    ${() =>
+      mq.medium(css`
         ${SearchWrapper} {
           display: flex;
         }
@@ -88,26 +87,21 @@ export const NavBar = styled(AppBar)`
         ${MobileNavBar} {
           display: none;
         }
-      `);
-    }};
-    ${() => {
-      // @ts-ignore
-      return mq.large(css`
+      `)};
+    ${() =>
+      mq.large(css`
         ${InnerNavBar} {
           padding: 0 20px;
         }
-      `);
-    }};
-    ${() => {
-      // @ts-ignore
-      return mq.xlarge(css`
+      `)};
+    ${() =>
+      mq.xlarge(css`
         ${InnerNavBar} {
           max-width: 1240px;
           width: 100%;
           margin: 0 auto;
         }
-      `);
-    }};
+      `)};
   }
 `;
 

src/utils/styles/media.ts

@@ -8,16 +8,26 @@ export const breakpoints = {
   xlarge: 1275,
 };
 
-const mq = Object.keys(breakpoints).reduce((accumulator, label) => {
-  const prefix = typeof breakpoints[label] === 'string' ? '' : 'min-width:';
-  const suffix = typeof breakpoints[label] === 'string' ? '' : 'px';
-  accumulator[label] = cls =>
-    css`
-      @media (${prefix + breakpoints[label] + suffix}) {
-        ${cls};
-      }
-    `;
-  return accumulator;
-}, {});
+type Sizes = keyof typeof breakpoints;
+
+type MediaQuery = {
+  [key in Sizes]: (cls: any) => string;
+};
+
+const mq: MediaQuery = Object.keys(breakpoints).reduce(
+  (accumulator, label) => {
+    const prefix = typeof breakpoints[label] === 'string' ? '' : 'min-width:';
+    const suffix = typeof breakpoints[label] === 'string' ? '' : 'px';
+    accumulator[label] = cls =>
+      css`
+        @media (${prefix + breakpoints[label] + suffix}) {
+          ${cls};
+        }
+      `;
+    return accumulator;
+  },
+  // eslint-disable-next-line @typescript-eslint/no-object-literal-type-assertion
+  {} as MediaQuery
+);
 
 export default mq;