react-native-unistyles 1.0.0-beta.3 → 1.0.0-beta.4

package/README.md

@@ -28,7 +28,6 @@ Suggestions, ideas, and potential improvements are always welcome!
 
 ## Setup
 
-
 **1. Install library**
 
 ```cmd
@@ -39,6 +38,26 @@ yarn add react-native-unistyles
 
 You don't have to follow a specific format. Just make an object and add any keys/values you like.
 
+```ts
+// theme.ts
+export const theme = {
+  colors: {
+    blood: '#eb4d4b',
+    barbie: '#e056fd',
+    pumpkin: '#f0932b',
+    background: '#ffffff'
+  },
+  margins: {
+    sm: 2,
+    md: 4,
+    lg: 8,
+    xl: 12
+  }
+}
+```
+
+or something more advanced with nested objects / functions:
+
 ```ts
 // theme.ts
 export const theme = {
@@ -106,7 +125,7 @@ export const App: React.FunctionComponent = () => (
 )
 ```
 
-**5. Access createStyles and useStyles with a factory**
+**5. Access createStyleSheet and useStyles with a factory**
 
 ```ts
 // styles.ts
@@ -119,22 +138,22 @@ import { breakpoints } from './breakpoints'
 import { theme } from './theme'
 
 export const {
-    createStyles,
+    createStyleSheet,
     useStyles,
 } = createUnistyles<typeof breakpoints, typeof theme>(breakpoints)
 ```
 
 ## Basic Usage
 
-Library gives you two functions from the factory:
-- `createStyles` which replaces `StyleSheet.create`
-- `useStyles` which parses your styles based on screen height, width and theme
+After the initial setup, you only need to focus on two functions responsible for your styles:
+- `createStyleSheet` which replaces `StyleSheet.create`
+- `useStyles` which parses your styles and ensures TypeScript compatibility with media queries and breakpoints
 
 ```tsx
 import React from 'react'
 import { View, Text } from 'react-native'
-// access createStyles and useStyles exported from factory
-import { createStyles, useStyles } from 'lib/styles'
+// access createStyleSheet and useStyles exported from factory
+import { createStyleSheet, useStyles } from 'lib/styles'
 
 export const ExampleUnistyles = () => {
     const { styles } = useStyles(stylesheet)
@@ -148,7 +167,7 @@ export const ExampleUnistyles = () => {
     )
 }
 
-const stylesheet = createStyles(theme => ({
+const stylesheet = createStyleSheet(theme => ({
     container: {
        flex: 1,
        justifyContent: 'center',
@@ -161,24 +180,82 @@ const stylesheet = createStyles(theme => ({
 }))
 ```
 
-`createStyles` takes an object like `StyleSheet.create` or function that injects your theme
+## createStyleSheet
+
+`createStyleSheet` is interchangeable with `StyleSheet.create`. You can use objects, and it will function identically to its React Native counterpart.
+
+```ts
+const stylesheet = createStyleSheet({
+    container: {
+       flex: 1,
+       justifyContent: 'center',
+       alignItems: 'center',
+    },
+})
+```
+The difference is that you can now use breakpoints and media queries:
+
+```ts
+const stylesheet = createStyleSheet({
+    container: {
+       flex: 1,
+       justifyContent: 'center',
+       alignItems: 'center',
+       flexDirection: {
+           xs: 'row',
+           sm: 'column',
+           ':w[800]': 'row'
+       }
+    },
+})
+```
+
+`createStyleSheet` also accepts a function, to which the library will inject your theme:
+
+```ts
+const stylesheet = createStyleSheet(theme => ({
+    container: {
+       flex: 1,
+       justifyContent: 'center',
+       alignItems: 'center',
+       flexDirection: {
+           xs: 'row',
+           sm: 'column',
+           ':w[800]': 'row'
+       },
+       backgroundColor: theme.colors.background
+    },
+}))
+```
+
+Importantly, you'll receive the same TypeScript hints as with `StyleSheet.create`!
 
-`useStyles` hook takes a `stylesheet` and returns an object with two keys:
-- `styles` - parsed styles that can be used directly in React Native components
-- `theme` - your app's theme that can be used in JSX
+## useStyles
 
-You can also skip `stylesheet` if you just want to access `theme`:
+`useStyle` ties everything together and handles the heavy lifting. Without `useStyles`, you can't utilize features like:
+- breakpoints
+- media queries
+- themes
+
+_useStyles_ allows you to skip the `stylesheet` if you only want to access the `theme`:
 
 ```tsx
 const { theme } = useStyles()
 ```
 
+For more advanced usage, pass your `stylesheet` generated with `createStyleSheet`:
+
+```tsx
+// you can still access theme
+const { styles, theme } = useStyles(stylesheet)
+```
+
 ## Breakpoints
 
 Any style can change based on breakpoints. To do this, change a value to an object:
 
 ```ts
-const stylesheet = createStyles(theme => ({
+const stylesheet = createStyleSheet(theme => ({
     container: {
        flex: 1,
        justifyContent: 'center',
@@ -195,6 +272,33 @@ const stylesheet = createStyles(theme => ({
 }))
 ```
 
+You can even use it with nested objects like `transform` or `shadowOffset`:
+
+```ts
+const stylesheet = createStyleSheet(theme => ({
+    container: {
+       flex: 1,
+       justifyContent: 'center',
+       alignItems: 'center',
+       backgroundColor: {
+         xs: theme.colors.background,
+         sm: theme.colors.barbie
+       },
+       transform: [
+           {
+               translateX: 100
+           },
+           {
+               scale: {
+                   xs: 1.5,
+                   ':w[500]': 1
+               }
+           }
+       ]
+    }
+}))
+```
+
 Library will choose the correct value (based on screen width) in the runtime.
 
 ## Media queries
@@ -211,7 +315,7 @@ For more advanced usage and pixel perfect designs you can also use a custom medi
 Media queries can be mixed with breakpoints, but have a bigger priority:
 
 ```tsx
-const stylesheet = createStyles(theme => ({
+const stylesheet = createStyleSheet(theme => ({
     container: {
        justifyContent: 'center',
        alignItems: 'center',
@@ -220,7 +324,8 @@ const stylesheet = createStyles(theme => ({
           sm: 'row',
        },
        backgroundColor: {
-          xs: theme.colors.background,
+          md: theme.colors.background,
+          // even though md might overlap with >600px, lib will use 'barbie'
           ':w[600]': theme.colors.barbie
        }
     },
@@ -255,7 +360,7 @@ export const ExampleUnistyles = () => {
     )
 }
 
-const stylesheet = createStyles({
+const stylesheet = createStyleSheet({
     scrollContainer: {
         flex: 1,
         justifyContent: 'center',
@@ -267,16 +372,221 @@ const stylesheet = createStyles({
     })
 })
 ```
+If you use a dynamic function, library will wrap it in a `Proxy` to make sure the correct values of breakpoints will be used:
+
+```ts
+const stylesheet = createStyleSheet(theme => ({
+    scrollContainer: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    post: (index: number) => ({
+        // breakpoints and media queries works with dynamic function
+        backgroundColor: {
+            xs: index % 2 === 0
+                ? theme.colors.gold
+                : theme.colors.silver,
+            sm: theme.colors.red
+        }
+    })
+}))
+```
+
+## Dynamic themes
+
+You can incorporate as many themes as you desire in your application. While there's flexibility in how you structure your theme, it's essential to maintain consistency with the TypeScript type:
+
+To promote reusability and maintainability, it's a good practice to share as many values between themes as possible:
+
+```ts
+// move shared colors to object
+const sharedColors = {
+    barbie: '#ff9ff3',
+    oak: '#1dd1a1',
+    sky: '#48dbfb',
+    fog: '#c8d6e5',
+    aloes: '#00d2d3'
+}
+
+export const lightTheme = {
+    colors: {
+        // reuse or override them
+        ...sharedColors,
+        backgroundColor: '#ffffff',
+        typography: '#000000'
+    }
+    // other keys in common with darkTheme
+}
+
+export const darkTheme = {
+    colors: {
+        // reuse or override them
+        ...sharedColors,
+        backgroundColor: '#000000',
+        typography: '#ffffff'
+    }
+    // other keys in common with lightTheme
+}
+
+// export type that will be used to describe your theme
+export type AppTheme = typeof lightTheme | typeof darkTheme
+```
+
+With the themes set up, modify your  `createUnistyles` to consume your `AppTheme` type:
+
+```ts
+export const { useStyles, createStyleSheet } = createUnistyles<typeof breakpoints, AppTheme>(breakpoints)
+```
+
+The final step is to switch your theme based on certain states, persisted values, databases, etc.:
+
+```tsx
+export const App: React.FunctionComponent = () => {
+    // obtain here your dark or light theme. It can be storage, state, mmkv, or whateber you use
+    // const [yourAppTheme] = useState(lightTheme)
+    // const [yourAppTheme] = useYourStorage()
+    // const [yourAppTheme] = useMMKVObject<AppTheme>(Theme)
+
+    // switching theme will re-render your stylesheets automatically
+    return (
+        <UnistylesTheme theme={yourAppTheme}>
+            <Examples.Extreme />
+        </UnistylesTheme>
+    )
+}
+```
+
+## Variants
+
+`react-native-unistyles` isn't a UI/component library, so you're in charge of designing variants. With no restrictions and using your creativity, you can easily create variants for your components.
+
+Let's examine variants for the `Text` component. Imagine you want to create several variants for your `Typography` components:
+- Heading
+- Regular
+- Thin
+
+To achieve this, add variants to your theme:
+
+```ts
+export const lightTheme = {
+    colors: {
+        ...sharedColors,
+        backgroundColor: '#ffffff',
+        typography: '#000000'
+    },
+    components: {
+        typography: {
+            base: {
+                fontFamily: 'Roboto',
+                fontSize: 12,
+            },
+            heading: {
+                fontFamily: 'Roboto-Medium',
+                fontSize: 24,
+            },
+            regular: {
+                fontFamily: 'Roboto',
+                fontSize: 12,
+            },
+            thin: {
+                fontFamily: 'Roboto-Thin',
+                fontSize: 12,
+            },
+            bold: {
+                fontWeight: 'bold'
+            }
+        }
+    }
+}
+```
+Next, create a base component:
+
+```tsx
+import React from 'react'
+import type { PropsWithChildren } from 'react'
+import { Text, TextStyle } from 'react-native'
+import { createStyleSheet, useStyles } from 'lib/styles'
+
+interface BaseTextProps extends PropsWithChildren {
+    bold: boolean,
+    style: TextStyle
+}
+
+export const BaseText: React.FunctionComponent<BaseTextProps> = ({
+    children,
+    bold = false,
+    style = {}
+}) => {
+    const {styles} = useStyles(stylesheet)
+
+    return (
+        <Text
+            style={{
+                ...styles.baseText,
+                ...bold
+                    ? styles.baseText
+                    : {},
+                // pass other styles via props
+                ...style
+            }}
+        >
+            {children}
+        </Text>
+    )
+}
+
+const stylesheet = createStyleSheet(theme => ({
+    baseText: {
+        ...theme.components.typography.base
+    },
+    bold: {
+        ...theme.components.typography.bold
+    }
+}))
+```
+
+Now, let's create another variant, e.g., Heading:
+
+```tsx
+import React from 'react'
+import type { PropsWithChildren } from 'react'
+import { Text, TextStyle } from 'react-native'
+import { createStyleSheet, useStyles } from 'lib/styles'
+import { BaseText } from 'lib/components'
+
+interface BaseTextProps extends PropsWithChildren {
+    bold: boolean,
+    text: string
+}
+
+export const Heading: React.FunctionComponent<BaseTextProps> = ({
+    text,
+    bold = false
+}) => {
+    const { theme } = useStyles()
+
+    return (
+        <BaseText
+            bold={bold}
+            style={theme.components.typography.heading}
+        >
+            {text}
+        </BaseText>
+    )
+}
+```
+And so on...
 
 ## Migrate from StyleSheet
 
 `react-native-unistyles` embraces the simplicity of `StyleSheet`, making it easy to integrate into your project.
 
-You can replace `StyleSheet.create` with `createStyles` and it will work exactly the same:
+You can replace `StyleSheet.create` with `createStyleSheet` and it will work exactly the same:
 
 ```diff
 -const styles = StyleSheet.create({
-+const styles = createStyles({
++const styles = createStyleSheet({
     scrollContainer: {
         flex: 1,
         justifyContent: 'center',
@@ -294,21 +604,7 @@ export const ExampleUnistyles = () => {
 }
 ```
 
-With the hook in place, you can now use `breakpoints` and `media-queries`.
-
-Additionally, to access the `theme` use a function instead of an  `object`:
-
-```diff
--const stylesheet = createStyles({
-+const stylesheet = createStyles(theme => ({
-    scrollContainer: {
-        flex: 1,
-        justifyContent: 'center',
-        alignItems: 'center',
-        backgroundColor: theme.colors.background
-    }
-}))
-```
+With the hook in place, you can now use all the features.
 
 ## Example
 
@@ -318,6 +614,17 @@ In order to check out working example go to [example/](./example).
 
 For more detailed explanation please refer to my blog post [here](https://www.reactnativecrossroads.com/posts/level-up-react-native-styles).
 
+
+## Sponsor my work
+
+If you found the `react-native-unistyles` time-saving and valuable, please consider sponsoring my work. Your support enables me to continue creating libraries with a fresh approach.
+
+Github: https://github.com/sponsors/jpudysz
+
+Ko-fi: https://ko-fi.com/jpudysz
+
+Your support is greatly appreciated and helps me dedicate more time and resources to creating quality libraries. Thank you for all the support!
+
 ## License
 
 MIT

package/lib/commonjs/createUnistyles.js

@@ -11,7 +11,21 @@ var _hooks = require("./hooks");
 const createUnistyles = breakpoints => {
   const sortedBreakpoints = (0, _utils.sortAndValidateBreakpoints)(breakpoints);
   return {
-    createStyles: styles => styles,
+    /**
+     * @deprecated The method should not be used, proposed version by the community is createStyleSheet, will be removed in RC
+     */
+    createStyles: styles => {
+      if (typeof styles === 'function') {
+        return styles;
+      }
+      return styles;
+    },
+    createStyleSheet: styles => {
+      if (typeof styles === 'function') {
+        return styles;
+      }
+      return styles;
+    },
     useStyles: stylesheet => {
       const theme = (0, _react.useContext)(_UnistylesTheme.UnistylesContext);
       const dimensions = (0, _hooks.useDimensions)();

package/lib/commonjs/createUnistyles.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","require","_UnistylesTheme","_utils","_hooks","createUnistyles","breakpoints","sortedBreakpoints","sortAndValidateBreakpoints","createStyles","styles","useStyles","stylesheet","theme","useContext","UnistylesContext","dimensions","useDimensions","breakpoint","getBreakpointFromScreenWidth","width","screenSize","height","parsedStyles","dynamicStyleSheet","Object","entries","reduce","acc","_ref","key","value","x","proxifyFunction","parseStyle","exports"],"sourceRoot":"../../src","sources":["createUnistyles.ts"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AAEA,IAAAC,eAAA,GAAAD,OAAA;AACA,IAAAE,MAAA,GAAAF,OAAA;AACA,IAAAG,MAAA,GAAAH,OAAA;AAEO,MAAMI,eAAe,GAA8CC,WAAc,IAAK;EACzF,MAAMC,iBAAiB,GAAG,IAAAC,iCAA0B,EAACF,WAAW,CAAM;EAEtE,OAAO;IACHG,YAAY,EAAsCC,MAAqC,IAAKA,MAAW;IACvGC,SAAS,EAAwCC,UAA4C,IAAK;MAC9F,MAAMC,KAAK,GAAG,IAAAC,iBAAU,EAACC,gCAAgB,CAAM;MAC/C,MAAMC,UAAU,GAAG,IAAAC,oBAAa,EAAC,CAAC;MAClC,MAAMC,UAAU,GAAG,IAAAC,mCAA4B,EAAIH,UAAU,CAACI,KAAK,EAAEb,iBAAiB,CAAC;MACvF,MAAMc,UAAsB,GAAG;QAC3BD,KAAK,EAAEJ,UAAU,CAACI,KAAK;QACvBE,MAAM,EAAEN,UAAU,CAACM;MACvB,CAAC;MAED,IAAI,CAACV,UAAU,EAAE;QACb,OAAO;UACHC,KAAK;UACLH,MAAM,EAAE,CAAC;QACb,CAAC;MACL;MAEA,MAAMa,YAAY,GAAG,OAAOX,UAAU,KAAK,UAAU,GAC/CA,UAAU,CAACC,KAAK,CAAC,GACjBD,UAAU;MAEhB,MAAMY,iBAAiB,GAAGC,MAAM,CAC3BC,OAAO,CAACH,YAAY,CAAC,CACrBI,MAAM,CAAC,CAACC,GAAG,EAAAC,IAAA,KAAmB;QAAA,IAAjB,CAACC,GAAG,EAAEC,KAAK,CAAC,GAAAF,IAAA;QACtB,MAAMG,CAAC,GAAGD,KAAiC;QAE3C,IAAI,OAAOA,KAAK,KAAK,UAAU,EAAE;UAC7B,OAAO;YACH,GAAGH,GAAG;YACN,CAACE,GAAG,GAAG,IAAAG,sBAAe,EAAIF,KAAK,EAAEb,UAAU,EAAEG,UAAU,EAAEd,iBAAiB;UAC9E,CAAC;QACL;QAEA,OAAO;UACH,GAAGqB,GAAG;UACN,CAACE,GAAG,GAAG,IAAAI,iBAAU,EAAQF,CAAC,EAAEd,UAAU,EAAEG,UAAU,EAAEd,iBAAiB;QACzE,CAAC;MACL,CAAC,EAAE,CAAC,CAAO,CAAC;MAEhB,OAAO;QACHM,KAAK;QACLH,MAAM,EAAEc;MACZ,CAAC;IACL;EACJ,CAAC;AACL,CAAC;AAAAW,OAAA,CAAA9B,eAAA,GAAAA,eAAA"}
+{"version":3,"names":["_react","require","_UnistylesTheme","_utils","_hooks","createUnistyles","breakpoints","sortedBreakpoints","sortAndValidateBreakpoints","createStyles","styles","createStyleSheet","useStyles","stylesheet","theme","useContext","UnistylesContext","dimensions","useDimensions","breakpoint","getBreakpointFromScreenWidth","width","screenSize","height","parsedStyles","dynamicStyleSheet","Object","entries","reduce","acc","_ref","key","value","x","proxifyFunction","parseStyle","exports"],"sourceRoot":"../../src","sources":["createUnistyles.ts"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AAEA,IAAAC,eAAA,GAAAD,OAAA;AACA,IAAAE,MAAA,GAAAF,OAAA;AACA,IAAAG,MAAA,GAAAH,OAAA;AAEO,MAAMI,eAAe,GAA8CC,WAAc,IAAK;EACzF,MAAMC,iBAAiB,GAAG,IAAAC,iCAA0B,EAACF,WAAW,CAAC;EAEjE,OAAO;IACH;AACR;AACA;IACQG,YAAY,EAAyCC,MAAqF,IAAY;MAClJ,IAAI,OAAOA,MAAM,KAAK,UAAU,EAAE;QAC9B,OAAOA,MAAM;MACjB;MAEA,OAAOA,MAAM;IACjB,CAAC;IACDC,gBAAgB,EAAyCD,MAAqF,IAAY;MACtJ,IAAI,OAAOA,MAAM,KAAK,UAAU,EAAE;QAC9B,OAAOA,MAAM;MACjB;MAEA,OAAOA,MAAM;IACjB,CAAC;IACDE,SAAS,EAAwCC,UAA4C,IAAK;MAC9F,MAAMC,KAAK,GAAG,IAAAC,iBAAU,EAACC,gCAAgB,CAAM;MAC/C,MAAMC,UAAU,GAAG,IAAAC,oBAAa,EAAC,CAAC;MAClC,MAAMC,UAAU,GAAG,IAAAC,mCAA4B,EAAIH,UAAU,CAACI,KAAK,EAAEd,iBAAiB,CAAC;MACvF,MAAMe,UAAsB,GAAG;QAC3BD,KAAK,EAAEJ,UAAU,CAACI,KAAK;QACvBE,MAAM,EAAEN,UAAU,CAACM;MACvB,CAAC;MAED,IAAI,CAACV,UAAU,EAAE;QACb,OAAO;UACHC,KAAK;UACLJ,MAAM,EAAE,CAAC;QACb,CAAC;MACL;MAEA,MAAMc,YAAY,GAAG,OAAOX,UAAU,KAAK,UAAU,GAC/CA,UAAU,CAACC,KAAK,CAAC,GACjBD,UAAU;MAEhB,MAAMY,iBAAiB,GAAGC,MAAM,CAC3BC,OAAO,CAACH,YAAY,CAAC,CACrBI,MAAM,CAAC,CAACC,GAAG,EAAAC,IAAA,KAAmB;QAAA,IAAjB,CAACC,GAAG,EAAEC,KAAK,CAAC,GAAAF,IAAA;QACtB,MAAMG,CAAC,GAAGD,KAAiC;QAE3C,IAAI,OAAOA,KAAK,KAAK,UAAU,EAAE;UAC7B,OAAO;YACH,GAAGH,GAAG;YACN,CAACE,GAAG,GAAG,IAAAG,sBAAe,EAAIF,KAAK,EAAEb,UAAU,EAAEG,UAAU,EAAEf,iBAAiB;UAC9E,CAAC;QACL;QAEA,OAAO;UACH,GAAGsB,GAAG;UACN,CAACE,GAAG,GAAG,IAAAI,iBAAU,EAAQF,CAAC,EAAEd,UAAU,EAAEG,UAAU,EAAEf,iBAAiB;QACzE,CAAC;MACL,CAAC,EAAE,CAAC,CAAO,CAAC;MAEhB,OAAO;QACHO,KAAK;QACLJ,MAAM,EAAEe;MACZ,CAAC;IACL;EACJ,CAAC;AACL,CAAC;AAAAW,OAAA,CAAA/B,eAAA,GAAAA,eAAA"}

package/lib/commonjs/utils/styles.js

@@ -73,8 +73,7 @@ const parseStyle = (style, breakpoint, screenSize, breakpoints) => {
     if (isDynamicFunction || isValidStyle) {
       return [key, value];
     }
-    const valueWithBreakpoint = value;
-    return [key, (0, _breakpoints.getValueForBreakpoint)(valueWithBreakpoint, breakpoint, screenSize, breakpoints)];
+    return [key, (0, _breakpoints.getValueForBreakpoint)(value, breakpoint, screenSize, breakpoints)];
   }));
 };
 exports.parseStyle = parseStyle;

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

@@ -1 +1 @@
-{"version":3,"names":["_breakpoints","require","proxifyFunction","fn","breakpoint","screenSize","breakpoints","Proxy","apply","target","thisArg","argumentsList","parseStyle","exports","style","entries","Object","fromEntries","map","_ref","key","value","isNestedStyle","isTransform","Array","isArray","isDynamicFunction","isValidStyle","valueWithBreakpoint","getValueForBreakpoint"],"sourceRoot":"../../../src","sources":["utils/styles.ts"],"mappings":";;;;;;AACA,IAAAA,YAAA,GAAAC,OAAA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMC,eAAe,GAAGA,CAC3BC,EAAY,EAAEC,UAA4B,EAC1CC,UAAsB,EACtBC,WAAc,KACH,IAAIC,KAAK,CAACJ,EAAE,EAAE;EACzBK,KAAK,EAAEA,CAACC,MAAM,EAAEC,OAAO,EAAEC,aAAa,KAClCC,UAAU,CAACH,MAAM,CAACD,KAAK,CAACE,OAAO,EAAEC,aAAa,CAAC,EAAEP,UAAU,EAAEC,UAAU,EAAEC,WAAW;AAC5F,CAAC,CAAC;;AAEF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAxBAO,OAAA,CAAAX,eAAA,GAAAA,eAAA;AAyBO,MAAMU,UAAU,GAAGA,CACtBE,KAA8B,EAC9BV,UAA4B,EAC5BC,UAAsB,EACtBC,WAAc,KACV;EACJ,MAAMS,OAAO,GAAGC,MAAM,CAACD,OAAO,CAACD,KAAK,CAAyC;EAE7E,OAAOE,MAAM,CACRC,WAAW,CAACF,OAAO,CACfG,GAAG,CAACC,IAAA,IAAkB;IAAA,IAAjB,CAACC,GAAG,EAAEC,KAAK,CAAC,GAAAF,IAAA;IACd,MAAMG,aAAa,GAAGF,GAAG,KAAK,cAAc;IAE5C,IAAIE,aAAa,EAAE;MACf,OAAO,CACHF,GAAG,EACHR,UAAU,CAACS,KAAK,EAAEjB,UAAU,EAAEC,UAAU,EAAEC,WAAW,CAAC,CACzD;IACL;IAEA,MAAMiB,WAAW,GAAGH,GAAG,KAAK,WAAW;IAEvC,IAAIG,WAAW,IAAIC,KAAK,CAACC,OAAO,CAACJ,KAAK,CAAC,EAAE;MACrC,OAAO,CACHD,GAAG,EACHC,KAAK,CAACH,GAAG,CAACG,KAAK,IAAIT,UAAU,CAACS,KAAK,EAAEjB,UAAU,EAAEC,UAAU,EAAEC,WAAW,CAAC,CAAC,CAC7E;IACL;IAEA,MAAMoB,iBAAiB,GAAG,OAAOL,KAAK,KAAK,UAAU;IACrD,MAAMM,YAAY,GAAG,OAAON,KAAK,KAAK,QAAQ;IAE9C,IAAIK,iBAAiB,IAAIC,YAAY,EAAE;MACnC,OAAO,CAACP,GAAG,EAAEC,KAAK,CAAC;IACvB;IAEA,MAAMO,mBAAmB,GAAGP,KAAkD;IAE9E,OAAO,CAACD,GAAG,EAAE,IAAAS,kCAAqB,EAAID,mBAAmB,EAAExB,UAAU,EAAEC,UAAU,EAAEC,WAAW,CAAC,CAAC;EACpG,CAAC,CACL,CAAC;AACT,CAAC;AAAAO,OAAA,CAAAD,UAAA,GAAAA,UAAA"}
+{"version":3,"names":["_breakpoints","require","proxifyFunction","fn","breakpoint","screenSize","breakpoints","Proxy","apply","target","thisArg","argumentsList","parseStyle","exports","style","entries","Object","fromEntries","map","_ref","key","value","isNestedStyle","isTransform","Array","isArray","isDynamicFunction","isValidStyle","getValueForBreakpoint"],"sourceRoot":"../../../src","sources":["utils/styles.ts"],"mappings":";;;;;;AACA,IAAAA,YAAA,GAAAC,OAAA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMC,eAAe,GAAGA,CAC3BC,EAAY,EAAEC,UAA4B,EAC1CC,UAAsB,EACtBC,WAAc,KACH,IAAIC,KAAK,CAACJ,EAAE,EAAE;EACzBK,KAAK,EAAEA,CAACC,MAAM,EAAEC,OAAO,EAAEC,aAAa,KAClCC,UAAU,CAACH,MAAM,CAACD,KAAK,CAACE,OAAO,EAAEC,aAAa,CAAC,EAAEP,UAAU,EAAEC,UAAU,EAAEC,WAAW;AAC5F,CAAC,CAAC;;AAEF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAxBAO,OAAA,CAAAX,eAAA,GAAAA,eAAA;AAyBO,MAAMU,UAAU,GAAGA,CACtBE,KAA8B,EAC9BV,UAA4B,EAC5BC,UAAsB,EACtBC,WAAc,KACV;EACJ,MAAMS,OAAO,GAAGC,MAAM,CAACD,OAAO,CAACD,KAAK,CAGnC;EAED,OAAOE,MAAM,CACRC,WAAW,CAACF,OAAO,CACfG,GAAG,CAACC,IAAA,IAAkB;IAAA,IAAjB,CAACC,GAAG,EAAEC,KAAK,CAAC,GAAAF,IAAA;IACd,MAAMG,aAAa,GAAGF,GAAG,KAAK,cAAc;IAE5C,IAAIE,aAAa,EAAE;MACf,OAAO,CACHF,GAAG,EACHR,UAAU,CAACS,KAAK,EAA6BjB,UAAU,EAAEC,UAAU,EAAEC,WAAW,CAAC,CACpF;IACL;IAEA,MAAMiB,WAAW,GAAGH,GAAG,KAAK,WAAW;IAEvC,IAAIG,WAAW,IAAIC,KAAK,CAACC,OAAO,CAACJ,KAAK,CAAC,EAAE;MACrC,OAAO,CACHD,GAAG,EACHC,KAAK,CAACH,GAAG,CAACG,KAAK,IAAIT,UAAU,CAACS,KAAK,EAAEjB,UAAU,EAAEC,UAAU,EAAEC,WAAW,CAAC,CAAC,CAC7E;IACL;IAEA,MAAMoB,iBAAiB,GAAG,OAAOL,KAAK,KAAK,UAAU;IACrD,MAAMM,YAAY,GAAG,OAAON,KAAK,KAAK,QAAQ;IAE9C,IAAIK,iBAAiB,IAAIC,YAAY,EAAE;MACnC,OAAO,CAACP,GAAG,EAAEC,KAAK,CAAC;IACvB;IAEA,OAAO,CACHD,GAAG,EACH,IAAAQ,kCAAqB,EACjBP,KAAK,EACLjB,UAAU,EACVC,UAAU,EACVC,WACJ,CAAC,CACJ;EACL,CAAC,CACL,CAAC;AACT,CAAC;AAAAO,OAAA,CAAAD,UAAA,GAAAA,UAAA"}

package/lib/module/createUnistyles.js

@@ -5,7 +5,21 @@ import { useDimensions } from './hooks';
 export const createUnistyles = breakpoints => {
   const sortedBreakpoints = sortAndValidateBreakpoints(breakpoints);
   return {
-    createStyles: styles => styles,
+    /**
+     * @deprecated The method should not be used, proposed version by the community is createStyleSheet, will be removed in RC
+     */
+    createStyles: styles => {
+      if (typeof styles === 'function') {
+        return styles;
+      }
+      return styles;
+    },
+    createStyleSheet: styles => {
+      if (typeof styles === 'function') {
+        return styles;
+      }
+      return styles;
+    },
     useStyles: stylesheet => {
       const theme = useContext(UnistylesContext);
       const dimensions = useDimensions();

package/lib/module/createUnistyles.js.map

@@ -1 +1 @@
-{"version":3,"names":["useContext","UnistylesContext","getBreakpointFromScreenWidth","proxifyFunction","parseStyle","sortAndValidateBreakpoints","useDimensions","createUnistyles","breakpoints","sortedBreakpoints","createStyles","styles","useStyles","stylesheet","theme","dimensions","breakpoint","width","screenSize","height","parsedStyles","dynamicStyleSheet","Object","entries","reduce","acc","_ref","key","value","x"],"sourceRoot":"../../src","sources":["createUnistyles.ts"],"mappings":"AAAA,SAASA,UAAU,QAAQ,OAAO;AAElC,SAASC,gBAAgB,QAAQ,kBAAkB;AACnD,SAASC,4BAA4B,EAAEC,eAAe,EAAEC,UAAU,EAAEC,0BAA0B,QAAQ,SAAS;AAC/G,SAASC,aAAa,QAAQ,SAAS;AAEvC,OAAO,MAAMC,eAAe,GAA8CC,WAAc,IAAK;EACzF,MAAMC,iBAAiB,GAAGJ,0BAA0B,CAACG,WAAW,CAAM;EAEtE,OAAO;IACHE,YAAY,EAAsCC,MAAqC,IAAKA,MAAW;IACvGC,SAAS,EAAwCC,UAA4C,IAAK;MAC9F,MAAMC,KAAK,GAAGd,UAAU,CAACC,gBAAgB,CAAM;MAC/C,MAAMc,UAAU,GAAGT,aAAa,CAAC,CAAC;MAClC,MAAMU,UAAU,GAAGd,4BAA4B,CAAIa,UAAU,CAACE,KAAK,EAAER,iBAAiB,CAAC;MACvF,MAAMS,UAAsB,GAAG;QAC3BD,KAAK,EAAEF,UAAU,CAACE,KAAK;QACvBE,MAAM,EAAEJ,UAAU,CAACI;MACvB,CAAC;MAED,IAAI,CAACN,UAAU,EAAE;QACb,OAAO;UACHC,KAAK;UACLH,MAAM,EAAE,CAAC;QACb,CAAC;MACL;MAEA,MAAMS,YAAY,GAAG,OAAOP,UAAU,KAAK,UAAU,GAC/CA,UAAU,CAACC,KAAK,CAAC,GACjBD,UAAU;MAEhB,MAAMQ,iBAAiB,GAAGC,MAAM,CAC3BC,OAAO,CAACH,YAAY,CAAC,CACrBI,MAAM,CAAC,CAACC,GAAG,EAAAC,IAAA,KAAmB;QAAA,IAAjB,CAACC,GAAG,EAAEC,KAAK,CAAC,GAAAF,IAAA;QACtB,MAAMG,CAAC,GAAGD,KAAiC;QAE3C,IAAI,OAAOA,KAAK,KAAK,UAAU,EAAE;UAC7B,OAAO;YACH,GAAGH,GAAG;YACN,CAACE,GAAG,GAAGxB,eAAe,CAAIyB,KAAK,EAAEZ,UAAU,EAAEE,UAAU,EAAET,iBAAiB;UAC9E,CAAC;QACL;QAEA,OAAO;UACH,GAAGgB,GAAG;UACN,CAACE,GAAG,GAAGvB,UAAU,CAAQyB,CAAC,EAAEb,UAAU,EAAEE,UAAU,EAAET,iBAAiB;QACzE,CAAC;MACL,CAAC,EAAE,CAAC,CAAO,CAAC;MAEhB,OAAO;QACHK,KAAK;QACLH,MAAM,EAAEU;MACZ,CAAC;IACL;EACJ,CAAC;AACL,CAAC"}
+{"version":3,"names":["useContext","UnistylesContext","getBreakpointFromScreenWidth","proxifyFunction","parseStyle","sortAndValidateBreakpoints","useDimensions","createUnistyles","breakpoints","sortedBreakpoints","createStyles","styles","createStyleSheet","useStyles","stylesheet","theme","dimensions","breakpoint","width","screenSize","height","parsedStyles","dynamicStyleSheet","Object","entries","reduce","acc","_ref","key","value","x"],"sourceRoot":"../../src","sources":["createUnistyles.ts"],"mappings":"AAAA,SAASA,UAAU,QAAQ,OAAO;AAElC,SAASC,gBAAgB,QAAQ,kBAAkB;AACnD,SAASC,4BAA4B,EAAEC,eAAe,EAAEC,UAAU,EAAEC,0BAA0B,QAAQ,SAAS;AAC/G,SAASC,aAAa,QAAQ,SAAS;AAEvC,OAAO,MAAMC,eAAe,GAA8CC,WAAc,IAAK;EACzF,MAAMC,iBAAiB,GAAGJ,0BAA0B,CAACG,WAAW,CAAC;EAEjE,OAAO;IACH;AACR;AACA;IACQE,YAAY,EAAyCC,MAAqF,IAAY;MAClJ,IAAI,OAAOA,MAAM,KAAK,UAAU,EAAE;QAC9B,OAAOA,MAAM;MACjB;MAEA,OAAOA,MAAM;IACjB,CAAC;IACDC,gBAAgB,EAAyCD,MAAqF,IAAY;MACtJ,IAAI,OAAOA,MAAM,KAAK,UAAU,EAAE;QAC9B,OAAOA,MAAM;MACjB;MAEA,OAAOA,MAAM;IACjB,CAAC;IACDE,SAAS,EAAwCC,UAA4C,IAAK;MAC9F,MAAMC,KAAK,GAAGf,UAAU,CAACC,gBAAgB,CAAM;MAC/C,MAAMe,UAAU,GAAGV,aAAa,CAAC,CAAC;MAClC,MAAMW,UAAU,GAAGf,4BAA4B,CAAIc,UAAU,CAACE,KAAK,EAAET,iBAAiB,CAAC;MACvF,MAAMU,UAAsB,GAAG;QAC3BD,KAAK,EAAEF,UAAU,CAACE,KAAK;QACvBE,MAAM,EAAEJ,UAAU,CAACI;MACvB,CAAC;MAED,IAAI,CAACN,UAAU,EAAE;QACb,OAAO;UACHC,KAAK;UACLJ,MAAM,EAAE,CAAC;QACb,CAAC;MACL;MAEA,MAAMU,YAAY,GAAG,OAAOP,UAAU,KAAK,UAAU,GAC/CA,UAAU,CAACC,KAAK,CAAC,GACjBD,UAAU;MAEhB,MAAMQ,iBAAiB,GAAGC,MAAM,CAC3BC,OAAO,CAACH,YAAY,CAAC,CACrBI,MAAM,CAAC,CAACC,GAAG,EAAAC,IAAA,KAAmB;QAAA,IAAjB,CAACC,GAAG,EAAEC,KAAK,CAAC,GAAAF,IAAA;QACtB,MAAMG,CAAC,GAAGD,KAAiC;QAE3C,IAAI,OAAOA,KAAK,KAAK,UAAU,EAAE;UAC7B,OAAO;YACH,GAAGH,GAAG;YACN,CAACE,GAAG,GAAGzB,eAAe,CAAI0B,KAAK,EAAEZ,UAAU,EAAEE,UAAU,EAAEV,iBAAiB;UAC9E,CAAC;QACL;QAEA,OAAO;UACH,GAAGiB,GAAG;UACN,CAACE,GAAG,GAAGxB,UAAU,CAAQ0B,CAAC,EAAEb,UAAU,EAAEE,UAAU,EAAEV,iBAAiB;QACzE,CAAC;MACL,CAAC,EAAE,CAAC,CAAO,CAAC;MAEhB,OAAO;QACHM,KAAK;QACLJ,MAAM,EAAEW;MACZ,CAAC;IACL;EACJ,CAAC;AACL,CAAC"}

package/lib/module/utils/styles.js

@@ -67,8 +67,7 @@ export const parseStyle = (style, breakpoint, screenSize, breakpoints) => {
     if (isDynamicFunction || isValidStyle) {
       return [key, value];
     }
-    const valueWithBreakpoint = value;
-    return [key, getValueForBreakpoint(valueWithBreakpoint, breakpoint, screenSize, breakpoints)];
+    return [key, getValueForBreakpoint(value, breakpoint, screenSize, breakpoints)];
   }));
 };
 //# sourceMappingURL=styles.js.map

package/lib/module/utils/styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["getValueForBreakpoint","proxifyFunction","fn","breakpoint","screenSize","breakpoints","Proxy","apply","target","thisArg","argumentsList","parseStyle","style","entries","Object","fromEntries","map","_ref","key","value","isNestedStyle","isTransform","Array","isArray","isDynamicFunction","isValidStyle","valueWithBreakpoint"],"sourceRoot":"../../../src","sources":["utils/styles.ts"],"mappings":"AACA,SAASA,qBAAqB,QAAQ,eAAe;;AAErD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,eAAe,GAAGA,CAC3BC,EAAY,EAAEC,UAA4B,EAC1CC,UAAsB,EACtBC,WAAc,KACH,IAAIC,KAAK,CAACJ,EAAE,EAAE;EACzBK,KAAK,EAAEA,CAACC,MAAM,EAAEC,OAAO,EAAEC,aAAa,KAClCC,UAAU,CAACH,MAAM,CAACD,KAAK,CAACE,OAAO,EAAEC,aAAa,CAAC,EAAEP,UAAU,EAAEC,UAAU,EAAEC,WAAW;AAC5F,CAAC,CAAC;;AAEF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMM,UAAU,GAAGA,CACtBC,KAA8B,EAC9BT,UAA4B,EAC5BC,UAAsB,EACtBC,WAAc,KACV;EACJ,MAAMQ,OAAO,GAAGC,MAAM,CAACD,OAAO,CAACD,KAAK,CAAyC;EAE7E,OAAOE,MAAM,CACRC,WAAW,CAACF,OAAO,CACfG,GAAG,CAACC,IAAA,IAAkB;IAAA,IAAjB,CAACC,GAAG,EAAEC,KAAK,CAAC,GAAAF,IAAA;IACd,MAAMG,aAAa,GAAGF,GAAG,KAAK,cAAc;IAE5C,IAAIE,aAAa,EAAE;MACf,OAAO,CACHF,GAAG,EACHP,UAAU,CAACQ,KAAK,EAAEhB,UAAU,EAAEC,UAAU,EAAEC,WAAW,CAAC,CACzD;IACL;IAEA,MAAMgB,WAAW,GAAGH,GAAG,KAAK,WAAW;IAEvC,IAAIG,WAAW,IAAIC,KAAK,CAACC,OAAO,CAACJ,KAAK,CAAC,EAAE;MACrC,OAAO,CACHD,GAAG,EACHC,KAAK,CAACH,GAAG,CAACG,KAAK,IAAIR,UAAU,CAACQ,KAAK,EAAEhB,UAAU,EAAEC,UAAU,EAAEC,WAAW,CAAC,CAAC,CAC7E;IACL;IAEA,MAAMmB,iBAAiB,GAAG,OAAOL,KAAK,KAAK,UAAU;IACrD,MAAMM,YAAY,GAAG,OAAON,KAAK,KAAK,QAAQ;IAE9C,IAAIK,iBAAiB,IAAIC,YAAY,EAAE;MACnC,OAAO,CAACP,GAAG,EAAEC,KAAK,CAAC;IACvB;IAEA,MAAMO,mBAAmB,GAAGP,KAAkD;IAE9E,OAAO,CAACD,GAAG,EAAElB,qBAAqB,CAAI0B,mBAAmB,EAAEvB,UAAU,EAAEC,UAAU,EAAEC,WAAW,CAAC,CAAC;EACpG,CAAC,CACL,CAAC;AACT,CAAC"}
+{"version":3,"names":["getValueForBreakpoint","proxifyFunction","fn","breakpoint","screenSize","breakpoints","Proxy","apply","target","thisArg","argumentsList","parseStyle","style","entries","Object","fromEntries","map","_ref","key","value","isNestedStyle","isTransform","Array","isArray","isDynamicFunction","isValidStyle"],"sourceRoot":"../../../src","sources":["utils/styles.ts"],"mappings":"AACA,SAASA,qBAAqB,QAAQ,eAAe;;AAErD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,eAAe,GAAGA,CAC3BC,EAAY,EAAEC,UAA4B,EAC1CC,UAAsB,EACtBC,WAAc,KACH,IAAIC,KAAK,CAACJ,EAAE,EAAE;EACzBK,KAAK,EAAEA,CAACC,MAAM,EAAEC,OAAO,EAAEC,aAAa,KAClCC,UAAU,CAACH,MAAM,CAACD,KAAK,CAACE,OAAO,EAAEC,aAAa,CAAC,EAAEP,UAAU,EAAEC,UAAU,EAAEC,WAAW;AAC5F,CAAC,CAAC;;AAEF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMM,UAAU,GAAGA,CACtBC,KAA8B,EAC9BT,UAA4B,EAC5BC,UAAsB,EACtBC,WAAc,KACV;EACJ,MAAMQ,OAAO,GAAGC,MAAM,CAACD,OAAO,CAACD,KAAK,CAGnC;EAED,OAAOE,MAAM,CACRC,WAAW,CAACF,OAAO,CACfG,GAAG,CAACC,IAAA,IAAkB;IAAA,IAAjB,CAACC,GAAG,EAAEC,KAAK,CAAC,GAAAF,IAAA;IACd,MAAMG,aAAa,GAAGF,GAAG,KAAK,cAAc;IAE5C,IAAIE,aAAa,EAAE;MACf,OAAO,CACHF,GAAG,EACHP,UAAU,CAACQ,KAAK,EAA6BhB,UAAU,EAAEC,UAAU,EAAEC,WAAW,CAAC,CACpF;IACL;IAEA,MAAMgB,WAAW,GAAGH,GAAG,KAAK,WAAW;IAEvC,IAAIG,WAAW,IAAIC,KAAK,CAACC,OAAO,CAACJ,KAAK,CAAC,EAAE;MACrC,OAAO,CACHD,GAAG,EACHC,KAAK,CAACH,GAAG,CAACG,KAAK,IAAIR,UAAU,CAACQ,KAAK,EAAEhB,UAAU,EAAEC,UAAU,EAAEC,WAAW,CAAC,CAAC,CAC7E;IACL;IAEA,MAAMmB,iBAAiB,GAAG,OAAOL,KAAK,KAAK,UAAU;IACrD,MAAMM,YAAY,GAAG,OAAON,KAAK,KAAK,QAAQ;IAE9C,IAAIK,iBAAiB,IAAIC,YAAY,EAAE;MACnC,OAAO,CAACP,GAAG,EAAEC,KAAK,CAAC;IACvB;IAEA,OAAO,CACHD,GAAG,EACHlB,qBAAqB,CACjBmB,KAAK,EACLhB,UAAU,EACVC,UAAU,EACVC,WACJ,CAAC,CACJ;EACL,CAAC,CACL,CAAC;AACT,CAAC"}

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

@@ -1,6 +1,10 @@
 import type { CreateStylesFactory, CustomNamedStyles, ExtractBreakpoints, RemoveKeysWithPrefix } from './types';
 export declare const createUnistyles: <B extends Record<string, number>, T = {}>(breakpoints: B) => {
-    createStyles: <S extends CustomNamedStyles<S, B>>(styles: S | CreateStylesFactory<S, T>) => S;
+    /**
+     * @deprecated The method should not be used, proposed version by the community is createStyleSheet, will be removed in RC
+     */
+    createStyles: <S extends CustomNamedStyles<S, B>, X>(styles: S | X | CustomNamedStyles<S, B> | ((theme: T) => X | CustomNamedStyles<X, B>)) => S | X;
+    createStyleSheet: <S_1 extends CustomNamedStyles<S_1, B>, X_1>(styles: S_1 | X_1 | CustomNamedStyles<S_1, B> | ((theme: T) => X_1 | CustomNamedStyles<X_1, B>)) => S_1 | X_1;
     useStyles: <ST extends CustomNamedStyles<ST, B>>(stylesheet?: ST | CreateStylesFactory<ST, T> | undefined) => {
         theme: T;
         styles: ExtractBreakpoints<RemoveKeysWithPrefix<ST, B>, B>;

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

@@ -1 +1 @@
-{"version":3,"file":"createUnistyles.d.ts","sourceRoot":"","sources":["../../../src/createUnistyles.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,mBAAmB,EAAE,iBAAiB,EAAc,kBAAkB,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAA;AAK3H,eAAO,MAAM,eAAe;;;;;;CAiD3B,CAAA"}
+{"version":3,"file":"createUnistyles.d.ts","sourceRoot":"","sources":["../../../src/createUnistyles.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,mBAAmB,EAAE,iBAAiB,EAAc,kBAAkB,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAA;AAK3H,eAAO,MAAM,eAAe;IAIpB;;OAEG;;;;;;;CA2DV,CAAA"}

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

@@ -1,19 +1,37 @@
-import type { ImageStyle, TextStyle, TransformsStyle, ViewStyle } from 'react-native';
-import type { CSSProperties } from 'react';
+import type { ImageStyle, TextStyle, ViewStyle } from 'react-native';
+import type { MatrixTransform, PerpectiveTransform, RotateTransform, RotateXTransform, RotateYTransform, RotateZTransform, ScaleTransform, ScaleXTransform, ScaleYTransform, SkewXTransform, SkewYTransform, TranslateXTransform, TranslateYTransform } from 'react-native/Libraries/StyleSheet/StyleSheetTypes';
 export type ScreenSize = {
     width: number;
     height: number;
 };
-export type CreateStylesFactory<T, Theme> = (theme: Theme) => T;
+export type CreateStylesFactory<ST, Theme> = (theme: Theme) => ST;
 type StyleProperty<T, B extends Record<string, number>> = {
-    [key in keyof T]?: {
-        [innerKey in keyof B]?: T[key];
+    [K in keyof T]: {
+        [innerKey in keyof B]?: T[K];
     } | {
-        [innerKey in `:w${string}` | `:h${string}`]?: T[key];
-    } | T[key];
+        [innerKey in string]?: T[K];
+    } | T[K];
 };
+type ShadowOffsetProps<B extends Record<string, number>> = {
+    shadowOffset: {
+        width: number | {
+            [innerKey in keyof B]?: number;
+        };
+        height: number | {
+            [innerKey in keyof B]?: number;
+        };
+    };
+};
+type TransformStyles<B extends Record<string, number>> = PerpectiveTransform | StyleProperty<PerpectiveTransform, B> | RotateTransform | StyleProperty<RotateTransform, B> | RotateXTransform | StyleProperty<RotateXTransform, B> | RotateYTransform | StyleProperty<RotateYTransform, B> | RotateZTransform | StyleProperty<RotateZTransform, B> | ScaleTransform | StyleProperty<ScaleTransform, B> | ScaleXTransform | StyleProperty<ScaleXTransform, B> | ScaleYTransform | StyleProperty<ScaleYTransform, B> | TranslateXTransform | StyleProperty<TranslateXTransform, B> | TranslateYTransform | StyleProperty<TranslateYTransform, B> | SkewXTransform | StyleProperty<SkewXTransform, B> | SkewYTransform | StyleProperty<SkewYTransform, B> | MatrixTransform | StyleProperty<MatrixTransform, B>;
+type TransformProps<B extends Record<string, number>> = {
+    transform: Array<TransformStyles<B>>;
+};
+type UnistyleView = Omit<Omit<ViewStyle, 'shadowOffset'>, 'transform'>;
+type UnistyleText = Omit<Omit<TextStyle, 'shadowOffset'>, 'transform'>;
+type UnistyleImage = Omit<Omit<ImageStyle, 'shadowOffset'>, 'transform'>;
+export type StaticStyles<B extends Record<string, number>> = (UnistyleView | StyleProperty<UnistyleView, B>) | (UnistyleText | StyleProperty<UnistyleText, B>) | (UnistyleImage | StyleProperty<UnistyleImage, B>) & TransformProps<B> & ShadowOffsetProps<B>;
 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>);
+    [K in keyof T]: T[K] extends (...args: infer A) => unknown ? (...args: A) => StaticStyles<B> : StaticStyles<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];

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

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

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

@@ -1 +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;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,eAAe,yCACpB,QAAQ,4CACA,UAAU,qBAEvB,QAGD,CAAA;AAEF;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,eAAO,MAAM,UAAU,kHAGP,UAAU,sBAsCzB,CAAA"}
+{"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;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,eAAe,yCACpB,QAAQ,4CACA,UAAU,qBAEvB,QAGD,CAAA;AAEF;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,eAAO,MAAM,UAAU,kHAGP,UAAU,sBA+CzB,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-unistyles",
-  "version": "1.0.0-beta.3",
+  "version": "1.0.0-beta.4",
   "description": "Level up your React Native StyleSheet",
   "scripts": {
     "test": "jest",

package/src/createUnistyles.ts

@@ -5,10 +5,26 @@ import { getBreakpointFromScreenWidth, proxifyFunction, parseStyle, sortAndValid
 import { useDimensions } from './hooks'
 
 export const createUnistyles = <B extends Record<string, number>, T = {}>(breakpoints: B) => {
-    const sortedBreakpoints = sortAndValidateBreakpoints(breakpoints) as B
+    const sortedBreakpoints = sortAndValidateBreakpoints(breakpoints)
 
     return {
-        createStyles: <S extends CustomNamedStyles<S, B>>(styles: S | CreateStylesFactory<S, T>) => styles as S,
+        /**
+         * @deprecated The method should not be used, proposed version by the community is createStyleSheet, will be removed in RC
+         */
+        createStyles: <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
+        },
+        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 dimensions = useDimensions()

package/src/types.ts

@@ -1,36 +1,80 @@
-import type { ImageStyle, TextStyle, TransformsStyle, ViewStyle } from 'react-native'
-import type { CSSProperties } from 'react'
+import type { ImageStyle, TextStyle, ViewStyle } from 'react-native'
+import type {
+    MatrixTransform,
+    PerpectiveTransform,
+    RotateTransform,
+    RotateXTransform,
+    RotateYTransform,
+    RotateZTransform,
+    ScaleTransform,
+    ScaleXTransform,
+    ScaleYTransform,
+    SkewXTransform,
+    SkewYTransform,
+    TranslateXTransform,
+    TranslateYTransform
+} from 'react-native/Libraries/StyleSheet/StyleSheetTypes'
 
 export type ScreenSize = {
     width: number,
     height: number
 }
 
-export type CreateStylesFactory<T, Theme> = (theme: Theme) => T
+export type CreateStylesFactory<ST, Theme> = (theme: Theme) => ST
 
 type StyleProperty<T, B extends Record<string, number>> = {
-    [key in keyof T]?: {
-        [innerKey in keyof B]?: T[key]
+    [K in keyof T]: {
+        [innerKey in keyof B]?: T[K]
     } | {
-        [innerKey in `:w${string}` | `:h${string}`]?: T[key]
-    } | T[key]
+        [innerKey in string]?: T[K]
+    } | T[K]
 }
 
-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>
-    )
+type ShadowOffsetProps<B extends Record<string, number>> = {
+    shadowOffset: {
+        width: number | {
+            [innerKey in keyof B]?: number
+        },
+        height: number | {
+            [innerKey in keyof B]?: number
+        }
+    }
+}
+
+type TransformStyles<B extends Record<string, number>> =
+    PerpectiveTransform | StyleProperty<PerpectiveTransform, B>
+    | RotateTransform | StyleProperty<RotateTransform, B>
+    | RotateXTransform | StyleProperty<RotateXTransform, B>
+    | RotateYTransform | StyleProperty<RotateYTransform, B>
+    | RotateZTransform | StyleProperty<RotateZTransform, B>
+    | ScaleTransform | StyleProperty<ScaleTransform, B>
+    | ScaleXTransform | StyleProperty<ScaleXTransform, B>
+    | ScaleYTransform | StyleProperty<ScaleYTransform, B>
+    | TranslateXTransform | StyleProperty<TranslateXTransform, B>
+    | TranslateYTransform | StyleProperty<TranslateYTransform, B>
+    | SkewXTransform | StyleProperty<SkewXTransform, B>
+    | SkewYTransform | StyleProperty<SkewYTransform, B>
+    | MatrixTransform | StyleProperty<MatrixTransform, B>
+
+type TransformProps<B extends Record<string, number>> = {
+    transform: Array<TransformStyles<B>>
 }
 
+type UnistyleView = Omit<Omit<ViewStyle, 'shadowOffset'>, 'transform'>
+type UnistyleText = Omit<Omit<TextStyle, 'shadowOffset'>, 'transform'>
+type UnistyleImage = Omit<Omit<ImageStyle, 'shadowOffset'>, 'transform'>
+
+export type StaticStyles<B extends Record<string, number>> =
+    | (UnistyleView | StyleProperty<UnistyleView, B>)
+    | (UnistyleText | StyleProperty<UnistyleText, B>)
+    | (UnistyleImage | StyleProperty<UnistyleImage, B>)
+    & TransformProps<B> & ShadowOffsetProps<B>
+
+export type CustomNamedStyles<T, B extends Record<string, number>> = {
+    [K in keyof T]: T[K] extends (...args: infer A) => unknown
+        ? (...args: A) => StaticStyles<B>
+        : StaticStyles<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

package/src/utils/styles.ts

@@ -62,7 +62,10 @@ export const parseStyle = <T, B extends Record<string, number>>(
     screenSize: ScreenSize,
     breakpoints: B
 ): T => {
-    const entries = Object.entries(style) as [[keyof T, CustomNamedStyles<T, B>]]
+    const entries = Object.entries(style) as [[
+        keyof T,
+        CustomNamedStyles<T, B> | Record<keyof B & string, string | number | undefined>]
+    ]
 
     return Object
         .fromEntries(entries
@@ -72,7 +75,7 @@ export const parseStyle = <T, B extends Record<string, number>>(
                 if (isNestedStyle) {
                     return [
                         key,
-                        parseStyle(value, breakpoint, screenSize, breakpoints)
+                        parseStyle(value as CustomNamedStyles<T, B>, breakpoint, screenSize, breakpoints)
                     ]
                 }
 
@@ -92,9 +95,15 @@ export const parseStyle = <T, B extends Record<string, number>>(
                     return [key, value]
                 }
 
-                const valueWithBreakpoint = value as Record<keyof B & string, string | number>
-
-                return [key, getValueForBreakpoint<B>(valueWithBreakpoint, breakpoint, screenSize, breakpoints)]
+                return [
+                    key,
+                    getValueForBreakpoint<B>(
+                        value as Record<keyof B & string, string | number | undefined>,
+                        breakpoint,
+                        screenSize,
+                        breakpoints
+                    )
+                ]
             })
         )
 }