react-native-unistyles 1.0.0-beta.6 → 1.0.0-rc.1

package/lib/module/createUnistyles.js

@@ -7,15 +7,6 @@ export const createUnistyles = breakpoints => {
   const sortedBreakpoints = sortAndValidateBreakpoints(breakpoints);
   const sortedBreakpointEntries = Object.entries(sortedBreakpoints);
   return {
-    /**
-     * @deprecated The method should not be used, proposed version by the community is createStyleSheet, will be removed in RC
-     */
-    createStyles: styles => {
-      if (typeof styles === 'function') {
-        return styles;
-      }
-      return styles;
-    },
     createStyleSheet: styles => {
       if (typeof styles === 'function') {
         return styles;

package/lib/module/createUnistyles.js.map

@@ -1 +1 @@
-{"version":3,"names":["useContext","StyleSheet","UnistylesContext","useDimensions","getBreakpointFromScreenWidth","proxifyFunction","parseStyle","sortAndValidateBreakpoints","createUnistyles","breakpoints","sortedBreakpoints","sortedBreakpointEntries","Object","entries","createStyles","styles","createStyleSheet","useStyles","stylesheet","theme","screenSize","parsedStyles","breakpoint","width","dynamicStyleSheet","reduce","acc","_ref","key","value","style","create"],"sourceRoot":"../../src","sources":["createUnistyles.ts"],"mappings":"AAAA,SAASA,UAAU,QAAQ,OAAO;AAClC,SAASC,UAAU,QAAQ,cAAc;AASzC,SAASC,gBAAgB,QAAQ,kBAAkB;AACnD,SAASC,aAAa,QAAQ,SAAS;AACvC,SAASC,4BAA4B,EAAEC,eAAe,EAAEC,UAAU,EAAEC,0BAA0B,QAAQ,SAAS;AAE/G,OAAO,MAAMC,eAAe,GAAmCC,WAAc,IAAK;EAC9E,MAAMC,iBAAiB,GAAGH,0BAA0B,CAACE,WAAW,CAAC;EACjE,MAAME,uBAAuB,GAAGC,MAAM,CACjCC,OAAO,CAACH,iBAAiB,CAA+B;EAE7D,OAAO;IACH;AACR;AACA;IACQI,YAAY,EAAyCC,MAAqF,IAAY;MAClJ,IAAI,OAAOA,MAAM,KAAK,UAAU,EAAE;QAC9B,OAAOA,MAAM;MACjB;MAEA,OAAOA,MAAM;IACjB,CAAC;IACDC,gBAAgB,EAAyCD,MAAqF,IAAY;MACtJ,IAAI,OAAOA,MAAM,KAAK,UAAU,EAAE;QAC9B,OAAOA,MAAM;MACjB;MAEA,OAAOA,MAAM;IACjB,CAAC;IACDE,SAAS,EAAwCC,UAA4C,IAAK;MAC9F,MAAMC,KAAK,GAAGnB,UAAU,CAACE,gBAAgB,CAAM;MAC/C,MAAMkB,UAAU,GAAGjB,aAAa,CAAC,CAAC;MAElC,IAAI,CAACe,UAAU,EAAE;QACb,OAAO;UACHC,KAAK;UACLJ,MAAM,EAAE,CAAC;QACb,CAAC;MACL;MAEA,MAAMM,YAAY,GAAG,OAAOH,UAAU,KAAK,UAAU,GAC/CA,UAAU,CAACC,KAAK,CAAC,GACjBD,UAAU;MAChB,MAAMI,UAAU,GAAGlB,4BAA4B,CAAIgB,UAAU,CAACG,KAAK,EAAEZ,uBAAuB,CAAC;MAE7F,MAAMa,iBAAiB,GAAGZ,MAAM,CAC3BC,OAAO,CAACQ,YAAY,CAAC,CACrBI,MAAM,CAAC,CAACC,GAAG,EAAAC,IAAA,KAAmB;QAAA,IAAjB,CAACC,GAAG,EAAEC,KAAK,CAAC,GAAAF,IAAA;QACtB,MAAMG,KAAK,GAAGD,KAAiC;QAE/C,IAAI,OAAOA,KAAK,KAAK,UAAU,EAAE;UAC7B,OAAO;YACH,GAAGH,GAAG;YACN,CAACE,GAAG,GAAGvB,eAAe,CAAIwB,KAAK,EAAEP,UAAU,EAAEF,UAAU,EAAET,uBAAuB;UACpF,CAAC;QACL;QAEA,OAAOV,UAAU,CAAC8B,MAAM,CAAC;UACrB,GAAGL,GAAG;UACN,CAACE,GAAG,GAAGtB,UAAU,CAAQwB,KAAK,EAAER,UAAU,EAAEF,UAAU,EAAET,uBAAuB;QACnF,CAAC,CAAC;MACN,CAAC,EAAE,CAAC,CAAO,CAAC;MAEhB,OAAO;QACHQ,KAAK;QACLJ,MAAM,EAAES;MACZ,CAAC;IACL;EACJ,CAAC;AACL,CAAC"}
+{"version":3,"names":["useContext","StyleSheet","UnistylesContext","useDimensions","getBreakpointFromScreenWidth","proxifyFunction","parseStyle","sortAndValidateBreakpoints","createUnistyles","breakpoints","sortedBreakpoints","sortedBreakpointEntries","Object","entries","createStyleSheet","styles","useStyles","stylesheet","theme","screenSize","parsedStyles","breakpoint","width","dynamicStyleSheet","reduce","acc","_ref","key","value","style","create"],"sourceRoot":"../../src","sources":["createUnistyles.ts"],"mappings":"AAAA,SAASA,UAAU,QAAQ,OAAO;AAClC,SAASC,UAAU,QAAQ,cAAc;AASzC,SAASC,gBAAgB,QAAQ,kBAAkB;AACnD,SAASC,aAAa,QAAQ,SAAS;AACvC,SAASC,4BAA4B,EAAEC,eAAe,EAAEC,UAAU,EAAEC,0BAA0B,QAAQ,SAAS;AAE/G,OAAO,MAAMC,eAAe,GAAmCC,WAAc,IAAK;EAC9E,MAAMC,iBAAiB,GAAGH,0BAA0B,CAACE,WAAW,CAAC;EACjE,MAAME,uBAAuB,GAAGC,MAAM,CACjCC,OAAO,CAACH,iBAAiB,CAA+B;EAE7D,OAAO;IACHI,gBAAgB,EAAyCC,MAAqF,IAAY;MACtJ,IAAI,OAAOA,MAAM,KAAK,UAAU,EAAE;QAC9B,OAAOA,MAAM;MACjB;MAEA,OAAOA,MAAM;IACjB,CAAC;IACDC,SAAS,EAAwCC,UAA4C,IAAK;MAC9F,MAAMC,KAAK,GAAGlB,UAAU,CAACE,gBAAgB,CAAM;MAC/C,MAAMiB,UAAU,GAAGhB,aAAa,CAAC,CAAC;MAElC,IAAI,CAACc,UAAU,EAAE;QACb,OAAO;UACHC,KAAK;UACLH,MAAM,EAAE,CAAC;QACb,CAAC;MACL;MAEA,MAAMK,YAAY,GAAG,OAAOH,UAAU,KAAK,UAAU,GAC/CA,UAAU,CAACC,KAAK,CAAC,GACjBD,UAAU;MAChB,MAAMI,UAAU,GAAGjB,4BAA4B,CAAIe,UAAU,CAACG,KAAK,EAAEX,uBAAuB,CAAC;MAE7F,MAAMY,iBAAiB,GAAGX,MAAM,CAC3BC,OAAO,CAACO,YAAY,CAAC,CACrBI,MAAM,CAAC,CAACC,GAAG,EAAAC,IAAA,KAAmB;QAAA,IAAjB,CAACC,GAAG,EAAEC,KAAK,CAAC,GAAAF,IAAA;QACtB,MAAMG,KAAK,GAAGD,KAAiC;QAE/C,IAAI,OAAOA,KAAK,KAAK,UAAU,EAAE;UAC7B,OAAO;YACH,GAAGH,GAAG;YACN,CAACE,GAAG,GAAGtB,eAAe,CAAIuB,KAAK,EAAEP,UAAU,EAAEF,UAAU,EAAER,uBAAuB;UACpF,CAAC;QACL;QAEA,OAAOV,UAAU,CAAC6B,MAAM,CAAC;UACrB,GAAGL,GAAG;UACN,CAACE,GAAG,GAAGrB,UAAU,CAAQuB,KAAK,EAAER,UAAU,EAAEF,UAAU,EAAER,uBAAuB;QACnF,CAAC,CAAC;MACN,CAAC,EAAE,CAAC,CAAO,CAAC;MAEhB,OAAO;QACHO,KAAK;QACLH,MAAM,EAAEQ;MACZ,CAAC;IACL;EACJ,CAAC;AACL,CAAC"}

package/lib/module/utils/index.js

@@ -1,4 +1,5 @@
 export { normalizeStyles } from './normalizeStyles';
-export { getBreakpointFromScreenWidth, sortAndValidateBreakpoints } from './breakpoints';
+export { getBreakpointFromScreenWidth, sortAndValidateBreakpoints, getValueForBreakpoint } from './breakpoints';
 export { proxifyFunction, parseStyle } from './styles';
+export { extractValues, getKeyForCustomMediaQuery, isMediaQuery, isWithinTheHeight, isWithinTheWidth, isWithinTheWidthAndHeight } from './mediaQueries';
 //# sourceMappingURL=index.js.map

package/lib/module/utils/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["normalizeStyles","getBreakpointFromScreenWidth","sortAndValidateBreakpoints","proxifyFunction","parseStyle"],"sourceRoot":"../../../src","sources":["utils/index.ts"],"mappings":"AAAA,SAASA,eAAe,QAAQ,mBAAmB;AACnD,SAASC,4BAA4B,EAAEC,0BAA0B,QAAQ,eAAe;AACxF,SAASC,eAAe,EAAEC,UAAU,QAAQ,UAAU"}
+{"version":3,"names":["normalizeStyles","getBreakpointFromScreenWidth","sortAndValidateBreakpoints","getValueForBreakpoint","proxifyFunction","parseStyle","extractValues","getKeyForCustomMediaQuery","isMediaQuery","isWithinTheHeight","isWithinTheWidth","isWithinTheWidthAndHeight"],"sourceRoot":"../../../src","sources":["utils/index.ts"],"mappings":"AAAA,SAASA,eAAe,QAAQ,mBAAmB;AACnD,SAASC,4BAA4B,EAAEC,0BAA0B,EAAEC,qBAAqB,QAAQ,eAAe;AAC/G,SAASC,eAAe,EAAEC,UAAU,QAAQ,UAAU;AACtD,SACIC,aAAa,EACbC,yBAAyB,EACzBC,YAAY,EACZC,iBAAiB,EACjBC,gBAAgB,EAChBC,yBAAyB,QACtB,gBAAgB"}

package/lib/typescript/src/createUnistyles.d.ts

@@ -1,10 +1,6 @@
 import type { Breakpoints, CreateStylesFactory, CustomNamedStyles, ExtractBreakpoints, RemoveKeysWithPrefix } from './types';
 export declare const createUnistyles: <B extends Breakpoints, T = {}>(breakpoints: B) => {
-    /**
-     * @deprecated The method should not be used, proposed version by the community is createStyleSheet, will be removed in RC
-     */
-    createStyles: <S extends CustomNamedStyles<S, B>, X>(styles: S | X | CustomNamedStyles<S, B> | ((theme: T) => X | CustomNamedStyles<X, B>)) => S | X;
-    createStyleSheet: <S_1 extends CustomNamedStyles<S_1, B>, X_1>(styles: S_1 | X_1 | CustomNamedStyles<S_1, B> | ((theme: T) => X_1 | CustomNamedStyles<X_1, B>)) => S_1 | X_1;
+    createStyleSheet: <S extends CustomNamedStyles<S, B>, X>(styles: S | X | CustomNamedStyles<S, B> | ((theme: T) => X | CustomNamedStyles<X, B>)) => S | X;
     useStyles: <ST extends CustomNamedStyles<ST, B>>(stylesheet?: ST | CreateStylesFactory<ST, T> | undefined) => {
         theme: T;
         styles: ExtractBreakpoints<RemoveKeysWithPrefix<ST, B>, B>;

package/lib/typescript/src/createUnistyles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"createUnistyles.d.ts","sourceRoot":"","sources":["../../../src/createUnistyles.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EACR,WAAW,EACX,mBAAmB,EACnB,iBAAiB,EACjB,kBAAkB,EAClB,oBAAoB,EAEvB,MAAM,SAAS,CAAA;AAKhB,eAAO,MAAM,eAAe;IAMpB;;OAEG;;;;;;;CAuDV,CAAA"}
+{"version":3,"file":"createUnistyles.d.ts","sourceRoot":"","sources":["../../../src/createUnistyles.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EACR,WAAW,EACX,mBAAmB,EACnB,iBAAiB,EACjB,kBAAkB,EAClB,oBAAoB,EAEvB,MAAM,SAAS,CAAA;AAKhB,eAAO,MAAM,eAAe;;;;;;CAqD3B,CAAA"}

package/lib/typescript/src/utils/index.d.ts

@@ -1,4 +1,5 @@
 export { normalizeStyles } from './normalizeStyles';
-export { getBreakpointFromScreenWidth, sortAndValidateBreakpoints } from './breakpoints';
+export { getBreakpointFromScreenWidth, sortAndValidateBreakpoints, getValueForBreakpoint } from './breakpoints';
 export { proxifyFunction, parseStyle } from './styles';
+export { extractValues, getKeyForCustomMediaQuery, isMediaQuery, isWithinTheHeight, isWithinTheWidth, isWithinTheWidthAndHeight } from './mediaQueries';
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/utils/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AACnD,OAAO,EAAE,4BAA4B,EAAE,0BAA0B,EAAE,MAAM,eAAe,CAAA;AACxF,OAAO,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AACnD,OAAO,EAAE,4BAA4B,EAAE,0BAA0B,EAAE,qBAAqB,EAAE,MAAM,eAAe,CAAA;AAC/G,OAAO,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AACtD,OAAO,EACH,aAAa,EACb,yBAAyB,EACzB,YAAY,EACZ,iBAAiB,EACjB,gBAAgB,EAChB,yBAAyB,EAC5B,MAAM,gBAAgB,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-unistyles",
-  "version": "1.0.0-beta.6",
+  "version": "1.0.0-rc.1",
   "description": "Level up your React Native StyleSheet",
   "scripts": {
     "test": "jest",
@@ -9,7 +9,7 @@
     "clean": "del-cli lib",
     "prepare": "husky install && bob build",
     "precommit": "concurrently 'yarn tsc' 'yarn lint' 'yarn test'",
-    "release": "release-it patch --preRelease=beta"
+    "release": "release-it patch --preRelease=rc"
   },
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
@@ -39,19 +39,19 @@
   },
   "devDependencies": {
     "@commitlint/config-conventional": "17.7.0",
-    "@evilmartians/lefthook": "1.5.0",
     "@react-native/eslint-config": "0.73.1",
     "@release-it/conventional-changelog": "5.1.1",
+    "@testing-library/react-hooks": "8.0.1",
     "@types/jest": "29.5.5",
-    "@types/react": "18.2.24",
+    "@types/react": "18.2.28",
     "@types/react-native": "0.72.3",
-    "@typescript-eslint/eslint-plugin": "6.7.4",
-    "@typescript-eslint/eslint-plugin-tslint": "6.7.4",
-    "@typescript-eslint/parser": "6.7.4",
+    "@typescript-eslint/eslint-plugin": "6.7.5",
+    "@typescript-eslint/eslint-plugin-tslint": "6.7.5",
+    "@typescript-eslint/parser": "6.7.5",
     "commitlint": "17.7.2",
     "concurrently": "8.2.1",
     "del-cli": "5.1.0",
-    "eslint": "8.50.0",
+    "eslint": "8.51.0",
     "eslint-config-codemask": "1.1.7",
     "eslint-plugin-functional": "6.0.0",
     "eslint-plugin-import": "2.28.1",
@@ -67,8 +67,9 @@
     "jest": "29.7.0",
     "react": "18.2.0",
     "react-native": "0.72.5",
-    "react-native-builder-bob": "0.23.0",
+    "react-native-builder-bob": "0.23.1",
     "react-native-web": "0.19.9",
+    "react-test-renderer": "18.2.0",
     "release-it": "16.2.1",
     "typescript": "5.2.2"
   },
@@ -83,7 +84,8 @@
     }
   },
   "workspaces": [
-    "example"
+    "example",
+    "docs"
   ],
   "packageManager": "yarn@3.6.1",
   "engines": {
@@ -93,6 +95,7 @@
     "preset": "react-native",
     "modulePathIgnorePatterns": [
       "<rootDir>/example/node_modules",
+      "<rootDir>/docs/node_modules",
       "<rootDir>/lib/"
     ]
   },

package/src/__tests__/createUnistyles.spec.tsx

@@ -0,0 +1,158 @@
+import React from 'react'
+import { StyleSheet } from 'react-native'
+import type { ViewStyle } from 'react-native'
+import { renderHook } from '@testing-library/react-hooks'
+import { createUnistyles } from '../createUnistyles'
+import { UnistylesTheme } from '../UnistylesTheme'
+import type { CustomNamedStyles } from '../types'
+
+jest.mock('../hooks', () => ({
+    useDimensions: jest.fn(() => ({
+        width: 500,
+        height: 1000
+    }))
+}))
+
+describe('createUnistyles', () => {
+    describe('createStyleSheet', () => {
+        it('should work exactly the same like StyleSheet.create', () => {
+            const breakpoints = {
+                xs: 0
+            }
+            const { createStyleSheet } = createUnistyles(breakpoints)
+
+            const styles = {
+                container: {
+                    flex: 1,
+                    justifyContent: 'center',
+                    alignItems: 'center'
+                },
+                text: {
+                    fontWeight: 'bold',
+                    fontSize: 32
+                }
+            } as const
+
+            expect(createStyleSheet(styles)).toEqual(StyleSheet.create(styles))
+        })
+
+        it('should inject the theme to the createStyleSheet', () => {
+            const theme = {
+                colors: {
+                    barbie: '#ff9ff3',
+                    oak: '#1dd1a1',
+                    sky: '#48dbfb',
+                    fog: '#c8d6e5',
+                    aloes: '#00d2d3'
+                }
+            }
+            const breakpoints = {
+                xs: 0
+            }
+            const { useStyles, createStyleSheet } = createUnistyles<typeof breakpoints, typeof theme>(breakpoints)
+            const stylesheet = createStyleSheet(theme => ({
+                container: {
+                    backgroundColor: theme.colors.barbie
+                }
+            }))
+            const { result } = renderHook(() => useStyles(stylesheet), {
+                // @ts-ignore
+                wrapper: ({ children }) => (
+                    <UnistylesTheme theme={theme}>
+                        {children}
+                    </UnistylesTheme>
+                )
+            })
+
+            expect(result.current.theme).toEqual(theme)
+            expect(result.current.styles).not.toBe(Function)
+            expect(result.current.styles.container.backgroundColor).toEqual(theme.colors.barbie)
+        })
+    })
+
+    describe('useStyles', () => {
+        it('should return empty object for optional stylesheet', () => {
+            const breakpoints = {
+                xs: 0
+            }
+            const { useStyles } = createUnistyles(breakpoints)
+            const { result } = renderHook(() => useStyles())
+
+            expect(result.current.styles).toEqual({})
+            expect(result.current.theme).toEqual({})
+        })
+
+        it ('should choose single value from breakpoints', () => {
+            const breakpoints = {
+                xs: 0,
+                sm: 200,
+                md: 500,
+                lg: 1000
+            }
+
+            const { useStyles, createStyleSheet } = createUnistyles(breakpoints)
+            const stylesheet = createStyleSheet({
+                container: {
+                    flex: 1,
+                    justifyContent: 'center',
+                    alignItems: {
+                        xs: 'row',
+                        md: 'column'
+                    }
+                }
+            })
+            const { result } = renderHook(() => useStyles(stylesheet))
+
+            expect(result.current.styles.container.alignItems).toEqual('column')
+        })
+
+        it ('should choose single value from media queries', () => {
+            const breakpoints = {
+                xs: 0
+            }
+
+            const { useStyles, createStyleSheet } = createUnistyles(breakpoints)
+            const stylesheet = createStyleSheet({
+                container: {
+                    flex: 1,
+                    justifyContent: 'center',
+                    alignItems: {
+                        xs: 'row',
+                        ':w[300, 490]': 'column',
+                        ':w[491]': 'row'
+                    }
+                }
+            })
+            const { result } = renderHook(() => useStyles(stylesheet as CustomNamedStyles<typeof stylesheet, typeof breakpoints>))
+
+            expect(result.current.styles.container.alignItems).toEqual('row')
+        })
+
+        it ('should choose wrap dynamic functions in Proxy', () => {
+            const breakpoints = {
+                xs: 0
+            }
+
+            const { useStyles, createStyleSheet } = createUnistyles<typeof breakpoints, {}>(breakpoints)
+            const stylesheet = createStyleSheet({
+                container: (flex: number) => ({
+                    flex,
+                    justifyContent: 'center',
+                    alignItems: {
+                        xs: 'row',
+                        ':w[300, 490]': 'column',
+                        ':w[491]': 'row'
+                    }
+                })
+            })
+            const { result } = renderHook(() => useStyles(stylesheet as CustomNamedStyles<typeof stylesheet, typeof breakpoints>))
+
+            expect(result.current.styles.container).toBeInstanceOf(Function)
+            expect((result.current.styles.container as (flex: number) => ViewStyle)(2)).toEqual({
+                flex: 2,
+                justifyContent: 'center',
+                alignItems: 'row'
+            })
+        })
+    })
+})

package/src/createUnistyles.ts

@@ -18,16 +18,6 @@ export const createUnistyles = <B extends Breakpoints, T = {}>(breakpoints: B) =
         .entries(sortedBreakpoints) as SortedBreakpointEntries<B>
 
     return {
-        /**
-         * @deprecated The method should not be used, proposed version by the community is createStyleSheet, will be removed in RC
-         */
-        createStyles: <S extends CustomNamedStyles<S, B>, X>(styles: S | CustomNamedStyles<S, B> | X | ((theme: T) => X | CustomNamedStyles<X, B>)): S | X => {
-            if (typeof styles === 'function') {
-                return styles as X
-            }
-
-            return styles as S
-        },
         createStyleSheet: <S extends CustomNamedStyles<S, B>, X>(styles: S | CustomNamedStyles<S, B> | X | ((theme: T) => X | CustomNamedStyles<X, B>)): S | X => {
             if (typeof styles === 'function') {
                 return styles as X

package/src/utils/index.ts

@@ -1,3 +1,11 @@
 export { normalizeStyles } from './normalizeStyles'
-export { getBreakpointFromScreenWidth, sortAndValidateBreakpoints } from './breakpoints'
+export { getBreakpointFromScreenWidth, sortAndValidateBreakpoints, getValueForBreakpoint } from './breakpoints'
 export { proxifyFunction, parseStyle } from './styles'
+export {
+    extractValues,
+    getKeyForCustomMediaQuery,
+    isMediaQuery,
+    isWithinTheHeight,
+    isWithinTheWidth,
+    isWithinTheWidthAndHeight
+} from './mediaQueries'

package/lib/commonjs/utils/breakpoints.spec.js

@@ -1,154 +0,0 @@
-"use strict";
-
-var _breakpoints = require("./breakpoints");
-describe('breakpoints', () => {
-  describe('sortAndValidateBreakpoints', () => {
-    it('should throw error for empty breakpoints', () => {
-      const breakpoints = {};
-      expect(() => (0, _breakpoints.sortAndValidateBreakpoints)(breakpoints)).toThrow();
-    });
-    it('should throw error for breakpoints that don\'t start with 0', () => {
-      const breakpoints = {
-        sm: -1
-      };
-      expect(() => (0, _breakpoints.sortAndValidateBreakpoints)(breakpoints)).toThrow();
-    });
-    it('should return same order for sorted elements', () => {
-      const breakpoints = {
-        sm: 0,
-        md: 200,
-        lg: 300,
-        xl: 500
-      };
-      expect((0, _breakpoints.sortAndValidateBreakpoints)(breakpoints)).toEqual(breakpoints);
-    });
-    it('should sort the order of breakpoints', () => {
-      const breakpoints = {
-        md: 200,
-        sm: 0,
-        lg: 300,
-        xl: 500
-      };
-      expect((0, _breakpoints.sortAndValidateBreakpoints)(breakpoints)).toEqual({
-        sm: 0,
-        md: 200,
-        lg: 300,
-        xl: 500
-      });
-    });
-    it('should throw errors for duplicated values', () => {
-      const breakpoints = {
-        md: 200,
-        sm: 0,
-        lg: 300,
-        xl: 300
-      };
-      expect(() => (0, _breakpoints.sortAndValidateBreakpoints)(breakpoints)).toThrow();
-    });
-  });
-  describe('getBreakpointFromScreenWidth', () => {
-    it('should return correct breakpoints based on screen width', () => {
-      const breakpoints = {
-        xs: 0,
-        sm: 300,
-        md: 500,
-        xl: 1200
-      };
-      const breakpointPairs = Object.entries(breakpoints);
-      expect((0, _breakpoints.getBreakpointFromScreenWidth)(0, breakpointPairs)).toEqual('xs');
-      expect((0, _breakpoints.getBreakpointFromScreenWidth)(20, breakpointPairs)).toEqual('xs');
-      expect((0, _breakpoints.getBreakpointFromScreenWidth)(100, breakpointPairs)).toEqual('xs');
-      expect((0, _breakpoints.getBreakpointFromScreenWidth)(101, breakpointPairs)).toEqual('xs');
-      expect((0, _breakpoints.getBreakpointFromScreenWidth)(250, breakpointPairs)).toEqual('xs');
-      expect((0, _breakpoints.getBreakpointFromScreenWidth)(300, breakpointPairs)).toEqual('sm');
-      expect((0, _breakpoints.getBreakpointFromScreenWidth)(499, breakpointPairs)).toEqual('sm');
-      expect((0, _breakpoints.getBreakpointFromScreenWidth)(500, breakpointPairs)).toEqual('md');
-      expect((0, _breakpoints.getBreakpointFromScreenWidth)(799, breakpointPairs)).toEqual('md');
-      expect((0, _breakpoints.getBreakpointFromScreenWidth)(1200, breakpointPairs)).toEqual('xl');
-      expect((0, _breakpoints.getBreakpointFromScreenWidth)(2000, breakpointPairs)).toEqual('xl');
-    });
-  });
-  describe('getValueForBreakpoint', () => {
-    it('should prioritize custom media query', () => {
-      const breakpoint = 'sm';
-      const breakpoints = {
-        xs: 0,
-        sm: 200,
-        md: 500
-      };
-      const breakpointPairs = Object.entries(breakpoints);
-      const style = {
-        ':w[, 200]': 'green',
-        ':w[201]': 'orange',
-        sm: 'pink'
-      };
-      const screenSize = {
-        width: 200,
-        height: 800
-      };
-      expect((0, _breakpoints.getValueForBreakpoint)(style, breakpoint, screenSize, breakpointPairs)).toEqual('green');
-    });
-  });
-  it('should match breakpoint if media query doesnt exist', () => {
-    const breakpoint = 'md';
-    const breakpoints = {
-      xs: 0,
-      sm: 200,
-      md: 500
-    };
-    const breakpointPairs = Object.entries(breakpoints);
-    const style = {
-      ':w[, 200]': 'green',
-      ':w[201, 499]': 'orange',
-      sm: 'pink',
-      md: 'red'
-    };
-    const screenSize = {
-      width: 500,
-      height: 1200
-    };
-    expect((0, _breakpoints.getValueForBreakpoint)(style, breakpoint, screenSize, breakpointPairs)).toEqual('red');
-  });
-  it('should match breakpoint even if value is undefined', () => {
-    const breakpoint = 'md';
-    const breakpoints = {
-      xs: 0,
-      sm: 200,
-      md: 500
-    };
-    const breakpointPairs = Object.entries(breakpoints);
-    const style = {
-      ':w[, 200]': 'green',
-      ':w[201, 499]': 'orange',
-      sm: 'pink',
-      md: undefined
-    };
-    const screenSize = {
-      width: 500,
-      height: 1200
-    };
-    expect((0, _breakpoints.getValueForBreakpoint)(style, breakpoint, screenSize, breakpointPairs)).toEqual(undefined);
-  });
-  it('should match lower breakpoint to match css cascading', () => {
-    const breakpoint = 'xl';
-    const breakpoints = {
-      xs: 0,
-      sm: 200,
-      md: 500,
-      xl: 600
-    };
-    const breakpointPairs = Object.entries(breakpoints);
-    const style = {
-      ':w[, 200]': 'green',
-      ':w[201, 499]': 'orange',
-      sm: 'pink',
-      md: 'red'
-    };
-    const screenSize = {
-      width: 500,
-      height: 1200
-    };
-    expect((0, _breakpoints.getValueForBreakpoint)(style, breakpoint, screenSize, breakpointPairs)).toEqual('red');
-  });
-});
-//# sourceMappingURL=breakpoints.spec.js.map

package/lib/commonjs/utils/breakpoints.spec.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["_breakpoints","require","describe","it","breakpoints","expect","sortAndValidateBreakpoints","toThrow","sm","md","lg","xl","toEqual","xs","breakpointPairs","Object","entries","getBreakpointFromScreenWidth","breakpoint","style","screenSize","width","height","getValueForBreakpoint","undefined"],"sourceRoot":"../../../src","sources":["utils/breakpoints.spec.ts"],"mappings":"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"}