react-native-unistyles 1.0.0-beta.1

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

@@ -0,0 +1,27 @@
+import type { ImageStyle, TextStyle, TransformsStyle, ViewStyle } from 'react-native';
+import type { CSSProperties } from 'react';
+export type ScreenSize = {
+    width: number;
+    height: number;
+};
+export type CreateStylesFactory<T, Theme> = (theme: Theme) => T;
+type StyleProperty<T, B extends Record<string, number>> = {
+    [key in keyof T]?: {
+        [innerKey in keyof B]?: T[key];
+    } | {
+        [innerKey in `:w${string}` | `:h${string}`]?: T[key];
+    } | T[key];
+};
+export type CustomNamedStyles<T, B extends Record<string, number>> = {
+    [P in keyof T]: ViewStyle | TextStyle | ImageStyle | TransformsStyle | CSSProperties | StyleProperty<ViewStyle, B> | StyleProperty<ImageStyle, B> | StyleProperty<TextStyle, B> | ((...args: Array<never>) => ViewStyle | TextStyle | ImageStyle | TransformsStyle | CSSProperties | StyleProperty<ViewStyle, B> | StyleProperty<ImageStyle, B> | StyleProperty<TextStyle, B>);
+};
+export type ExtractBreakpoints<T, B extends Record<string, number>> = T extends Partial<Record<keyof B & string, infer V>> ? V : T extends (...args: infer A) => infer R ? (...args: A) => ExtractBreakpoints<R, B> : {
+    [K in keyof T]: T[K] extends (...args: infer A) => infer R ? (...args: A) => ExtractBreakpoints<R, B> : T[K] extends object ? ExtractBreakpoints<T[K], B> : T[K];
+};
+export type RemoveKeysWithPrefix<T, B extends Record<string, number>> = T extends (...args: Array<any>) => infer R ? (...args: Parameters<T>) => RemoveKeysWithPrefix<R, B> : T extends object ? T extends Record<string, infer _V> ? {
+    [K in keyof T as K extends `:w${string}` | `:h${string}` ? keyof B & string : K]: RemoveKeysWithPrefix<T[K], B>;
+} : {
+    [K in keyof T]: RemoveKeysWithPrefix<T[K], B>;
+} : T;
+export {};
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/types.ts"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,63 @@
+import type { ScreenSize } from '../types';
+/**
+ * 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 }
+ */
+export declare const sortAndValidateBreakpoints: <B extends Record<string, number>>(breakpoints: B) => B;
+/**
+ * Determines the appropriate breakpoint key for a given screen width based on provided breakpoints.
+ *
+ * This function takes a screen width and an object of breakpoints. It returns the key of the breakpoint
+ * that the screen width falls into. The breakpoints are assumed to be sorted in ascending order.
+ *
+ * @template B - An object type where keys are strings and values are numbers representing screen widths.
+ * @param {number} width - The screen width to determine the breakpoint for.
+ * @param {B} breakpoints - The breakpoints object to use for determination.
+ * @returns {keyof B & string} The key of the breakpoint that the screen width falls into.
+ *
+ * @example
+ * const breakpoints = { sm: 0, md: 768, lg: 1024 }
+ * getBreakpointFromScreenWidth(800, breakpoints) // returns 'md'
+ */
+export declare const getBreakpointFromScreenWidth: <B extends Record<string, number>>(width: number, breakpoints: B) => keyof B & string;
+/**
+ * Retrieves the value associated with a given breakpoint or custom media query based on the provided screen size.
+ *
+ * The function first checks for custom media queries. If a matching custom media query is found, its associated value is returned.
+ * If no custom media query matches, the function then checks for a direct breakpoint match.
+ * If there's no direct breakpoint match, the function simulates CSS cascading to find the closest matching breakpoint.
+ *
+ * @template B - An object type where keys represent breakpoint names and values represent breakpoint values.
+ *
+ * @param {Record<keyof B & string, string | number>} value - An object containing values associated with breakpoints or custom media queries.
+ * @param {keyof B & string} breakpoint - The breakpoint name to check against.
+ * @param {ScreenSize} screenSize - An object representing the screen size to be checked against the media queries.
+ * @param {B} breakpoints - An object representing the defined breakpoints.
+ *
+ * @returns {string | number | undefined} Returns the value associated with the matching breakpoint or custom media query, or `undefined` if no match is found.
+ *
+ * @example
+ *
+ * const values = { ':w[200]': 'value1', sm: 'value2', md: 'value3' }
+ * const screenSize = { width: 250, height: 400 }
+ * const breakpoints = { sm: 300, md: 600, lg: 900 }
+ *
+ * getValueForBreakpoint(values, 'sm', screenSize, breakpoints); // 'value1'
+ */
+export declare const getValueForBreakpoint: <B extends Record<string, number>>(value: Record<keyof B & string, string | number | undefined>, breakpoint: keyof B & string, screenSize: ScreenSize, breakpoints: B) => string | number | Record<keyof B & string, string | number | undefined>[keyof B & string] | undefined;
+//# sourceMappingURL=breakpoints.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"breakpoints.d.ts","sourceRoot":"","sources":["../../../../src/utils/breakpoints.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AAG1C;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,0BAA0B,yDAuBtC,CAAA;AAED;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,4BAA4B,4CAA6C,MAAM,qCAe3F,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,eAAO,MAAM,qBAAqB,6IAA8I,UAAU,0HAmCzL,CAAA"}

