@mochi-inc-japan/react-native-stylex-sheet 1.0.1 → 1.0.2

package/README.ja.md

@@ -548,7 +548,7 @@ const style = stylex.mix(
 
 ### `props(...args)`
 
-スタイル配列を React Native コンポーネントにスプレッドするための `{ style: [...] }` `RNStyle[]` 配列、またはプレーンなスタイルオブジェクトを受け取ります。
+スタイル配列を React Native コンポーネントにスプレッドするための `{ style: [...] }` を返します。`RNStyle[]` 配列またはプレーンなスタイルオブジェクトを受け取ります。
 
 ```tsx
 // 複数の mix() 結果を結合
@@ -563,6 +563,28 @@ function Component() {
 
 ---
 
+### `flatten(...args)`
+
+`props()` と同じシグネチャでスタイル配列を受け取り、`StyleSheet.flatten()` を通じて単一の `RNStyle` オブジェクトを返します。`TouchableOpacity` の `style` や `ScrollView` の `contentContainerStyle` など、配列形式のスタイルを受け付けないコンポーネントに使用します。
+
+```tsx
+// モジュールレベル（非リアクティブ、デフォルトスタイルのみ）
+<TouchableOpacity style={stylex.flatten(styles.button)} />
+
+// コンポーネント内 — RNStyleXProvider のテーマ・メディアが自動適用される
+const stylex = useStylex();
+<TouchableOpacity
+  style={stylex.flatten(stylex.mix(styles.button, { color: 'danger' }))}
+/>
+
+// 複数エントリを一つのオブジェクトにマージ
+<ScrollView
+  contentContainerStyle={stylex.flatten(styles.container, styles.padding)}
+/>
+```
+
+---
+
 ## メディアクエリ
 
 メディアクエリ文字列はスタイルプロパティキーとして直接使用します。文字列はサポートされている範囲形式のいずれかに一致する必要があります。
@@ -597,6 +619,44 @@ const styles = create({
 
 ## 制限事項
 
+`TouchableOpacity` のようにスタイルに配列を受け付けないコンポーネントや、`ScrollView` の `contentContainerStyle` のような特殊なスタイルキーを持つコンポーネントに遭遇することがあります。
+その場合、以下の2つの解決策があります。
+
+1. テーマ・メディアクエリ・バリアントを使わないスタイルの場合は、`stylex.create` の結果プロパティの `"default"` キーを使います。この値はいかなるオーバーライドも適用されていない `RNStyle` オブジェクトです。
+
+```tsx
+const styles = stylex.create({
+  scroll: {
+    width: 100,
+  },
+});
+
+<ScrollView contentContainerStyle={styles.scroll.default} />;
+```
+
+2. デフォルトスタイルにバリアント・テーマ・メディアを適用した結果を1つのオブジェクトにマージしたい場合は、`stylex.flatten()` と `stylex.mix()` を組み合わせます。
+
+```tsx
+const variants = createVariants({
+  h: {
+    height: {
+      default: 100,
+      lg: 200,
+    },
+  },
+});
+
+const styles = stylex.create({
+  touch: {
+    width: 100,
+    ...variants.h,
+  },
+});
+
+const stylex = useStylex();
+<TouchableOpacity style={stylex.flatten(stylex.mix(styles.touch, { h: 'lg' }))} />;
+```
+
 React Native には CSS カスケード、継承、キーフレーム、疑似要素、グローバルスタイルがありません。これらの機能は設計上サポートされていません。
 
 | 非対応 | 代替手段 |

package/README.md

@@ -119,7 +119,9 @@ function Button({ danger }: { danger?: boolean }) {
   return (
     <Pressable
       {...stylex.props(
-        stylex.mix<Variants<typeof buttonVariants>>(styles.button, { color: danger ? 'danger' : 'default' })
+        stylex.mix<Variants<typeof buttonVariants>>(styles.button, {
+          color: danger ? 'danger' : 'default',
+        })
       )}
     >
       <Text>Press me</Text>
@@ -139,8 +141,8 @@ stylex.mix<Variants<typeof buttonVariants>>(
     styles.button,
     {
       media: stylex.windowWidth,
-      theme: themes.dark
-    }
+      theme: themes.dark,
+    },
   ],
   { color: danger ? 'danger' : 'default' }
 );
@@ -284,11 +286,11 @@ const buttonVariants = createVariants({
     backgroundColor: {
       default: '#6200ee',
       primary: '#6200ee',
-      danger:  '#b00020',
+      danger: '#b00020',
     },
     borderColor: {
       default: 'transparent',
-      danger:  '#b00020',
+      danger: '#b00020',
     },
   },
   size: {
@@ -317,7 +319,7 @@ import type { Variants } from '@mochi-inc-japan/react-native-stylex-sheet';
 type ButtonVariants = Variants<typeof buttonVariants>;
 // { color: 'primary' | 'danger' | 'default'; size: 'sm' | 'lg' | 'default' }
 
-stylex.mix<Variants<ButtonVariants>>(styles.button, { color, size })
+stylex.mix<Variants<ButtonVariants>>(styles.button, { color, size });
 ```
 
 ---
@@ -335,8 +337,8 @@ Activate a theme by passing its key to `RNStyleXProvider`:
 Creates named theme keys. Returns `{ themes }` where each name maps to an opaque key string used as a style property key in `create()`.
 
 ```tsx
-import * as stylex from '@mochi-inc-japan/react-native-stylex-sheet'
-import { useStylex } from '@mochi-inc-japan/react-native-stylex-sheet'
+import * as stylex from '@mochi-inc-japan/react-native-stylex-sheet';
+import { useStylex } from '@mochi-inc-japan/react-native-stylex-sheet';
 
 const { themes } = stylex.createThemes(['light', 'dark']);
 
@@ -345,27 +347,23 @@ const styles = stylex.create({
     color: {
       default: '#000',
       [themes.light]: '#000',
-      [themes.dark]:  '#fff',
+      [themes.dark]: '#fff',
     },
   },
 });
 
 function App() {
-  const stylex = useStylex()
-  return (
-    <Text {...stylex.props(styles.text)}>
-      Hello World!
-    </Text>
-  )
+  const stylex = useStylex();
+  return <Text {...stylex.props(styles.text)}>Hello World!</Text>;
 }
 ```
 
 When you need to add styles or set different variables per theme, use `stylex.create` and `stylex.props` to override the default style with the style corresponding to the active theme:
 
 ```tsx
-import { View, Text } from 'react-native'
-import * as stylex from '@mochi-inc-japan/react-native-stylex-sheet'
-import { useStylex } from '@mochi-inc-japan/react-native-stylex-sheet'
+import { View, Text } from 'react-native';
+import * as stylex from '@mochi-inc-japan/react-native-stylex-sheet';
+import { useStylex } from '@mochi-inc-japan/react-native-stylex-sheet';
 
 const { themes } = stylex.createThemes(['light', 'dark', 'other']);
 
@@ -373,55 +371,62 @@ const { themes } = stylex.createThemes(['light', 'dark', 'other']);
 const defaultColors = stylex.defineVars({
   primary: 'black',
   danger: 'red',
-})
+});
 
 const variables = stylex.createVariants({
   text: {
-    color: defaultColors
-  }
+    color: defaultColors,
+  },
 });
 
 const styles = stylex.create({
   view: {
     width: '100%',
-    height: '100%'
+    height: '100%',
   },
   text: {
-    ...variables.text
+    ...variables.text,
   },
 });
 
 // Variant style definitions for additional themes
 const darkThemeStyleVariants = stylex.createVariants({
-  text: { color: { ...defaultColors, 'primary': 'white' }, },
-})
+  text: { color: { ...defaultColors, primary: 'white' } },
+});
 
 const otherThemeStyleVariants = stylex.createVariants({
-  text: { color: { ...defaultColors, 'primary': 'blue' }, },
-})
+  text: { color: { ...defaultColors, primary: 'blue' } },
+});
 
 const viewTheme = stylex.create({
   // Additional styles written directly into create
   [themes.dark]: { backgroundColor: 'black' },
   [themes.other]: { backgroundColor: 'gray' },
-})
+});
 
 const textTheme = stylex.create({
-  [themes.dark]: { borderColor: 'white', borderWidth: 1, ...darkThemeStyleVariants.text },
+  [themes.dark]: {
+    borderColor: 'white',
+    borderWidth: 1,
+    ...darkThemeStyleVariants.text,
+  },
   [themes.other]: { ...otherThemeStyleVariants.text },
-})
+});
 
 function App() {
-  const stylex = useStylex()
+  const stylex = useStylex();
   return (
     <View {...stylex.props(styles.view, viewTheme[stylex.theme])}>
       <Text
-        {...stylex.props(styles.text, stylex.mix(textTheme[stylex.theme], { text: 'primary' }))}
+        {...stylex.props(
+          styles.text,
+          stylex.mix(textTheme[stylex.theme], { text: 'primary' })
+        )}
       >
         Hello World!
       </Text>
     </View>
-  )
+  );
 }
 ```
 
@@ -438,6 +443,7 @@ Provider component that supplies `theme` and `windowWidth` (the basis for media
 ```
 
 Props:
+
 - `theme` — a theme key string from `createThemes()`, or omit for no active theme
 - `windowWidth` — override device width (defaults to `PixelRatio.getPixelSizeForLayoutSize(useWindowDimensions().width)`)
 
@@ -448,23 +454,23 @@ Props:
 Hook returning `{ props, mix, windowWidth, theme }`. Must be used inside `RNStyleXProvider`. `mix` automatically applies the active theme and screen width from context. It can be omitted when no variants are specified, and explicit `width` or `theme` overrides are also supported at the call site.
 
 ```tsx
-import * as stylex from '@mochi-inc-japan/react-native-stylex-sheet'
+import * as stylex from '@mochi-inc-japan/react-native-stylex-sheet';
 
 const { themes } = stylex.createThemes(['light', 'dark']);
 const colors = stylex.defineVars({
   default: '#6200ee',
   primary: '#6200ee',
-  danger:  '#b00020',
-})
+  danger: '#b00020',
+});
 const cardVariants = stylex.createVariants({
   // variant group name: 'bgcolor'
   bgcolor: {
     backgroundColor: colors,
-  }
-})
+  },
+});
 const styles = stylex.create({
   card: {
-    ...cardVariants
+    ...cardVariants,
   },
   title: {
     color: {
@@ -477,14 +483,16 @@ const styles = stylex.create({
     },
     borderRadius: 8,
   },
-})
+});
 
 function Card({ bgcolor }: { bgcolor: keyof typeof colors }) {
   const stylex = useStylex();
   return (
-    <View {...stylex.props(
-      stylex.mix<Variants<typeof cardVariants>>(styles.card, { bgcolor })
-    )}>
+    <View
+      {...stylex.props(
+        stylex.mix<Variants<typeof cardVariants>>(styles.card, { bgcolor })
+      )}
+    >
       {/* theme and media styles for styles.title are applied even without calling stylex.mix */}
       <Text {...stylex.props(styles.title)}>Hello</Text>
     </View>
@@ -493,9 +501,9 @@ function Card({ bgcolor }: { bgcolor: keyof typeof colors }) {
 
 render(
   <stylex.RNStylexProvider theme={themes.dark}>
-    <Card bgcolor='primary' />
+    <Card bgcolor="primary" />
   </stylex.RNStylexProvider>
-)
+);
 ```
 
 ---
@@ -530,7 +538,7 @@ const style = stylex.mix(
     {
       media: media.md, // force a specific media match (or pass a numeric width)
       theme: themes.dark, // force a specific theme key
-    }
+    },
   ],
   { color: 'danger' }
 );
@@ -546,11 +554,37 @@ Collects style arrays into `{ style: [...] }` to spread on a React Native compon
 // Combine multiple mix() results
 function Component() {
   const stylex = useStylex();
-  return <View {...stylex.props(stylex.mix(styles.base), stylex.mix(styles.override))} />;
+  return (
+    <View
+      {...stylex.props(stylex.mix(styles.base), stylex.mix(styles.override))}
+    />
+  );
 }
 
 // Module-level (non-reactive, default styles only) — import * as stylex
-<View {...stylex.props(styles.container)} />
+<View {...stylex.props(styles.container)} />;
+```
+
+---
+
+### `flatten(...args)`
+
+Same signature as `props()` but returns a single merged `RNStyle` object via `StyleSheet.flatten()`. Use when a component's style prop does not accept an array — for example `TouchableOpacity`'s `style` or `ScrollView`'s `contentContainerStyle`.
+
+```tsx
+// Module-level (non-reactive, default styles only)
+<TouchableOpacity style={stylex.flatten(styles.button)} />
+
+// Inside component — theme + media from RNStyleXProvider applied automatically
+const stylex = useStylex();
+<TouchableOpacity
+  style={stylex.flatten(stylex.mix(styles.button, { color: 'danger' }))}
+/>
+
+// Merge multiple entries into one object
+<ScrollView
+  contentContainerStyle={stylex.flatten(styles.container, styles.padding)}
+/>
 ```
 
 ---
@@ -559,11 +593,11 @@ function Component() {
 
 Media query strings are used directly as style property keys. The string must match one of the supported range formats:
 
-| Format | Example |
-|---|---|
-| Lower bound | `(width >= 750px)` / `(width > 750px)` |
+| Format      | Example                                  |
+| ----------- | ---------------------------------------- |
+| Lower bound | `(width >= 750px)` / `(width > 750px)`   |
 | Upper bound | `(width <= 1080px)` / `(width < 1080px)` |
-| Range | `(750px <= width < 1080px)` |
+| Range       | `(750px <= width < 1080px)`              |
 
 **Key ordering matters:** later matching keys overwrite earlier ones, so put more specific queries last.
 
@@ -588,12 +622,48 @@ const styles = create({
 
 ## Limitations
 
+Sometimes, you encounter components, which deny array style value like TouchableOpacity or have special style key like "containerStyle" of ScrollView.
+There are two solutions.
+
+1. Use "default" key of `stylex.create` result properties when the style has no theme and media query and variant. The value of it is RNStyle Object to which is not applied any overwritten by them.
+
+```tsx
+const styles = stylex.create({
+  scroll: {
+    width: 100
+  }
+})
+
+<ViewScroll contentContainerStyle={styles.scroll.default}>
+```
+
+2. Use `stylex.flatten()` with `stylex.mix()` when you want to merge all to overwrite default styles.
+
+```tsx
+const styles = stylex.create({
+  touch: {
+    width: 100
+    ...styles.createVariants({
+      h: {
+        height: {
+          md: 100,
+          lg: 200
+        }
+      }
+    })
+  }
+})
+
+const stylex = useStylex()
+<TouchableOpacity style={stylex.flatten(stylex.mix(styles.touch, {h: 'mg'}))} >
+```
+
 React Native has no CSS cascade, inheritance, keyframes, pseudo-elements, or global styles — these features are absent by design.
 
-| Not supported | Alternative |
-|---|---|
-| CSS variables | Use `defineVars()` / `defineConsts()` for shared values |
-| `shadows` token scale | iOS/Android have incompatible shadow APIs — define shadow styles directly |
-| `transitions` | Use [Animated API](https://reactnative.dev/docs/animated) or [react-native-reanimated](https://github.com/software-mansion/react-native-reanimated) |
-| Global styles | Not applicable to React Native |
-| Pseudo-classes / elements | Not applicable to React Native |
+| Not supported             | Alternative                                                                                                                                         |
+| ------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
+| CSS variables             | Use `defineVars()` / `defineConsts()` for shared values                                                                                             |
+| `shadows` token scale     | iOS/Android have incompatible shadow APIs — define shadow styles directly                                                                           |
+| `transitions`             | Use [Animated API](https://reactnative.dev/docs/animated) or [react-native-reanimated](https://github.com/software-mansion/react-native-reanimated) |
+| Global styles             | Not applicable to React Native                                                                                                                      |
+| Pseudo-classes / elements | Not applicable to React Native                                                                                                                      |

package/lib/commonjs/index.js

@@ -39,6 +39,12 @@ Object.defineProperty(exports, "defineVars", {
     return _tokens.defineVars;
   }
 });
+Object.defineProperty(exports, "flatten", {
+  enumerable: true,
+  get: function () {
+    return _base.flatten;
+  }
+});
 Object.defineProperty(exports, "mix", {
   enumerable: true,
   get: function () {

package/lib/commonjs/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_base","require","_variant","_tokens","_hooks","_theme"],"sources":["index.ts"],"sourcesContent":["export { create, props, mix } from './utils/base';\nexport { createVariants } from './utils/variant';\nexport { defineConsts, defineVars } from './utils/tokens';\nexport { useStylex, RNStyleXProvider } from './utils/hooks';\nexport { createThemes } from './utils/theme';\nexport type {\n  Variants,\n  XRNStyle,\n  RNStyle,\n  XRNStyleSheets,\n} from './utils/types';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,KAAA,GAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;AACA,IAAAE,OAAA,GAAAF,OAAA;AACA,IAAAG,MAAA,GAAAH,OAAA;AACA,IAAAI,MAAA,GAAAJ,OAAA","ignoreList":[]}
+{"version":3,"names":["_base","require","_variant","_tokens","_hooks","_theme"],"sources":["index.ts"],"sourcesContent":["export { create, props, mix, flatten } from './utils/base';\nexport { createVariants } from './utils/variant';\nexport { defineConsts, defineVars } from './utils/tokens';\nexport { useStylex, RNStyleXProvider } from './utils/hooks';\nexport { createThemes } from './utils/theme';\nexport type {\n  Variants,\n  XRNStyle,\n  RNStyle,\n  XRNStyleSheets,\n} from './utils/types';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,KAAA,GAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;AACA,IAAAE,OAAA,GAAAF,OAAA;AACA,IAAAG,MAAA,GAAAH,OAAA;AACA,IAAAI,MAAA,GAAAJ,OAAA","ignoreList":[]}

package/lib/commonjs/utils/base.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.props = exports.mix = exports.create = void 0;
+exports.props = exports.mix = exports.flatten = exports.create = void 0;
 var _reactNative = require("react-native");
 var _media = require("./media");
 var _variant = require("./variant");
@@ -52,6 +52,10 @@ const mix = (target, variantArgs) => {
   return results;
 };
 exports.mix = mix;
+const flatten = function () {
+  return _reactNative.StyleSheet.flatten(props(...arguments).style);
+};
+exports.flatten = flatten;
 const props = function () {
   for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
     args[_key] = arguments[_key];

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

@@ -1 +1 @@
-{"version":3,"names":["_reactNative","require","_media","_variant","_theme","bundleStyleSheet","styleObject","result","Object","entries","reduce","current","_ref","key","value","forEach","_ref2","variantKey","variantValue","default","StyleSheet","create","args","_ref3","exports","mix","target","variantArgs","_target","config","Array","isArray","results","theme","themeSheet","resolveTheme","push","variants","media","props","_len","arguments","length","_key","style","acc","arg","_default","xStyleBase"],"sources":["base.ts"],"sourcesContent":["import { StyleSheet } from 'react-native';\nimport {\n  XRNStyleSheets,\n  XRNStyle,\n  NamedStyles,\n  RNStyle,\n  VariantStyleSheet,\n} from './types';\nimport { media } from './media';\nimport { variants } from './variant';\nimport { resolveTheme } from './theme';\n\nfunction bundleStyleSheet<S extends RNStyle>(styleObject: XRNStyle<S>) {\n  const result = Object.entries(styleObject).reduce((current, [key, value]) => {\n    if (typeof value === 'object') {\n      Object.entries(value).forEach(([variantKey, variantValue]) => {\n        if (!current[variantKey]) {\n          current[variantKey] = {};\n        }\n        (current[variantKey] as any)[key] = variantValue;\n      });\n    } else {\n      current.default ||= {};\n      (current.default as any)[key] = value;\n    }\n    return current;\n  }, {} as Record<string, RNStyle>);\n  return StyleSheet.create(result);\n}\n\nexport const create = <T extends NamedStyles<any, R>, R extends RNStyle>(\n  args: T\n): XRNStyleSheets<T, R> => {\n  return Object.entries(args).reduce((current, [key, value]) => {\n    (current as any)[key] = bundleStyleSheet(value);\n    return current;\n  }, {} as XRNStyleSheets<T, R>);\n};\n\nexport const mix = <\n  Variants extends { [key: string]: string | number | boolean | undefined },\n  Theme extends string = string,\n  T extends VariantStyleSheet<string, RNStyle> = VariantStyleSheet<\n    string,\n    RNStyle\n  >\n>(\n  target?: T | [T, { theme?: Theme; media?: number | string }],\n  variantArgs?: Variants\n): RNStyle[] => {\n  if (!target) return [];\n  const [_target, config] = Array.isArray(target) ? target : [target as T, {}];\n  let results = _target.default ? [_target.default] : ([] as RNStyle[]);\n  if (config.theme) {\n    const themeSheet = resolveTheme(_target, config.theme);\n    themeSheet && results.push(themeSheet);\n  }\n  if (variantArgs) {\n    results = [...results, ...variants(_target, variantArgs)];\n  }\n  if (config.media) {\n    results = [...results, ...media(_target, config.media)];\n  }\n  return results;\n};\n\ntype PropValue = VariantStyleSheet<string, RNStyle> | RNStyle;\nexport const props = <T extends RNStyle>(\n  ...args: (PropValue | RNStyle[] | false | null | undefined)[]\n): { style: T[] } => {\n  return {\n    style: args.reduce((acc: T[], arg) => {\n      if (!arg) return acc;\n      if (Array.isArray(arg)) {\n        return [...acc, ...arg] as T[];\n      }\n      const xStyleBase =\n        (arg as VariantStyleSheet<string, RNStyle>).default ?? arg;\n      return [...acc, xStyleBase] as T[];\n    }, []) as T[],\n  };\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_reactNative","require","_media","_variant","_theme","bundleStyleSheet","styleObject","result","Object","entries","reduce","current","_ref","key","value","forEach","_ref2","variantKey","variantValue","default","StyleSheet","create","args","_ref3","exports","mix","target","variantArgs","_target","config","Array","isArray","results","theme","themeSheet","resolveTheme","push","variants","media","flatten","props","arguments","style","_len","length","_key","acc","arg","_default","xStyleBase"],"sources":["base.ts"],"sourcesContent":["import { StyleSheet } from 'react-native';\nimport {\n  XRNStyleSheets,\n  XRNStyle,\n  NamedStyles,\n  RNStyle,\n  VariantStyleSheet,\n} from './types';\nimport { media } from './media';\nimport { variants } from './variant';\nimport { resolveTheme } from './theme';\n\nfunction bundleStyleSheet<S extends RNStyle>(styleObject: XRNStyle<S>) {\n  const result = Object.entries(styleObject).reduce((current, [key, value]) => {\n    if (typeof value === 'object') {\n      Object.entries(value).forEach(([variantKey, variantValue]) => {\n        if (!current[variantKey]) {\n          current[variantKey] = {};\n        }\n        (current[variantKey] as any)[key] = variantValue;\n      });\n    } else {\n      current.default ||= {};\n      (current.default as any)[key] = value;\n    }\n    return current;\n  }, {} as Record<string, RNStyle>);\n  return StyleSheet.create(result);\n}\n\nexport const create = <const T extends NamedStyles<any, R>, R extends RNStyle>(\n  args: T\n): XRNStyleSheets<T, R> => {\n  return Object.entries(args).reduce((current, [key, value]) => {\n    (current as any)[key] = bundleStyleSheet(value);\n    return current;\n  }, {} as XRNStyleSheets<T, R>);\n};\n\nexport const mix = <\n  Variants extends { [key: string]: string | number | boolean | undefined },\n  Theme extends string = string,\n  T extends VariantStyleSheet<string, RNStyle> = VariantStyleSheet<\n    string,\n    RNStyle\n  >\n>(\n  target?: T | [T, { theme?: Theme; media?: number | string }],\n  variantArgs?: Variants\n): RNStyle[] => {\n  if (!target) return [];\n  const [_target, config] = Array.isArray(target) ? target : [target as T, {}];\n  let results = _target.default ? [_target.default] : ([] as RNStyle[]);\n  if (config.theme) {\n    const themeSheet = resolveTheme(_target, config.theme);\n    themeSheet && results.push(themeSheet);\n  }\n  if (variantArgs) {\n    results = [...results, ...variants(_target, variantArgs)];\n  }\n  if (config.media) {\n    results = [...results, ...media(_target, config.media)];\n  }\n  return results;\n};\n\nexport const flatten =  <T extends RNStyle>(\n  ...args: (PropValue | RNStyle[] | false | null | undefined)[]\n): T => {\n  return StyleSheet.flatten(props(...args).style) as T;\n};\n\ntype PropValue = VariantStyleSheet<string, RNStyle> | RNStyle;\nexport const props = <T extends RNStyle>(\n  ...args: (PropValue | RNStyle[] | false | null | undefined)[]\n): { style: T[] } => {\n  return {\n    style: args.reduce((acc: T[], arg) => {\n      if (!arg) return acc;\n      if (Array.isArray(arg)) {\n        return [...acc, ...arg] as T[];\n      }\n      const xStyleBase =\n        (arg as VariantStyleSheet<string, RNStyle>).default ?? arg;\n      return [...acc, xStyleBase] as T[];\n    }, []) as T[],\n  };\n};\n"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/utils/hooks.js

@@ -28,6 +28,13 @@ const RNStyleXProvider = componentProps => {
         const sheets = args.map(v => Array.isArray(v) ? v : v && this.mix(v));
         return (0, _base.props)(...sheets);
       },
+      flatten() {
+        for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+          args[_key2] = arguments[_key2];
+        }
+        const sheets = args.map(v => Array.isArray(v) ? v : v && this.mix(v));
+        return (0, _base.flatten)(...sheets);
+      },
       mix(arg, variants) {
         if (!arg) return [];
         const config = {

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

@@ -1 +1 @@
-{"version":3,"names":["_react","require","_reactNative","_base","_media","RNStyleXContext","createContext","undefined","RNStyleXProvider","componentProps","_componentProps$windo","_componentProps$theme","width","useWindowDimensions","correctedWidth","windowWidth","PixelRatio","getPixelSizeForLayoutSize","theme","value","useMemo","media","detectMedia","props","_len","arguments","length","args","Array","_key","sheets","map","v","isArray","mix","arg","variants","config","createElement","Provider","Children","only","children","exports","useStylex","context","useContext","Error"],"sources":["hooks.ts"],"sourcesContent":["import {\n  Children,\n  createContext,\n  createElement,\n  useContext,\n  useMemo,\n} from 'react';\nimport { PixelRatio, useWindowDimensions } from 'react-native';\nimport { mix, props } from './base';\nimport { RNStyle, VariantStyleSheet } from './types';\nimport { detectMedia } from './media';\n\ntype IApi = {\n  props: typeof props;\n  mix: typeof mix;\n};\n\ntype UserConfig = {\n  windowWidth: number;\n  theme: string;\n};\n\ntype ValueType = UserConfig & IApi;\n\nconst RNStyleXContext = createContext<ValueType | undefined>(undefined);\n\nexport const RNStyleXProvider = (\n  componentProps: Partial<Pick<ValueType, 'windowWidth' | 'theme'>> & {\n    media?: Record<string, string>;\n    children: React.ReactNode;\n  }\n) => {\n  const { width } = useWindowDimensions();\n  const correctedWidth =\n    componentProps.windowWidth ?? PixelRatio.getPixelSizeForLayoutSize(width);\n  const theme = componentProps.theme ?? 'default';\n\n  const value = useMemo<ValueType>(() => {\n    const media = componentProps.media && detectMedia(componentProps.media, correctedWidth);\n    return {\n      windowWidth: correctedWidth,\n      theme,\n      props(...args) {\n        const sheets = args.map((v) =>\n          Array.isArray(v)\n            ? v\n            : v && this.mix(v as VariantStyleSheet<string, RNStyle>)\n        );\n        return props(...sheets);\n      },\n      mix(arg, variants) {\n        if (!arg) return [];\n        const config = {\n          theme,\n          media: media ?? this.windowWidth,\n        };\n        if (Array.isArray(arg)) {\n          return mix([arg[0], { ...config, ...arg[1] }], variants);\n        }\n        return mix([arg, config], variants);\n      },\n    };\n  }, [correctedWidth, theme]);\n  return createElement(\n    RNStyleXContext.Provider,\n    { value },\n    Children.only(componentProps.children)\n  );\n};\n\nexport const useStylex = () => {\n  const context = useContext(RNStyleXContext);\n  if (!context) {\n    throw new Error('useStylex must be used within a RNStyleXProvider');\n  }\n  return context;\n};\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AAOA,IAAAC,YAAA,GAAAD,OAAA;AACA,IAAAE,KAAA,GAAAF,OAAA;AAEA,IAAAG,MAAA,GAAAH,OAAA;AAcA,MAAMI,eAAe,gBAAG,IAAAC,oBAAa,EAAwBC,SAAS,CAAC;AAEhE,MAAMC,gBAAgB,GAC3BC,cAGC,IACE;EAAA,IAAAC,qBAAA,EAAAC,qBAAA;EACH,MAAM;IAAEC;EAAM,CAAC,GAAG,IAAAC,gCAAmB,EAAC,CAAC;EACvC,MAAMC,cAAc,IAAAJ,qBAAA,GAClBD,cAAc,CAACM,WAAW,cAAAL,qBAAA,cAAAA,qBAAA,GAAIM,uBAAU,CAACC,yBAAyB,CAACL,KAAK,CAAC;EAC3E,MAAMM,KAAK,IAAAP,qBAAA,GAAGF,cAAc,CAACS,KAAK,cAAAP,qBAAA,cAAAA,qBAAA,GAAI,SAAS;EAE/C,MAAMQ,KAAK,GAAG,IAAAC,cAAO,EAAY,MAAM;IACrC,MAAMC,KAAK,GAAGZ,cAAc,CAACY,KAAK,IAAI,IAAAC,kBAAW,EAACb,cAAc,CAACY,KAAK,EAAEP,cAAc,CAAC;IACvF,OAAO;MACLC,WAAW,EAAED,cAAc;MAC3BI,KAAK;MACLK,KAAKA,CAAA,EAAU;QAAA,SAAAC,IAAA,GAAAC,SAAA,CAAAC,MAAA,EAANC,IAAI,OAAAC,KAAA,CAAAJ,IAAA,GAAAK,IAAA,MAAAA,IAAA,GAAAL,IAAA,EAAAK,IAAA;UAAJF,IAAI,CAAAE,IAAA,IAAAJ,SAAA,CAAAI,IAAA;QAAA;QACX,MAAMC,MAAM,GAAGH,IAAI,CAACI,GAAG,CAAEC,CAAC,IACxBJ,KAAK,CAACK,OAAO,CAACD,CAAC,CAAC,GACZA,CAAC,GACDA,CAAC,IAAI,IAAI,CAACE,GAAG,CAACF,CAAuC,CAC3D,CAAC;QACD,OAAO,IAAAT,WAAK,EAAC,GAAGO,MAAM,CAAC;MACzB,CAAC;MACDI,GAAGA,CAACC,GAAG,EAAEC,QAAQ,EAAE;QACjB,IAAI,CAACD,GAAG,EAAE,OAAO,EAAE;QACnB,MAAME,MAAM,GAAG;UACbnB,KAAK;UACLG,KAAK,EAAEA,KAAK,aAALA,KAAK,cAALA,KAAK,GAAI,IAAI,CAACN;QACvB,CAAC;QACD,IAAIa,KAAK,CAACK,OAAO,CAACE,GAAG,CAAC,EAAE;UACtB,OAAO,IAAAD,SAAG,EAAC,CAACC,GAAG,CAAC,CAAC,CAAC,EAAE;YAAE,GAAGE,MAAM;YAAE,GAAGF,GAAG,CAAC,CAAC;UAAE,CAAC,CAAC,EAAEC,QAAQ,CAAC;QAC1D;QACA,OAAO,IAAAF,SAAG,EAAC,CAACC,GAAG,EAAEE,MAAM,CAAC,EAAED,QAAQ,CAAC;MACrC;IACF,CAAC;EACH,CAAC,EAAE,CAACtB,cAAc,EAAEI,KAAK,CAAC,CAAC;EAC3B,oBAAO,IAAAoB,oBAAa,EAClBjC,eAAe,CAACkC,QAAQ,EACxB;IAAEpB;EAAM,CAAC,EACTqB,eAAQ,CAACC,IAAI,CAAChC,cAAc,CAACiC,QAAQ,CACvC,CAAC;AACH,CAAC;AAACC,OAAA,CAAAnC,gBAAA,GAAAA,gBAAA;AAEK,MAAMoC,SAAS,GAAGA,CAAA,KAAM;EAC7B,MAAMC,OAAO,GAAG,IAAAC,iBAAU,EAACzC,eAAe,CAAC;EAC3C,IAAI,CAACwC,OAAO,EAAE;IACZ,MAAM,IAAIE,KAAK,CAAC,kDAAkD,CAAC;EACrE;EACA,OAAOF,OAAO;AAChB,CAAC;AAACF,OAAA,CAAAC,SAAA,GAAAA,SAAA","ignoreList":[]}
+{"version":3,"names":["_react","require","_reactNative","_base","_media","RNStyleXContext","createContext","undefined","RNStyleXProvider","componentProps","_componentProps$windo","_componentProps$theme","width","useWindowDimensions","correctedWidth","windowWidth","PixelRatio","getPixelSizeForLayoutSize","theme","value","useMemo","media","detectMedia","props","_len","arguments","length","args","Array","_key","sheets","map","v","isArray","mix","flatten","_len2","_key2","arg","variants","config","createElement","Provider","Children","only","children","exports","useStylex","context","useContext","Error"],"sources":["hooks.ts"],"sourcesContent":["import {\n  Children,\n  createContext,\n  createElement,\n  useContext,\n  useMemo,\n} from 'react';\nimport { PixelRatio, useWindowDimensions } from 'react-native';\nimport { flatten, mix, props } from './base';\nimport { RNStyle, VariantStyleSheet } from './types';\nimport { detectMedia } from './media';\n\ntype IApi = {\n  props: typeof props;\n  mix: typeof mix;\n  flatten: typeof flatten;\n};\n\ntype UserConfig = {\n  windowWidth: number;\n  theme: string;\n};\n\ntype ValueType = UserConfig & IApi;\n\nconst RNStyleXContext = createContext<ValueType | undefined>(undefined);\n\nexport const RNStyleXProvider = (\n  componentProps: Partial<Pick<ValueType, 'windowWidth' | 'theme'>> & {\n    media?: Record<string, string>;\n    children: React.ReactNode;\n  }\n) => {\n  const { width } = useWindowDimensions();\n  const correctedWidth =\n    componentProps.windowWidth ?? PixelRatio.getPixelSizeForLayoutSize(width);\n  const theme = componentProps.theme ?? 'default';\n\n  const value = useMemo<ValueType>(() => {\n    const media = componentProps.media && detectMedia(componentProps.media, correctedWidth);\n    return {\n      windowWidth: correctedWidth,\n      theme,\n      props(...args) {\n        const sheets = args.map((v) =>\n          Array.isArray(v)\n            ? v\n            : v && this.mix(v as VariantStyleSheet<string, RNStyle>)\n        );\n        return props(...sheets);\n      },\n      flatten(...args) {\n        const sheets = args.map((v) =>\n          Array.isArray(v)\n            ? v\n            : v && this.mix(v as VariantStyleSheet<string, RNStyle>)\n        );\n        return flatten(...sheets);\n      },\n      mix(arg, variants) {\n        if (!arg) return [];\n        const config = {\n          theme,\n          media: media ?? this.windowWidth,\n        };\n        if (Array.isArray(arg)) {\n          return mix([arg[0], { ...config, ...arg[1] }], variants);\n        }\n        return mix([arg, config], variants);\n      },\n    };\n  }, [correctedWidth, theme]);\n  return createElement(\n    RNStyleXContext.Provider,\n    { value },\n    Children.only(componentProps.children)\n  );\n};\n\nexport const useStylex = () => {\n  const context = useContext(RNStyleXContext);\n  if (!context) {\n    throw new Error('useStylex must be used within a RNStyleXProvider');\n  }\n  return context;\n};\n"],"mappings":"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","ignoreList":[]}

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

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["types.ts"],"sourcesContent":["import type { StyleSheet } from 'react-native';\n\nexport type StyleObject = StyleSheet.NamedStyles<any>;\nexport type RNStyle = StyleObject[string];\n\nexport type VariantStyle<S> = { [key: string]: S };\nexport type VariantStyleSheet<Key extends string, S extends RNStyle> = {\n  [key in Key]: S;\n};\n\nexport type XRNStyle<S extends RNStyle = RNStyle> = {\n  [key in keyof S]: VariantStyle<S[key]> | S[key];\n};\n\ntype ExtractVariantKeys<\n  X extends XRNStyle<S>,\n  S extends RNStyle = RNStyle\n> = Extract<keyof Extract<X[keyof X], VariantStyle<any>>, string>;\n\nexport type NamedStyles<T = string, R extends RNStyle = RNStyle> = {\n  [P in keyof T]: XRNStyle<R>;\n};\n\nexport type XRNStyleSheets<\n  X extends NamedStyles<any, S>,\n  S extends RNStyle = RNStyle\n> = {\n  [key in keyof X]: VariantStyleSheet<ExtractVariantKeys<X[key]>, S>;\n};\n\ntype ExtractPostFix<T extends string> = T extends `@${string}_${infer PostFix}`\n  ? PostFix\n  : 'default';\n\n// NOTE: This map for keyof (X | Y) = (keyof X & keyof Y) != (keyof X | keyof Y).\n// different object value is composed to union type and keyof is applied later\n// without explicit individual object evaluation by this utility type.\ntype KeysOfUnion<T> = T extends T ? keyof T : never;\n\nexport type Variants<\n  A extends Record<string, Record<string, Record<string, any>>>\n> = {\n  [key in keyof A]?:\n    | number\n    | boolean\n    | ExtractPostFix<Extract<KeysOfUnion<A[key][keyof A[key]]>, string>>;\n};\n\nexport type VariantValue<S extends RNStyle = RNStyle> = {\n  [key in keyof S]: VariantStyle<S[key]>;\n}; // Style Fields\n"],"mappings":"","ignoreList":[]}
+{"version":3,"names":[],"sources":["types.ts"],"sourcesContent":["import type { StyleSheet } from 'react-native';\n\nexport type StyleObject = StyleSheet.NamedStyles<any>;\nexport type RNStyle = StyleObject[string];\n\nexport type VariantStyle<S> = { [key: string]: S };\nexport type VariantStyleSheet<Key extends string, S extends RNStyle> = {\n  [key in Key]: S;\n} & { default: S; };\n\nexport type XRNStyle<S extends RNStyle = RNStyle> = {\n  [key in keyof S]: VariantStyle<S[key]> | S[key];\n};\n\ntype ExtractVariantKeys<\n  X extends XRNStyle<S>,\n  S extends RNStyle = RNStyle\n> = Extract<keyof Extract<X[keyof X], VariantStyle<any>>, string>;\n\nexport type NamedStyles<T = string, R extends RNStyle = RNStyle> = {\n  [P in keyof T]: XRNStyle<R>;\n};\n\nexport type XRNStyleSheets<\n  X extends NamedStyles<any, S>,\n  S extends RNStyle = RNStyle\n> = {\n  [key in keyof X]: VariantStyleSheet<ExtractVariantKeys<X[key]>, S>;\n};\n\ntype ExtractPostFix<T extends string> = T extends `@${string}_${infer PostFix}`\n  ? PostFix\n  : 'default';\n\n// NOTE: This map for keyof (X | Y) = (keyof X & keyof Y) != (keyof X | keyof Y).\n// different object value is composed to union type and keyof is applied later\n// without explicit individual object evaluation by this utility type.\ntype KeysOfUnion<T> = T extends T ? keyof T : never;\n\nexport type Variants<\n  A extends Record<string, Record<string, Record<string, any>>>\n> = {\n  [key in keyof A]?:\n    | number\n    | boolean\n    | ExtractPostFix<Extract<KeysOfUnion<A[key][keyof A[key]]>, string>>;\n};\n\nexport type VariantValue<S extends RNStyle = RNStyle> = {\n  [key in keyof S]: VariantStyle<S[key]>;\n}; // Style Fields\n"],"mappings":"","ignoreList":[]}

package/lib/module/index.js

@@ -1,4 +1,4 @@
-export { create, props, mix } from './utils/base';
+export { create, props, mix, flatten } from './utils/base';
 export { createVariants } from './utils/variant';
 export { defineConsts, defineVars } from './utils/tokens';
 export { useStylex, RNStyleXProvider } from './utils/hooks';

package/lib/module/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["create","props","mix","createVariants","defineConsts","defineVars","useStylex","RNStyleXProvider","createThemes"],"sources":["index.ts"],"sourcesContent":["export { create, props, mix } from './utils/base';\nexport { createVariants } from './utils/variant';\nexport { defineConsts, defineVars } from './utils/tokens';\nexport { useStylex, RNStyleXProvider } from './utils/hooks';\nexport { createThemes } from './utils/theme';\nexport type {\n  Variants,\n  XRNStyle,\n  RNStyle,\n  XRNStyleSheets,\n} from './utils/types';\n"],"mappings":"AAAA,SAASA,MAAM,EAAEC,KAAK,EAAEC,GAAG,QAAQ,cAAc;AACjD,SAASC,cAAc,QAAQ,iBAAiB;AAChD,SAASC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACzD,SAASC,SAAS,EAAEC,gBAAgB,QAAQ,eAAe;AAC3D,SAASC,YAAY,QAAQ,eAAe","ignoreList":[]}
+{"version":3,"names":["create","props","mix","flatten","createVariants","defineConsts","defineVars","useStylex","RNStyleXProvider","createThemes"],"sources":["index.ts"],"sourcesContent":["export { create, props, mix, flatten } from './utils/base';\nexport { createVariants } from './utils/variant';\nexport { defineConsts, defineVars } from './utils/tokens';\nexport { useStylex, RNStyleXProvider } from './utils/hooks';\nexport { createThemes } from './utils/theme';\nexport type {\n  Variants,\n  XRNStyle,\n  RNStyle,\n  XRNStyleSheets,\n} from './utils/types';\n"],"mappings":"AAAA,SAASA,MAAM,EAAEC,KAAK,EAAEC,GAAG,EAAEC,OAAO,QAAQ,cAAc;AAC1D,SAASC,cAAc,QAAQ,iBAAiB;AAChD,SAASC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACzD,SAASC,SAAS,EAAEC,gBAAgB,QAAQ,eAAe;AAC3D,SAASC,YAAY,QAAQ,eAAe","ignoreList":[]}

package/lib/module/utils/base.js

@@ -44,6 +44,9 @@ export const mix = (target, variantArgs) => {
   }
   return results;
 };
+export const flatten = function () {
+  return StyleSheet.flatten(props(...arguments).style);
+};
 export const props = function () {
   for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
     args[_key] = arguments[_key];

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

@@ -1 +1 @@
-{"version":3,"names":["StyleSheet","media","variants","resolveTheme","bundleStyleSheet","styleObject","result","Object","entries","reduce","current","_ref","key","value","forEach","_ref2","variantKey","variantValue","default","create","args","_ref3","mix","target","variantArgs","_target","config","Array","isArray","results","theme","themeSheet","push","props","_len","arguments","length","_key","style","acc","arg","_default","xStyleBase"],"sources":["base.ts"],"sourcesContent":["import { StyleSheet } from 'react-native';\nimport {\n  XRNStyleSheets,\n  XRNStyle,\n  NamedStyles,\n  RNStyle,\n  VariantStyleSheet,\n} from './types';\nimport { media } from './media';\nimport { variants } from './variant';\nimport { resolveTheme } from './theme';\n\nfunction bundleStyleSheet<S extends RNStyle>(styleObject: XRNStyle<S>) {\n  const result = Object.entries(styleObject).reduce((current, [key, value]) => {\n    if (typeof value === 'object') {\n      Object.entries(value).forEach(([variantKey, variantValue]) => {\n        if (!current[variantKey]) {\n          current[variantKey] = {};\n        }\n        (current[variantKey] as any)[key] = variantValue;\n      });\n    } else {\n      current.default ||= {};\n      (current.default as any)[key] = value;\n    }\n    return current;\n  }, {} as Record<string, RNStyle>);\n  return StyleSheet.create(result);\n}\n\nexport const create = <T extends NamedStyles<any, R>, R extends RNStyle>(\n  args: T\n): XRNStyleSheets<T, R> => {\n  return Object.entries(args).reduce((current, [key, value]) => {\n    (current as any)[key] = bundleStyleSheet(value);\n    return current;\n  }, {} as XRNStyleSheets<T, R>);\n};\n\nexport const mix = <\n  Variants extends { [key: string]: string | number | boolean | undefined },\n  Theme extends string = string,\n  T extends VariantStyleSheet<string, RNStyle> = VariantStyleSheet<\n    string,\n    RNStyle\n  >\n>(\n  target?: T | [T, { theme?: Theme; media?: number | string }],\n  variantArgs?: Variants\n): RNStyle[] => {\n  if (!target) return [];\n  const [_target, config] = Array.isArray(target) ? target : [target as T, {}];\n  let results = _target.default ? [_target.default] : ([] as RNStyle[]);\n  if (config.theme) {\n    const themeSheet = resolveTheme(_target, config.theme);\n    themeSheet && results.push(themeSheet);\n  }\n  if (variantArgs) {\n    results = [...results, ...variants(_target, variantArgs)];\n  }\n  if (config.media) {\n    results = [...results, ...media(_target, config.media)];\n  }\n  return results;\n};\n\ntype PropValue = VariantStyleSheet<string, RNStyle> | RNStyle;\nexport const props = <T extends RNStyle>(\n  ...args: (PropValue | RNStyle[] | false | null | undefined)[]\n): { style: T[] } => {\n  return {\n    style: args.reduce((acc: T[], arg) => {\n      if (!arg) return acc;\n      if (Array.isArray(arg)) {\n        return [...acc, ...arg] as T[];\n      }\n      const xStyleBase =\n        (arg as VariantStyleSheet<string, RNStyle>).default ?? arg;\n      return [...acc, xStyleBase] as T[];\n    }, []) as T[],\n  };\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["StyleSheet","media","variants","resolveTheme","bundleStyleSheet","styleObject","result","Object","entries","reduce","current","_ref","key","value","forEach","_ref2","variantKey","variantValue","default","create","args","_ref3","mix","target","variantArgs","_target","config","Array","isArray","results","theme","themeSheet","push","flatten","props","arguments","style","_len","length","_key","acc","arg","_default","xStyleBase"],"sources":["base.ts"],"sourcesContent":["import { StyleSheet } from 'react-native';\nimport {\n  XRNStyleSheets,\n  XRNStyle,\n  NamedStyles,\n  RNStyle,\n  VariantStyleSheet,\n} from './types';\nimport { media } from './media';\nimport { variants } from './variant';\nimport { resolveTheme } from './theme';\n\nfunction bundleStyleSheet<S extends RNStyle>(styleObject: XRNStyle<S>) {\n  const result = Object.entries(styleObject).reduce((current, [key, value]) => {\n    if (typeof value === 'object') {\n      Object.entries(value).forEach(([variantKey, variantValue]) => {\n        if (!current[variantKey]) {\n          current[variantKey] = {};\n        }\n        (current[variantKey] as any)[key] = variantValue;\n      });\n    } else {\n      current.default ||= {};\n      (current.default as any)[key] = value;\n    }\n    return current;\n  }, {} as Record<string, RNStyle>);\n  return StyleSheet.create(result);\n}\n\nexport const create = <const T extends NamedStyles<any, R>, R extends RNStyle>(\n  args: T\n): XRNStyleSheets<T, R> => {\n  return Object.entries(args).reduce((current, [key, value]) => {\n    (current as any)[key] = bundleStyleSheet(value);\n    return current;\n  }, {} as XRNStyleSheets<T, R>);\n};\n\nexport const mix = <\n  Variants extends { [key: string]: string | number | boolean | undefined },\n  Theme extends string = string,\n  T extends VariantStyleSheet<string, RNStyle> = VariantStyleSheet<\n    string,\n    RNStyle\n  >\n>(\n  target?: T | [T, { theme?: Theme; media?: number | string }],\n  variantArgs?: Variants\n): RNStyle[] => {\n  if (!target) return [];\n  const [_target, config] = Array.isArray(target) ? target : [target as T, {}];\n  let results = _target.default ? [_target.default] : ([] as RNStyle[]);\n  if (config.theme) {\n    const themeSheet = resolveTheme(_target, config.theme);\n    themeSheet && results.push(themeSheet);\n  }\n  if (variantArgs) {\n    results = [...results, ...variants(_target, variantArgs)];\n  }\n  if (config.media) {\n    results = [...results, ...media(_target, config.media)];\n  }\n  return results;\n};\n\nexport const flatten =  <T extends RNStyle>(\n  ...args: (PropValue | RNStyle[] | false | null | undefined)[]\n): T => {\n  return StyleSheet.flatten(props(...args).style) as T;\n};\n\ntype PropValue = VariantStyleSheet<string, RNStyle> | RNStyle;\nexport const props = <T extends RNStyle>(\n  ...args: (PropValue | RNStyle[] | false | null | undefined)[]\n): { style: T[] } => {\n  return {\n    style: args.reduce((acc: T[], arg) => {\n      if (!arg) return acc;\n      if (Array.isArray(arg)) {\n        return [...acc, ...arg] as T[];\n      }\n      const xStyleBase =\n        (arg as VariantStyleSheet<string, RNStyle>).default ?? arg;\n      return [...acc, xStyleBase] as T[];\n    }, []) as T[],\n  };\n};\n"],"mappings":"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","ignoreList":[]}

package/lib/module/utils/hooks.js

@@ -1,6 +1,6 @@
 import { Children, createContext, createElement, useContext, useMemo } from 'react';
 import { PixelRatio, useWindowDimensions } from 'react-native';
-import { mix, props } from './base';
+import { flatten, mix, props } from './base';
 import { detectMedia } from './media';
 const RNStyleXContext = /*#__PURE__*/createContext(undefined);
 export const RNStyleXProvider = componentProps => {
@@ -22,6 +22,13 @@ export const RNStyleXProvider = componentProps => {
         const sheets = args.map(v => Array.isArray(v) ? v : v && this.mix(v));
         return props(...sheets);
       },
+      flatten() {
+        for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+          args[_key2] = arguments[_key2];
+        }
+        const sheets = args.map(v => Array.isArray(v) ? v : v && this.mix(v));
+        return flatten(...sheets);
+      },
       mix(arg, variants) {
         if (!arg) return [];
         const config = {

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

@@ -1 +1 @@
-{"version":3,"names":["Children","createContext","createElement","useContext","useMemo","PixelRatio","useWindowDimensions","mix","props","detectMedia","RNStyleXContext","undefined","RNStyleXProvider","componentProps","_componentProps$windo","_componentProps$theme","width","correctedWidth","windowWidth","getPixelSizeForLayoutSize","theme","value","media","_len","arguments","length","args","Array","_key","sheets","map","v","isArray","arg","variants","config","Provider","only","children","useStylex","context","Error"],"sources":["hooks.ts"],"sourcesContent":["import {\n  Children,\n  createContext,\n  createElement,\n  useContext,\n  useMemo,\n} from 'react';\nimport { PixelRatio, useWindowDimensions } from 'react-native';\nimport { mix, props } from './base';\nimport { RNStyle, VariantStyleSheet } from './types';\nimport { detectMedia } from './media';\n\ntype IApi = {\n  props: typeof props;\n  mix: typeof mix;\n};\n\ntype UserConfig = {\n  windowWidth: number;\n  theme: string;\n};\n\ntype ValueType = UserConfig & IApi;\n\nconst RNStyleXContext = createContext<ValueType | undefined>(undefined);\n\nexport const RNStyleXProvider = (\n  componentProps: Partial<Pick<ValueType, 'windowWidth' | 'theme'>> & {\n    media?: Record<string, string>;\n    children: React.ReactNode;\n  }\n) => {\n  const { width } = useWindowDimensions();\n  const correctedWidth =\n    componentProps.windowWidth ?? PixelRatio.getPixelSizeForLayoutSize(width);\n  const theme = componentProps.theme ?? 'default';\n\n  const value = useMemo<ValueType>(() => {\n    const media = componentProps.media && detectMedia(componentProps.media, correctedWidth);\n    return {\n      windowWidth: correctedWidth,\n      theme,\n      props(...args) {\n        const sheets = args.map((v) =>\n          Array.isArray(v)\n            ? v\n            : v && this.mix(v as VariantStyleSheet<string, RNStyle>)\n        );\n        return props(...sheets);\n      },\n      mix(arg, variants) {\n        if (!arg) return [];\n        const config = {\n          theme,\n          media: media ?? this.windowWidth,\n        };\n        if (Array.isArray(arg)) {\n          return mix([arg[0], { ...config, ...arg[1] }], variants);\n        }\n        return mix([arg, config], variants);\n      },\n    };\n  }, [correctedWidth, theme]);\n  return createElement(\n    RNStyleXContext.Provider,\n    { value },\n    Children.only(componentProps.children)\n  );\n};\n\nexport const useStylex = () => {\n  const context = useContext(RNStyleXContext);\n  if (!context) {\n    throw new Error('useStylex must be used within a RNStyleXProvider');\n  }\n  return context;\n};\n"],"mappings":"AAAA,SACEA,QAAQ,EACRC,aAAa,EACbC,aAAa,EACbC,UAAU,EACVC,OAAO,QACF,OAAO;AACd,SAASC,UAAU,EAAEC,mBAAmB,QAAQ,cAAc;AAC9D,SAASC,GAAG,EAAEC,KAAK,QAAQ,QAAQ;AAEnC,SAASC,WAAW,QAAQ,SAAS;AAcrC,MAAMC,eAAe,gBAAGT,aAAa,CAAwBU,SAAS,CAAC;AAEvE,OAAO,MAAMC,gBAAgB,GAC3BC,cAGC,IACE;EAAA,IAAAC,qBAAA,EAAAC,qBAAA;EACH,MAAM;IAAEC;EAAM,CAAC,GAAGV,mBAAmB,CAAC,CAAC;EACvC,MAAMW,cAAc,IAAAH,qBAAA,GAClBD,cAAc,CAACK,WAAW,cAAAJ,qBAAA,cAAAA,qBAAA,GAAIT,UAAU,CAACc,yBAAyB,CAACH,KAAK,CAAC;EAC3E,MAAMI,KAAK,IAAAL,qBAAA,GAAGF,cAAc,CAACO,KAAK,cAAAL,qBAAA,cAAAA,qBAAA,GAAI,SAAS;EAE/C,MAAMM,KAAK,GAAGjB,OAAO,CAAY,MAAM;IACrC,MAAMkB,KAAK,GAAGT,cAAc,CAACS,KAAK,IAAIb,WAAW,CAACI,cAAc,CAACS,KAAK,EAAEL,cAAc,CAAC;IACvF,OAAO;MACLC,WAAW,EAAED,cAAc;MAC3BG,KAAK;MACLZ,KAAKA,CAAA,EAAU;QAAA,SAAAe,IAAA,GAAAC,SAAA,CAAAC,MAAA,EAANC,IAAI,OAAAC,KAAA,CAAAJ,IAAA,GAAAK,IAAA,MAAAA,IAAA,GAAAL,IAAA,EAAAK,IAAA;UAAJF,IAAI,CAAAE,IAAA,IAAAJ,SAAA,CAAAI,IAAA;QAAA;QACX,MAAMC,MAAM,GAAGH,IAAI,CAACI,GAAG,CAAEC,CAAC,IACxBJ,KAAK,CAACK,OAAO,CAACD,CAAC,CAAC,GACZA,CAAC,GACDA,CAAC,IAAI,IAAI,CAACxB,GAAG,CAACwB,CAAuC,CAC3D,CAAC;QACD,OAAOvB,KAAK,CAAC,GAAGqB,MAAM,CAAC;MACzB,CAAC;MACDtB,GAAGA,CAAC0B,GAAG,EAAEC,QAAQ,EAAE;QACjB,IAAI,CAACD,GAAG,EAAE,OAAO,EAAE;QACnB,MAAME,MAAM,GAAG;UACbf,KAAK;UACLE,KAAK,EAAEA,KAAK,aAALA,KAAK,cAALA,KAAK,GAAI,IAAI,CAACJ;QACvB,CAAC;QACD,IAAIS,KAAK,CAACK,OAAO,CAACC,GAAG,CAAC,EAAE;UACtB,OAAO1B,GAAG,CAAC,CAAC0B,GAAG,CAAC,CAAC,CAAC,EAAE;YAAE,GAAGE,MAAM;YAAE,GAAGF,GAAG,CAAC,CAAC;UAAE,CAAC,CAAC,EAAEC,QAAQ,CAAC;QAC1D;QACA,OAAO3B,GAAG,CAAC,CAAC0B,GAAG,EAAEE,MAAM,CAAC,EAAED,QAAQ,CAAC;MACrC;IACF,CAAC;EACH,CAAC,EAAE,CAACjB,cAAc,EAAEG,KAAK,CAAC,CAAC;EAC3B,oBAAOlB,aAAa,CAClBQ,eAAe,CAAC0B,QAAQ,EACxB;IAAEf;EAAM,CAAC,EACTrB,QAAQ,CAACqC,IAAI,CAACxB,cAAc,CAACyB,QAAQ,CACvC,CAAC;AACH,CAAC;AAED,OAAO,MAAMC,SAAS,GAAGA,CAAA,KAAM;EAC7B,MAAMC,OAAO,GAAGrC,UAAU,CAACO,eAAe,CAAC;EAC3C,IAAI,CAAC8B,OAAO,EAAE;IACZ,MAAM,IAAIC,KAAK,CAAC,kDAAkD,CAAC;EACrE;EACA,OAAOD,OAAO;AAChB,CAAC","ignoreList":[]}
+{"version":3,"names":["Children","createContext","createElement","useContext","useMemo","PixelRatio","useWindowDimensions","flatten","mix","props","detectMedia","RNStyleXContext","undefined","RNStyleXProvider","componentProps","_componentProps$windo","_componentProps$theme","width","correctedWidth","windowWidth","getPixelSizeForLayoutSize","theme","value","media","_len","arguments","length","args","Array","_key","sheets","map","v","isArray","_len2","_key2","arg","variants","config","Provider","only","children","useStylex","context","Error"],"sources":["hooks.ts"],"sourcesContent":["import {\n  Children,\n  createContext,\n  createElement,\n  useContext,\n  useMemo,\n} from 'react';\nimport { PixelRatio, useWindowDimensions } from 'react-native';\nimport { flatten, mix, props } from './base';\nimport { RNStyle, VariantStyleSheet } from './types';\nimport { detectMedia } from './media';\n\ntype IApi = {\n  props: typeof props;\n  mix: typeof mix;\n  flatten: typeof flatten;\n};\n\ntype UserConfig = {\n  windowWidth: number;\n  theme: string;\n};\n\ntype ValueType = UserConfig & IApi;\n\nconst RNStyleXContext = createContext<ValueType | undefined>(undefined);\n\nexport const RNStyleXProvider = (\n  componentProps: Partial<Pick<ValueType, 'windowWidth' | 'theme'>> & {\n    media?: Record<string, string>;\n    children: React.ReactNode;\n  }\n) => {\n  const { width } = useWindowDimensions();\n  const correctedWidth =\n    componentProps.windowWidth ?? PixelRatio.getPixelSizeForLayoutSize(width);\n  const theme = componentProps.theme ?? 'default';\n\n  const value = useMemo<ValueType>(() => {\n    const media = componentProps.media && detectMedia(componentProps.media, correctedWidth);\n    return {\n      windowWidth: correctedWidth,\n      theme,\n      props(...args) {\n        const sheets = args.map((v) =>\n          Array.isArray(v)\n            ? v\n            : v && this.mix(v as VariantStyleSheet<string, RNStyle>)\n        );\n        return props(...sheets);\n      },\n      flatten(...args) {\n        const sheets = args.map((v) =>\n          Array.isArray(v)\n            ? v\n            : v && this.mix(v as VariantStyleSheet<string, RNStyle>)\n        );\n        return flatten(...sheets);\n      },\n      mix(arg, variants) {\n        if (!arg) return [];\n        const config = {\n          theme,\n          media: media ?? this.windowWidth,\n        };\n        if (Array.isArray(arg)) {\n          return mix([arg[0], { ...config, ...arg[1] }], variants);\n        }\n        return mix([arg, config], variants);\n      },\n    };\n  }, [correctedWidth, theme]);\n  return createElement(\n    RNStyleXContext.Provider,\n    { value },\n    Children.only(componentProps.children)\n  );\n};\n\nexport const useStylex = () => {\n  const context = useContext(RNStyleXContext);\n  if (!context) {\n    throw new Error('useStylex must be used within a RNStyleXProvider');\n  }\n  return context;\n};\n"],"mappings":"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","ignoreList":[]}

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

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["types.ts"],"sourcesContent":["import type { StyleSheet } from 'react-native';\n\nexport type StyleObject = StyleSheet.NamedStyles<any>;\nexport type RNStyle = StyleObject[string];\n\nexport type VariantStyle<S> = { [key: string]: S };\nexport type VariantStyleSheet<Key extends string, S extends RNStyle> = {\n  [key in Key]: S;\n};\n\nexport type XRNStyle<S extends RNStyle = RNStyle> = {\n  [key in keyof S]: VariantStyle<S[key]> | S[key];\n};\n\ntype ExtractVariantKeys<\n  X extends XRNStyle<S>,\n  S extends RNStyle = RNStyle\n> = Extract<keyof Extract<X[keyof X], VariantStyle<any>>, string>;\n\nexport type NamedStyles<T = string, R extends RNStyle = RNStyle> = {\n  [P in keyof T]: XRNStyle<R>;\n};\n\nexport type XRNStyleSheets<\n  X extends NamedStyles<any, S>,\n  S extends RNStyle = RNStyle\n> = {\n  [key in keyof X]: VariantStyleSheet<ExtractVariantKeys<X[key]>, S>;\n};\n\ntype ExtractPostFix<T extends string> = T extends `@${string}_${infer PostFix}`\n  ? PostFix\n  : 'default';\n\n// NOTE: This map for keyof (X | Y) = (keyof X & keyof Y) != (keyof X | keyof Y).\n// different object value is composed to union type and keyof is applied later\n// without explicit individual object evaluation by this utility type.\ntype KeysOfUnion<T> = T extends T ? keyof T : never;\n\nexport type Variants<\n  A extends Record<string, Record<string, Record<string, any>>>\n> = {\n  [key in keyof A]?:\n    | number\n    | boolean\n    | ExtractPostFix<Extract<KeysOfUnion<A[key][keyof A[key]]>, string>>;\n};\n\nexport type VariantValue<S extends RNStyle = RNStyle> = {\n  [key in keyof S]: VariantStyle<S[key]>;\n}; // Style Fields\n"],"mappings":"","ignoreList":[]}
+{"version":3,"names":[],"sources":["types.ts"],"sourcesContent":["import type { StyleSheet } from 'react-native';\n\nexport type StyleObject = StyleSheet.NamedStyles<any>;\nexport type RNStyle = StyleObject[string];\n\nexport type VariantStyle<S> = { [key: string]: S };\nexport type VariantStyleSheet<Key extends string, S extends RNStyle> = {\n  [key in Key]: S;\n} & { default: S; };\n\nexport type XRNStyle<S extends RNStyle = RNStyle> = {\n  [key in keyof S]: VariantStyle<S[key]> | S[key];\n};\n\ntype ExtractVariantKeys<\n  X extends XRNStyle<S>,\n  S extends RNStyle = RNStyle\n> = Extract<keyof Extract<X[keyof X], VariantStyle<any>>, string>;\n\nexport type NamedStyles<T = string, R extends RNStyle = RNStyle> = {\n  [P in keyof T]: XRNStyle<R>;\n};\n\nexport type XRNStyleSheets<\n  X extends NamedStyles<any, S>,\n  S extends RNStyle = RNStyle\n> = {\n  [key in keyof X]: VariantStyleSheet<ExtractVariantKeys<X[key]>, S>;\n};\n\ntype ExtractPostFix<T extends string> = T extends `@${string}_${infer PostFix}`\n  ? PostFix\n  : 'default';\n\n// NOTE: This map for keyof (X | Y) = (keyof X & keyof Y) != (keyof X | keyof Y).\n// different object value is composed to union type and keyof is applied later\n// without explicit individual object evaluation by this utility type.\ntype KeysOfUnion<T> = T extends T ? keyof T : never;\n\nexport type Variants<\n  A extends Record<string, Record<string, Record<string, any>>>\n> = {\n  [key in keyof A]?:\n    | number\n    | boolean\n    | ExtractPostFix<Extract<KeysOfUnion<A[key][keyof A[key]]>, string>>;\n};\n\nexport type VariantValue<S extends RNStyle = RNStyle> = {\n  [key in keyof S]: VariantStyle<S[key]>;\n}; // Style Fields\n"],"mappings":"","ignoreList":[]}

package/lib/typescript/index.d.ts

@@ -1,4 +1,4 @@
-export { create, props, mix } from './utils/base';
+export { create, props, mix, flatten } from './utils/base';
 export { createVariants } from './utils/variant';
 export { defineConsts, defineVars } from './utils/tokens';
 export { useStylex, RNStyleXProvider } from './utils/hooks';

package/lib/typescript/utils/base.d.ts

@@ -1,11 +1,12 @@
 import { XRNStyleSheets, NamedStyles, RNStyle, VariantStyleSheet } from './types';
-export declare const create: <T extends NamedStyles<any, R>, R extends RNStyle>(args: T) => XRNStyleSheets<T, R>;
+export declare const create: <const T extends NamedStyles<any, R>, R extends RNStyle>(args: T) => XRNStyleSheets<T, R>;
 export declare const mix: <Variants extends {
     [key: string]: string | number | boolean | undefined;
 }, Theme extends string = string, T extends VariantStyleSheet<string, RNStyle> = VariantStyleSheet<string, RNStyle>>(target?: T | [T, {
     theme?: Theme;
     media?: number | string;
 }], variantArgs?: Variants) => RNStyle[];
+export declare const flatten: <T extends RNStyle>(...args: (PropValue | RNStyle[] | false | null | undefined)[]) => T;
 type PropValue = VariantStyleSheet<string, RNStyle> | RNStyle;
 export declare const props: <T extends RNStyle>(...args: (PropValue | RNStyle[] | false | null | undefined)[]) => {
     style: T[];

package/lib/typescript/utils/hooks.d.ts

@@ -1,7 +1,8 @@
-import { mix, props } from './base';
+import { flatten, mix, props } from './base';
 type IApi = {
     props: typeof props;
     mix: typeof mix;
+    flatten: typeof flatten;
 };
 type UserConfig = {
     windowWidth: number;

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

@@ -6,6 +6,8 @@ export type VariantStyle<S> = {
 };
 export type VariantStyleSheet<Key extends string, S extends RNStyle> = {
     [key in Key]: S;
+} & {
+    default: S;
 };
 export type XRNStyle<S extends RNStyle = RNStyle> = {
     [key in keyof S]: VariantStyle<S[key]> | S[key];

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mochi-inc-japan/react-native-stylex-sheet",
   "description": "The modern CSS-in-JS library for React Native",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "license": "MIT",
   "author": "Tkow",
   "repository": "https://github.com/MOCHI-inc-JAPAN/react-native-stylex-sheet",