From 571331b3efbe6b20a64be4b33cc4a58c0d1a934a Mon Sep 17 00:00:00 2001
From: Jacek Pudysz <jacekpudysz@gmail.com>
Date: Wed, 1 Nov 2023 01:06:00 +0100
Subject: [PATCH] feat: simplify typescript types

---
 example/.unistyles/breakpoints.d.ts           |   9 -
 example/.unistyles/themes.d.ts                |  13 -
 examples/expo/babel.config.js                 |   1 -
 .../expo/src/examples/{Cxx.jsx => Cxx.tsx}    |   9 +-
 src/UnistylesTheme.tsx                        |  17 --
 src/babel/helpers.js                          | 227 ------------------
 src/babel/plugin.js                           | 195 ---------------
 src/createStyleSheet.ts                       |   7 +-
 src/createUnistyles.ts                        |  72 ------
 src/index.ts                                  |   3 +-
 src/types/breakpoints.ts                      |  20 +-
 src/types/core.ts                             |  12 +-
 src/types/index.ts                            |   5 +-
 src/useStyles.ts                              |  16 +-
 src/utils/breakpoints.ts                      |  23 +-
 src/utils/styles.ts                           |  21 +-
 16 files changed, 56 insertions(+), 594 deletions(-)
 delete mode 100644 example/.unistyles/breakpoints.d.ts
 delete mode 100644 example/.unistyles/themes.d.ts
 rename examples/expo/src/examples/{Cxx.jsx => Cxx.tsx} (88%)
 delete mode 100644 src/UnistylesTheme.tsx
 delete mode 100644 src/babel/helpers.js
 delete mode 100644 src/babel/plugin.js
 delete mode 100644 src/createUnistyles.ts