package/lib/typescript/src/utils/breakpoints.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=breakpoints.spec.d.ts.map

package/lib/typescript/src/utils/breakpoints.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"breakpoints.spec.d.ts","sourceRoot":"","sources":["../../../../src/utils/breakpoints.spec.ts"],"names":[],"mappings":""}

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

@@ -0,0 +1,2 @@
+export declare const throwError: (message: string) => never;
+//# sourceMappingURL=common.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"common.d.ts","sourceRoot":"","sources":["../../../../src/utils/common.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,UAAU,YAAa,MAAM,UAEzC,CAAA"}

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

@@ -0,0 +1,3 @@
+export { getBreakpointFromScreenWidth, sortAndValidateBreakpoints } from './breakpoints';
+export { proxifyFunction, parseStyle } from './styles';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,4BAA4B,EAAE,0BAA0B,EAAE,MAAM,eAAe,CAAA;AACxF,OAAO,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA"}

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

@@ -0,0 +1,130 @@
+import type { ScreenSize } from '../types';
+/**
+ * Extracts numeric values from a coded string.
+ *
+ * The function is designed to process strings that have a format like "w[100,200]" or "h[300]".
+ * It removes characters 'w', 'h', '[', and ']' from the input string and then extracts the numbers.
+ *
+ * @param {string} codedValue - The input string to extract values from.
+ * @returns {Array<number>} An array of extracted numbers. Can contain one or two numbers based on the input format.
+ *
+ * @example
+ * extractValues("w[100,200]") // returns [100, 200]
+ * extractValues("h[300]")     // returns [300]
+ * extractValues("h[,300]")    // returns [0,300]
+ * extractValues("h[100,]")    // returns [100]
+ */
+export declare const extractValues: (codedValue: string) => Array<number>;
+/**
+ * Determines if the given screen size matches the specified breakpoint query.
+ *
+ * The function checks if the screen size (width and/or height) falls within the range
+ * specified by the breakpoint query. The query can specify width (using 'w'), height (using 'h'),
+ * or both.
+ *
+ * @param {string} query - The breakpoint query string. Examples: 'w[100,200]', 'h[300]', 'w[100,200]h[300,400]'.
+ * @param {ScreenSize} screenSize - The screen size to check against the breakpoint query.
+ * @returns {boolean} True if the screen size matches the breakpoint query, false otherwise.
+ *
+ * @example
+ * const screenSize = { width: 150, height: 350 }
+ * isWithinBreakpoint('w[100,200]', screenSize) // returns true
+ * isWithinBreakpoint('h[400]', screenSize)     // returns false
+ */
+export declare const isWithinBreakpoint: (query: string, screenSize: ScreenSize) => boolean;
+/**
+ * Determines if the given width matches the specified width range in the query.
+ *
+ * The function checks if the provided width falls within the range specified by the query.
+ * The query specifies a width range using a format like 'w[100,200]'. If only one value is provided,
+ * it's treated as a minimum width.
+ *
+ * @param {string} query - The width query string. Examples: 'w[100,200]' or 'w[100]'.
+ * @param {number} width - The width to check against the query.
+ * @returns {boolean} True if the width matches the query range, false otherwise.
+ *
+ * @example
+ * isWithinTheWidth('w[100,200]', 150) // returns true
+ * isWithinTheWidth('w[100]', 50)      // returns false
+ * isWithinTheWidth('w[100]', 150)     // returns true
+ */
+export declare const isWithinTheWidth: (query: string, width: number) => boolean;
+/**
+ * Determines if the given height matches the specified height range in the query.
+ *
+ * The function checks if the provided height falls within the range specified by the query.
+ * The query specifies a height range using a format like 'h[100,200]'. If only one value is provided,
+ * it's treated as a minimum height.
+ *
+ * @param {string} query - The height query string. Examples: 'h[100,200]' or 'h[100]'.
+ * @param {number} height - The height to check against the query.
+ * @returns {boolean} True if the height matches the query range, false otherwise.
+ *
+ * @example
+ * isWithinTheHeight('h[100,200]', 150) // returns true
+ * isWithinTheHeight('h[100]', 50)      // returns false
+ * isWithinTheHeight('h[100]', 150)     // returns true
+ */
+export declare const isWithinTheHeight: (query: string, height: number) => boolean;
+/**
+ * Determines if the given screen size matches both the specified width and height ranges in the query.
+ *
+ * The function checks if the provided screen size (both width and height) falls within the ranges
+ * specified by the query. The query can specify both width and height using a format like 'w[100,200]:h[300,400]'.
+ *
+ * @param {string} query - The combined width and height query string. Example: 'w[100,200]:h[300,400]'.
+ * @param {ScreenSize} screenSize - The screen size to check against the query.
+ * @returns {boolean} True if the screen size matches both the width and height ranges in the query, false otherwise.
+ *
+ * @example
+ * const screenSize = { width: 150, height: 350 }
+ * isWithinTheWidthAndHeight('w[100,200]:h[300,400]', screenSize) // returns true
+ * isWithinTheWidthAndHeight('w[100,200]:h[400,500]', screenSize) // returns false
+ */
+export declare const isWithinTheWidthAndHeight: (query: string, screenSize: ScreenSize) => boolean;
+/**
+ * Checks if the given query string is a valid custom media query.
+ *
+ * The valid custom media query formats include:
+ * - :w[200]
+ * - :w[0, 200]
+ * - :w[, 300]
+ * - :h[200]
+ * - :h[0, 500]
+ * - :h[,200]
+ * - :w[100, 300]:h[200,500]
+ * - :h[200,500]:w[100, 300]
+ *
+ * @param {string} query - The query string to be checked.
+ * @returns {boolean} Returns `true` if the query is a valid custom media query, otherwise `false`.
+ * @example
+ *
+ * isMediaQuery(':w[200]') // true
+ * isMediaQuery(':w100]')  // false
+ */
+export declare const isMediaQuery: (query: string) => boolean;
+/**
+ * Retrieves the first matching custom media query key based on the provided screen size.
+ *
+ * The function processes an array of media queries and returns the first query that matches
+ * the given screen size. The media queries can be in formats like:
+ * - w[200]
+ * - w[0, 200]
+ * - w[, 300]
+ * - h[200]
+ * - h[0, 500]
+ * - h[,200]
+ * - w[100, 300]:h[200,500]
+ * - h[200,500]:w[100, 300]
+ *
+ * @param {Array<[string, string | number]>} mediaQueries - An array of tuples containing media query keys and associated values.
+ * @param {ScreenSize} screenSize - An object representing the screen size to be checked against the media queries.
+ * @returns {string | undefined} Returns the first matching media query key or `undefined` if no match is found.
+ * @example
+ *
+ * const queries = [[':w[200]', 'value1'], [':h[300,500]', 'value2']]
+ * const size = { width: 250, height: 400 }
+ * getKeyForCustomMediaQuery(queries, size) // ':w[200]
+ */
+export declare const getKeyForCustomMediaQuery: (mediaQueries: Array<[string, string | number | undefined]>, screenSize: ScreenSize) => string | undefined;
+//# sourceMappingURL=mediaQueries.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"mediaQueries.d.ts","sourceRoot":"","sources":["../../../../src/utils/mediaQueries.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AAE1C;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,aAAa,eAAgB,MAAM,KAAG,MAAM,MAAM,CAQ9D,CAAA;AAED;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,kBAAkB,UAAW,MAAM,cAAc,UAAU,KAAG,OAc1E,CAAA;AAED;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,gBAAgB,UAAW,MAAM,SAAS,MAAM,KAAG,OAQ/D,CAAA;AAED;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,iBAAiB,UAAW,MAAM,UAAU,MAAM,KAAG,OAQjE,CAAA;AAED;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,yBAAyB,UAAW,MAAM,cAAc,UAAU,KAAG,OAQjF,CAAA;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,YAAY,UAAW,MAAM,KAAG,OAI5C,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,eAAO,MAAM,yBAAyB,iBAAkB,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC,CAAC,cAAc,UAAU,KAAG,MAAM,GAAG,SAevI,CAAA"}

