norma-library 0.5.818 → 0.6.0

package/src/utils/styledBreakpoints.ts

@@ -0,0 +1,25 @@
+import { css } from 'styled-components';
+
+type Breakpoint = {
+  cssProp: string;
+  cssPropUnits: string;
+  values: { [key: number]: number }[];
+  mediaQueryType: 'max-width' | 'min-width' | 'max-height' | 'min-height';
+};
+
+export const breakpoints = (breakpoints: Breakpoint) => {
+  const { cssProp, cssPropUnits, values, mediaQueryType } = breakpoints;
+  
+  const breakpointProps = values.reduce((mediaQueries, value) => {
+    const [screenBreakpoint, cssPropBreakpoint] = [Object.keys(value)[0], Object.values(value)[0]];
+    return (mediaQueries += `
+    @media screen and (${mediaQueryType}: ${screenBreakpoint}px) {
+      ${cssProp}: ${cssPropBreakpoint}${cssPropUnits};
+    }
+    `);
+  }, '');
+
+  return css`
+    ${breakpointProps}
+  `;
+};