react-native-unistyles 2.0.0-beta.7 → 2.0.0-rc.2

package/README.md

@@ -1,55 +1,42 @@
-[<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>
+[<img alt="react-native-unistyles" src="assets/banner.png">](https://reactnativeunistyles.vercel.app/)
 
 ![GitHub package.json version](https://img.shields.io/github/package-json/v/jpudysz/react-native-unistyles?style=for-the-badge)
 [![npm downloads](https://img.shields.io/npm/dm/react-native-unistyles.svg?style=for-the-badge)](https://www.npmjs.com/package/react-native-unistyles)
 ![Platform - Android and iOS](https://img.shields.io/badge/platform-Android%20%7C%20IOS%20%7C%20SSR%20%7C%20Web-blue.svg?style=for-the-badge)
 [![License: MIT](https://img.shields.io/badge/License-MIT-green.svg?style=for-the-badge)](https://opensource.org/licenses/MIT)
 
+## [Documentation](https://reactnativeunistyles.vercel.app/)
+- [Start here](https://reactnativeunistyles.vercel.app/start/introduction/)
+- [API](https://reactnativeunistyles.vercel.app/reference/create-stylesheet/)
+- [Show case](https://reactnativeunistyles.vercel.app/show-case/projects/)
+- [Examples](https://reactnativeunistyles.vercel.app/examples/all/)
+
 ## Features
-- ⚡ Blazing fast, adds around ~3ms on top of StyleSheet*
+- 🚀 Shared core with C++ and JSI bindings
+- 🌉 Supports new architecture
+- 🔥 Crazy performance, adds under 0.1 ms to your 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, React Native Web and SSR
+- 🎯 Doesn't introduce new components, everything is packed in one hook
+- ⚛️ No React Context
+- 🖥️ Supports custom breakpoints, css-like media queries and variants
+- 🎨 Register multiple themes and change them with single function call
+- 🥳 Compatible with Expo, Bare React Native, React Native Web and SSR
 - 🛡️ ~99% Test coverage
+- 🔌 Extend stylesheets with your own plugins
 - ⚔️ No 3rd party dependencies
-
-*-based on this [benchmark](https://github.com/efstathiosntonas/react-native-style-libraries-benchmark)
+- and much much more!
 
 ## Installation
 
-```cmd
-yarn add react-native-unistyles
-```
-
-## [Documentation](https://reactnativeunistyles.vercel.app/)
-- [Start here](https://reactnativeunistyles.vercel.app/start/setup/)
-- [References](https://reactnativeunistyles.vercel.app/reference/create-stylesheet/)
-- [Examples](https://reactnativeunistyles.vercel.app/example/breakpoints/)
-
-## Faster, better and simpler - v.2.0 🚀
-
-There is ongoing work on branch [2.0](https://github.com/jpudysz/react-native-unistyles/tree/2.0).
-
----
-
-Join early testers and discussion [here](https://github.com/jpudysz/react-native-unistyles/discussions/41).
-
-```cmd
+```shell
+# Unistyles is currently in RC phase 
 yarn add react-native-unistyles@next
 ```
 
-## Blog post
+## Discord
+Looking for help or you want to chat with me?
 
-Read about what drove me to create this library in this blog post [here](https://www.reactnativecrossroads.com/posts/level-up-react-native-styles).
+[Join Discord](https://discord.gg/akGHf27P4C)
 
 ## Sponsor my work
 

package/lib/commonjs/core/UnistyleRegistry.js

@@ -67,35 +67,25 @@ class UnistyleRegistry {
     }
     throw new Error(_common.UnistylesError.ThemeNotSelected);
   };
-  addPlugin = (() => {
-    var _this = this;
-    return function (plugin) {
-      let notify = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
-      if (plugin.name.startsWith('__unistyles')) {
-        throw new Error(_common.UnistylesError.InvalidPluginName);
-      }
-      if (_this.plugins.some(_ref => {
-        let {
-          name
-        } = _ref;
-        return name === plugin.name;
-      })) {
-        throw new Error(_common.UnistylesError.DuplicatePluginName);
-      }
-      _this.plugins = [plugin].concat(_this.plugins);
-      _this.unistylesBridge.addPlugin(plugin.name, notify);
-    };
-  })();
+  addPlugin = (plugin, notify = true) => {
+    if (plugin.name.startsWith('__unistyles')) {
+      throw new Error(_common.UnistylesError.InvalidPluginName);
+    }
+    if (this.plugins.some(({
+      name
+    }) => name === plugin.name)) {
+      throw new Error(_common.UnistylesError.DuplicatePluginName);
+    }
+    this.plugins = [plugin].concat(this.plugins);
+    this.unistylesBridge.addPlugin(plugin.name, notify);
+  };
   removePlugin = plugin => {
     if (plugin.name.startsWith('__unistyles')) {
       throw new Error(_common.UnistylesError.CantRemoveInternalPlugin);
     }
-    this.plugins = this.plugins.filter(_ref2 => {
-      let {
-        name
-      } = _ref2;
-      return name !== plugin.name;
-    });
+    this.plugins = this.plugins.filter(({
+      name
+    }) => name !== plugin.name);
     this.unistylesBridge.removePlugin(plugin.name);
   };
   hasTheme = name => name in this.themes;

package/lib/commonjs/core/UnistyleRegistry.js.map

@@ -1 +1 @@
-{"version":3,"names":["_common","require","_plugins","UnistyleRegistry","config","plugins","isWeb","normalizeWebStylesPlugin","themeNames","themes","breakpoints","sortedBreakpointPairs","constructor","unistylesBridge","addThemes","keys","Object","addBreakpoints","addConfig","useBreakpoints","adaptiveThemes","useAdaptiveThemes","forEach","plugin","addPlugin","initialTheme","useTheme","experimentalCSSMediaQueries","cssMediaQueriesPlugin","concat","name","getTheme","forName","length","hasTheme","themeName","Error","UnistylesError","ThemeNotFound","ThemeNotSelected","_this","notify","arguments","undefined","startsWith","InvalidPluginName","some","_ref","DuplicatePluginName","removePlugin","CantRemoveInternalPlugin","filter","_ref2","exports"],"sourceRoot":"../../../src","sources":["core/UnistyleRegistry.ts"],"mappings":"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"}
+{"version":3,"names":["_common","require","_plugins","UnistyleRegistry","config","plugins","isWeb","normalizeWebStylesPlugin","themeNames","themes","breakpoints","sortedBreakpointPairs","constructor","unistylesBridge","addThemes","keys","Object","addBreakpoints","addConfig","useBreakpoints","adaptiveThemes","useAdaptiveThemes","forEach","plugin","addPlugin","initialTheme","useTheme","experimentalCSSMediaQueries","cssMediaQueriesPlugin","concat","name","getTheme","forName","length","hasTheme","themeName","Error","UnistylesError","ThemeNotFound","ThemeNotSelected","notify","startsWith","InvalidPluginName","some","DuplicatePluginName","removePlugin","CantRemoveInternalPlugin","filter","exports"],"sourceRoot":"../../../src","sources":["core/UnistyleRegistry.ts"],"mappings":"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"}

package/lib/commonjs/core/UnistylesModule.js

@@ -3,7 +3,192 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.UnistylesModule = void 0;
+exports.UnistylesModule = exports.UnistylesBridgeWeb = void 0;
 var _reactNative = require("react-native");
-const UnistylesModule = exports.UnistylesModule = _reactNative.NativeModules?.Unistyles;
+var _plugins = require("../plugins");
+var _common = require("../common");
+class UnistylesBridgeWeb {
+  #timerRef = undefined;
+  #hasAdaptiveThemes = false;
+  #supportsAutomaticColorScheme = false;
+  #screenWidth = _common.isServer ? undefined : window.innerWidth;
+  #screenHeight = _common.isServer ? undefined : window.innerHeight;
+  #themes = [];
+  #breakpoints = {};
+  #colorScheme = this.getPreferredColorScheme();
+  #themeName = '';
+  #enabledPlugins = [_plugins.normalizeWebStylesPlugin.name];
+  #unistylesEvents = new _reactNative.NativeEventEmitter(_reactNative.NativeModules.Unistyles);
+  #sortedBreakpointPairs = [];
+  #breakpoint = '';
+  constructor() {
+    if (!_common.isServer) {
+      this.setupListeners();
+      this.#screenWidth = window.innerWidth;
+      this.#screenHeight = window.innerHeight;
+    }
+  }
+  install() {
+    // @ts-ignore
+    // eslint-disable-next-line no-undef
+    globalThis.__UNISTYLES__ = new Proxy({}, {
+      get: (_target, prop) => {
+        switch (prop) {
+          case 'themeName':
+            return this.getTheme();
+          case 'screenWidth':
+            return this.#screenWidth;
+          case 'screenHeight':
+            return this.#screenHeight;
+          case 'breakpoint':
+            return this.#breakpoint || undefined;
+          case 'breakpoints':
+            return this.#breakpoints;
+          case 'hasAdaptiveThemes':
+            return this.#hasAdaptiveThemes;
+          case 'sortedBreakpointPairs':
+            return this.#sortedBreakpointPairs;
+          case 'enabledPlugins':
+            return this.#enabledPlugins;
+          case 'colorScheme':
+            return this.#colorScheme;
+          case 'useTheme':
+            return themeName => this.useTheme(themeName);
+          case 'useBreakpoints':
+            return breakpoints => this.useBreakpoints(breakpoints);
+          case 'useAdaptiveThemes':
+            return enable => this.useAdaptiveThemes(enable);
+          case 'addPlugin':
+            return (pluginName, notify) => this.addPlugin(pluginName, notify);
+          case 'removePlugin':
+            return pluginName => this.removePlugin(pluginName);
+          default:
+            return Reflect.get(this, prop);
+        }
+      },
+      set: (target, prop, newValue, receiver) => {
+        switch (prop) {
+          case 'themes':
+            {
+              this.#themes = newValue;
+              this.#supportsAutomaticColorScheme = newValue.includes('light') && newValue.includes('dark');
+              return true;
+            }
+          case 'themeName':
+            {
+              this.#themeName = newValue;
+              this.emitThemeChange();
+              return true;
+            }
+          default:
+            return Reflect.set(target, prop, newValue, receiver);
+        }
+      }
+    });
+    return true;
+  }
+  useTheme(themeName) {
+    this.#themeName = themeName;
+    this.emitThemeChange();
+  }
+  useBreakpoints(breakpoints) {
+    this.#breakpoints = breakpoints;
+    this.#sortedBreakpointPairs = Object.entries(breakpoints).sort(([, a], [, b]) => (a ?? 0) - (b ?? 0));
+    if (!_common.isServer) {
+      this.#breakpoint = this.getBreakpointFromScreenWidth(this.#screenWidth);
+    }
+  }
+  useAdaptiveThemes(enable) {
+    this.#hasAdaptiveThemes = enable;
+    if (!this.#hasAdaptiveThemes || !this.#supportsAutomaticColorScheme) {
+      return;
+    }
+    if (this.#themeName !== this.#colorScheme) {
+      this.#themeName = this.#colorScheme;
+      this.emitThemeChange();
+    }
+  }
+  addPlugin(pluginName, notify) {
+    this.#enabledPlugins = [pluginName].concat(this.#enabledPlugins);
+    if (notify) {
+      this.emitPluginChange();
+    }
+  }
+  removePlugin(pluginName) {
+    this.#enabledPlugins = this.#enabledPlugins.filter(name => name !== pluginName);
+    this.emitPluginChange();
+  }
+  getTheme() {
+    if (this.#themes.length === 1) {
+      return this.#themes.at(0);
+    }
+    return this.#themeName;
+  }
+  setupListeners() {
+    window.addEventListener('resize', () => {
+      clearTimeout(this.#timerRef);
+      this.#timerRef = setTimeout(() => {
+        this.#screenWidth = window.innerWidth;
+        this.#screenHeight = window.innerHeight;
+        this.#breakpoint = this.getBreakpointFromScreenWidth(this.#screenWidth);
+        this.emitLayoutChange();
+      }, 100);
+    });
+    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
+      this.#colorScheme = event.matches ? 'dark' : 'light';
+      if (!this.#supportsAutomaticColorScheme || !this.#hasAdaptiveThemes) {
+        return;
+      }
+      if (this.#colorScheme !== this.#themeName) {
+        this.#themeName = this.#colorScheme;
+        this.emitThemeChange();
+      }
+    });
+  }
+  getBreakpointFromScreenWidth(width) {
+    const breakpoint = this.#sortedBreakpointPairs.find(([, value], index, otherBreakpoints) => {
+      const minVal = value;
+      const maxVal = otherBreakpoints[index + 1]?.[1];
+      if (!maxVal) {
+        return true;
+      }
+      return width >= minVal && width < maxVal;
+    });
+    return breakpoint?.at(0);
+  }
+  getPreferredColorScheme() {
+    if (!_common.isServer && window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+      return 'dark';
+    }
+    return 'light';
+  }
+  emitPluginChange() {
+    this.#unistylesEvents.emit('__unistylesOnChange', {
+      type: 'plugin'
+    });
+  }
+  emitThemeChange() {
+    this.#unistylesEvents.emit('__unistylesOnChange', {
+      type: 'theme',
+      payload: {
+        themeName: this.#themeName
+      }
+    });
+  }
+  emitLayoutChange() {
+    this.#unistylesEvents.emit('__unistylesOnChange', {
+      type: 'layout',
+      payload: {
+        breakpoint: this.#breakpoint,
+        orientation: this.#screenWidth > this.#screenHeight ? 'landscape' : 'portrait',
+        screen: {
+          width: this.#screenWidth,
+          height: this.#screenHeight
+        }
+      }
+    });
+  }
+}
+exports.UnistylesBridgeWeb = UnistylesBridgeWeb;
+const UnistylesModule = exports.UnistylesModule = new UnistylesBridgeWeb();
 //# sourceMappingURL=UnistylesModule.js.map

package/lib/commonjs/core/UnistylesModule.js.map

@@ -1 +1 @@
-{"version":3,"names":["_reactNative","require","UnistylesModule","exports","NativeModules","Unistyles"],"sourceRoot":"../../../src","sources":["core/UnistylesModule.ts"],"mappings":";;;;;;AAAA,IAAAA,YAAA,GAAAC,OAAA;AAMO,MAAMC,eAAe,GAAAC,OAAA,CAAAD,eAAA,GAAGE,0BAAa,EAAEC,SAAkC"}
+{"version":3,"names":["_reactNative","require","_plugins","_common","UnistylesBridgeWeb","timerRef","undefined","hasAdaptiveThemes","supportsAutomaticColorScheme","screenWidth","isServer","window","innerWidth","screenHeight","innerHeight","themes","breakpoints","colorScheme","getPreferredColorScheme","themeName","enabledPlugins","normalizeWebStylesPlugin","name","unistylesEvents","NativeEventEmitter","NativeModules","Unistyles","sortedBreakpointPairs","breakpoint","constructor","setupListeners","install","globalThis","__UNISTYLES__","Proxy","get","_target","prop","getTheme","useTheme","useBreakpoints","enable","useAdaptiveThemes","pluginName","notify","addPlugin","removePlugin","Reflect","set","target","newValue","receiver","includes","emitThemeChange","Object","entries","sort","a","b","getBreakpointFromScreenWidth","concat","emitPluginChange","filter","length","at","addEventListener","clearTimeout","setTimeout","emitLayoutChange","matchMedia","event","matches","width","find","value","index","otherBreakpoints","minVal","maxVal","emit","type","payload","orientation","screen","height","exports","UnistylesModule"],"sourceRoot":"../../../src","sources":["core/UnistylesModule.ts"],"mappings":"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"}

package/lib/commonjs/core/UnistylesModule.native.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.UnistylesModule = void 0;
+var _reactNative = require("react-native");
+const UnistylesModule = exports.UnistylesModule = _reactNative.NativeModules?.Unistyles;
+//# sourceMappingURL=UnistylesModule.native.js.map

package/lib/commonjs/core/UnistylesModule.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_reactNative","require","UnistylesModule","exports","NativeModules","Unistyles"],"sourceRoot":"../../../src","sources":["core/UnistylesModule.native.ts"],"mappings":";;;;;;AAAA,IAAAA,YAAA,GAAAC,OAAA;AAMO,MAAMC,eAAe,GAAAC,OAAA,CAAAD,eAAA,GAAGE,0BAAa,EAAEC,SAAkC"}

package/lib/commonjs/core/UnistylesRuntime.js

@@ -5,35 +5,78 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.UnistylesRuntime = void 0;
 var _common = require("../common");
+/**
+ * Utility to interact with the Unistyles during runtime
+ */
 class UnistylesRuntime {
   constructor(unistylesBridge, unistylesRegistry) {
     this.unistylesBridge = unistylesBridge;
     this.unistylesRegistry = unistylesRegistry;
   }
+
+  /**
+   * Get the current color scheme
+   * @returns - The current color scheme
+   */
   get colorScheme() {
     return this.unistylesBridge.colorScheme;
   }
+
+  /**
+   * Get info about adaptive themes
+   * @returns - boolean indicating if the adaptive themes are enabled
+   */
   get hasAdaptiveThemes() {
     return this.unistylesBridge.hasAdaptiveThemes;
   }
+
+  /**
+   * Get the current theme name
+   * @returns - The current theme name
+   */
   get themeName() {
     return this.unistylesBridge.themeName;
   }
+
+  /**
+   * Get the current breakpoint based on device size
+   * @returns - The current breakpoint
+   */
   get breakpoint() {
     return this.unistylesBridge.breakpoint;
   }
+
+  /**
+   * Get registered breakpoints with UnitylesRegistry
+   * @returns - The registered breakpoints
+   */
   get breakpoints() {
     return this.unistylesRegistry.breakpoints;
   }
+
+  /**
+   * Get the names of currently enabled plugins
+   * @returns - The names of currently enabled plugins
+   */
   get enabledPlugins() {
     return this.unistylesBridge.enabledPlugins;
   }
+
+  /**
+   * Get the screen size
+   * @returns - The screen size { width, height }
+   */
   get screen() {
     return {
       width: this.unistylesBridge.screenWidth,
       height: this.unistylesBridge.screenHeight
     };
   }
+
+  /**
+   * Get the screen orientation
+   * @returns - The screen orientation
+   */
   get orientation() {
     const {
       width,
@@ -44,6 +87,12 @@ class UnistylesRuntime {
     }
     return _common.ScreenOrientation.Portrait;
   }
+
+  /**
+   * Switch to a different theme
+   * @param name - The name of the theme to switch to
+   * @returns - boolean indicating if the theme was switched
+   */
   setTheme = name => {
     if (name === this.themeName) {
       return;
@@ -54,12 +103,27 @@ class UnistylesRuntime {
     }
     throw new Error(_common.UnistylesError.ThemeNotRegistered);
   };
+
+  /**
+   * Enable or disable adaptive themes
+   * @param enable - boolean indicating if adaptive themes should be enabled
+   */
   setAdaptiveThemes = enable => {
     this.unistylesBridge.useAdaptiveThemes(enable);
   };
+
+  /**
+   * Enable a plugin
+   * @param plugin - Plugin that conforms to UnistylesPlugin interface
+   */
   addPlugin = plugin => {
     this.unistylesRegistry.addPlugin(plugin);
   };
+
+  /**
+   * Disable a plugin
+   * @param plugin - Plugin that conforms to UnistylesPlugin interface
+   */
   removePlugin = plugin => {
     this.unistylesRegistry.removePlugin(plugin);
   };

package/lib/commonjs/core/UnistylesRuntime.js.map

@@ -1 +1 @@
-{"version":3,"names":["_common","require","UnistylesRuntime","constructor","unistylesBridge","unistylesRegistry","colorScheme","hasAdaptiveThemes","themeName","breakpoint","breakpoints","enabledPlugins","screen","width","screenWidth","height","screenHeight","orientation","ScreenOrientation","Landscape","Portrait","setTheme","name","hasTheme","useTheme","Error","UnistylesError","ThemeNotRegistered","setAdaptiveThemes","enable","useAdaptiveThemes","addPlugin","plugin","removePlugin","exports"],"sourceRoot":"../../../src","sources":["core/UnistylesRuntime.ts"],"mappings":";;;;;;AAAA,IAAAA,OAAA,GAAAC,OAAA;AAKO,MAAMC,gBAAgB,CAAC;EAC1BC,WAAWA,CAASC,eAAgC,EAAUC,iBAAmC,EAAE;IAAA,KAA/ED,eAAgC,GAAhCA,eAAgC;IAAA,KAAUC,iBAAmC,GAAnCA,iBAAmC;EAAG;EAEpG,IAAWC,WAAWA,CAAA,EAAG;IACrB,OAAO,IAAI,CAACF,eAAe,CAACE,WAAW;EAC3C;EAEA,IAAWC,iBAAiBA,CAAA,EAAG;IAC3B,OAAO,IAAI,CAACH,eAAe,CAACG,iBAAiB;EACjD;EAEA,IAAWC,SAASA,CAAA,EAAG;IACnB,OAAO,IAAI,CAACJ,eAAe,CAACI,SAAS;EACzC;EAEA,IAAWC,UAAUA,CAAA,EAAG;IACpB,OAAO,IAAI,CAACL,eAAe,CAACK,UAAU;EAC1C;EAEA,IAAWC,WAAWA,CAAA,EAAG;IACrB,OAAO,IAAI,CAACL,iBAAiB,CAACK,WAAW;EAC7C;EAEA,IAAWC,cAAcA,CAAA,EAAG;IACxB,OAAO,IAAI,CAACP,eAAe,CAACO,cAAc;EAC9C;EAEA,IAAWC,MAAMA,CAAA,EAAG;IAChB,OAAO;MACHC,KAAK,EAAE,IAAI,CAACT,eAAe,CAACU,WAAW;MACvCC,MAAM,EAAE,IAAI,CAACX,eAAe,CAACY;IACjC,CAAC;EACL;EAEA,IAAWC,WAAWA,CAAA,EAAG;IACrB,MAAM;MAAEJ,KAAK;MAAEE;IAAO,CAAC,GAAG,IAAI,CAACH,MAAM;IAErC,IAAIC,KAAK,GAAGE,MAAM,EAAE;MAChB,OAAOG,yBAAiB,CAACC,SAAS;IACtC;IAEA,OAAOD,yBAAiB,CAACE,QAAQ;EACrC;EAEOC,QAAQ,GAAIC,IAA2B,IAAK;IAC/C,IAAIA,IAAI,KAAK,IAAI,CAACd,SAAS,EAAE;MACzB;IACJ;IAEA,IAAI,IAAI,CAACH,iBAAiB,CAACkB,QAAQ,CAACD,IAAI,CAAC,EAAE;MACvC,IAAI,CAAClB,eAAe,CAACoB,QAAQ,CAACF,IAAI,CAAC;MAEnC,OAAO,IAAI;IACf;IAEA,MAAM,IAAIG,KAAK,CAACC,sBAAc,CAACC,kBAAkB,CAAC;EACtD,CAAC;EAEMC,iBAAiB,GAAIC,MAAe,IAAK;IAC5C,IAAI,CAACzB,eAAe,CAAC0B,iBAAiB,CAACD,MAAM,CAAC;EAClD,CAAC;EAEME,SAAS,GAAIC,MAAuB,IAAK;IAC5C,IAAI,CAAC3B,iBAAiB,CAAC0B,SAAS,CAACC,MAAM,CAAC;EAC5C,CAAC;EAEMC,YAAY,GAAID,MAAuB,IAAK;IAC/C,IAAI,CAAC3B,iBAAiB,CAAC4B,YAAY,CAACD,MAAM,CAAC;EAC/C,CAAC;AACL;AAACE,OAAA,CAAAhC,gBAAA,GAAAA,gBAAA"}
+{"version":3,"names":["_common","require","UnistylesRuntime","constructor","unistylesBridge","unistylesRegistry","colorScheme","hasAdaptiveThemes","themeName","breakpoint","breakpoints","enabledPlugins","screen","width","screenWidth","height","screenHeight","orientation","ScreenOrientation","Landscape","Portrait","setTheme","name","hasTheme","useTheme","Error","UnistylesError","ThemeNotRegistered","setAdaptiveThemes","enable","useAdaptiveThemes","addPlugin","plugin","removePlugin","exports"],"sourceRoot":"../../../src","sources":["core/UnistylesRuntime.ts"],"mappings":";;;;;;AAAA,IAAAA,OAAA,GAAAC,OAAA;AAKA;AACA;AACA;AACO,MAAMC,gBAAgB,CAAC;EAC1BC,WAAWA,CAASC,eAAgC,EAAUC,iBAAmC,EAAE;IAAA,KAA/ED,eAAgC,GAAhCA,eAAgC;IAAA,KAAUC,iBAAmC,GAAnCA,iBAAmC;EAAG;;EAEpG;AACJ;AACA;AACA;EACI,IAAWC,WAAWA,CAAA,EAAG;IACrB,OAAO,IAAI,CAACF,eAAe,CAACE,WAAW;EAC3C;;EAEA;AACJ;AACA;AACA;EACI,IAAWC,iBAAiBA,CAAA,EAAG;IAC3B,OAAO,IAAI,CAACH,eAAe,CAACG,iBAAiB;EACjD;;EAEA;AACJ;AACA;AACA;EACI,IAAWC,SAASA,CAAA,EAAG;IACnB,OAAO,IAAI,CAACJ,eAAe,CAACI,SAAS;EACzC;;EAEA;AACJ;AACA;AACA;EACI,IAAWC,UAAUA,CAAA,EAAG;IACpB,OAAO,IAAI,CAACL,eAAe,CAACK,UAAU;EAC1C;;EAEA;AACJ;AACA;AACA;EACI,IAAWC,WAAWA,CAAA,EAAG;IACrB,OAAO,IAAI,CAACL,iBAAiB,CAACK,WAAW;EAC7C;;EAEA;AACJ;AACA;AACA;EACI,IAAWC,cAAcA,CAAA,EAAG;IACxB,OAAO,IAAI,CAACP,eAAe,CAACO,cAAc;EAC9C;;EAEA;AACJ;AACA;AACA;EACI,IAAWC,MAAMA,CAAA,EAAG;IAChB,OAAO;MACHC,KAAK,EAAE,IAAI,CAACT,eAAe,CAACU,WAAW;MACvCC,MAAM,EAAE,IAAI,CAACX,eAAe,CAACY;IACjC,CAAC;EACL;;EAEA;AACJ;AACA;AACA;EACI,IAAWC,WAAWA,CAAA,EAAG;IACrB,MAAM;MAAEJ,KAAK;MAAEE;IAAO,CAAC,GAAG,IAAI,CAACH,MAAM;IAErC,IAAIC,KAAK,GAAGE,MAAM,EAAE;MAChB,OAAOG,yBAAiB,CAACC,SAAS;IACtC;IAEA,OAAOD,yBAAiB,CAACE,QAAQ;EACrC;;EAEA;AACJ;AACA;AACA;AACA;EACWC,QAAQ,GAAIC,IAA2B,IAAK;IAC/C,IAAIA,IAAI,KAAK,IAAI,CAACd,SAAS,EAAE;MACzB;IACJ;IAEA,IAAI,IAAI,CAACH,iBAAiB,CAACkB,QAAQ,CAACD,IAAI,CAAC,EAAE;MACvC,IAAI,CAAClB,eAAe,CAACoB,QAAQ,CAACF,IAAI,CAAC;MAEnC,OAAO,IAAI;IACf;IAEA,MAAM,IAAIG,KAAK,CAACC,sBAAc,CAACC,kBAAkB,CAAC;EACtD,CAAC;;EAED;AACJ;AACA;AACA;EACWC,iBAAiB,GAAIC,MAAe,IAAK;IAC5C,IAAI,CAACzB,eAAe,CAAC0B,iBAAiB,CAACD,MAAM,CAAC;EAClD,CAAC;;EAED;AACJ;AACA;AACA;EACWE,SAAS,GAAIC,MAAuB,IAAK;IAC5C,IAAI,CAAC3B,iBAAiB,CAAC0B,SAAS,CAACC,MAAM,CAAC;EAC5C,CAAC;;EAED;AACJ;AACA;AACA;EACWC,YAAY,GAAID,MAAuB,IAAK;IAC/C,IAAI,CAAC3B,iBAAiB,CAAC4B,YAAY,CAACD,MAAM,CAAC;EAC/C,CAAC;AACL;AAACE,OAAA,CAAAhC,gBAAA,GAAAA,gBAAA"}

package/lib/commonjs/createStyleSheet.js

@@ -4,6 +4,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.createStyleSheet = void 0;
+/**
+ * Utility to create a stylesheet with superpowers
+ * Compatible with React Native StyleSheet.create
+ * @param stylesheet - The stylesheet with superpowers to be used
+ */
 const createStyleSheet = stylesheet => stylesheet;
 exports.createStyleSheet = createStyleSheet;
 //# sourceMappingURL=createStyleSheet.js.map

package/lib/commonjs/createStyleSheet.js.map

@@ -1 +1 @@
-{"version":3,"names":["createStyleSheet","stylesheet","exports"],"sourceRoot":"../../src","sources":["createStyleSheet.ts"],"mappings":";;;;;;AAEO,MAAMA,gBAAgB,GAAyCC,UAAa,IAAQA,UAAU;AAAAC,OAAA,CAAAF,gBAAA,GAAAA,gBAAA"}
+{"version":3,"names":["createStyleSheet","stylesheet","exports"],"sourceRoot":"../../src","sources":["createStyleSheet.ts"],"mappings":";;;;;;AAEA;AACA;AACA;AACA;AACA;AACO,MAAMA,gBAAgB,GAAyCC,UAAa,IAAQA,UAAU;AAAAC,OAAA,CAAAF,gBAAA,GAAAA,gBAAA"}

package/lib/commonjs/hooks/useCSS.js

@@ -4,6 +4,41 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useCSS = void 0;
-const useCSS = _stylesheet => {};
+var _react = require("react");
+var _core = require("../core");
+var _utils = require("../utils");
+const useCSS = stylesheet => {
+  const insertedIds = (0, _react.useRef)([]);
+  (0, _react.useInsertionEffect)(() => {
+    if (!_core.unistyles.registry.config.experimentalCSSMediaQueries) {
+      return;
+    }
+    Object.entries(stylesheet).forEach(([_key, value]) => {
+      Object.entries(value).forEach(([prop, val]) => {
+        if (!val.toString().includes('@media')) {
+          return;
+        }
+        const id = (0, _utils.generateReactNativeWebId)(prop, '""');
+        if (insertedIds.current.includes(id)) {
+          return;
+        }
+        const style = document.createElement('style');
+        style.id = id;
+        style.innerHTML = val;
+        document.head.appendChild(style);
+        insertedIds.current = [...insertedIds.current, id];
+      });
+    });
+    return () => {
+      insertedIds.current.forEach(id => {
+        const style = document.getElementById(id);
+        if (style) {
+          style.remove();
+        }
+      });
+      insertedIds.current = [];
+    };
+  }, [stylesheet]);
+};
 exports.useCSS = useCSS;
 //# sourceMappingURL=useCSS.js.map

package/lib/commonjs/hooks/useCSS.js.map

@@ -1 +1 @@
-{"version":3,"names":["useCSS","_stylesheet","exports"],"sourceRoot":"../../../src","sources":["hooks/useCSS.ts"],"mappings":";;;;;;AAEO,MAAMA,MAAM,GAAOC,WAAqC,IAAW,CAAC,CAAC;AAAAC,OAAA,CAAAF,MAAA,GAAAA,MAAA"}
+{"version":3,"names":["_react","require","_core","_utils","useCSS","stylesheet","insertedIds","useRef","useInsertionEffect","unistyles","registry","config","experimentalCSSMediaQueries","Object","entries","forEach","_key","value","prop","val","toString","includes","id","generateReactNativeWebId","current","style","document","createElement","innerHTML","head","appendChild","getElementById","remove","exports"],"sourceRoot":"../../../src","sources":["hooks/useCSS.ts"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA;AAEA,IAAAE,MAAA,GAAAF,OAAA;AAEO,MAAMG,MAAM,GAAOC,UAAoC,IAAK;EAC/D,MAAMC,WAAW,GAAG,IAAAC,aAAM,EAAgB,EAAE,CAAC;EAE7C,IAAAC,yBAAkB,EAAC,MAAM;IACrB,IAAI,CAACC,eAAS,CAACC,QAAQ,CAACC,MAAM,CAACC,2BAA2B,EAAE;MACxD;IACJ;IAEAC,MAAM,CACDC,OAAO,CAACT,UAAU,CAAC,CACnBU,OAAO,CAAC,CAAC,CAACC,IAAI,EAAEC,KAAK,CAAC,KAAK;MACxBJ,MAAM,CAACC,OAAO,CAACG,KAAM,CAAC,CACjBF,OAAO,CAAC,CAAC,CAACG,IAAI,EAAEC,GAAG,CAAC,KAAK;QACtB,IAAI,CAACA,GAAG,CAACC,QAAQ,CAAC,CAAC,CAACC,QAAQ,CAAC,QAAQ,CAAC,EAAE;UACpC;QACJ;QAEA,MAAMC,EAAE,GAAG,IAAAC,+BAAwB,EAACL,IAAI,EAAE,IAAI,CAAC;QAE/C,IAAIZ,WAAW,CAACkB,OAAO,CAACH,QAAQ,CAACC,EAAE,CAAC,EAAE;UAClC;QACJ;QAEA,MAAMG,KAAK,GAAGC,QAAQ,CAACC,aAAa,CAAC,OAAO,CAAC;QAE7CF,KAAK,CAACH,EAAE,GAAGA,EAAE;QACbG,KAAK,CAACG,SAAS,GAAGT,GAAG;QAErBO,QAAQ,CAACG,IAAI,CAACC,WAAW,CAACL,KAAK,CAAC;QAChCnB,WAAW,CAACkB,OAAO,GAAG,CAAC,GAAGlB,WAAW,CAACkB,OAAO,EAAEF,EAAE,CAAC;MACtD,CAAC,CAAC;IACV,CAAC,CAAC;IAEN,OAAO,MAAM;MACThB,WAAW,CAACkB,OAAO,CAACT,OAAO,CAACO,EAAE,IAAI;QAC9B,MAAMG,KAAK,GAAGC,QAAQ,CAACK,cAAc,CAACT,EAAE,CAAC;QAEzC,IAAIG,KAAK,EAAE;UACPA,KAAK,CAACO,MAAM,CAAC,CAAC;QAClB;MACJ,CAAC,CAAC;MAEF1B,WAAW,CAACkB,OAAO,GAAG,EAAE;IAC5B,CAAC;EACL,CAAC,EAAE,CAACnB,UAAU,CAAC,CAAC;AACpB,CAAC;AAAA4B,OAAA,CAAA7B,MAAA,GAAAA,MAAA"}

package/lib/commonjs/hooks/useCSS.native.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useCSS = void 0;
+const useCSS = _stylesheet => {};
+exports.useCSS = useCSS;
+//# sourceMappingURL=useCSS.native.js.map

package/lib/commonjs/hooks/useCSS.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useCSS","_stylesheet","exports"],"sourceRoot":"../../../src","sources":["hooks/useCSS.native.ts"],"mappings":";;;;;;AAEO,MAAMA,MAAM,GAAOC,WAAqC,IAAW,CAAC,CAAC;AAAAC,OAAA,CAAAF,MAAA,GAAAA,MAAA"}

package/lib/commonjs/index.js

@@ -40,9 +40,25 @@ var _hooks = require("./hooks");
 var _common = require("./common");
 var _useStyles = require("./useStyles");
 var _createStyleSheet = require("./createStyleSheet");
+/**
+ * Utility to interact with the Unistyles
+ * (should be called only once)
+ */
 const UnistylesRegistry = exports.UnistylesRegistry = {
+  /**
+   * Register themes to be used in the app
+   * @param themes - Key value pair of themes
+   */
   addThemes: _core.unistyles.registry.addThemes,
+  /**
+   * Register breakpoints to be used in the app
+   * @param breakpoints - Key value pair of breakpoints
+   */
   addBreakpoints: _core.unistyles.registry.addBreakpoints,
+  /**
+   * Register additional config to customize the Unistyles
+   * @param config - Key value pair of config
+   */
   addConfig: _core.unistyles.registry.addConfig
 };
 const UnistylesRuntime = exports.UnistylesRuntime = _core.unistyles.runtime;

package/lib/commonjs/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_core","require","_utils","_hooks","_common","_useStyles","_createStyleSheet","UnistylesRegistry","exports","addThemes","unistyles","registry","addBreakpoints","addConfig","UnistylesRuntime","runtime"],"sourceRoot":"../../src","sources":["index.ts"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,KAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAD,OAAA;AACA,IAAAE,MAAA,GAAAF,OAAA;AAGA,IAAAG,OAAA,GAAAH,OAAA;AACA,IAAAI,UAAA,GAAAJ,OAAA;AACA,IAAAK,iBAAA,GAAAL,OAAA;AAEA,MAAMM,iBAAiB,GAAAC,OAAA,CAAAD,iBAAA,GAAG;EACtBE,SAAS,EAAEC,eAAS,CAACC,QAAQ,CAACF,SAAS;EACvCG,cAAc,EAAEF,eAAS,CAACC,QAAQ,CAACC,cAAc;EACjDC,SAAS,EAAEH,eAAS,CAACC,QAAQ,CAACE;AAClC,CAAC;AAED,MAAMC,gBAAgB,GAAAN,OAAA,CAAAM,gBAAA,GAAGJ,eAAS,CAACK,OAAO"}
+{"version":3,"names":["_core","require","_utils","_hooks","_common","_useStyles","_createStyleSheet","UnistylesRegistry","exports","addThemes","unistyles","registry","addBreakpoints","addConfig","UnistylesRuntime","runtime"],"sourceRoot":"../../src","sources":["index.ts"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,KAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAD,OAAA;AACA,IAAAE,MAAA,GAAAF,OAAA;AAGA,IAAAG,OAAA,GAAAH,OAAA;AACA,IAAAI,UAAA,GAAAJ,OAAA;AACA,IAAAK,iBAAA,GAAAL,OAAA;AAEA;AACA;AACA;AACA;AACA,MAAMM,iBAAiB,GAAAC,OAAA,CAAAD,iBAAA,GAAG;EACtB;AACJ;AACA;AACA;EACIE,SAAS,EAAEC,eAAS,CAACC,QAAQ,CAACF,SAAS;EACvC;AACJ;AACA;AACA;EACIG,cAAc,EAAEF,eAAS,CAACC,QAAQ,CAACC,cAAc;EACjD;AACJ;AACA;AACA;EACIC,SAAS,EAAEH,eAAS,CAACC,QAAQ,CAACE;AAClC,CAAC;AAED,MAAMC,gBAAgB,GAAAN,OAAA,CAAAM,gBAAA,GAAGJ,eAAS,CAACK,OAAO"}

package/lib/commonjs/normalizer/normalizer.js

@@ -9,8 +9,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 // based on react-native-web normalizer
 // https://github.com/necolas/react-native-web
 
-const normalizeColor = function (color) {
-  let opacity = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
+const normalizeColor = (color, opacity = 1) => {
   // If the opacity is 1 there's no need to normalize the color
   if (opacity === 1) {
     return color;