package/lib/typescript/src/utils/mediaQueries.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=mediaQueries.spec.d.ts.map

package/lib/typescript/src/utils/mediaQueries.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mediaQueries.spec.d.ts","sourceRoot":"","sources":["../../../../src/utils/mediaQueries.spec.ts"],"names":[],"mappings":""}

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

@@ -0,0 +1,56 @@
+import type { CustomNamedStyles, ScreenSize } from '../types';
+/**
+ * Proxies a function to parse its return value for custom media queries or breakpoints.
+ *
+ * If the function's string representation contains a custom media query or a defined breakpoint,
+ * the returned function will be proxied to parse its return value based on the provided screen size and breakpoints.
+ * If neither is found, the original function is returned.
+ *
+ * @template B - An object type where keys represent breakpoint names and values represent breakpoint values.
+ *
+ * @param {Function} fn - The function to be proxified.
+ * @param {keyof B & string} breakpoint - The breakpoint name to check against.
+ * @param {ScreenSize} screenSize - An object representing the screen size to be checked against the media queries.
+ * @param {B} breakpoints - An object representing the defined breakpoints.
+ *
+ * @returns {Function} Returns the proxified function or the original function if no custom media query or breakpoint is found in its string representation.
+ *
+ * @example
+ *
+ * const myFunction = () => ({ ':w[200]': 'value1', sm: 'value2' })
+ * const screenSize = { width: 250, height: 400 }
+ * const breakpoints = { sm: 300, md: 600 }
+ *
+ * const proxifiedFunction = proxifyFunction(myFunction, 'sm', screenSize, breakpoints)
+ * proxifiedFunction() // parsed style based on screenSize and breakpoints
+ */
+export declare const proxifyFunction: <B extends Record<string, number>>(fn: Function, breakpoint: keyof B & string, screenSize: ScreenSize, breakpoints: B) => Function;
+/**
+ * Parses a style object to resolve custom media queries or breakpoints based on the provided screen size and breakpoints.
+ *
+ * The function processes each key-value pair in the style object. If the value is a function or a valid style (not an object or a 'transform' key),
+ * it is returned as-is. Otherwise, the function attempts to resolve the value based on the provided breakpoint, screen size, and defined breakpoints.
+ *
+ * @template T - The type of the style object.
+ * @template B - An object type where keys represent breakpoint names and values represent breakpoint values.
+ *
+ * @param {CustomNamedStyles<T, B>} style - The style object to be parsed.
+ * @param {keyof B & string} breakpoint - The breakpoint name to check against.
+ * @param {ScreenSize} screenSize - An object representing the screen size to be checked against the media queries.
+ * @param {B} breakpoints - An object representing the defined breakpoints.
+ *
+ * @returns {Record<string, string | number | Function>} Returns the parsed style object with resolved custom media queries or breakpoints.
+ *
+ * @example
+ *
+ * const style = { fontSize: { sm: '12px', md: '16px' } }
+ * const screenSize = { width: 300, height: 400 }
+ * const breakpoints = { xs: 0, sm: 300, md: 600 }
+ *
+ * const parsedStyle = parseStyle(style, 'sm', screenSize, breakpoints)
+ * // { fontSize: '12px' }
+ */
+export declare const parseStyle: <T, B extends Record<string, number>>(style: CustomNamedStyles<T, B>, breakpoint: keyof B & string, screenSize: ScreenSize, breakpoints: B) => {
+    [k: string]: unknown;
+};
+//# sourceMappingURL=styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/utils/styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AAG7D;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,eAAO,MAAM,eAAe,yCACpB,QAAQ,4CACA,UAAU,qBAEvB,QAeF,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,eAAO,MAAM,UAAU,kHAGP,UAAU;;CAiBrB,CAAA"}

