react-native-unistyles 2.0.0-alpha.5 → 2.0.0-alpha.7

package/cxx/UnistylesRuntime.cpp

@@ -0,0 +1,262 @@
+#include "UnistylesRuntime.h"
+
+#include <string>
+#include <vector>
+
+#pragma region HostObject
+
+std::vector<jsi::PropNameID> UnistylesRuntime::getPropertyNames(jsi::Runtime& runtime) {
+    std::vector<jsi::PropNameID> properties;
+
+    // getters
+    properties.push_back(jsi::PropNameID::forUtf8(runtime, std::string("screenWidth")));
+    properties.push_back(jsi::PropNameID::forUtf8(runtime, std::string("screenHeight")));
+    properties.push_back(jsi::PropNameID::forUtf8(runtime, std::string("hasAdaptiveThemes")));
+    properties.push_back(jsi::PropNameID::forUtf8(runtime, std::string("themeName")));
+    properties.push_back(jsi::PropNameID::forUtf8(runtime, std::string("breakpoint")));
+    properties.push_back(jsi::PropNameID::forUtf8(runtime, std::string("colorScheme")));
+    properties.push_back(jsi::PropNameID::forUtf8(runtime, std::string("sortedBreakpointPairs")));
+    properties.push_back(jsi::PropNameID::forUtf8(runtime, std::string("useBreakpoints")));
+    properties.push_back(jsi::PropNameID::forUtf8(runtime, std::string("useTheme")));
+    properties.push_back(jsi::PropNameID::forUtf8(runtime, std::string("useAdaptiveThemes")));
+
+    // setters
+    properties.push_back(jsi::PropNameID::forUtf8(runtime, std::string("themes")));
+
+    return properties;
+}
+
+
+jsi::Value UnistylesRuntime::get(jsi::Runtime& runtime, const jsi::PropNameID& propNameId) {
+    std::string propName = propNameId.utf8(runtime);
+
+    if (propName == "screenWidth") {
+        return jsi::Value(this->screenWidth);
+    }
+
+    if (propName == "screenHeight") {
+        return jsi::Value(this->screenHeight);
+    }
+
+    if (propName == "hasAdaptiveThemes") {
+        return jsi::Value(this->hasAdaptiveThemes);
+    }
+
+    if (propName == "themeName") {
+        return !this->themeName.empty()
+            ? jsi::Value(jsi::String::createFromUtf8(runtime, this->themeName))
+            : this->getThemeOrFail(runtime);
+    }
+
+    if (propName == "breakpoint") {
+        return !this->breakpoint.empty()
+            ? jsi::Value(jsi::String::createFromUtf8(runtime, this->breakpoint))
+            : jsi::Value::undefined();
+    }
+
+    if (propName == "colorScheme") {
+        return jsi::Value(jsi::String::createFromUtf8(runtime, this->colorScheme));
+    }
+
+    if (propName == "sortedBreakpointPairs") {
+        std::unique_ptr<jsi::Array> sortedBreakpointEntriesArray = std::make_unique<jsi::Array>(runtime, this->sortedBreakpointPairs.size());
+
+        for (size_t i = 0; i < this->sortedBreakpointPairs.size(); ++i) {
+            std::unique_ptr<jsi::Array> pairArray = std::make_unique<jsi::Array>(runtime, 2);
+            jsi::String nameValue = jsi::String::createFromUtf8(runtime, this->sortedBreakpointPairs[i].first);
+
+            pairArray->setValueAtIndex(runtime, 0, nameValue);
+            pairArray->setValueAtIndex(runtime, 1, jsi::Value(this->sortedBreakpointPairs[i].second));
+            sortedBreakpointEntriesArray->setValueAtIndex(runtime, i, *pairArray);
+        }
+
+        return jsi::Value(runtime, *sortedBreakpointEntriesArray);
+    }
+
+    if (propName == "useBreakpoints") {
+        return jsi::Function::createFromHostFunction(
+            runtime,
+            jsi::PropNameID::forAscii(runtime, "useBreakpoints"),
+            1,
+            [this](jsi::Runtime &runtime, const jsi::Value &thisVal, const jsi::Value *arguments, size_t count) -> jsi::Value {
+                jsi::Object breakpointsObj = arguments[0].asObject(runtime);
+                jsi::Array propertyNames = breakpointsObj.getPropertyNames(runtime);
+                std::vector<std::pair<std::string, double>> sortedBreakpointEntriesVec;
+
+                for (size_t i = 0; i < propertyNames.size(runtime); ++i) {
+                    jsi::Value propNameValue = propertyNames.getValueAtIndex(runtime, i);
+                    std::string name = propNameValue.asString(runtime).utf8(runtime);
+                    jsi::PropNameID propNameID = jsi::PropNameID::forUtf8(runtime, name);
+                    jsi::Value value = breakpointsObj.getProperty(runtime, propNameID);
+
+                    if (value.isNumber()) {
+                        double breakpointValue = value.asNumber();
+                        sortedBreakpointEntriesVec.push_back(std::make_pair(name, breakpointValue));
+                    }
+                }
+
+                std::sort(sortedBreakpointEntriesVec.begin(), sortedBreakpointEntriesVec.end(), [](const std::pair<std::string, double>& a, const std::pair<std::string, double>& b) {
+                    return a.second < b.second;
+                });
+                
+                if (sortedBreakpointEntriesVec.size() == 0) {
+                    throw jsi::JSError(runtime, UnistylesErrorBreakpointsCannotBeEmpty);
+                }
+                
+                if (sortedBreakpointEntriesVec.at(0).second != 0) {
+                    throw jsi::JSError(runtime, UnistylesErrorBreakpointsMustStartFromZero);
+                }
+
+                this->sortedBreakpointPairs = sortedBreakpointEntriesVec;
+
+                std::string breakpoint = this->getBreakpointFromScreenWidth(this->screenWidth, sortedBreakpointEntriesVec);
+
+                this->breakpoint = breakpoint;
+
+                return jsi::Value::undefined();
+            }
+        );
+    }
+
+    if (propName == "useTheme") {
+        return jsi::Function::createFromHostFunction(runtime,
+            jsi::PropNameID::forAscii(runtime, "useTheme"),
+            1,
+            [this](jsi::Runtime &runtime, const jsi::Value &thisVal, const jsi::Value *arguments, size_t count) -> jsi::Value {
+                std::string themeName = arguments[0].asString(runtime).utf8(runtime);
+
+                this->themeName = themeName;
+                this->onThemeChange(themeName);
+
+                return jsi::Value::undefined();
+            }
+        );
+    }
+
+    if (propName == "useAdaptiveThemes") {
+        return jsi::Function::createFromHostFunction(runtime,
+            jsi::PropNameID::forAscii(runtime, "useAdaptiveThemes"),
+            1,
+            [this](jsi::Runtime &runtime, const jsi::Value &thisVal, const jsi::Value *arguments, size_t count) -> jsi::Value {
+                bool enableAdaptiveThemes = arguments[0].asBool();
+
+                this->hasAdaptiveThemes = enableAdaptiveThemes;
+
+                if (!enableAdaptiveThemes || !this->supportsAutomaticColorScheme) {
+                    return jsi::Value::undefined();
+                }
+
+                this->themeName = this->colorScheme;
+                this->onThemeChange(this->themeName);
+
+                return jsi::Value::undefined();
+            }
+        );
+    }
+    
+    if (propName == "unregister") {
+        return jsi::Function::createFromHostFunction(runtime,
+            jsi::PropNameID::forAscii(runtime, "unregister"),
+            1,
+            [this](jsi::Runtime &runtime, const jsi::Value &thisVal, const jsi::Value *arguments, size_t count) -> jsi::Value {
+                this->hasAdaptiveThemes = false;
+                this->supportsAutomaticColorScheme = false;
+                this->themeName = "";
+                this->breakpoint = "";
+                this->themes.clear();
+                this->sortedBreakpointPairs.clear();
+
+                return jsi::Value::undefined();
+            }
+        );
+    }
+
+    return jsi::Value::undefined();
+}
+
+void UnistylesRuntime::set(jsi::Runtime& runtime, const jsi::PropNameID& propNameId, const jsi::Value& value) {
+    std::string propName = propNameId.utf8(runtime);
+
+    if (propName == "themes" && value.isObject()) {
+        jsi::Array themes = value.asObject(runtime).asArray(runtime);
+        std::vector<std::string> themesVector;
+        size_t length = themes.size(runtime);
+
+        for (size_t i = 0; i < length; ++i) {
+            jsi::Value element = themes.getValueAtIndex(runtime, i);
+
+            if (element.isString()) {
+                std::string theme = element.asString(runtime).utf8(runtime);
+                themesVector.push_back(theme);
+            }
+        }
+        
+        if (themesVector.size() == 0) {
+            throw jsi::JSError(runtime, UnistylesErrorThemesCannotBeEmpty);
+        }
+
+        this->themes = themesVector;
+
+        bool hasLightTheme = std::find(themesVector.begin(), themesVector.end(), "light") != themesVector.end();
+        bool hasDarkTheme = std::find(themesVector.begin(), themesVector.end(), "dark") != themesVector.end();
+
+        this->supportsAutomaticColorScheme = hasLightTheme && hasDarkTheme;
+
+        return;
+    }
+}
+
+#pragma endregion
+#pragma region Helpers
+
+std::string UnistylesRuntime::getBreakpointFromScreenWidth(int width, const std::vector<std::pair<std::string, double>>& sortedBreakpointPairs) {
+    for (size_t i = 0; i < sortedBreakpointPairs.size(); ++i) {
+        const auto& [key, value] = sortedBreakpointPairs[i];
+        const double maxVal = (i + 1 < sortedBreakpointPairs.size()) ? sortedBreakpointPairs[i + 1].second : std::numeric_limits<double>::infinity();
+
+        if (width >= value && width < maxVal) {
+            return key;
+        }
+    }
+
+    return sortedBreakpointPairs.empty() ? "" : sortedBreakpointPairs.back().first;
+}
+
+void UnistylesRuntime::handleScreenSizeChange(int width, int height) {
+    std::string breakpoint = this->getBreakpointFromScreenWidth(width, this->sortedBreakpointPairs);
+    
+    this->breakpoint = breakpoint;
+    this->screenWidth = width;
+    this->screenHeight = height;
+    
+    int orientation = width > height
+        ? UnistylesOrientationLandscape
+        : UnistylesOrientationPortrait;
+
+    this->onBreakpointChange(breakpoint, orientation, width, height);
+}
+
+void UnistylesRuntime::handleAppearanceChange(std::string colorScheme) {
+    this->colorScheme = colorScheme;
+
+    if (!this->supportsAutomaticColorScheme || !this->hasAdaptiveThemes) {
+        return;
+    }
+
+    this->themeName = this->colorScheme;
+    this->onThemeChange(this->themeName);
+}
+
+jsi::Value UnistylesRuntime::getThemeOrFail(jsi::Runtime& runtime) {
+    if (this->themes.size() == 1) {
+        std::string themeName = this->themes.at(0);
+
+        this->themeName = themeName;
+
+        return jsi::String::createFromUtf8(runtime, themeName);
+    }
+
+    return jsi::Value().undefined();
+}
+
+#pragma endregion

