react-native-unistyles 2.0.0-alpha.4 → 2.0.0-alpha.6

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/ios/UnistylesModule.mm

@@ -122,11 +122,16 @@ void registerUnistylesHostObject(jsi::Runtime &runtime, UnistylesModule* weakSel
 
         [weakSelf emitEvent:@"onChange" withBody:body];
     };
-    UnistylesBreakpointChangeEvent onBreakpointChange = ^(std::string breakpoint) {
+    UnistylesBreakpointChangeEvent onBreakpointChange = ^(std::string breakpoint, int orientation, int width, int height) {
         NSDictionary *body = @{
-            @"type": @"breakpoint",
+            @"type": @"layout",
             @"payload": @{
-                @"breakpoint": cxxStringToNSString(breakpoint)
+                @"breakpoint": cxxStringToNSString(breakpoint),
+                @"orientation": @(orientation),
+                @"screen": @{
+                    @"width": @(width),
+                    @"height": @(height)
+                }
             }
         };
 

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/types/cxx.js

@@ -11,8 +11,7 @@ let ScreenOrientation = exports.ScreenOrientation = /*#__PURE__*/function (Scree
 }({});
 let CxxUnistylesEventTypes = exports.CxxUnistylesEventTypes = /*#__PURE__*/function (CxxUnistylesEventTypes) {
   CxxUnistylesEventTypes["Theme"] = "theme";
-  CxxUnistylesEventTypes["Size"] = "size";
-  CxxUnistylesEventTypes["Breakpoint"] = "breakpoint";
+  CxxUnistylesEventTypes["Layout"] = "layout";
   return CxxUnistylesEventTypes;
 }({});
 let UnistylesError = exports.UnistylesError = /*#__PURE__*/function (UnistylesError) {

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

@@ -1 +1 @@
-{"version":3,"names":["ScreenOrientation","exports","CxxUnistylesEventTypes","UnistylesError"],"sourceRoot":"../../../src","sources":["types/cxx.ts"],"mappings":";;;;;;IASYA,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;EAAtBA,sBAAsB;EAAA,OAAtBA,sBAAsB;AAAA;AAAA,IA8BtBC,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,EAAGC,UAAU;MACzD,CAAC;IACL;IAEA,OAAOe,uBAAU,CAACC,MAAM,CAAC;MACrB,GAAGP,GAAG;MACN,CAACE,GAAG,GAAG,IAAAM,iBAAU,EAAKJ,KAAK,EAAEd,UAAU,EAAGC,UAAU;IACxD,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

@@ -10,11 +10,12 @@ var _types = require("./types");
 var _Unistyles = require("./Unistyles");
 const unistylesEvents = new _reactNative.NativeEventEmitter(_reactNative.NativeModules.Unistyles);
 const useUnistyles = () => {
+  const [orientation, setOrientation] = (0, _react.useState)(_Unistyles.unistyles.runtime.orientation);
   const [theme, setTheme] = (0, _react.useState)(_Unistyles.unistyles.runtime.getTheme(_Unistyles.unistyles.runtime.themeName));
   const [breakpoint, setBreakpoint] = (0, _react.useState)(_Unistyles.unistyles.runtime.breakpoint);
   const [screenSize, setScreenSize] = (0, _react.useState)({
-    width: 0,
-    height: 0
+    width: _Unistyles.unistyles.runtime.screen.width,
+    height: _Unistyles.unistyles.runtime.screen.height
   });
   (0, _react.useEffect)(() => {
     const subscription = unistylesEvents.addListener('onChange', event => {
@@ -25,20 +26,12 @@ const useUnistyles = () => {
             setTheme(_Unistyles.unistyles.runtime.getTheme(themeEvent.payload.themeName));
             return;
           }
-        // this event is not available on mobile
-        case _types.CxxUnistylesEventTypes.Size:
+        case _types.CxxUnistylesEventTypes.Layout:
           {
-            const sizeEvent = event;
-            setScreenSize({
-              width: sizeEvent.payload.width,
-              height: sizeEvent.payload.height
-            });
-            return;
-          }
-        case _types.CxxUnistylesEventTypes.Breakpoint:
-          {
-            const breakpointEvent = event;
-            setBreakpoint(breakpointEvent.payload.breakpoint);
+            const layoutEvent = event;
+            setBreakpoint(layoutEvent.payload.breakpoint);
+            setOrientation(layoutEvent.payload.orientation);
+            setScreenSize(layoutEvent.payload.screen);
             return;
           }
         default:
@@ -49,6 +42,7 @@ const useUnistyles = () => {
   }, []);
   return {
     theme,
+    orientation,
     breakpoint,
     screenSize
   };

package/lib/commonjs/useUnistyles.js.map

@@ -1 +1 @@
-{"version":3,"names":["_reactNative","require","_react","_types","_Unistyles","unistylesEvents","NativeEventEmitter","NativeModules","Unistyles","useUnistyles","theme","setTheme","useState","unistyles","runtime","getTheme","themeName","breakpoint","setBreakpoint","screenSize","setScreenSize","width","height","useEffect","subscription","addListener","event","type","CxxUnistylesEventTypes","Theme","themeEvent","payload","Size","sizeEvent","Breakpoint","breakpointEvent","remove","exports"],"sourceRoot":"../../src","sources":["useUnistyles.ts"],"mappings":";;;;;;AAAA,IAAAA,YAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAD,OAAA;AAOA,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,KAAK,EAAEC,QAAQ,CAAC,GAAG,IAAAC,eAAQ,EAACC,oBAAS,CAACC,OAAO,CAACC,QAAQ,CAACF,oBAAS,CAACC,OAAO,CAACE,SAAS,CAAC,CAAC;EAC3F,MAAM,CAACC,UAAU,EAAEC,aAAa,CAAC,GAAG,IAAAN,eAAQ,EAACC,oBAAS,CAACC,OAAO,CAACG,UAAU,CAAC;EAC1E,MAAM,CAACE,UAAU,EAAEC,aAAa,CAAC,GAAG,IAAAR,eAAQ,EAAC;IACzCS,KAAK,EAAE,CAAC;IACRC,MAAM,EAAE;EACZ,CAAC,CAAC;EAEF,IAAAC,gBAAS,EAAC,MAAM;IACZ,MAAMC,YAAY,GAAGnB,eAAe,CAACoB,WAAW,CAC5C,UAAU,EACTC,KAAsB,IAAK;MACxB,QAAQA,KAAK,CAACC,IAAI;QACd,KAAKC,6BAAsB,CAACC,KAAK;UAAE;YAC/B,MAAMC,UAAU,GAAGJ,KAA+B;YAElDf,QAAQ,CAACE,oBAAS,CAACC,OAAO,CAACC,QAAQ,CAACe,UAAU,CAACC,OAAO,CAACf,SAAS,CAAC,CAAC;YAElE;UACJ;QACA;QACA,KAAKY,6BAAsB,CAACI,IAAI;UAAE;YAC9B,MAAMC,SAAS,GAAGP,KAA8B;YAEhDN,aAAa,CAAC;cACVC,KAAK,EAAEY,SAAS,CAACF,OAAO,CAACV,KAAK;cAC9BC,MAAM,EAAEW,SAAS,CAACF,OAAO,CAACT;YAC9B,CAAC,CAAC;YAEF;UACJ;QACA,KAAKM,6BAAsB,CAACM,UAAU;UAAE;YACpC,MAAMC,eAAe,GAAGT,KAAoC;YAE5DR,aAAa,CAACiB,eAAe,CAACJ,OAAO,CAACd,UAAU,CAAC;YAEjD;UACJ;QACA;UACI;MACR;IACJ,CACJ,CAAC;IAED,OAAOO,YAAY,CAACY,MAAM;EAC9B,CAAC,EAAE,EAAE,CAAC;EAEN,OAAO;IACH1B,KAAK;IACLO,UAAU;IACVE;EACJ,CAAC;AACL,CAAC;AAAAkB,OAAA,CAAA5B,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;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"}

package/lib/commonjs/utils/breakpoints.js

@@ -6,26 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.sortAndValidateBreakpoints = exports.getValueForBreakpoint = exports.getBreakpointFromScreenWidth = void 0;
 var _Unistyles = require("../Unistyles");
 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 }
- */
+var _types = require("../types");
 const sortAndValidateBreakpoints = breakpoints => {
   const sortedPairs = Object.entries(breakpoints).sort((breakpoint1, breakpoint2) => {
     const [, value1] = breakpoint1;
@@ -43,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) => {
@@ -72,57 +37,45 @@ 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];
   }
 
-  // if no custom media query, or didn't match, proceed with defined breakpoints
-  const unifiedKey = breakpoint?.toLowerCase();
-  const directBreakpoint = value[unifiedKey];
+  // at this point user didn't use custom media queries (:w, :h)
+  // check if user defined any breakpoints
+  const hasBreakpoints = _Unistyles.unistyles.runtime.sortedBreakpoints.length > 0;
+
+  // if not then we can fallback to horizontal and portrait (mobile only)
+  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 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;
   }
 
-  // there is no direct hit for breakpoint nor media-query, so let's simulate CSS cascading
+  // there is no direct hit for breakpoint nor media-query, let's simulate CSS cascading
   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;