package/lib/typescript/src/utils/styles.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=styles.spec.d.ts.map

package/lib/typescript/src/utils/styles.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.spec.d.ts","sourceRoot":"","sources":["../../../../src/utils/styles.spec.ts"],"names":[],"mappings":""}

package/package.json

@@ -0,0 +1,132 @@
+{
+  "name": "react-native-unistyles",
+  "version": "1.0.0-beta.1",
+  "description": "Level up your React Native StyleSheet",
+  "scripts": {
+    "test": "jest",
+    "tsc": "node_modules/typescript/bin/tsc --noEmit",
+    "lint": "eslint . --ext .ts,.tsx",
+    "clean": "del-cli lib",
+    "prepare": "husky install && bob build",
+    "precommit": "concurrently 'yarn tsc' 'yarn lint' 'yarn test'",
+    "release": "release-it patch --preRelease=beta"
+  },
+  "main": "lib/commonjs/index",
+  "module": "lib/module/index",
+  "types": "lib/typescript/src/index.d.ts",
+  "react-native": "src/index",
+  "source": "src/index",
+  "files": [
+    "src",
+    "lib",
+    "!**/*.spec.ts",
+    "!**/.*"
+  ],
+  "keywords": [
+    "react-native",
+    "ios",
+    "android"
+  ],
+  "repository": "https://github.com/jpudysz/react-native-unistyles",
+  "author": "Jacek Pudysz <jacekpudysz@gmail.com> (https://github.com/jpudysz)",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/jpudysz/react-native-unistyles/issues"
+  },
+  "homepage": "https://github.com/jpudysz/react-native-unistyles#readme",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "devDependencies": {
+    "@commitlint/config-conventional": "17.7.0",
+    "@evilmartians/lefthook": "1.5.0",
+    "@react-native/eslint-config": "0.73.1",
+    "@release-it/conventional-changelog": "5.1.1",
+    "@types/jest": "29.5.5",
+    "@types/react": "18.2.24",
+    "@types/react-native": "0.72.3",
+    "@typescript-eslint/eslint-plugin": "6.7.4",
+    "@typescript-eslint/eslint-plugin-tslint": "6.7.4",
+    "@typescript-eslint/parser": "6.7.4",
+    "commitlint": "17.7.2",
+    "concurrently": "8.2.1",
+    "del-cli": "5.1.0",
+    "eslint": "8.50.0",
+    "eslint-config-codemask": "1.1.7",
+    "eslint-plugin-functional": "6.0.0",
+    "eslint-plugin-import": "2.28.1",
+    "eslint-plugin-jsdoc": "46.8.2",
+    "eslint-plugin-jsx-a11y": "6.7.1",
+    "eslint-plugin-nested-if": "1.0.0",
+    "eslint-plugin-no-else": "0.2.2",
+    "eslint-plugin-no-loops": "0.3.0",
+    "eslint-plugin-prefer-arrow": "1.2.3",
+    "eslint-plugin-react": "7.33.2",
+    "eslint-plugin-react-hooks": "4.6.0",
+    "husky": "8.0.3",
+    "jest": "29.7.0",
+    "react": "18.2.0",
+    "react-native": "0.72.5",
+    "react-native-builder-bob": "0.23.0",
+    "release-it": "16.2.1",
+    "typescript": "5.2.2"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*"
+  },
+  "workspaces": [
+    "example"
+  ],
+  "packageManager": "yarn@3.6.1",
+  "engines": {
+    "node": ">= 18.0.0"
+  },
+  "jest": {
+    "preset": "react-native",
+    "modulePathIgnorePatterns": [
+      "<rootDir>/example/node_modules",
+      "<rootDir>/lib/"
+    ]
+  },
+  "commitlint": {
+    "extends": [
+      "@commitlint/config-conventional"
+    ]
+  },
+  "release-it": {
+    "git": {
+      "commitMessage": "chore: release ${version}",
+      "tagName": "v${version}"
+    },
+    "npm": {
+      "publish": true
+    },
+    "github": {
+      "release": true
+    },
+    "plugins": {
+      "@release-it/conventional-changelog": {
+        "preset": "angular"
+      }
+    }
+  },
+  "eslintIgnore": [
+    "node_modules/",
+    "lib/"
+  ],
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      "commonjs",
+      "module",
+      [
+        "typescript",
+        {
+          "project": "tsconfig.build.json"
+        }
+      ]
+    ]
+  }
+}