package/cxx/UnistylesRuntime.h

@@ -0,0 +1,61 @@
+#pragma once
+
+#include <jsi/jsi.h>
+#include <vector>
+
+using namespace facebook;
+
+const int UnistylesOrientationPortrait = 1;
+const int UnistylesOrientationLandscape = 2;
+
+const std::string UnistylesDarkScheme = "dark";
+const std::string UnistylesLightScheme = "light";
+const std::string UnistylesUnspecifiedScheme = "unspecified";
+
+const std::string UnistylesErrorBreakpointsCannotBeEmpty = "UNISTYLES_ERROR_BREAKPOINTS_CANNOT_BE_EMPTY'";
+const std::string UnistylesErrorBreakpointsMustStartFromZero = "UNISTYLES_ERROR_BREAKPOINTS_MUST_START_FROM_ZER0";
+const std::string UnistylesErrorThemesCannotBeEmpty = "UNISTYLES_ERROR_THEMES_CANNOT_BE_EMPTY";
+
+typedef void(^UnistylesThemeChangeEvent)(std::string themeName);
+typedef void(^UnistylesBreakpointChangeEvent)(std::string breakpoint, int layout, int screenWidth, int screenHeight);
+
+class JSI_EXPORT UnistylesRuntime : public jsi::HostObject {
+private:
+    UnistylesThemeChangeEvent onThemeChange;
+    UnistylesBreakpointChangeEvent onBreakpointChange;
+
+    int screenWidth;
+    int screenHeight;
+    std::string colorScheme;
+
+public:
+    UnistylesRuntime(
+        UnistylesThemeChangeEvent onThemeChange,
+        UnistylesBreakpointChangeEvent onBreakpointChange,
+        int screenWidth,
+        int screenHeight,
+        std::string colorScheme
+    ): onThemeChange(onThemeChange),
+       onBreakpointChange(onBreakpointChange),
+       screenWidth(screenWidth),
+       screenHeight(screenHeight),
+       colorScheme(colorScheme) {}
+
+    bool hasAdaptiveThemes;
+    bool supportsAutomaticColorScheme;
+
+    std::string themeName;
+    std::string breakpoint;
+    std::vector<std::string> themes;
+    std::vector<std::pair<std::string, double>> sortedBreakpointPairs;
+
+    jsi::Value get(jsi::Runtime&, const jsi::PropNameID& name) override;
+    void set(jsi::Runtime& runtime, const jsi::PropNameID& propNameId, const jsi::Value& value) override;
+    std::vector<jsi::PropNameID> getPropertyNames(jsi::Runtime& runtime) override;
+
+    void handleScreenSizeChange(int width, int height);
+    void handleAppearanceChange(std::string colorScheme);
+
+    jsi::Value getThemeOrFail(jsi::Runtime&);
+    std::string getBreakpointFromScreenWidth(int width, const std::vector<std::pair<std::string, double>>& sortedBreakpointEntries);
+};