diff --git a/example/.unistyles/breakpoints.d.ts b/example/.unistyles/breakpoints.d.ts
deleted file mode 100644
index 267cc45d..00000000
--- a/example/.unistyles/breakpoints.d.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-declare module "unistyles:static" {
-  type UnistylesBreakpoints = {
-    xs: 0;
-    sm: 300;
-    md: 500;
-    lg: 800;
-    xl: 1200;
-  };
-}
\ No newline at end of file
diff --git a/example/.unistyles/themes.d.ts b/example/.unistyles/themes.d.ts
deleted file mode 100644
index 77ddcafc..00000000
--- a/example/.unistyles/themes.d.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-declare module "unistyles:static" {
-  type UnistylesTheme = {
-    colors: {
-      barbie: string;
-      oak: string;
-      sky: string;
-      fog: string;
-      aloes: string;
-      backgroundColor: string;
-      typography: string;
-    };
-  };
-}
\ No newline at end of file
diff --git a/examples/expo/babel.config.js b/examples/expo/babel.config.js
index 660579a1..0aa876cf 100644
--- a/examples/expo/babel.config.js
+++ b/examples/expo/babel.config.js
@@ -7,7 +7,6 @@ module.exports = function (api) {
     return {
         presets: ['babel-preset-expo'],
         plugins: [
-            // '../src/babel/plugin.js',
             [
                 'module-resolver',
                 {
diff --git a/examples/expo/src/examples/Cxx.jsx b/examples/expo/src/examples/Cxx.tsx
similarity index 88%
rename from examples/expo/src/examples/Cxx.jsx
rename to examples/expo/src/examples/Cxx.tsx
index f049ebfd..d5c9ea1f 100644
--- a/examples/expo/src/examples/Cxx.jsx
+++ b/examples/expo/src/examples/Cxx.tsx
@@ -2,7 +2,6 @@ import React from 'react'
 import { View, Text, Button } from 'react-native'
 import { UnistylesRuntime, createStyleSheet, useStyles } from 'react-native-unistyles'
 
-// todo, for now TypeScript is broken
 export const Cxx = () => {
     const { styles, theme } = useStyles(stylesheet)
 
@@ -16,7 +15,7 @@ export const Cxx = () => {
                     Current breakpoint:
                 </Text>
                 <Text style={styles.bold}>
-                    {` ${UnistylesRuntime.getCurrentBreakpoint()}`}
+                    {` ${UnistylesRuntime.currentBreakpoint}`}
                 </Text>
             </View>
             <View style={styles.row}>
@@ -24,20 +23,20 @@ export const Cxx = () => {
                     Theme:
                 </Text>
                 <Text style={styles.bold}>
-                    {` ${UnistylesRuntime.getCurrentTheme()}`}
+                    {` ${UnistylesRuntime.theme}`}
                 </Text>
             </View>
             <Button
                 color={theme.colors.accent}
                 title="Change theme"
                 onPress={() => {
-                    const currentTheme = UnistylesRuntime.getCurrentTheme()
+                    const currentTheme = UnistylesRuntime.theme
                     const nextTheme = currentTheme === 'light'
                         ? 'dark'
                         : currentTheme === 'dark'
                             ? 'premium'
                             : 'light'
-                    UnistylesRuntime.useTheme(nextTheme)
+                    UnistylesRuntime.setTheme(nextTheme)
                 }}
             />
             <View style={styles.boxes}>
diff --git a/src/UnistylesTheme.tsx b/src/UnistylesTheme.tsx
deleted file mode 100644
index c1725f95..00000000
--- a/src/UnistylesTheme.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-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>
-)
diff --git a/src/babel/helpers.js b/src/babel/helpers.js
deleted file mode 100644
index eb3b5503..00000000
--- a/src/babel/helpers.js
+++ /dev/null
@@ -1,227 +0,0 @@
-const fs = require('fs')
-
-const error = message => {
-    throw new Error(`🦄 [static-unistyles]: ${message}`)
-}
-
-const log = message => {
-    console.log(`🦄 [static-unistyles]: ${message}`)
-}
-
-const isUnistyles = (t, callee) => {
-    if (!t.isMemberExpression(callee) || !t.isMemberExpression(callee.object)) {
-        return false
-    }
-
-    // look for Unistyles.Static
-    const isUnistyles = t.isIdentifier(callee.object.object, { name: 'Unistyles' })
-    const isStatic = t.isIdentifier(callee.object.property, { name: 'Static' })
-
-    if (!isUnistyles || !isStatic) {
-        return false
-    }
-
-    return true
-}
-
-const isTypeScriptFile = state => {
-    const filename = state.file.opts.filename || 'local.ts'
-    const extension = filename.split('.').at(1)
-
-    return extension === 'ts' || extension === 'tsx'
-}
-
-const getBreakpoints = (t, callee, path) => {
-    const isCallingRegisterBreakpoints = t.isIdentifier(callee.property, { name: 'registerBreakpoints' })
-
-    if (!isCallingRegisterBreakpoints) {
-        return undefined
-    }
-
-    const args = path.node.arguments
-
-    if (args.length === 0) {
-        error('Called Unistyles.Static.registerBreakpoints with no arguments.')
-    }
-
-    const breakpoints = args.at(0)
-
-    if (t.isObjectExpression(breakpoints)) {
-        return breakpoints.properties
-    }
-
-    if (!t.isIdentifier(breakpoints)) {
-        return undefined
-    }
-
-    const binding = path.scope.getBinding(breakpoints.name)
-
-    if (binding && t.isObjectExpression(binding.path.node.init)) {
-        return binding.path.node.init.properties
-    }
-
-    error('Your breakpoints are not accessible statically. Move breakpoints definition to the same file where you call registerBreakpoints.')
-}
-
-const getThemes = (t, callee, path) => {
-    const isCallingRegisterThemes = t.isIdentifier(callee.property, { name: 'registerThemes' })
-
-    if (!isCallingRegisterThemes) {
-        return undefined
-    }
-
-    const args = path.node.arguments
-
-    if (args.length === 0) {
-        error('Called Unistyles.Static.registerThemes with no arguments.')
-    }
-
-    const themes = args.at(0)
-
-    if (t.isObjectExpression(themes) && themes.properties.length === 0) {
-        error('Called Unistyles.Static.registerThemes with no theme.')
-    }
-
-    if (t.isObjectExpression(themes) && themes.properties.length > 0) {
-        return themes.properties
-    }
-
-    if (!t.isIdentifier(themes)) {
-        return undefined
-    }
-
-    const binding = path.scope.getBinding(themes.name)
-
-    if (binding && t.isObjectExpression(binding.path.node.init)) {
-        return binding.path.node.init.properties
-    }
-
-    error('Your themes are not accessible statically. Move themes definition to the same file where you call registerThemes.')
-}
-
-const sortBreakpoints = (t, properties) => properties
-    .map(prop => {
-        if (t.isNumericLiteral(prop.value) && t.isIdentifier(prop.key)) {
-            return t.arrayExpression([
-                t.stringLiteral(prop.key.name),
-                t.numericLiteral(prop.value.value)
-            ])
-        }
-    })
-    .sort((a, b) => {
-        if (a.elements && b.elements) {
-            return a.elements[1].value - b.elements[1].value
-        }
-
-        return 0
-    })
-
-const saveModuleDeclaration = (fileName, output) => {
-    if (!fs.existsSync('.unistyles')) {
-        fs.mkdirSync('.unistyles')
-    }
-
-    fs.writeFileSync(`.unistyles/${fileName}`, output, 'utf8')
-}
-
-const getObjectStructure = (obj = {}, prefix = '') => Object
-    .entries(obj)
-    .reduce((acc, [key, value]) => {
-        if (typeof value === 'object' && !Array.isArray(value)) {
-            return acc.concat(getObjectStructure(value, `${prefix}${key}.`))
-        }
-
-        return acc.concat(`${prefix}${key}`)
-    }, [])
-
-// this is tricky, and for sure should be extended, for now supports inline themes, spreads and references
-const resolveValue = (node, scope) => {
-    const type = node?.value?.type || node.type
-
-    switch (type) {
-        case 'Identifier': {
-            const binding = scope.getBinding(node.value?.name || node.name)
-
-            if (!binding) {
-                return undefined
-            }
-
-            if (binding.path.isImportDefaultSpecifier() || binding.path.isImportSpecifier()) {
-                error(`Reference to imported value '${node.name}' detected. Your themes are not accessible statically. Move themes definition to the same file where you call registerThemes.`)
-            }
-
-            if (binding.path.node.init) {
-                return resolveValue(binding.path.node.init, binding.path.scope)
-            }
-
-            return undefined
-        }
-        case 'CallExpression': {
-            if (node.callee.name === '_objectSpread') {
-                return node.arguments.reduce((acc, arg) => {
-                    const resolvedArg = resolveValue(arg, scope)
-
-                    if (typeof resolvedArg === 'object' && resolvedArg !== null) {
-                        return {
-                            ...acc,
-                            ...resolvedArg
-                        }
-                    }
-
-                    return acc
-                }, {})
-            }
-
-            return undefined
-        }
-        case 'ObjectExpression': {
-            return node
-                .properties
-                ?.reduce((acc, prop) => {
-                    switch (prop.type) {
-                        case 'ObjectProperty': {
-                            return {
-                                ...acc,
-                                [prop.key.name || prop.key.value]: resolveValue(prop.value, scope)
-                            }
-                        }
-                        case 'SpreadElement': {
-                            const spreadObj = resolveValue(prop.argument, scope)
-
-                            if (spreadObj) {
-                                return {
-                                    ...acc,
-                                    ...spreadObj
-                                }
-                            }
-
-                            return acc
-                        }
-                        default:
-                            return acc
-                    }
-                }, {})
-        }
-        case 'StringLiteral':
-        case 'NumericLiteral':
-        case 'BooleanLiteral':
-        case 'NullLiteral': {
-            return node.value
-        }
-        default:
-            return undefined
-    }
-}
-
-module.exports = {
-    log,
-    error,
-    getThemes,
-    isUnistyles,
-    resolveValue,
-    isTypeScriptFile,
-    getBreakpoints,
-    getObjectStructure,
-    sortBreakpoints,
-    saveModuleDeclaration
-}
diff --git a/src/babel/plugin.js b/src/babel/plugin.js
deleted file mode 100644
index b0852629..00000000
--- a/src/babel/plugin.js
+++ /dev/null
@@ -1,195 +0,0 @@
-const generate = require('@babel/generator').default
-const Helpers = require('./helpers')
-
-const plugin = babel => {
-    const { types: t } = babel
-
-    const sortBreakpointsAndInject = (path, breakpoints) => {
-        Helpers.log('Registering breakpoints...')
-
-        const sortedPairs = Helpers.sortBreakpoints(t, breakpoints)
-        const sortedPairsArray = t.arrayExpression(sortedPairs)
-
-        // inject it to registerBreakpoints
-        path.node.arguments.push(sortedPairsArray)
-    }
-
-    const declareBreakpoints = breakpoints => {
-        const sortedPairs = Helpers.sortBreakpoints(t, breakpoints)
-        const tsProperties = sortedPairs.map(pair => {
-            if (pair.elements) {
-                const key = pair.elements[0].value
-                const value = pair.elements[1].value
-
-                return t.tsPropertySignature(
-                    t.identifier(key),
-                    t.tsTypeAnnotation(t.tsLiteralType(t.numericLiteral(value)))
-                )
-            }
-        })
-
-        // create 'declare module' type
-        const moduleDeclaration = t.declareModule(
-            t.stringLiteral('unistyles:static'),
-            t.blockStatement([
-                t.tsTypeAliasDeclaration(
-                    t.identifier('UnistylesBreakpoints'),
-                    null,
-                    t.tsTypeLiteral(tsProperties)
-                )
-            ])
-        )
-
-        const output = generate(moduleDeclaration).code
-
-        Helpers.saveModuleDeclaration('breakpoints.d.ts', output)
-    }
-
-    const declareThemes = (path, themes) => {
-        Helpers.log('Registering themes...')
-
-        const [firstTheme, ...otherThemes] = themes.map(theme => Helpers.resolveValue(theme, path.scope))
-        const firstThemeStructure = Helpers
-            .getObjectStructure(firstTheme)
-            .sort()
-            .toString()
-
-        const allThemesAreTheSame = otherThemes
-            .every(theme => Helpers.getObjectStructure(theme).sort().toString() === firstThemeStructure)
-
-        if (!allThemesAreTheSame) {
-            Helpers.error('Theme structure differs. Create the same structure to generate the TypeScript type')
-        }
-
-        const determineTsType = value => {
-            switch (typeof value) {
-                case 'string':
-                    return t.tsStringKeyword()
-                case 'number':
-                    return t.tsNumberKeyword()
-                case 'boolean':
-                    return t.tsBooleanKeyword()
-                case 'object':
-                    if (value === null) {
-                        return t.tsNullKeyword()
-                    }
-
-                    return t.tsTypeLiteral(createTsProperties(value))
-                default:
-                    return t.tsUnknownKeyword()
-            }
-        }
-
-        const createTsProperties = resolvedObject => {
-            return Object
-                .entries(resolvedObject)
-                .reduce((acc, [key, value]) => {
-                    const tsType = determineTsType(value)
-                    const propertySignature = t.tsPropertySignature(
-                        t.identifier(key),
-                        t.tsTypeAnnotation(tsType)
-                    )
-
-                    return acc.concat(propertySignature)
-                }, [])
-        }
-
-        const tsProperties = createTsProperties(firstTheme)
-
-        // create 'declare module' type
-        const moduleDeclaration = t.declareModule(
-            t.stringLiteral('unistyles:static'),
-            t.blockStatement([
-                t.tsTypeAliasDeclaration(
-                    t.identifier('UnistylesTheme'),
-                    null,
-                    t.tsTypeLiteral(tsProperties)
-                )
-            ])
-        )
-
-        const output = generate(moduleDeclaration).code
-
-        Helpers.saveModuleDeclaration('themes.d.ts', output)
-    }
-
-    return {
-        name: 'unistyles',
-        visitor: {
-            CallExpression: (path, state) => {
-                const callee = path.node.callee
-
-                if (!Helpers.isUnistyles(t, callee)) {
-                    return
-                }
-
-                const breakpoints = Helpers.getBreakpoints(t, callee, path)
-
-                // skip sorting in the runtime, inject sortedMap to the registerBreakpoints
-                if (breakpoints) {
-                    sortBreakpointsAndInject(path, breakpoints)
-                }
-
-                // further processing only for TypeScript
-                if (!Helpers.isTypeScriptFile(state)) {
-                    return
-                }
-
-                if (breakpoints) {
-                    declareBreakpoints(breakpoints)
-                }
-
-                const themes = Helpers.getThemes(t, callee, path)
-
-                if (themes) {
-                    declareThemes(path, themes)
-                }
-            }
-        }
-    }
-}
-
-module.exports = plugin
-
-// PLAYGROUND
-
-// const babel = require('@babel/core')
-// const code = `
-// import { Unistyles } from 'react-native-unistyles'
-//
-// const sharedColors = {
-//     barbie: '#ff9ff3',
-//     oak: '#1dd1a1',
-//     sky: '#48dbfb',
-//     fog: '#c8d6e5',
-//     aloes: '#00d2d3'
-// }
-//
-// const lightTheme = {
-//     colors: {
-//         ...sharedColors,
-//         backgroundColor: '#ffffff',
-//         typography: '#000000'
-//     }
-//     // add any keys/functions/objects/arrays you want!
-// }
-//
-// const darkTheme = {
-//     colors: {
-//         ...sharedColors,
-//         backgroundColor: '#000000',
-//         typography: '#ffffff'
-//     }
-//     // add any keys/functions/objects/arrays you want!
-// }
-//
-// Unistyles.Static.registerThemes({
-//     light: lightTheme,
-//     dark: darkTheme,
-//     custom: lightTheme
-// })
-// `
-
-// const output = babel.transform(code, {
-//     plugins: [plugin]
-// })
diff --git a/src/createStyleSheet.ts b/src/createStyleSheet.ts
index 4ab39cab..b0e5fc50 100644
--- a/src/createStyleSheet.ts
+++ b/src/createStyleSheet.ts
@@ -1,10 +1,9 @@
 import type { CustomNamedStyles } from './types'
+import type { UnistylesThemes } from './global'
 
-// todo
-type T = {}
-type B = Record<string, number>
+type T = UnistylesThemes[keyof UnistylesThemes]
 
-export const createStyleSheet = <S extends CustomNamedStyles<S, B>, X>(styles: S | CustomNamedStyles<S, B> | X | ((theme: T) => X | CustomNamedStyles<X, B>)): S | X => {
+export const createStyleSheet = <S extends CustomNamedStyles<S>, X>(styles: S | CustomNamedStyles<S> | X | ((theme: T) => X | CustomNamedStyles<X>)): S | X => {
     if (typeof styles === 'function') {
         return styles as X
     }
diff --git a/src/createUnistyles.ts b/src/createUnistyles.ts
deleted file mode 100644
index 68cd7ce1..00000000
--- a/src/createUnistyles.ts
+++ /dev/null
@@ -1,72 +0,0 @@
-// should we support unistyle LITE for expo go etc.?
-
-// import { useContext, useMemo } from 'react'
-// import { StyleSheet } from 'react-native'
-// import type {
-//     Breakpoints,
-//     CreateStylesFactory,
-//     CustomNamedStyles,
-//     ExtractBreakpoints,
-//     RemoveKeysWithPrefix,
-//     SortedBreakpointEntries
-// } from './types'
-// import { UnistylesContext } from './UnistylesTheme'
-// import { useDimensions } from './hooks'
-// import { getBreakpointFromScreenWidth, proxifyFunction, parseStyle, sortAndValidateBreakpoints } from './utils'
-//
-// export const createUnistyles = <B extends Breakpoints, T = {}>(breakpoints: B) => {
-//     const sortedBreakpoints = sortAndValidateBreakpoints(breakpoints)
-//     const sortedBreakpointEntries = Object
-//         .entries(sortedBreakpoints) as SortedBreakpointEntries<B>
-//
-//     return {
-//         createStyleSheet: <S extends CustomNamedStyles<S, B>, X>(styles: S | CustomNamedStyles<S, B> | X | ((theme: T) => X | CustomNamedStyles<X, B>)): S | X => {
-//             if (typeof styles === 'function') {
-//                 return styles as X
-//             }
-//
-//             return styles as S
-//         },
-//         useStyles: <ST extends CustomNamedStyles<ST, B>>(stylesheet?: ST | CreateStylesFactory<ST, T>) => {
-//             const theme = useContext(UnistylesContext) as T
-//             const screenSize = useDimensions()
-//             const breakpoint = getBreakpointFromScreenWidth<B>(screenSize.width, sortedBreakpointEntries)
-//
-//             if (!stylesheet) {
-//                 return {
-//                     theme,
-//                     breakpoint,
-//                     styles: {} as ExtractBreakpoints<RemoveKeysWithPrefix<ST, B>, B>
-//                 }
-//             }
-//
-//             const parsedStyles = useMemo(() => typeof stylesheet === 'function'
-//                 ? stylesheet(theme)
-//                 : stylesheet, [theme, stylesheet])
-//
-//             const dynamicStyleSheet = useMemo(() => Object
-//                 .entries(parsedStyles)
-//                 .reduce((acc, [key, value]) => {
-//                     const style = value as CustomNamedStyles<ST, B>
-//
-//                     if (typeof value === 'function') {
-//                         return {
-//                             ...acc,
-//                             [key]: proxifyFunction<B>(value, breakpoint, screenSize, sortedBreakpointEntries)
-//                         }
-//                     }
-//
-//                     return StyleSheet.create({
-//                         ...acc,
-//                         [key]: parseStyle<ST, B>(style, breakpoint, screenSize, sortedBreakpointEntries)
-//                     })
-//                 }, {} as ST), [breakpoint, screenSize, parsedStyles])
-//
-//             return {
-//                 theme,
-//                 breakpoint,
-//                 styles: dynamicStyleSheet as ExtractBreakpoints<RemoveKeysWithPrefix<ST, B>, B>
-//             }
-//         }
-//     }
-// }
diff --git a/src/index.ts b/src/index.ts
index ba85315e..d4301b30 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -2,9 +2,8 @@ import { unistyles } from './Unistyles'
 import type { UnistylesThemes, UnistylesBreakpoints } from './global'
 import { UnistylesColorScheme } from './types'
 
-export { UnistylesTheme } from './UnistylesTheme'
 export { useInitialTheme } from './useInitialTheme'
-export { useUnistyles } from './useUnistyles'
+
 export { useStyles } from './useStyles'
 export { createStyleSheet } from './createStyleSheet'
 
diff --git a/src/types/breakpoints.ts b/src/types/breakpoints.ts
index 71da824b..ddf5ff71 100644
--- a/src/types/breakpoints.ts
+++ b/src/types/breakpoints.ts
@@ -1,8 +1,6 @@
+import type { UnistylesBreakpoints } from '../global'
 import type { MediaQueries } from './mediaQueries'
 
-export type Breakpoints = Record<string, number>
-export type SortedBreakpointEntries<B extends Breakpoints> = [[keyof B & string, number]]
-
 export type ScreenSize = {
     width: number,
     height: number
@@ -12,22 +10,22 @@ export type CreateStylesFactory<ST, Theme> = (theme: Theme) => ST
 
 type WithEmptyObject<V> = keyof V extends never ? {} : V
 
-export type ExtractBreakpoints<T, B extends Breakpoints> = T extends Partial<Record<keyof B & string, infer V>>
+export type ExtractBreakpoints<T> = T extends Partial<Record<keyof UnistylesBreakpoints & string, infer V>>
     ? WithEmptyObject<V>
     : T extends (...args: infer A) => infer R
-        ? (...args: A) => ExtractBreakpoints<R, B>
+        ? (...args: A) => ExtractBreakpoints<R>
         : {
             [K in keyof T]: T[K] extends (...args: infer A) => infer R
-                ? (...args: A) => ExtractBreakpoints<R, B>
+                ? (...args: A) => ExtractBreakpoints<R>
                 : T[K] extends object
-                    ? ExtractBreakpoints<T[K], B>
+                    ? ExtractBreakpoints<T[K]>
                     : T[K]
         }
 
-export type RemoveKeysWithPrefix<T, B extends Breakpoints> = T extends (...args: Array<any>) => infer R
-    ? (...args: Parameters<T>) => RemoveKeysWithPrefix<R, B>
+export type RemoveKeysWithPrefix<T> = T extends (...args: Array<any>) => infer R
+    ? (...args: Parameters<T>) => RemoveKeysWithPrefix<R>
     : T extends object
         ? T extends Record<string, infer _V>
-            ? { [K in keyof T as K extends MediaQueries ? keyof B & string : K]: RemoveKeysWithPrefix<T[K], B> }
-            : { [K in keyof T]: RemoveKeysWithPrefix<T[K], B> }
+            ? { [K in keyof T as K extends MediaQueries ? keyof UnistylesBreakpoints & string : K]: RemoveKeysWithPrefix<T[K]> }
+            : { [K in keyof T]: RemoveKeysWithPrefix<T[K]> }
         : T
diff --git a/src/types/core.ts b/src/types/core.ts
index 528c16ab..3900415f 100644
--- a/src/types/core.ts
+++ b/src/types/core.ts
@@ -14,8 +14,8 @@ import type {
     TranslateYTransform
 } from 'react-native/Libraries/StyleSheet/StyleSheetTypes'
 import type { ImageStyle, TextStyle, ViewStyle } from 'react-native'
-import type { Breakpoints } from './breakpoints'
 import type { MediaQueries } from './mediaQueries'
+import type { UnistylesBreakpoints } from '../global'
 
 type ShadowOffset = {
     width: number,
@@ -60,14 +60,14 @@ type UnistyleView<B> = DeepUniStyle<Omit<ViewStyle, NestedTypes>, B>
 type UnistyleText<B> = DeepUniStyle<Omit<TextStyle, NestedTypes>, B>
 type UnistyleImage<B> = DeepUniStyle<Omit<ImageStyle, NestedTypes>, B>
 
-export type StaticStyles<B extends Breakpoints> =
+export type StaticStyles<B> =
     | UnistyleView<B>
     | UnistyleText<B>
     | UnistyleImage<B>
     & UnistyleNested<B>
 
-export type CustomNamedStyles<T, B extends Breakpoints> = {
-    [K in keyof T]: T[K] extends (...args: infer A) => StaticStyles<B>
-        ? (...args: A) => StaticStyles<B>
-        : StaticStyles<B>
+export type CustomNamedStyles<T> = {
+    [K in keyof T]: T[K] extends (...args: infer A) => StaticStyles<UnistylesBreakpoints>
+        ? (...args: A) => StaticStyles<UnistylesBreakpoints>
+        : StaticStyles<UnistylesBreakpoints>
 }
diff --git a/src/types/index.ts b/src/types/index.ts
index f6965c02..680f1f8a 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -1,11 +1,10 @@
 export * from './normalizer'
 export * from './cxx'
 export type { CustomNamedStyles } from './core'
+export type { MediaQueries } from './mediaQueries'
 export type {
     ScreenSize,
-    Breakpoints,
     CreateStylesFactory,
     ExtractBreakpoints,
-    RemoveKeysWithPrefix,
-    SortedBreakpointEntries
+    RemoveKeysWithPrefix
 } from './breakpoints'
diff --git a/src/useStyles.ts b/src/useStyles.ts
index 7bc39439..dd7e7617 100644
--- a/src/useStyles.ts
+++ b/src/useStyles.ts
@@ -3,19 +3,19 @@ import { StyleSheet } from 'react-native'
 import { parseStyle, proxifyFunction } from './utils'
 import type { CreateStylesFactory, CustomNamedStyles, ExtractBreakpoints, RemoveKeysWithPrefix } from './types'
 import { useUnistyles } from './useUnistyles'
+import type { UnistylesThemes } from './global'
 
 // todo types
-type T = {}
-type B = Record<string, number>
+type T = UnistylesThemes[keyof UnistylesThemes]
 
-export const useStyles = <ST extends CustomNamedStyles<ST, B>>(stylesheet?: ST | CreateStylesFactory<ST, T>) => {
+export const useStyles = <ST extends CustomNamedStyles<ST>>(stylesheet?: ST | CreateStylesFactory<ST, T>) => {
     const { theme, breakpoint, screenSize } = useUnistyles()
 
     if (!stylesheet) {
         return {
             theme,
             breakpoint,
-            styles: {} as ExtractBreakpoints<RemoveKeysWithPrefix<ST, B>, B>
+            styles: {} as ExtractBreakpoints<RemoveKeysWithPrefix<ST>>
         }
     }
 
@@ -26,24 +26,24 @@ export const useStyles = <ST extends CustomNamedStyles<ST, B>>(stylesheet?: ST |
     const dynamicStyleSheet = useMemo(() => Object
         .entries(parsedStyles)
         .reduce((acc, [key, value]) => {
-            const style = value as CustomNamedStyles<ST, B>
+            const style = value as CustomNamedStyles<ST>
 
             if (typeof value === 'function') {
                 return {
                     ...acc,
-                    [key]: proxifyFunction<B>(value, breakpoint!, screenSize)
+                    [key]: proxifyFunction(value, breakpoint!, screenSize)
                 }
             }
 
             return StyleSheet.create({
                 ...acc,
-                [key]: parseStyle<ST, B>(style, breakpoint!, screenSize)
+                [key]: parseStyle<ST>(style, breakpoint!, screenSize)
             })
         }, {} as ST), [breakpoint, screenSize, parsedStyles])
 
     return {
         theme,
         breakpoint,
-        styles: dynamicStyleSheet as ExtractBreakpoints<RemoveKeysWithPrefix<ST, B>, B>
+        styles: dynamicStyleSheet as ExtractBreakpoints<RemoveKeysWithPrefix<ST>>
     }
 }
diff --git a/src/utils/breakpoints.ts b/src/utils/breakpoints.ts
index c3c8d5a0..602b9aa7 100644
--- a/src/utils/breakpoints.ts
+++ b/src/utils/breakpoints.ts
@@ -1,7 +1,8 @@
 import { unistyles } from '../Unistyles'
 import { throwError } from './common'
-import type { Breakpoints, ScreenSize, SortedBreakpointEntries } from '../types'
+import type { ScreenSize, MediaQueries } from '../types'
 import { getKeyForCustomMediaQuery, isMediaQuery } from './mediaQueries'
+import type { UnistylesBreakpoints } from '../global'
 
 /**
  * Sorts the breakpoints object based on its numeric values in ascending order and validates them.
@@ -22,7 +23,7 @@ import { getKeyForCustomMediaQuery, isMediaQuery } from './mediaQueries'
  * const input = { md: 768, lg: 1024, sm: 0 }
  * sortAndValidateBreakpoints(input) // returns { sm: 0, md: 768, lg: 1024 }
  */
-export const sortAndValidateBreakpoints = <B extends Breakpoints>(breakpoints: B): B => {
+export const sortAndValidateBreakpoints = (breakpoints: UnistylesBreakpoints): UnistylesBreakpoints => {
     const sortedPairs = Object
         .entries(breakpoints)
         .sort((breakpoint1, breakpoint2) => {
@@ -32,7 +33,7 @@ export const sortAndValidateBreakpoints = <B extends Breakpoints>(breakpoints: B
             return value1 - value2
         })
 
-    const sortedBreakpoints =  Object.freeze(Object.fromEntries(sortedPairs)) as B
+    const sortedBreakpoints =  Object.freeze(Object.fromEntries(sortedPairs)) as UnistylesBreakpoints
     const breakpointValues = Object.values(sortedBreakpoints)
     const [firstBreakpoint] = breakpointValues
 
@@ -62,7 +63,7 @@ export const sortAndValidateBreakpoints = <B extends Breakpoints>(breakpoints: B
  * const breakpoints = { sm: 0, md: 768, lg: 1024 }
  * getBreakpointFromScreenWidth(800, breakpoints) // returns 'md'
  */
-export const getBreakpointFromScreenWidth = <B extends Breakpoints>(width: number, breakpointEntries: SortedBreakpointEntries<B>): keyof B & string => {
+export const getBreakpointFromScreenWidth = (width: number, breakpointEntries: Array<[keyof UnistylesBreakpoints, UnistylesBreakpoints[keyof UnistylesBreakpoints]]>): keyof UnistylesBreakpoints & string => {
     const [key] = breakpointEntries
         .find(([, value], index, otherBreakpoints) => {
             const minVal = value
@@ -73,7 +74,7 @@ export const getBreakpointFromScreenWidth = <B extends Breakpoints>(width: numbe
             }
 
             return width >= minVal && width < maxVal
-        }) as [keyof B & string, number]
+        }) as [keyof UnistylesBreakpoints & string, number]
 
     return key
 }
@@ -102,23 +103,23 @@ export const getBreakpointFromScreenWidth = <B extends Breakpoints>(width: numbe
  *
  * getValueForBreakpoint(values, 'sm', screenSize, breakpoints); // 'value1'
  */
-export const getValueForBreakpoint = <B extends Breakpoints>(
-    value: Record<keyof B & string, string | number | undefined>,
-    breakpoint: keyof B & string,
+export const getValueForBreakpoint = (
+    value: Record<keyof UnistylesBreakpoints | MediaQueries, string | number | undefined>,
+    breakpoint: keyof UnistylesBreakpoints,
     screenSize: ScreenSize
 ): string | number | undefined => {
     // the highest priority is for custom media queries
     const customMediaQueries = Object
         .entries(value)
         .filter(([key]) => isMediaQuery(key))
-    const customMediaQueryKey = getKeyForCustomMediaQuery(customMediaQueries, screenSize)
+    const customMediaQueryKey = getKeyForCustomMediaQuery(customMediaQueries, screenSize) as keyof typeof value
 
     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 unifiedKey = breakpoint.toLowerCase() as keyof typeof value
     const directBreakpoint = value[unifiedKey]
 
     // if there is a direct key like 'sm' or 'md', or value for this key exists but its undefined
@@ -136,6 +137,6 @@ export const getValueForBreakpoint = <B extends Breakpoints>(
         .map(([key]) => key)
 
     return breakpointPairs.length > 0
-        ? value[availableBreakpoints[availableBreakpoints.length - 1] as keyof B & string]
+        ? value[availableBreakpoints[availableBreakpoints.length - 1] as keyof UnistylesBreakpoints & string]
         : undefined
 }
diff --git a/src/utils/styles.ts b/src/utils/styles.ts
index 4b60996c..72118c18 100644
--- a/src/utils/styles.ts
+++ b/src/utils/styles.ts
@@ -1,7 +1,8 @@
-import type { Breakpoints, CustomNamedStyles, ScreenSize } from '../types'
+import type { CustomNamedStyles, ScreenSize } from '../types'
 import { getValueForBreakpoint } from './breakpoints'
 import { normalizeStyles } from './normalizeStyles'
 import { isWeb } from './common'
+import type { UnistylesBreakpoints } from '../global'
 
 /**
  * Proxies a function to parse its return value for custom media queries or breakpoints.
@@ -24,8 +25,8 @@ import { isWeb } from './common'
  * const proxifiedFunction = proxifyFunction(myFunction, 'sm', screenSize, breakpoints)
  * proxifiedFunction() // parsed style based on screenSize and breakpoints
  */
-export const proxifyFunction = <B extends Breakpoints>(
-    fn: Function, breakpoint: keyof B & string,
+export const proxifyFunction = (
+    fn: Function, breakpoint: keyof UnistylesBreakpoints & string,
     screenSize: ScreenSize
 ): Function => new Proxy(fn, {
     apply: (target, thisArg, argumentsList) =>
@@ -57,14 +58,14 @@ export const proxifyFunction = <B extends Breakpoints>(
  * const parsedStyle = parseStyle(style, 'sm', screenSize, breakpoints)
  * // { fontSize: '12px' }
  */
-export const parseStyle = <T, B extends Breakpoints>(
-    style: CustomNamedStyles<T, B>,
-    breakpoint: keyof B & string,
+export const parseStyle = <T>(
+    style: CustomNamedStyles<T>,
+    breakpoint: keyof UnistylesBreakpoints & string,
     screenSize: ScreenSize
 ): T => {
     const entries = Object.entries(style) as [[
         keyof T,
-        CustomNamedStyles<T, B> | Record<keyof B & string, string | number | undefined>]
+        CustomNamedStyles<T> | Record<keyof UnistylesBreakpoints & string, string | number | undefined>]
     ]
 
     const parsedStyles = Object
@@ -75,7 +76,7 @@ export const parseStyle = <T, B extends Breakpoints>(
                 if (hasNestedProperties) {
                     return [
                         key,
-                        parseStyle(value as CustomNamedStyles<T, B>, breakpoint, screenSize)
+                        parseStyle(value as CustomNamedStyles<T>, breakpoint, screenSize)
                     ]
                 }
 
@@ -97,8 +98,8 @@ export const parseStyle = <T, B extends Breakpoints>(
 
                 return [
                     key,
-                    getValueForBreakpoint<B>(
-                        value as Record<keyof B & string, string | number | undefined>,
+                    getValueForBreakpoint(
+                        value as Record<keyof UnistylesBreakpoints & string, string | number | undefined>,
                         breakpoint,
                         screenSize
                     )