package/src/UnistylesTheme.tsx

@@ -0,0 +1,17 @@
+import React, { createContext } from 'react'
+import type { PropsWithChildren } from 'react'
+
+interface UnistylesThemeProps extends PropsWithChildren {
+    theme: any
+}
+
+export const UnistylesContext = createContext({})
+
+export const UnistylesTheme: React.FunctionComponent<UnistylesThemeProps> = ({
+    theme,
+    children
+}) => (
+    <UnistylesContext.Provider value={theme}>
+        {children}
+    </UnistylesContext.Provider>
+)

package/src/createUnistyles.ts

@@ -0,0 +1,56 @@
+import { useContext } from 'react'
+import { useWindowDimensions } from 'react-native'
+import type { CreateStylesFactory, CustomNamedStyles, ScreenSize, ExtractBreakpoints, RemoveKeysWithPrefix } from './types'
+import { UnistylesContext } from './UnistylesTheme'
+import { getBreakpointFromScreenWidth, proxifyFunction, parseStyle, sortAndValidateBreakpoints } from './utils'
+
+export const createUnistyles = <B extends Record<string, number>, T = {}>(breakpoints: B) => {
+    const sortedBreakpoints = sortAndValidateBreakpoints(breakpoints) as B
+
+    return {
+        createStyles: <S extends CustomNamedStyles<S, B>>(styles: S | CreateStylesFactory<S, T>) => styles as S,
+        useStyles: <ST extends CustomNamedStyles<ST, B>>(stylesheet?: ST | CreateStylesFactory<ST, T>) => {
+            const theme = useContext(UnistylesContext) as T
+            const dimensions = useWindowDimensions()
+            const breakpoint = getBreakpointFromScreenWidth<B>(dimensions.width, sortedBreakpoints)
+            const screenSize: ScreenSize = {
+                width: dimensions.width,
+                height: dimensions.height
+            }
+
+            if (!stylesheet) {
+                return {
+                    theme,
+                    styles: {} as ExtractBreakpoints<RemoveKeysWithPrefix<ST, B>, B>
+                }
+            }
+
+            const parsedStyles = typeof stylesheet === 'function'
+                ? stylesheet(theme)
+                : stylesheet
+
+            const dynamicStyleSheet = Object
+                .entries(parsedStyles)
+                .reduce((acc, [key, value]) => {
+                    const x = value as CustomNamedStyles<ST, B>
+
+                    if (typeof value === 'function') {
+                        return {
+                            ...acc,
+                            [key]: proxifyFunction<B>(value, breakpoint, screenSize, sortedBreakpoints)
+                        }
+                    }
+
+                    return {
+                        ...acc,
+                        [key]: parseStyle<ST, B>(x, breakpoint, screenSize, sortedBreakpoints)
+                    }
+                }, {} as ST)
+
+            return {
+                theme,
+                styles: dynamicStyleSheet as ExtractBreakpoints<RemoveKeysWithPrefix<ST, B>, B>
+            }
+        }
+    }
+}

