react-native-unistyles 1.0.0-beta.1

package/LICENSE

@@ -0,0 +1,20 @@
+MIT License
+
+Copyright (c) 2023 Jacek Pudysz
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,243 @@
+[<img alt="react-native-unistyles" src="assets/banner.png">](https://codemask.com)
+
+
+<picture>
+ <source media="(prefers-color-scheme: dark)" srcset="assets/uni-dark.svg">
+ <img alt="react-native-unistyles" src="assets/uni-light.svg">
+</picture>
+
+## Features
+- ⚡ Blazing fast, adds around ~5ms on top of StyleSheet*
+- 🎳 Share up to 100% of your styles across platforms in monorepo
+- 🎯 Doesn't introduce new components
+- 🖥️ Supports custom breakpoints and css-like media queries
+- 🎨 Access theme in your StyleSheets and components
+- 🪄 Supports dynamic functions to access values from JSX
+- 🥳 Compatible with Expo, Expo Go, Bare React Native and React Native Web
+- ⚔️ No 3rd party dependencies
+
+*-based on this [benchmark](https://github.com/efstathiosntonas/react-native-style-libraries-benchmark)
+
+## Beta
+
+This project is currently in its beta phase. While it hasn't reached version 1.0.0 yet, it's been tested and proven in a large-scale application, performing flawlessly across hundreds screens and components.
+
+I'm looking for testers to check the typings, scalability and overall usability for your monorepo projects.
+
+Suggestions, ideas, and potential improvements are always welcome!
+
+## Setup
+
+
+**1. Install library**
+
+```cmd
+yarn add react-native-unistyles
+```
+
+**2. Define your theme**
+
+You don't have to follow a specific format. Just make an object and add any keys/values you like.
+
+```ts
+// theme.ts
+export const theme = {
+  colors: {
+    blood: '#eb4d4b',
+    barbie: '#e056fd',
+    pumpkin: '#f0932b',
+    background: '#ffffff'
+  },
+  components: {
+    typography: {
+      bold: {
+        fontWeight: 'bold'
+      },
+      thin: {
+        fontWeight: '300'
+      }
+    }
+  },
+  margins: {
+    sm: 2,
+    md: 4,
+    lg: 8,
+    xl: 12
+  },
+  utils: {
+    hexToRGBA: (hex: string, opacity: number) => {
+      const rgb = hex
+        .replace('#', '')
+        .split(/(?=(?:..)*$)/)
+        .map(x => parseInt(x, 16))
+      return `rgba(${rgb.at(0)}, ${rgb.at(1)}, ${rgb.at(2)}, ${opacity})`
+    }
+  }
+}
+```
+**3. Create breakpoints**
+
+There are no predefined breakpoints. You can name them anything. Just make an object with string keys and number values.
+
+```ts
+// breakpoints.ts
+export const breakpoints = {
+    xs: 0,
+    sm: 576,
+    md: 768,
+    lg: 992,
+    xl: 1200,
+    superLarge: 2000,
+    tvLike: 4000
+}
+```
+
+**4. Wrap your app with UnistylesTheme to inject theme**
+
+```tsx
+import React from 'react'
+import { UnistylesTheme } from 'react-native-unistyles'
+import { theme } from './theme'
+
+export const App: React.FunctionComponent = () => (
+  <UnistylesTheme theme={theme}>
+    // Your App
+  </UnistylesTheme>
+)
+```
+
+**5. Access createStyles and useStyles with a factory**
+
+```ts
+// styles.ts
+
+// import library factory
+import { createUnistyles } from 'react-native-unistyles'
+// import your breakpoints, add whatever keys and numeric values you want
+import { breakpoints } from './breakpoints'
+// import your app's theme TypeScript type, or simply use 'typeof theme'
+import { theme } from './theme'
+
+export const {
+    createStyles,
+    useStyles,
+} = createUnistyles<typeof breakpoints, typeof theme>(breakpoints)
+```
+
+## Basic Usage
+
+Library gives you two functions from the factory:
+- `createStyles` which replaces `StyleSheet.create`
+- `useStyles` which parses your styles based on screen height, width and theme
+
+```tsx
+import React from 'react'
+import { View, Text } from 'react-native'
+// access createStyles and useStyles exported from factory
+import { createStyles, useStyles } from 'lib/styles'
+
+export const ExampleUnistyles = () => {
+    const { styles } = useStyles(stylesheet)
+
+    return (
+        <View style={styles.container}>
+            <Text style={styles.text}>
+                Unistyles example
+            </Text>
+        </View>
+    )
+}
+
+const stylesheet = createStyles(theme => ({
+    container: {
+       flex: 1,
+       justifyContent: 'center',
+       alignItems: 'center',
+       backgroundColor: theme.colors.background
+    },
+    text: {
+       color: theme.colors.typography
+    }
+}))
+```
+
+`createStyles` takes an object like `StyleSheet.create` or function that injects your theme
+
+`useStyles` hook takes a `stylesheet` and returns an object with two keys:
+- `styles` - parsed styles that can be used directly in React Native components
+- `theme` - your app's theme that can be used in JSX
+
+You can also skip `stylesheet` if you just want to access `theme`:
+
+```tsx
+const { theme } = useStyles()
+```
+
+## Breakpoints
+
+Any style can change based on breakpoints. To do this, change a value to an object:
+
+```ts
+const stylesheet = createStyles(theme => ({
+    container: {
+       flex: 1,
+       justifyContent: 'center',
+       alignItems: 'center',
+       backgroundColor: {
+         // your breakpoints
+         xs: theme.colors.background,
+         sm: theme.colors.barbie
+       }
+    },
+    text: {
+       color: theme.colors.typography
+    }
+}))
+```
+
+Library will choose the correct value (based on screen width) in the runtime.
+
+## Media queries
+
+For more advanced usage and pixel perfect designs you can also use a custom media queries. Library supports 4 types of media queries (w-width, h-height):
+
+```ts
+:w[200, 500] - with upper and lower bounds, it translates to width from 200-500px
+:w[, 800] - with upper bound only, it's equal to width from 0-800px
+:h[400] - lower bound only, it means height from 400px
+:h[200, 300]:w[500] - combined queries for both width and height
+```
+
+Media queries can be mixed with breakpoints, but have a bigger priority:
+
+```tsx
+const stylesheet = createStyles(theme => ({
+    container: {
+       justifyContent: 'center',
+       alignItems: 'center',
+       flexDirection: {
+          xs: 'column',
+          sm: 'row',
+       },
+       backgroundColor: {
+          xs: theme.colors.background,
+          ':w[600]': theme.colors.barbie
+       }
+    },
+    text: {
+       color: theme.colors.typography
+    }
+}))
+```
+
+## Example
+
+In order to check out working example go to [example/](./example).
+
+## Blog post
+
+For more detailed explanation please refer to my blog post [here](https://www.reactnativecrossroads.com/posts/level-up-react-native-styles).
+
+## License
+
+MIT

package/lib/commonjs/UnistylesTheme.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.UnistylesTheme = exports.UnistylesContext = void 0;
+var _react = _interopRequireWildcard(require("react"));
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+const UnistylesContext = exports.UnistylesContext = /*#__PURE__*/(0, _react.createContext)({});
+const UnistylesTheme = _ref => {
+  let {
+    theme,
+    children
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(UnistylesContext.Provider, {
+    value: theme
+  }, children);
+};
+exports.UnistylesTheme = UnistylesTheme;
+//# sourceMappingURL=UnistylesTheme.js.map

package/lib/commonjs/UnistylesTheme.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireWildcard","require","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","UnistylesContext","exports","createContext","UnistylesTheme","_ref","theme","children","createElement","Provider","value"],"sourceRoot":"../../src","sources":["UnistylesTheme.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AAA4C,SAAAC,yBAAAC,WAAA,eAAAC,OAAA,kCAAAC,iBAAA,OAAAD,OAAA,QAAAE,gBAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,WAAA,WAAAA,WAAA,GAAAG,gBAAA,GAAAD,iBAAA,KAAAF,WAAA;AAAA,SAAAH,wBAAAO,GAAA,EAAAJ,WAAA,SAAAA,WAAA,IAAAI,GAAA,IAAAA,GAAA,CAAAC,UAAA,WAAAD,GAAA,QAAAA,GAAA,oBAAAA,GAAA,wBAAAA,GAAA,4BAAAE,OAAA,EAAAF,GAAA,UAAAG,KAAA,GAAAR,wBAAA,CAAAC,WAAA,OAAAO,KAAA,IAAAA,KAAA,CAAAC,GAAA,CAAAJ,GAAA,YAAAG,KAAA,CAAAE,GAAA,CAAAL,GAAA,SAAAM,MAAA,WAAAC,qBAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,GAAA,IAAAX,GAAA,QAAAW,GAAA,kBAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAd,GAAA,EAAAW,GAAA,SAAAI,IAAA,GAAAR,qBAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAV,GAAA,EAAAW,GAAA,cAAAI,IAAA,KAAAA,IAAA,CAAAV,GAAA,IAAAU,IAAA,CAAAC,GAAA,KAAAR,MAAA,CAAAC,cAAA,CAAAH,MAAA,EAAAK,GAAA,EAAAI,IAAA,YAAAT,MAAA,CAAAK,GAAA,IAAAX,GAAA,CAAAW,GAAA,SAAAL,MAAA,CAAAJ,OAAA,GAAAF,GAAA,MAAAG,KAAA,IAAAA,KAAA,CAAAa,GAAA,CAAAhB,GAAA,EAAAM,MAAA,YAAAA,MAAA;AAOrC,MAAMW,gBAAgB,GAAAC,OAAA,CAAAD,gBAAA,gBAAG,IAAAE,oBAAa,EAAC,CAAC,CAAC,CAAC;AAE1C,MAAMC,cAA4D,GAAGC,IAAA;EAAA,IAAC;IACzEC,KAAK;IACLC;EACJ,CAAC,GAAAF,IAAA;EAAA,oBACG7B,MAAA,CAAAU,OAAA,CAAAsB,aAAA,CAACP,gBAAgB,CAACQ,QAAQ;IAACC,KAAK,EAAEJ;EAAM,GACnCC,QACsB,CAAC;AAAA,CAC/B;AAAAL,OAAA,CAAAE,cAAA,GAAAA,cAAA"}

package/lib/commonjs/createUnistyles.js

@@ -0,0 +1,52 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createUnistyles = void 0;
+var _react = require("react");
+var _reactNative = require("react-native");
+var _UnistylesTheme = require("./UnistylesTheme");
+var _utils = require("./utils");
+const createUnistyles = breakpoints => {
+  const sortedBreakpoints = (0, _utils.sortAndValidateBreakpoints)(breakpoints);
+  return {
+    createStyles: styles => styles,
+    useStyles: stylesheet => {
+      const theme = (0, _react.useContext)(_UnistylesTheme.UnistylesContext);
+      const dimensions = (0, _reactNative.useWindowDimensions)();
+      const breakpoint = (0, _utils.getBreakpointFromScreenWidth)(dimensions.width, sortedBreakpoints);
+      const screenSize = {
+        width: dimensions.width,
+        height: dimensions.height
+      };
+      if (!stylesheet) {
+        return {
+          theme,
+          styles: {}
+        };
+      }
+      const parsedStyles = typeof stylesheet === 'function' ? stylesheet(theme) : stylesheet;
+      const dynamicStyleSheet = Object.entries(parsedStyles).reduce((acc, _ref) => {
+        let [key, value] = _ref;
+        const x = value;
+        if (typeof value === 'function') {
+          return {
+            ...acc,
+            [key]: (0, _utils.proxifyFunction)(value, breakpoint, screenSize, sortedBreakpoints)
+          };
+        }
+        return {
+          ...acc,
+          [key]: (0, _utils.parseStyle)(x, breakpoint, screenSize, sortedBreakpoints)
+        };
+      }, {});
+      return {
+        theme,
+        styles: dynamicStyleSheet
+      };
+    }
+  };
+};
+exports.createUnistyles = createUnistyles;
+//# sourceMappingURL=createUnistyles.js.map

package/lib/commonjs/createUnistyles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","require","_reactNative","_UnistylesTheme","_utils","createUnistyles","breakpoints","sortedBreakpoints","sortAndValidateBreakpoints","createStyles","styles","useStyles","stylesheet","theme","useContext","UnistylesContext","dimensions","useWindowDimensions","breakpoint","getBreakpointFromScreenWidth","width","screenSize","height","parsedStyles","dynamicStyleSheet","Object","entries","reduce","acc","_ref","key","value","x","proxifyFunction","parseStyle","exports"],"sourceRoot":"../../src","sources":["createUnistyles.ts"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AAEA,IAAAE,eAAA,GAAAF,OAAA;AACA,IAAAG,MAAA,GAAAH,OAAA;AAEO,MAAMI,eAAe,GAA8CC,WAAc,IAAK;EACzF,MAAMC,iBAAiB,GAAG,IAAAC,iCAA0B,EAACF,WAAW,CAAM;EAEtE,OAAO;IACHG,YAAY,EAAsCC,MAAqC,IAAKA,MAAW;IACvGC,SAAS,EAAwCC,UAA4C,IAAK;MAC9F,MAAMC,KAAK,GAAG,IAAAC,iBAAU,EAACC,gCAAgB,CAAM;MAC/C,MAAMC,UAAU,GAAG,IAAAC,gCAAmB,EAAC,CAAC;MACxC,MAAMC,UAAU,GAAG,IAAAC,mCAA4B,EAAIH,UAAU,CAACI,KAAK,EAAEb,iBAAiB,CAAC;MACvF,MAAMc,UAAsB,GAAG;QAC3BD,KAAK,EAAEJ,UAAU,CAACI,KAAK;QACvBE,MAAM,EAAEN,UAAU,CAACM;MACvB,CAAC;MAED,IAAI,CAACV,UAAU,EAAE;QACb,OAAO;UACHC,KAAK;UACLH,MAAM,EAAE,CAAC;QACb,CAAC;MACL;MAEA,MAAMa,YAAY,GAAG,OAAOX,UAAU,KAAK,UAAU,GAC/CA,UAAU,CAACC,KAAK,CAAC,GACjBD,UAAU;MAEhB,MAAMY,iBAAiB,GAAGC,MAAM,CAC3BC,OAAO,CAACH,YAAY,CAAC,CACrBI,MAAM,CAAC,CAACC,GAAG,EAAAC,IAAA,KAAmB;QAAA,IAAjB,CAACC,GAAG,EAAEC,KAAK,CAAC,GAAAF,IAAA;QACtB,MAAMG,CAAC,GAAGD,KAAiC;QAE3C,IAAI,OAAOA,KAAK,KAAK,UAAU,EAAE;UAC7B,OAAO;YACH,GAAGH,GAAG;YACN,CAACE,GAAG,GAAG,IAAAG,sBAAe,EAAIF,KAAK,EAAEb,UAAU,EAAEG,UAAU,EAAEd,iBAAiB;UAC9E,CAAC;QACL;QAEA,OAAO;UACH,GAAGqB,GAAG;UACN,CAACE,GAAG,GAAG,IAAAI,iBAAU,EAAQF,CAAC,EAAEd,UAAU,EAAEG,UAAU,EAAEd,iBAAiB;QACzE,CAAC;MACL,CAAC,EAAE,CAAC,CAAO,CAAC;MAEhB,OAAO;QACHM,KAAK;QACLH,MAAM,EAAEc;MACZ,CAAC;IACL;EACJ,CAAC;AACL,CAAC;AAAAW,OAAA,CAAA9B,eAAA,GAAAA,eAAA"}

package/lib/commonjs/index.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "UnistylesTheme", {
+  enumerable: true,
+  get: function () {
+    return _UnistylesTheme.UnistylesTheme;
+  }
+});
+Object.defineProperty(exports, "createUnistyles", {
+  enumerable: true,
+  get: function () {
+    return _createUnistyles.createUnistyles;
+  }
+});
+var _UnistylesTheme = require("./UnistylesTheme");
+var _createUnistyles = require("./createUnistyles");
+//# sourceMappingURL=index.js.map

package/lib/commonjs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_UnistylesTheme","require","_createUnistyles"],"sourceRoot":"../../src","sources":["index.ts"],"mappings":";;;;;;;;;;;;;;;;;AAAA,IAAAA,eAAA,GAAAC,OAAA;AACA,IAAAC,gBAAA,GAAAD,OAAA"}

package/lib/commonjs/types.js

@@ -0,0 +1,6 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+//# sourceMappingURL=types.js.map

package/lib/commonjs/types.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sourceRoot":"../../src","sources":["types.ts"],"mappings":""}

package/lib/commonjs/utils/breakpoints.js

@@ -0,0 +1,139 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.sortAndValidateBreakpoints = exports.getValueForBreakpoint = exports.getBreakpointFromScreenWidth = void 0;
+var _common = require("./common");
+var _mediaQueries = require("./mediaQueries");
+/**
+ * Sorts the breakpoints object based on its numeric values in ascending order and validates them.
+ *
+ * This function takes an object where keys represent breakpoint names and values are numeric.
+ * It returns a new object with the same keys but sorted based on their corresponding numeric values.
+ * Additionally, it validates that:
+ * 1. The first breakpoint starts with a value of 0.
+ * 2. No duplicate breakpoint values exist.
+ *
+ * If the validation fails, appropriate error messages are logged to the console.
+ *
+ * @template B - An object type where keys are strings and values are numbers.
+ * @param {B} breakpoints - The breakpoints object to be sorted and validated.
+ * @returns {B} A new object with sorted and validated breakpoints.
+ *
+ * @example
+ * const input = { md: 768, lg: 1024, sm: 0 }
+ * sortAndValidateBreakpoints(input) // returns { sm: 0, md: 768, lg: 1024 }
+ */
+const sortAndValidateBreakpoints = breakpoints => {
+  const sortedPairs = Object.entries(breakpoints).sort((breakpoint1, breakpoint2) => {
+    const [, value1] = breakpoint1;
+    const [, value2] = breakpoint2;
+    return value1 - value2;
+  });
+  const sortedBreakpoints = Object.freeze(Object.fromEntries(sortedPairs));
+  const breakpointValues = Object.values(sortedBreakpoints);
+  const [firstBreakpoint] = breakpointValues;
+  if (firstBreakpoint !== 0) {
+    (0, _common.throwError)('first breakpoint must start with 0');
+  }
+  if (breakpointValues.length !== new Set(breakpointValues).size) {
+    (0, _common.throwError)('breakpoint values are duplicated');
+  }
+  return sortedBreakpoints;
+};
+
+/**
+ * Determines the appropriate breakpoint key for a given screen width based on provided breakpoints.
+ *
+ * This function takes a screen width and an object of breakpoints. It returns the key of the breakpoint
+ * that the screen width falls into. The breakpoints are assumed to be sorted in ascending order.
+ *
+ * @template B - An object type where keys are strings and values are numbers representing screen widths.
+ * @param {number} width - The screen width to determine the breakpoint for.
+ * @param {B} breakpoints - The breakpoints object to use for determination.
+ * @returns {keyof B & string} The key of the breakpoint that the screen width falls into.
+ *
+ * @example
+ * const breakpoints = { sm: 0, md: 768, lg: 1024 }
+ * getBreakpointFromScreenWidth(800, breakpoints) // returns 'md'
+ */
+exports.sortAndValidateBreakpoints = sortAndValidateBreakpoints;
+const getBreakpointFromScreenWidth = (width, breakpoints) => {
+  const [key] = Object.entries(breakpoints).find((_ref, index, otherBreakpoints) => {
+    let [, value] = _ref;
+    const minVal = value;
+    const maxVal = otherBreakpoints[index + 1]?.[1];
+    if (!maxVal) {
+      return true;
+    }
+    return width >= minVal && width < maxVal;
+  });
+  return key;
+};
+
+/**
+ * Retrieves the value associated with a given breakpoint or custom media query based on the provided screen size.
+ *
+ * The function first checks for custom media queries. If a matching custom media query is found, its associated value is returned.
+ * If no custom media query matches, the function then checks for a direct breakpoint match.
+ * If there's no direct breakpoint match, the function simulates CSS cascading to find the closest matching breakpoint.
+ *
+ * @template B - An object type where keys represent breakpoint names and values represent breakpoint values.
+ *
+ * @param {Record<keyof B & string, string | number>} value - An object containing values associated with breakpoints or custom media queries.
+ * @param {keyof B & string} breakpoint - The breakpoint name to check against.
+ * @param {ScreenSize} screenSize - An object representing the screen size to be checked against the media queries.
+ * @param {B} breakpoints - An object representing the defined breakpoints.
+ *
+ * @returns {string | number | undefined} Returns the value associated with the matching breakpoint or custom media query, or `undefined` if no match is found.
+ *
+ * @example
+ *
+ * const values = { ':w[200]': 'value1', sm: 'value2', md: 'value3' }
+ * const screenSize = { width: 250, height: 400 }
+ * const breakpoints = { sm: 300, md: 600, lg: 900 }
+ *
+ * getValueForBreakpoint(values, 'sm', screenSize, breakpoints); // 'value1'
+ */
+exports.getBreakpointFromScreenWidth = getBreakpointFromScreenWidth;
+const getValueForBreakpoint = (value, breakpoint, screenSize, breakpoints) => {
+  // the highest priority is for custom media queries
+  const customMediaQueries = Object.entries(value).filter(_ref2 => {
+    let [key] = _ref2;
+    return (0, _mediaQueries.isMediaQuery)(key);
+  });
+  const customMediaQueryKey = (0, _mediaQueries.getKeyForCustomMediaQuery)(customMediaQueries, screenSize);
+  if (customMediaQueryKey && customMediaQueryKey in value) {
+    return value[customMediaQueryKey];
+  }
+
+  // if no custom media query, or didn't match, proceed with defined breakpoints
+  const unifiedKey = breakpoint.toLowerCase();
+  const directBreakpoint = value[unifiedKey];
+
+  // if there is a direct key like 'sm' or 'md', or value for this key exists but its undefined
+  if (directBreakpoint || unifiedKey in value) {
+    return directBreakpoint;
+  }
+
+  // there is no direct hit for breakpoint nor media-query, so let's simulate CSS cascading
+  const allBreakpoints = Object.entries(breakpoints).map(_ref3 => {
+    let [key, bpValue] = _ref3;
+    return [key.toLowerCase(), bpValue];
+  });
+  const currentBreakpoint = allBreakpoints.findIndex(_ref4 => {
+    let [key] = _ref4;
+    return key === unifiedKey;
+  });
+  const availableBreakpoints = allBreakpoints.filter((_ref5, index) => {
+    let [key] = _ref5;
+    return index < currentBreakpoint && key && key in value;
+  }).map(_ref6 => {
+    let [key] = _ref6;
+    return key;
+  });
+  return allBreakpoints.length > 0 ? value[availableBreakpoints[availableBreakpoints.length - 1]] : undefined;
+};
+exports.getValueForBreakpoint = getValueForBreakpoint;
+//# sourceMappingURL=breakpoints.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["_common","require","_mediaQueries","sortAndValidateBreakpoints","breakpoints","sortedPairs","Object","entries","sort","breakpoint1","breakpoint2","value1","value2","sortedBreakpoints","freeze","fromEntries","breakpointValues","values","firstBreakpoint","throwError","length","Set","size","exports","getBreakpointFromScreenWidth","width","key","find","_ref","index","otherBreakpoints","value","minVal","maxVal","getValueForBreakpoint","breakpoint","screenSize","customMediaQueries","filter","_ref2","isMediaQuery","customMediaQueryKey","getKeyForCustomMediaQuery","unifiedKey","toLowerCase","directBreakpoint","allBreakpoints","map","_ref3","bpValue","currentBreakpoint","findIndex","_ref4","availableBreakpoints","_ref5","_ref6","undefined"],"sourceRoot":"../../../src","sources":["utils/breakpoints.ts"],"mappings":"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"}