package/lib/commonjs/Unistyles.js

@@ -20,7 +20,7 @@ class Unistyles {
     this._bridge = global.__UNISTYLES__;
     this._registry = new _UnistyleRegistry.UnistyleRegistry(this._bridge);
     this._runtime = new _UnistylesRuntime.UnistylesRuntime(this._bridge, this._registry);
-    this._engine = new _UnistylesEngine.UnistylesEngine(this._registry, this._runtime);
+    this._engine = new _UnistylesEngine.UnistylesBuiltInEngine(this._registry, this._runtime);
   }
   get registry() {
     return this._registry;

package/lib/commonjs/Unistyles.js.map

@@ -1 +1 @@
-{"version":3,"names":["_UnistylesModule","require","_UnistylesRuntime","_UnistylesEngine","_UnistyleRegistry","_types","Unistyles","constructor","isInstalled","UnistylesModule","install","Error","UnistylesError","RuntimeUnavailable","_bridge","global","__UNISTYLES__","_registry","UnistyleRegistry","_runtime","UnistylesRuntime","_engine","UnistylesEngine","registry","runtime","engine","unistyles","exports"],"sourceRoot":"../../src","sources":["Unistyles.ts"],"mappings":";;;;;;AAAA,IAAAA,gBAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAD,OAAA;AACA,IAAAE,gBAAA,GAAAF,OAAA;AACA,IAAAG,iBAAA,GAAAH,OAAA;AAEA,IAAAI,MAAA,GAAAJ,OAAA;AAEA,MAAMK,SAAS,CAAC;EAMZC,WAAWA,CAAA,EAAG;IACV,MAAMC,WAAW,GAAGC,gCAAe,EAAEC,OAAO,CAAC,CAAC,IAAI,KAAK;IAEvD,IAAI,CAACF,WAAW,EAAE;MACd,MAAM,IAAIG,KAAK,CAACC,qBAAc,CAACC,kBAAkB,CAAC;IACtD;;IAEA;IACA,IAAI,CAACC,OAAO,GAAGC,MAAM,CAACC,aAAgC;IACtD,IAAI,CAACC,SAAS,GAAG,IAAIC,kCAAgB,CAAC,IAAI,CAACJ,OAAO,CAAC;IACnD,IAAI,CAACK,QAAQ,GAAG,IAAIC,kCAAgB,CAAC,IAAI,CAACN,OAAO,EAAE,IAAI,CAACG,SAAS,CAAC;IAClE,IAAI,CAACI,OAAO,GAAG,IAAIC,gCAAe,CAAC,IAAI,CAACL,SAAS,EAAE,IAAI,CAACE,QAAQ,CAAC;EACrE;EAEA,IAAWI,QAAQA,CAAA,EAAG;IAClB,OAAO,IAAI,CAACN,SAAS;EACzB;EAEA,IAAWO,OAAOA,CAAA,EAAG;IACjB,OAAO,IAAI,CAACL,QAAQ;EACxB;EAEA,IAAWM,MAAMA,CAAA,EAAG;IAChB,OAAO,IAAI,CAACJ,OAAO;EACvB;AACJ;AAEO,MAAMK,SAAS,GAAAC,OAAA,CAAAD,SAAA,GAAG,IAAIpB,SAAS,CAAC,CAAC"}
+{"version":3,"names":["_UnistylesModule","require","_UnistylesRuntime","_UnistylesEngine","_UnistyleRegistry","_types","Unistyles","constructor","isInstalled","UnistylesModule","install","Error","UnistylesError","RuntimeUnavailable","_bridge","global","__UNISTYLES__","_registry","UnistyleRegistry","_runtime","UnistylesRuntime","_engine","UnistylesBuiltInEngine","registry","runtime","engine","unistyles","exports"],"sourceRoot":"../../src","sources":["Unistyles.ts"],"mappings":";;;;;;AAAA,IAAAA,gBAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAD,OAAA;AACA,IAAAE,gBAAA,GAAAF,OAAA;AACA,IAAAG,iBAAA,GAAAH,OAAA;AAEA,IAAAI,MAAA,GAAAJ,OAAA;AAEA,MAAMK,SAAS,CAAC;EAMZC,WAAWA,CAAA,EAAG;IACV,MAAMC,WAAW,GAAGC,gCAAe,EAAEC,OAAO,CAAC,CAAC,IAAI,KAAK;IAEvD,IAAI,CAACF,WAAW,EAAE;MACd,MAAM,IAAIG,KAAK,CAACC,qBAAc,CAACC,kBAAkB,CAAC;IACtD;;IAEA;IACA,IAAI,CAACC,OAAO,GAAGC,MAAM,CAACC,aAAgC;IACtD,IAAI,CAACC,SAAS,GAAG,IAAIC,kCAAgB,CAAC,IAAI,CAACJ,OAAO,CAAC;IACnD,IAAI,CAACK,QAAQ,GAAG,IAAIC,kCAAgB,CAAC,IAAI,CAACN,OAAO,EAAE,IAAI,CAACG,SAAS,CAAC;IAClE,IAAI,CAACI,OAAO,GAAG,IAAIC,uCAAsB,CAAC,IAAI,CAACL,SAAS,EAAE,IAAI,CAACE,QAAQ,CAAC;EAC5E;EAEA,IAAWI,QAAQA,CAAA,EAAG;IAClB,OAAO,IAAI,CAACN,SAAS;EACzB;EAEA,IAAWO,OAAOA,CAAA,EAAG;IACjB,OAAO,IAAI,CAACL,QAAQ;EACxB;EAEA,IAAWM,MAAMA,CAAA,EAAG;IAChB,OAAO,IAAI,CAACJ,OAAO;EACvB;AACJ;AAEO,MAAMK,SAAS,GAAAC,OAAA,CAAAD,SAAA,GAAG,IAAIpB,SAAS,CAAC,CAAC"}

package/lib/commonjs/UnistylesEngine.js

@@ -3,20 +3,24 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.UnistylesEngine = void 0;
-// todo implement engine
-class UnistylesEngine {
-  // @ts-ignore
+exports.UnistylesBuiltInEngine = void 0;
+var _utils = require("./utils");
+class UnistylesBuiltInEngine {
   constructor(registry, runtime) {
     this.registry = registry;
     this.runtime = runtime;
     this.registry = registry;
     this.runtime = runtime;
   }
+  isMediaQuery = key => {
+    const regex = /(:w|:h)/;
+    return key.length > 0 && regex.test(key);
+  };
+  didMatchMediaQuery = keys => (0, _utils.getKeyForCustomMediaQuery)(keys, this.runtime.screen, this.registry.breakpoints);
 
   // UnistylesEngine.parseStyleSheet
   // UnistylesEngine.parseStyle
   // UnistylesEngine.proxify
 }
-exports.UnistylesEngine = UnistylesEngine;
+exports.UnistylesBuiltInEngine = UnistylesBuiltInEngine;
 //# sourceMappingURL=UnistylesEngine.js.map

package/lib/commonjs/UnistylesEngine.js.map

@@ -1 +1 @@
-{"version":3,"names":["UnistylesEngine","constructor","registry","runtime","exports"],"sourceRoot":"../../src","sources":["UnistylesEngine.ts"],"mappings":";;;;;;AAGA;AACO,MAAMA,eAAe,CAAC;EACzB;EACAC,WAAWA,CAASC,QAA0B,EAAUC,OAAyB,EAAE;IAAA,KAA/DD,QAA0B,GAA1BA,QAA0B;IAAA,KAAUC,OAAyB,GAAzBA,OAAyB;IAC7E,IAAI,CAACD,QAAQ,GAAGA,QAAQ;IACxB,IAAI,CAACC,OAAO,GAAGA,OAAO;EAC1B;;EAEA;EACA;EACA;AACJ;AAACC,OAAA,CAAAJ,eAAA,GAAAA,eAAA"}
+{"version":3,"names":["_utils","require","UnistylesBuiltInEngine","constructor","registry","runtime","isMediaQuery","key","regex","length","test","didMatchMediaQuery","keys","getKeyForCustomMediaQuery","screen","breakpoints","exports"],"sourceRoot":"../../src","sources":["UnistylesEngine.ts"],"mappings":";;;;;;AAEA,IAAAA,MAAA,GAAAC,OAAA;AAGO,MAAMC,sBAAsB,CAA4B;EAC3DC,WAAWA,CAASC,QAA0B,EAAUC,OAAyB,EAAE;IAAA,KAA/DD,QAA0B,GAA1BA,QAA0B;IAAA,KAAUC,OAAyB,GAAzBA,OAAyB;IAC7E,IAAI,CAACD,QAAQ,GAAGA,QAAQ;IACxB,IAAI,CAACC,OAAO,GAAGA,OAAO;EAC1B;EAEOC,YAAY,GAAIC,GAAW,IAAK;IACnC,MAAMC,KAAK,GAAG,SAAS;IAEvB,OAAOD,GAAG,CAACE,MAAM,GAAG,CAAC,IAAID,KAAK,CAACE,IAAI,CAACH,GAAG,CAAC;EAC5C,CAAC;EAEMI,kBAAkB,GAAIC,IAAgB,IACzC,IAAAC,gCAAyB,EAACD,IAAI,EAAE,IAAI,CAACP,OAAO,CAACS,MAAM,EAAE,IAAI,CAACV,QAAQ,CAACW,WAAW,CAAC;;EAEnF;EACA;EACA;AACJ;AAACC,OAAA,CAAAd,sBAAA,GAAAA,sBAAA"}

package/lib/commonjs/createStyleSheet.js.map

@@ -1 +1 @@
-{"version":3,"names":["createStyleSheet","styles","exports"],"sourceRoot":"../../src","sources":["createStyleSheet.ts"],"mappings":";;;;;;AAKO,MAAMA,gBAAgB,GAAuCC,MAA+E,IAAY;EAC3J,IAAI,OAAOA,MAAM,KAAK,UAAU,EAAE;IAC9B,OAAOA,MAAM;EACjB;EAEA,OAAOA,MAAM;AACjB,CAAC;AAAAC,OAAA,CAAAF,gBAAA,GAAAA,gBAAA"}
+{"version":3,"names":["createStyleSheet","styles","exports"],"sourceRoot":"../../src","sources":["createStyleSheet.ts"],"mappings":";;;;;;AAEO,MAAMA,gBAAgB,GAAUC,MAA4F,IAAY;EAC3I,IAAI,OAAOA,MAAM,KAAK,UAAU,EAAE;IAC9B,OAAOA,MAAM;EACjB;EAEA,OAAOA,MAAM;AACjB,CAAC;AAAAC,OAAA,CAAAF,gBAAA,GAAAA,gBAAA"}

package/lib/commonjs/index.js

@@ -16,6 +16,12 @@ Object.defineProperty(exports, "createStyleSheet", {
     return _createStyleSheet.createStyleSheet;
   }
 });
+Object.defineProperty(exports, "mq", {
+  enumerable: true,
+  get: function () {
+    return _utils.mq;
+  }
+});
 Object.defineProperty(exports, "useInitialTheme", {
   enumerable: true,
   get: function () {
@@ -30,6 +36,7 @@ Object.defineProperty(exports, "useStyles", {
 });
 var _Unistyles = require("./Unistyles");
 var _types = require("./types");
+var _utils = require("./utils");
 var _useInitialTheme = require("./useInitialTheme");
 var _useStyles = require("./useStyles");
 var _createStyleSheet = require("./createStyleSheet");

package/lib/commonjs/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_Unistyles","require","_types","_useInitialTheme","_useStyles","_createStyleSheet","addThemes","addBreakpoints","addConfig","unistyles","registry","UnistylesRuntime","exports","runtime","UnistylesRegistry","__dangerouslyUnregister","dangerouslyUnregister"],"sourceRoot":"../../src","sources":["index.ts"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,UAAA,GAAAC,OAAA;AAEA,IAAAC,MAAA,GAAAD,OAAA;AAEA,IAAAE,gBAAA,GAAAF,OAAA;AAEA,IAAAG,UAAA,GAAAH,OAAA;AACA,IAAAI,iBAAA,GAAAJ,OAAA;AAEA,MAAM;EAAEK,SAAS;EAAEC,cAAc;EAAEC;AAAW,CAAC,GAAGC,oBAAS,CAACC,QAAQ;AACpE,MAAMC,gBAAgB,GAAAC,OAAA,CAAAD,gBAAA,GAAGF,oBAAS,CAACI,OAAO;AAC1C,MAAMC,iBAAiB,GAAAF,OAAA,CAAAE,iBAAA,GAAG;EACtBR,SAAS;EACTC,cAAc;EACdC;AACJ,CAAC;AAEM,MAAMO,uBAAuB,GAAAH,OAAA,CAAAG,uBAAA,GAAGN,oBAAS,CAACC,QAAQ,CAACM,qBAAqB"}
+{"version":3,"names":["_Unistyles","require","_types","_utils","_useInitialTheme","_useStyles","_createStyleSheet","addThemes","addBreakpoints","addConfig","unistyles","registry","UnistylesRuntime","exports","runtime","UnistylesRegistry","__dangerouslyUnregister","dangerouslyUnregister"],"sourceRoot":"../../src","sources":["index.ts"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,UAAA,GAAAC,OAAA;AAEA,IAAAC,MAAA,GAAAD,OAAA;AAEA,IAAAE,MAAA,GAAAF,OAAA;AACA,IAAAG,gBAAA,GAAAH,OAAA;AAEA,IAAAI,UAAA,GAAAJ,OAAA;AACA,IAAAK,iBAAA,GAAAL,OAAA;AAEA,MAAM;EAAEM,SAAS;EAAEC,cAAc;EAAEC;AAAW,CAAC,GAAGC,oBAAS,CAACC,QAAQ;AACpE,MAAMC,gBAAgB,GAAAC,OAAA,CAAAD,gBAAA,GAAGF,oBAAS,CAACI,OAAO;AAC1C,MAAMC,iBAAiB,GAAAF,OAAA,CAAAE,iBAAA,GAAG;EACtBR,SAAS;EACTC,cAAc;EACdC;AACJ,CAAC;AAEM,MAAMO,uBAAuB,GAAAH,OAAA,CAAAG,uBAAA,GAAGN,oBAAS,CAACC,QAAQ,CAACM,qBAAqB"}

package/lib/commonjs/types/cxx.js.map

@@ -1 +1 @@
-{"version":3,"names":["ScreenOrientation","exports","CxxUnistylesEventTypes","UnistylesError"],"sourceRoot":"../../../src","sources":["types/cxx.ts"],"mappings":";;;;;;IAUYA,iBAAiB,GAAAC,OAAA,CAAAD,iBAAA,0BAAjBA,iBAAiB;EAAjBA,iBAAiB,CAAjBA,iBAAiB;EAAjBA,iBAAiB,CAAjBA,iBAAiB;EAAA,OAAjBA,iBAAiB;AAAA;AAAA,IAyBjBE,sBAAsB,GAAAD,OAAA,CAAAC,sBAAA,0BAAtBA,sBAAsB;EAAtBA,sBAAsB;EAAtBA,sBAAsB;EAAA,OAAtBA,sBAAsB;AAAA;AAAA,IAuBtBC,cAAc,GAAAF,OAAA,CAAAE,cAAA,0BAAdA,cAAc;EAAdA,cAAc;EAAdA,cAAc;EAAdA,cAAc;EAAdA,cAAc;EAAdA,cAAc;EAAdA,cAAc;EAAA,OAAdA,cAAc;AAAA"}
+{"version":3,"names":["ScreenOrientation","exports","CxxUnistylesEventTypes","UnistylesError"],"sourceRoot":"../../../src","sources":["types/cxx.ts"],"mappings":";;;;;;IAYYA,iBAAiB,GAAAC,OAAA,CAAAD,iBAAA,0BAAjBA,iBAAiB;EAAjBA,iBAAiB,CAAjBA,iBAAiB;EAAjBA,iBAAiB,CAAjBA,iBAAiB;EAAA,OAAjBA,iBAAiB;AAAA;AAAA,IAyBjBE,sBAAsB,GAAAD,OAAA,CAAAC,sBAAA,0BAAtBA,sBAAsB;EAAtBA,sBAAsB;EAAtBA,sBAAsB;EAAA,OAAtBA,sBAAsB;AAAA;AAAA,IAuBtBC,cAAc,GAAAF,OAAA,CAAAE,cAAA,0BAAdA,cAAc;EAAdA,cAAc;EAAdA,cAAc;EAAdA,cAAc;EAAdA,cAAc;EAAdA,cAAc;EAAdA,cAAc;EAAA,OAAdA,cAAc;AAAA"}

package/lib/commonjs/useStyles.js

@@ -8,8 +8,6 @@ var _react = require("react");
 var _reactNative = require("react-native");
 var _utils = require("./utils");
 var _useUnistyles = require("./useUnistyles");
-// todo types
-
 const useStyles = stylesheet => {
   const {
     theme,

package/lib/commonjs/useStyles.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","require","_reactNative","_utils","_useUnistyles","useStyles","stylesheet","theme","breakpoint","screenSize","useUnistyles","styles","parsedStyles","useMemo","dynamicStyleSheet","Object","entries","reduce","acc","_ref","key","value","style","proxifyFunction","StyleSheet","create","parseStyle","exports"],"sourceRoot":"../../src","sources":["useStyles.ts"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AACA,IAAAE,MAAA,GAAAF,OAAA;AAEA,IAAAG,aAAA,GAAAH,OAAA;AAGA;;AAGO,MAAMI,SAAS,GAAsCC,UAA4C,IAAK;EACzG,MAAM;IAAEC,KAAK;IAAEC,UAAU;IAAEC;EAAW,CAAC,GAAG,IAAAC,0BAAY,EAAC,CAAC;EAExD,IAAI,CAACJ,UAAU,EAAE;IACb,OAAO;MACHC,KAAK;MACLC,UAAU;MACVG,MAAM,EAAE,CAAC;IACb,CAAC;EACL;EAEA,MAAMC,YAAY,GAAG,IAAAC,cAAO,EAAC,MAAM,OAAOP,UAAU,KAAK,UAAU,GAC7DA,UAAU,CAACC,KAAM,CAAC,GAClBD,UAAU,EAAE,CAACC,KAAK,EAAED,UAAU,CAAC,CAAC;EAEtC,MAAMQ,iBAAiB,GAAG,IAAAD,cAAO,EAAC,MAAME,MAAM,CACzCC,OAAO,CAACJ,YAAY,CAAC,CACrBK,MAAM,CAAC,CAACC,GAAG,EAAAC,IAAA,KAAmB;IAAA,IAAjB,CAACC,GAAG,EAAEC,KAAK,CAAC,GAAAF,IAAA;IACtB,MAAMG,KAAK,GAAGD,KAA8B;IAE5C,IAAI,OAAOA,KAAK,KAAK,UAAU,EAAE;MAC7B,OAAO;QACH,GAAGH,GAAG;QACN,CAACE,GAAG,GAAG,IAAAG,sBAAe,EAACF,KAAK,EAAEb,UAAU,EAAEC,UAAU;MACxD,CAAC;IACL;IAEA,OAAOe,uBAAU,CAACC,MAAM,CAAC;MACrB,GAAGP,GAAG;MACN,CAACE,GAAG,GAAG,IAAAM,iBAAU,EAAKJ,KAAK,EAAEd,UAAU,EAAEC,UAAU;IACvD,CAAC,CAAC;EACN,CAAC,EAAE,CAAC,CAAO,CAAC,EAAE,CAACD,UAAU,EAAEC,UAAU,EAAEG,YAAY,CAAC,CAAC;EAEzD,OAAO;IACHL,KAAK;IACLC,UAAU;IACVG,MAAM,EAAEG;EACZ,CAAC;AACL,CAAC;AAAAa,OAAA,CAAAtB,SAAA,GAAAA,SAAA"}
+{"version":3,"names":["_react","require","_reactNative","_utils","_useUnistyles","useStyles","stylesheet","theme","breakpoint","screenSize","useUnistyles","styles","parsedStyles","useMemo","dynamicStyleSheet","Object","entries","reduce","acc","_ref","key","value","style","proxifyFunction","StyleSheet","create","parseStyle","exports"],"sourceRoot":"../../src","sources":["useStyles.ts"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AACA,IAAAE,MAAA,GAAAF,OAAA;AAEA,IAAAG,aAAA,GAAAH,OAAA;AAGO,MAAMI,SAAS,GAAsCC,UAAyD,IAAK;EACtH,MAAM;IAAEC,KAAK;IAAEC,UAAU;IAAEC;EAAW,CAAC,GAAG,IAAAC,0BAAY,EAAC,CAAC;EAExD,IAAI,CAACJ,UAAU,EAAE;IACb,OAAO;MACHC,KAAK;MACLC,UAAU;MACVG,MAAM,EAAE,CAAC;IACb,CAAC;EACL;EAEA,MAAMC,YAAY,GAAG,IAAAC,cAAO,EAAC,MAAM,OAAOP,UAAU,KAAK,UAAU,GAC7DA,UAAU,CAACC,KAAK,CAAC,GACjBD,UAAU,EAAE,CAACC,KAAK,EAAED,UAAU,CAAC,CAAC;EAEtC,MAAMQ,iBAAiB,GAAG,IAAAD,cAAO,EAAC,MAAME,MAAM,CACzCC,OAAO,CAACJ,YAAY,CAAC,CACrBK,MAAM,CAAC,CAACC,GAAG,EAAAC,IAAA,KAAmB;IAAA,IAAjB,CAACC,GAAG,EAAEC,KAAK,CAAC,GAAAF,IAAA;IACtB,MAAMG,KAAK,GAAGD,KAA8B;IAE5C,IAAI,OAAOA,KAAK,KAAK,UAAU,EAAE;MAC7B,OAAO;QACH,GAAGH,GAAG;QACN,CAACE,GAAG,GAAG,IAAAG,sBAAe,EAACF,KAAK,EAAEb,UAAU,EAAEC,UAAU;MACxD,CAAC;IACL;IAEA,OAAOe,uBAAU,CAACC,MAAM,CAAC;MACrB,GAAGP,GAAG;MACN,CAACE,GAAG,GAAG,IAAAM,iBAAU,EAAKJ,KAAK,EAAEd,UAAU,EAAEC,UAAU;IACvD,CAAC,CAAC;EACN,CAAC,EAAE,CAAC,CAAO,CAAC,EAAE,CAACD,UAAU,EAAEC,UAAU,EAAEG,YAAY,CAAC,CAAC;EAEzD,OAAO;IACHL,KAAK;IACLC,UAAU;IACVG,MAAM,EAAEG;EACZ,CAAC;AACL,CAAC;AAAAa,OAAA,CAAAtB,SAAA,GAAAA,SAAA"}

package/lib/commonjs/useUnistyles.js.map

@@ -1 +1 @@
-{"version":3,"names":["_reactNative","require","_react","_types","_Unistyles","unistylesEvents","NativeEventEmitter","NativeModules","Unistyles","useUnistyles","orientation","setOrientation","useState","unistyles","runtime","theme","setTheme","getTheme","themeName","breakpoint","setBreakpoint","screenSize","setScreenSize","width","screen","height","useEffect","subscription","addListener","event","type","CxxUnistylesEventTypes","Theme","themeEvent","payload","Layout","layoutEvent","remove","exports"],"sourceRoot":"../../src","sources":["useUnistyles.ts"],"mappings":";;;;;;AAAA,IAAAA,YAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAD,OAAA;AAEA,IAAAE,MAAA,GAAAF,OAAA;AACA,IAAAG,UAAA,GAAAH,OAAA;AAEA,MAAMI,eAAe,GAAG,IAAIC,+BAAkB,CAACC,0BAAa,CAACC,SAAS,CAAC;AAEhE,MAAMC,YAAY,GAAGA,CAAA,KAAM;EAC9B,MAAM,CAACC,WAAW,EAAEC,cAAc,CAAC,GAAG,IAAAC,eAAQ,EAAoBC,oBAAS,CAACC,OAAO,CAACJ,WAAW,CAAC;EAChG,MAAM,CAACK,KAAK,EAAEC,QAAQ,CAAC,GAAG,IAAAJ,eAAQ,EAACC,oBAAS,CAACC,OAAO,CAACG,QAAQ,CAACJ,oBAAS,CAACC,OAAO,CAACI,SAAS,CAAC,CAAC;EAC3F,MAAM,CAACC,UAAU,EAAEC,aAAa,CAAC,GAAG,IAAAR,eAAQ,EAACC,oBAAS,CAACC,OAAO,CAACK,UAAU,CAAC;EAC1E,MAAM,CAACE,UAAU,EAAEC,aAAa,CAAC,GAAG,IAAAV,eAAQ,EAAC;IACzCW,KAAK,EAAEV,oBAAS,CAACC,OAAO,CAACU,MAAM,CAACD,KAAK;IACrCE,MAAM,EAAEZ,oBAAS,CAACC,OAAO,CAACU,MAAM,CAACC;EACrC,CAAC,CAAC;EAEF,IAAAC,gBAAS,EAAC,MAAM;IACZ,MAAMC,YAAY,GAAGtB,eAAe,CAACuB,WAAW,CAC5C,UAAU,EACTC,KAAsB,IAAK;MACxB,QAAQA,KAAK,CAACC,IAAI;QACd,KAAKC,6BAAsB,CAACC,KAAK;UAAE;YAC/B,MAAMC,UAAU,GAAGJ,KAA4B;YAE/Cb,QAAQ,CAACH,oBAAS,CAACC,OAAO,CAACG,QAAQ,CAACgB,UAAU,CAACC,OAAO,CAAChB,SAAS,CAAC,CAAC;YAElE;UACJ;QACA,KAAKa,6BAAsB,CAACI,MAAM;UAAE;YAChC,MAAMC,WAAW,GAAGP,KAAmC;YAEvDT,aAAa,CAACgB,WAAW,CAACF,OAAO,CAACf,UAAU,CAAC;YAC7CR,cAAc,CAACyB,WAAW,CAACF,OAAO,CAACxB,WAAW,CAAC;YAC/CY,aAAa,CAACc,WAAW,CAACF,OAAO,CAACV,MAAM,CAAC;YAEzC;UACJ;QACA;UACI;MACR;IACJ,CACJ,CAAC;IAED,OAAOG,YAAY,CAACU,MAAM;EAC9B,CAAC,EAAE,EAAE,CAAC;EAEN,OAAO;IACHtB,KAAK;IACLL,WAAW;IACXS,UAAU;IACVE;EACJ,CAAC;AACL,CAAC;AAAAiB,OAAA,CAAA7B,YAAA,GAAAA,YAAA"}
+{"version":3,"names":["_reactNative","require","_react","_types","_Unistyles","unistylesEvents","NativeEventEmitter","NativeModules","Unistyles","useUnistyles","orientation","setOrientation","useState","unistyles","runtime","theme","setTheme","getTheme","themeName","breakpoint","setBreakpoint","screenSize","setScreenSize","width","screen","height","useEffect","subscription","addListener","event","type","CxxUnistylesEventTypes","Theme","themeEvent","payload","Layout","layoutEvent","remove","exports"],"sourceRoot":"../../src","sources":["useUnistyles.ts"],"mappings":";;;;;;AAAA,IAAAA,YAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAD,OAAA;AAQA,IAAAE,MAAA,GAAAF,OAAA;AACA,IAAAG,UAAA,GAAAH,OAAA;AAGA,MAAMI,eAAe,GAAG,IAAIC,+BAAkB,CAACC,0BAAa,CAACC,SAAS,CAAC;AAEhE,MAAMC,YAAY,GAAGA,CAAA,KAAM;EAC9B,MAAM,CAACC,WAAW,EAAEC,cAAc,CAAC,GAAG,IAAAC,eAAQ,EAAoBC,oBAAS,CAACC,OAAO,CAACJ,WAAW,CAAC;EAChG,MAAM,CAACK,KAAK,EAAEC,QAAQ,CAAC,GAAG,IAAAJ,eAAQ,EAAiBC,oBAAS,CAACC,OAAO,CAACG,QAAQ,CAACJ,oBAAS,CAACC,OAAO,CAACI,SAAS,CAAC,CAAC;EAC3G,MAAM,CAACC,UAAU,EAAEC,aAAa,CAAC,GAAG,IAAAR,eAAQ,EAA6BC,oBAAS,CAACC,OAAO,CAACK,UAAU,CAAC;EACtG,MAAM,CAACE,UAAU,EAAEC,aAAa,CAAC,GAAG,IAAAV,eAAQ,EAAa;IACrDW,KAAK,EAAEV,oBAAS,CAACC,OAAO,CAACU,MAAM,CAACD,KAAK;IACrCE,MAAM,EAAEZ,oBAAS,CAACC,OAAO,CAACU,MAAM,CAACC;EACrC,CAAC,CAAC;EAEF,IAAAC,gBAAS,EAAC,MAAM;IACZ,MAAMC,YAAY,GAAGtB,eAAe,CAACuB,WAAW,CAC5C,UAAU,EACTC,KAAsB,IAAK;MACxB,QAAQA,KAAK,CAACC,IAAI;QACd,KAAKC,6BAAsB,CAACC,KAAK;UAAE;YAC/B,MAAMC,UAAU,GAAGJ,KAA4B;YAE/Cb,QAAQ,CAACH,oBAAS,CAACC,OAAO,CAACG,QAAQ,CAACgB,UAAU,CAACC,OAAO,CAAChB,SAAS,CAAC,CAAC;YAElE;UACJ;QACA,KAAKa,6BAAsB,CAACI,MAAM;UAAE;YAChC,MAAMC,WAAW,GAAGP,KAAmC;YAEvDT,aAAa,CAACgB,WAAW,CAACF,OAAO,CAACf,UAAU,CAAC;YAC7CR,cAAc,CAACyB,WAAW,CAACF,OAAO,CAACxB,WAAW,CAAC;YAC/CY,aAAa,CAACc,WAAW,CAACF,OAAO,CAACV,MAAM,CAAC;YAEzC;UACJ;QACA;UACI;MACR;IACJ,CACJ,CAAC;IAED,OAAOG,YAAY,CAACU,MAAM;EAC9B,CAAC,EAAE,EAAE,CAAC;EAEN,OAAO;IACHtB,KAAK;IACLL,WAAW;IACXS,UAAU;IACVE;EACJ,CAAC;AACL,CAAC;AAAAiB,OAAA,CAAA7B,YAAA,GAAAA,YAAA"}

package/lib/commonjs/utils/breakpoints.js

@@ -7,26 +7,6 @@ exports.sortAndValidateBreakpoints = exports.getValueForBreakpoint = exports.get
 var _Unistyles = require("../Unistyles");
 var _common = require("./common");
 var _types = require("../types");
-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;
@@ -44,22 +24,6 @@ const sortAndValidateBreakpoints = breakpoints => {
   }
   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 breakpointEntries - sorted pairs of breakpoints
- * @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, breakpointEntries) => {
   const [key] = breakpointEntries.find((_ref, index, otherBreakpoints) => {
@@ -73,39 +37,15 @@ const getBreakpointFromScreenWidth = (width, breakpointEntries) => {
   });
   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 breakpointPairs - sorted pairs of 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) => {
+const getValueForBreakpoint = value => {
   // the highest priority is for custom media queries
   const customMediaQueries = Object.entries(value).filter(_ref2 => {
     let [key] = _ref2;
-    return (0, _mediaQueries.isMediaQuery)(key);
+    return _Unistyles.unistyles.engine.isMediaQuery(key);
   });
-  const customMediaQueryKey = (0, _mediaQueries.getKeyForCustomMediaQuery)(customMediaQueries, screenSize);
+  // const customMediaQueryKey = getKeyForCustomMediaQuery(customMediaQueries, screenSize) as keyof typeof value
+  const customMediaQueryKey = _Unistyles.unistyles.engine.didMatchMediaQuery(customMediaQueries);
   if (customMediaQueryKey && customMediaQueryKey in value) {
     return value[customMediaQueryKey];
   }
@@ -118,13 +58,16 @@ const getValueForBreakpoint = (value, breakpoint, screenSize) => {
   if (!hasBreakpoints && _common.isMobile && (_common.Orientation.Landscape in value || _common.Orientation.Portrait in value)) {
     return value[_Unistyles.unistyles.runtime.orientation === _types.ScreenOrientation.Portrait ? _common.Orientation.Portrait : _common.Orientation.Landscape];
   }
+  const breakpoint = _Unistyles.unistyles.runtime.breakpoint;
+  if (!breakpoint) {
+    return undefined;
+  }
 
   // if user defined breakpoints, then we look for the valid one
-  const unifiedKey = breakpoint?.toLowerCase();
-  const directBreakpoint = value[unifiedKey];
+  const directBreakpoint = value[breakpoint];
 
   // if there is a direct key like 'sm' or 'md', or value for this key exists but its undefined
-  if (directBreakpoint || unifiedKey in value) {
+  if (directBreakpoint || breakpoint in value) {
     return directBreakpoint;
   }
 
@@ -132,7 +75,7 @@ const getValueForBreakpoint = (value, breakpoint, screenSize) => {
   const breakpointPairs = _Unistyles.unistyles.runtime.sortedBreakpoints;
   const currentBreakpoint = breakpointPairs.findIndex(_ref3 => {
     let [key] = _ref3;
-    return key === unifiedKey;
+    return key === breakpoint;
   });
   const availableBreakpoints = breakpointPairs.filter((_ref4, index) => {
     let [key] = _ref4;

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

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

package/lib/commonjs/utils/common.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.warn = exports.throwError = exports.isWeb = exports.isServer = exports.isMobile = exports.Orientation = void 0;
+exports.warn = exports.throwError = exports.isWeb = exports.isServer = exports.isMobile = exports.isIOS = exports.isAndroid = exports.Orientation = void 0;
 var _reactNative = require("react-native");
 const throwError = message => {
   throw new Error(`🦄 [react-native-unistyles]: ${message}`);
@@ -15,6 +15,8 @@ const warn = message => {
 exports.warn = warn;
 const isMobile = exports.isMobile = _reactNative.Platform.OS === 'android' || _reactNative.Platform.OS === 'ios';
 const isWeb = exports.isWeb = _reactNative.Platform.OS === 'web';
+const isIOS = exports.isIOS = _reactNative.Platform.OS === 'ios';
+const isAndroid = exports.isAndroid = _reactNative.Platform.OS === 'android';
 const isServer = exports.isServer = typeof window === 'undefined';
 const Orientation = exports.Orientation = {
   Landscape: 'landscape',

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

@@ -1 +1 @@
-{"version":3,"names":["_reactNative","require","throwError","message","Error","exports","warn","console","isMobile","Platform","OS","isWeb","isServer","window","Orientation","Landscape","Portrait"],"sourceRoot":"../../../src","sources":["utils/common.ts"],"mappings":";;;;;;AAAA,IAAAA,YAAA,GAAAC,OAAA;AAEO,MAAMC,UAAU,GAAIC,OAAe,IAAK;EAC3C,MAAM,IAAIC,KAAK,CAAE,gCAA+BD,OAAQ,EAAC,CAAC;AAC9D,CAAC;AAAAE,OAAA,CAAAH,UAAA,GAAAA,UAAA;AAEM,MAAMI,IAAI,GAAIH,OAAe,IAAK;EACrCI,OAAO,CAACD,IAAI,CAAE,gCAA+BH,OAAQ,EAAC,CAAC;AAC3D,CAAC;AAAAE,OAAA,CAAAC,IAAA,GAAAA,IAAA;AAEM,MAAME,QAAQ,GAAAH,OAAA,CAAAG,QAAA,GAAGC,qBAAQ,CAACC,EAAE,KAAK,SAAS,IAAID,qBAAQ,CAACC,EAAE,KAAK,KAAK;AACnE,MAAMC,KAAK,GAAAN,OAAA,CAAAM,KAAA,GAAGF,qBAAQ,CAACC,EAAE,KAAK,KAAK;AACnC,MAAME,QAAQ,GAAAP,OAAA,CAAAO,QAAA,GAAG,OAAOC,MAAM,KAAK,WAAW;AAE9C,MAAMC,WAAW,GAAAT,OAAA,CAAAS,WAAA,GAAG;EACvBC,SAAS,EAAE,WAAW;EACtBC,QAAQ,EAAE;AACd,CAAU"}
+{"version":3,"names":["_reactNative","require","throwError","message","Error","exports","warn","console","isMobile","Platform","OS","isWeb","isIOS","isAndroid","isServer","window","Orientation","Landscape","Portrait"],"sourceRoot":"../../../src","sources":["utils/common.ts"],"mappings":";;;;;;AAAA,IAAAA,YAAA,GAAAC,OAAA;AAEO,MAAMC,UAAU,GAAIC,OAAe,IAAK;EAC3C,MAAM,IAAIC,KAAK,CAAE,gCAA+BD,OAAQ,EAAC,CAAC;AAC9D,CAAC;AAAAE,OAAA,CAAAH,UAAA,GAAAA,UAAA;AAEM,MAAMI,IAAI,GAAIH,OAAe,IAAK;EACrCI,OAAO,CAACD,IAAI,CAAE,gCAA+BH,OAAQ,EAAC,CAAC;AAC3D,CAAC;AAAAE,OAAA,CAAAC,IAAA,GAAAA,IAAA;AAEM,MAAME,QAAQ,GAAAH,OAAA,CAAAG,QAAA,GAAGC,qBAAQ,CAACC,EAAE,KAAK,SAAS,IAAID,qBAAQ,CAACC,EAAE,KAAK,KAAK;AACnE,MAAMC,KAAK,GAAAN,OAAA,CAAAM,KAAA,GAAGF,qBAAQ,CAACC,EAAE,KAAK,KAAK;AACnC,MAAME,KAAK,GAAAP,OAAA,CAAAO,KAAA,GAAGH,qBAAQ,CAACC,EAAE,KAAK,KAAK;AACnC,MAAMG,SAAS,GAAAR,OAAA,CAAAQ,SAAA,GAAGJ,qBAAQ,CAACC,EAAE,KAAK,SAAS;AAC3C,MAAMI,QAAQ,GAAAT,OAAA,CAAAS,QAAA,GAAG,OAAOC,MAAM,KAAK,WAAW;AAE9C,MAAMC,WAAW,GAAAX,OAAA,CAAAW,WAAA,GAAG;EACvBC,SAAS,EAAE,WAAW;EACtBC,QAAQ,EAAE;AACd,CAAU"}