fix(between): remove incorrect validation for the minimum value (#1475)

* fix(between): remove incorrect validation for the minimum value * chore(size-limit) increase core size limit
mg901 · Apr 27, 2023 · 66418e0 · 66418e0
1 parent 4a16bbf
commit 66418e0
Show file tree

Hide file tree

Showing 3 changed files with 100 additions and 29 deletions.
diff --git a/core/breakpoints.js b/core/breakpoints.js
@@ -32,11 +32,17 @@ exports.createBreakpoints = ({ breakpoints, errorPrefix } = {}) => {
 
   const between = (min, max) => {
     validation.throwIsInvalidName(min);
-    validation.throwIsInvalidName(min);
+    validation.throwIsInvalidName(max);
+
+    const calcMax = () => {
+      validation.throwIsMaxValueLessThanMin(min, max);
+
+      return calcMaxWidth(breakpoints[max]);
+    };
 
     return {
       min: up(min),
-      max: calcMaxWidth(getValueByName(max)),
+      max: calcMax(),
     };
   };
 
@@ -99,14 +105,23 @@ function makeBreakpointsValidation(state) {
 
   const throwIsValueIsZero = (name) => {
     const value = state.breakpoints[name];
-    const isNotZero = parseFloat(value) !== 0;
+    const isNotZero = removeUnits(value) !== 0;
 
     state.invariant(
       isNotZero,
       `\`${name}: ${value}\` cannot be assigned as minimum breakpoint.`
     );
   };
 
+  const throwIsMaxValueLessThanMin = (min, max) => {
+    const { breakpoints, invariant } = state;
+
+    invariant(
+      removeUnits(breakpoints[max]) - removeUnits(breakpoints[min]) > 0,
+      'The `max` value cannot be less than the `min`.'
+    );
+  };
+
   const throwIsLastBreakpoint = (name) => {
     const isNotLast = name !== names.at(-1);
     const validName = names.at(-2);
@@ -121,6 +136,7 @@ function makeBreakpointsValidation(state) {
     throwIfInvalidBreakpoints,
     throwIsInvalidName,
     throwIsValueIsZero,
+    throwIsMaxValueLessThanMin,
     throwIsLastBreakpoint,
   };
 }
@@ -132,7 +148,11 @@ function makeBreakpointsValidation(state) {
 // Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.
 // See https://bugs.webkit.org/show_bug.cgi?id=178261
 function calcMaxWidth(value) {
-  return `${parseFloat(value) - 0.02}px`;
+  return `${removeUnits(value) - 0.02}px`;
+}
+
+function removeUnits(value) {
+  return parseInt(value, 10);
 }
 
 exports.calcMaxWidth = calcMaxWidth;
diff --git a/core/breakpoints.spec.js b/core/breakpoints.spec.js
@@ -95,40 +95,91 @@ describe('core/create-breakpoints', () => {
     });
   });
 
-  describe('between', () => {
-    it('should throw exception if the breakpoint name is not found', () => {
+  describe('between method', () => {
+    it('should throw an error for invalid breakpoint names', () => {
       expect(() =>
-        breakpointsApi.between(INVALID_BREAKPOINT_NAME, 'md')
-      ).toThrow(
+        breakpointsApi.between(INVALID_BREAKPOINT_NAME, 'sm')
+      ).toThrowError(
         `${ERROR_PREFIX}breakpoint \`${INVALID_BREAKPOINT_NAME}\` not found in xs, sm, md, lg, xl, xxl.`
       );
-    });
 
-    it('should throw exception if the breakpoint value is zero ', () => {
-      try {
-        breakpointsApi.between('xs', 'sm');
-      } catch (error) {
-        expect(error.message).toEqual(
-          `${ERROR_PREFIX}\`xs: 0px\` cannot be assigned as minimum breakpoint.`
-        );
-      }
+      expect(() =>
+        breakpointsApi.between('sm', INVALID_BREAKPOINT_NAME)
+      ).toThrowError(
+        `${ERROR_PREFIX}breakpoint \`${INVALID_BREAKPOINT_NAME}\` not found in xs, sm, md, lg, xl, xxl.`
+      );
     });
 
-    it('return an object with the minimum and maximum screen width', () => {
+    it('should calculate the correct breakpoint range', () => {
+      // xs
+      expect(breakpointsApi.between('xs', 'sm')).toEqual({
+        min: DEFAULT_BREAKPOINTS.xs,
+        max: calcMaxWidth(DEFAULT_BREAKPOINTS.sm),
+      });
+
+      expect(breakpointsApi.between('xs', 'md')).toEqual({
+        min: DEFAULT_BREAKPOINTS.xs,
+        max: calcMaxWidth(DEFAULT_BREAKPOINTS.md),
+      });
+
+      expect(breakpointsApi.between('xs', 'lg')).toEqual({
+        min: DEFAULT_BREAKPOINTS.xs,
+        max: calcMaxWidth(DEFAULT_BREAKPOINTS.lg),
+      });
+
+      expect(breakpointsApi.between('xs', 'xl')).toEqual({
+        min: DEFAULT_BREAKPOINTS.xs,
+        max: calcMaxWidth(DEFAULT_BREAKPOINTS.xl),
+      });
+
+      expect(breakpointsApi.between('xs', 'xxl')).toEqual({
+        min: DEFAULT_BREAKPOINTS.xs,
+        max: calcMaxWidth(DEFAULT_BREAKPOINTS.xxl),
+      });
+
+      // sm
+      expect(breakpointsApi.between('sm', 'md')).toEqual({
+        min: DEFAULT_BREAKPOINTS.sm,
+        max: calcMaxWidth(DEFAULT_BREAKPOINTS.md),
+      });
+
+      expect(breakpointsApi.between('sm', 'lg')).toEqual({
+        min: DEFAULT_BREAKPOINTS.sm,
+        max: calcMaxWidth(DEFAULT_BREAKPOINTS.lg),
+      });
+
+      expect(breakpointsApi.between('sm', 'xl')).toEqual({
+        min: DEFAULT_BREAKPOINTS.sm,
+        max: calcMaxWidth(DEFAULT_BREAKPOINTS.xl),
+      });
+
+      // md
+      expect(breakpointsApi.between('md', 'lg')).toEqual({
+        min: DEFAULT_BREAKPOINTS.md,
+        max: calcMaxWidth(DEFAULT_BREAKPOINTS.lg),
+      });
+
       expect(breakpointsApi.between('md', 'xl')).toEqual({
-        max: '1199.98px',
-        min: '768px',
+        min: DEFAULT_BREAKPOINTS.md,
+        max: calcMaxWidth(DEFAULT_BREAKPOINTS.xl),
+      });
+
+      expect(breakpointsApi.between('md', 'xxl')).toEqual({
+        min: DEFAULT_BREAKPOINTS.md,
+        max: calcMaxWidth(DEFAULT_BREAKPOINTS.xxl),
+      });
+
+      // xl
+      expect(breakpointsApi.between('xl', 'xxl')).toEqual({
+        min: DEFAULT_BREAKPOINTS.xl,
+        max: calcMaxWidth(DEFAULT_BREAKPOINTS.xxl),
       });
     });
 
-    it('should throw exception if the last breakpoint is specified as the maximum value', () => {
-      try {
-        breakpointsApi.between('xl', 'xxl');
-      } catch (error) {
-        expect(error.message).toEqual(
-          `${ERROR_PREFIX}\`xxl\` doesn't have a maximum width. Use \`xl\`. See https://github.com/mg901/styled-breakpoints/issues/4 .`
-        );
-      }
+    it('should throw an error when the last breakpoint is equal 0', () => {
+      expect(() => breakpointsApi.between('xl', 'xs')).toThrow(
+        `${ERROR_PREFIX}The \`max\` value cannot be less than the \`min\`.`
+      );
     });
   });
 

diff --git a/package.json b/package.json
@@ -54,7 +54,7 @@
       "name": "core",
       "path": "./core",
       "import": "{ createBreakpoints }",
-      "limit": "936 B"
+      "limit": "996 B"
     },
     {
       "name": "core + styled-breakpoints",