package/src/index.ts

@@ -0,0 +1,2 @@
+export { UnistylesTheme } from './UnistylesTheme'
+export { createUnistyles } from './createUnistyles'

package/src/types.ts

@@ -0,0 +1,52 @@
+import type { ImageStyle, TextStyle, TransformsStyle, ViewStyle } from 'react-native'
+import type { CSSProperties } from 'react'
+
+export type ScreenSize = {
+    width: number,
+    height: number
+}
+
+export type CreateStylesFactory<T, Theme> = (theme: Theme) => T
+
+type StyleProperty<T, B extends Record<string, number>> = {
+    [key in keyof T]?: {
+        [innerKey in keyof B]?: T[key]
+    } | {
+        [innerKey in `:w${string}` | `:h${string}`]?: T[key]
+    } | T[key]
+}
+
+export type CustomNamedStyles<T, B extends Record<string, number>> = {
+    [P in keyof T]:
+    | ViewStyle
+    | TextStyle
+    | ImageStyle
+    | TransformsStyle
+    | CSSProperties
+    | StyleProperty<ViewStyle, B>
+    | StyleProperty<ImageStyle, B>
+    | StyleProperty<TextStyle, B>
+    | (
+        (...args: Array<never>) => ViewStyle | TextStyle | ImageStyle | TransformsStyle | CSSProperties | StyleProperty<ViewStyle, B> | StyleProperty<ImageStyle, B> | StyleProperty<TextStyle, B>
+    )
+}
+
+export type ExtractBreakpoints<T, B extends Record<string, number>> = T extends Partial<Record<keyof B & string, infer V>>
+    ? V
+    : T extends (...args: infer A) => infer R
+        ? (...args: A) => ExtractBreakpoints<R, B>
+        : {
+            [K in keyof T]: T[K] extends (...args: infer A) => infer R
+                ? (...args: A) => ExtractBreakpoints<R, B>
+                : T[K] extends object
+                    ? ExtractBreakpoints<T[K], B>
+                    : T[K]
+        }
+
+export type RemoveKeysWithPrefix<T, B extends Record<string, number>> = T extends (...args: Array<any>) => infer R
+    ? (...args: Parameters<T>) => RemoveKeysWithPrefix<R, B>
+    : T extends object
+        ? T extends Record<string, infer _V>
+            ? { [K in keyof T as K extends `:w${string}` | `:h${string}` ? keyof B & string : K]: RemoveKeysWithPrefix<T[K], B> }
+            : { [K in keyof T]: RemoveKeysWithPrefix<T[K], B> }
+        : T