feat(src): add custom msg for error

__tests__/helpers.spec.js

@@ -9,7 +9,21 @@ import { DEFAULT_BREAKS_MAP } from '../src/constants';
 describe('helpers', () => {
   describe('errorReporter', () => {
     it('return object Error with error message', () => {
-      expect(errorReporter).toThrow();
+      try {
+        errorReporter()('error message');
+        expect(true).toBe(false);
+      } catch (e) {
+        expect(e.message).toBe(`[styled-breakpoints]: error message`);
+      }
+    });
+
+    it('return object Error with custom error message', () => {
+      try {
+        errorReporter('custom')('error message');
+        expect(true).toBe(false);
+      } catch (e) {
+        expect(e.message).toBe(`[custom]: error message`);
+      }
     });
   });
 

src/calculators.js

@@ -3,20 +3,29 @@ import { errorReporter, pxToEm, setDefaultTheme } from './helpers';
 import { eitherGetBreakVal, eitherGetNextBreakVal } from './media-queries';
 import type { OptionalBreakpoints } from './models';
 
-type CalcMinWidthInPx = (string, OptionalBreakpoints) => string;
-export const calcMinWidthInPx: CalcMinWidthInPx = (breakName, theme) => {
+type CalcMinWidthInPx = (string, OptionalBreakpoints, ?string) => string;
+export const calcMinWidthInPx: CalcMinWidthInPx = (
+  breakName,
+  theme,
+  errorPrefix,
+) => {
   const newTheme = setDefaultTheme(theme);
   return eitherGetBreakVal(newTheme.breakpoints, breakName).fold(
-    errorReporter,
+    errorReporter(errorPrefix),
     pxToEm,
   );
 };
 
-type CalcMaxWidthInPx = (string, OptionalBreakpoints) => string;
-export const calcMaxWidthInPx: CalcMaxWidthInPx = (breakName, theme) => {
+type CalcMaxWidthInPx = (string, OptionalBreakpoints, ?string) => string;
+export const calcMaxWidthInPx: CalcMaxWidthInPx = (
+  breakName,
+  theme,
+  errorPrefix,
+) => {
   const newTheme = setDefaultTheme(theme);
-  return eitherGetNextBreakVal(newTheme.breakpoints, breakName).fold(
-    errorReporter,
-    pxToEm,
-  );
+  return eitherGetNextBreakVal(
+    newTheme.breakpoints,
+    breakName,
+    errorPrefix,
+  ).fold(errorReporter(errorPrefix), pxToEm);
 };

src/constants.js

@@ -2,6 +2,8 @@
 
 import type { BreakpointsMap } from './models';
 
+export const DEFAULR_PREFIX_FOR_ERROR_MSG = 'styled-breakpoints';
+
 export const DEFAULT_BREAKS_MAP: BreakpointsMap = {
   tablet: '768px',
   desktop: '992px',

src/helpers.js

@@ -1,14 +1,16 @@
 // @flow
 
-import { DEFAULT_BREAKS } from './constants';
+import { DEFAULT_BREAKS, DEFAULR_PREFIX_FOR_ERROR_MSG } from './constants';
 import type {
   BreakpointsMap,
   OptionalBreakpoints,
   ExactBreakpoints,
 } from './models';
 
-export const errorReporter = (message: string) => {
-  throw new Error(`Styled breakpoints >>> ${message}`);
+export const errorReporter = (
+  prefix: ?string = DEFAULR_PREFIX_FOR_ERROR_MSG,
+) => (message: string) => {
+  throw new Error(`[${String(prefix)}]: ${message}`);
 };
 
 export const pxToEm = (inPx: string) => `${parseFloat(inPx) / 16}em`;

src/index.js

@@ -6,22 +6,50 @@ import type { ThemeWithOptionalBreakpoints } from './models';
 
 type Up = (string) => (ThemeWithOptionalBreakpoints) => ?string;
 export const up: Up = (breakName) => (breaks) =>
-  withMinMedia(calcMinWidthInPx(breakName, breaks.theme));
+  withMinMedia(
+    calcMinWidthInPx(
+      breakName,
+      breaks.theme,
+      breaks.theme.ERROR_PREFIX_FOR_STYLED_BREAKPOINTS,
+    ),
+  );
 
 type Down = (string) => (ThemeWithOptionalBreakpoints) => ?string;
 export const down: Down = (breakName) => (breaks) =>
-  withMaxMedia(calcMaxWidthInPx(breakName, breaks.theme));
+  withMaxMedia(
+    calcMaxWidthInPx(
+      breakName,
+      breaks.theme,
+      breaks.theme.ERROR_PREFIX_FOR_STYLED_BREAKPOINTS,
+    ),
+  );
 
 type Between = (string, string) => (ThemeWithOptionalBreakpoints) => ?string;
 export const between: Between = (minBreak, maxBreak) => (breaks) =>
   withMinAndMaxMedia(
-    calcMinWidthInPx(minBreak, breaks.theme),
-    calcMaxWidthInPx(maxBreak, breaks.theme),
+    calcMinWidthInPx(
+      minBreak,
+      breaks.theme,
+      breaks.theme.ERROR_PREFIX_FOR_STYLED_BREAKPOINTS,
+    ),
+    calcMaxWidthInPx(
+      maxBreak,
+      breaks.theme,
+      breaks.theme.ERROR_PREFIX_FOR_STYLED_BREAKPOINTS,
+    ),
   );
 
 type Only = (string) => (ThemeWithOptionalBreakpoints) => ?string;
 export const only: Only = (breakName) => (breaks) =>
   withMinAndMaxMedia(
-    calcMinWidthInPx(breakName, breaks.theme),
-    calcMaxWidthInPx(breakName, breaks.theme),
+    calcMinWidthInPx(
+      breakName,
+      breaks.theme,
+      breaks.theme.ERROR_PREFIX_FOR_STYLED_BREAKPOINTS,
+    ),
+    calcMaxWidthInPx(
+      breakName,
+      breaks.theme,
+      breaks.theme.ERROR_PREFIX_FOR_STYLED_BREAKPOINTS,
+    ),
   );

src/media-queries.js

@@ -42,9 +42,10 @@ export const eitherGetNextBreakName = (
 export const eitherGetNextBreakVal = (
   breaks: BreakpointsMap,
   breakName: string,
+  errorPrefix: ?string,
 ) => {
   const breakpointName = eitherGetNextBreakName(breaks, breakName).fold(
-    errorReporter,
+    errorReporter(errorPrefix),
     (x) => x,
   );
 

src/models.js

@@ -7,13 +7,10 @@ export type ExactBreakpoints = {
 };
 
 export type OptionalBreakpoints = {
+  ERROR_PREFIX_FOR_STYLED_BREAKPOINTS?: string,
   breakpoints?: BreakpointsMap,
 };
 
-export type ThemeWithExactBreakpoints = {
-  theme: ExactBreakpoints,
-};
-
 export type ThemeWithOptionalBreakpoints = {
   theme: OptionalBreakpoints,
 };