From 66418e063959aff32730bd8a844eb6d3daec518c Mon Sep 17 00:00:00 2001 From: Maxim Date: Thu, 27 Apr 2023 19:35:44 +0400 Subject: [PATCH] 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 --- core/breakpoints.js | 28 ++++++++++-- core/breakpoints.spec.js | 99 ++++++++++++++++++++++++++++++---------- package.json | 2 +- 3 files changed, 100 insertions(+), 29 deletions(-) diff --git a/core/breakpoints.js b/core/breakpoints.js index 42166edf..419ea53c 100644 --- 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,7 +105,7 @@ function makeBreakpointsValidation(state) { const throwIsValueIsZero = (name) => { const value = state.breakpoints[name]; - const isNotZero = parseFloat(value) !== 0; + const isNotZero = removeUnits(value) !== 0; state.invariant( isNotZero, @@ -107,6 +113,15 @@ function makeBreakpointsValidation(state) { ); }; + 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 index 3adb59e6..ae6e1531 100644 --- 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 index 1c12d7fe..9c1ef967 100644 --- 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",