@mochi-inc-japan/react-native-stylex-sheet 1.0.1 → 1.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.ja.md +61 -1
- package/README.md +129 -59
- package/lib/commonjs/index.js +6 -0
- package/lib/commonjs/index.js.map +1 -1
- package/lib/commonjs/utils/base.js +5 -1
- package/lib/commonjs/utils/base.js.map +1 -1
- package/lib/commonjs/utils/hooks.js +7 -0
- package/lib/commonjs/utils/hooks.js.map +1 -1
- package/lib/commonjs/utils/types.js.map +1 -1
- package/lib/module/index.js +1 -1
- package/lib/module/index.js.map +1 -1
- package/lib/module/utils/base.js +3 -0
- package/lib/module/utils/base.js.map +1 -1
- package/lib/module/utils/hooks.js +8 -1
- package/lib/module/utils/hooks.js.map +1 -1
- package/lib/module/utils/types.js.map +1 -1
- package/lib/typescript/index.d.ts +1 -1
- package/lib/typescript/utils/base.d.ts +2 -1
- package/lib/typescript/utils/hooks.d.ts +2 -1
- package/lib/typescript/utils/types.d.ts +2 -0
- package/package.json +1 -1
package/README.ja.md
CHANGED
|
@@ -548,7 +548,7 @@ const style = stylex.mix(
|
|
|
548
548
|
|
|
549
549
|
### `props(...args)`
|
|
550
550
|
|
|
551
|
-
スタイル配列を React Native コンポーネントにスプレッドするための `{ style: [...] }`
|
|
551
|
+
スタイル配列を React Native コンポーネントにスプレッドするための `{ style: [...] }` を返します。`RNStyle[]` 配列またはプレーンなスタイルオブジェクトを受け取ります。
|
|
552
552
|
|
|
553
553
|
```tsx
|
|
554
554
|
// 複数の mix() 結果を結合
|
|
@@ -563,6 +563,28 @@ function Component() {
|
|
|
563
563
|
|
|
564
564
|
---
|
|
565
565
|
|
|
566
|
+
### `flatten(...args)`
|
|
567
|
+
|
|
568
|
+
`props()` と同じシグネチャでスタイル配列を受け取り、`StyleSheet.flatten()` を通じて単一の `RNStyle` オブジェクトを返します。`TouchableOpacity` の `style` や `ScrollView` の `contentContainerStyle` など、配列形式のスタイルを受け付けないコンポーネントに使用します。
|
|
569
|
+
|
|
570
|
+
```tsx
|
|
571
|
+
// モジュールレベル（非リアクティブ、デフォルトスタイルのみ）
|
|
572
|
+
<TouchableOpacity style={stylex.flatten(styles.button)} />
|
|
573
|
+
|
|
574
|
+
// コンポーネント内 — RNStyleXProvider のテーマ・メディアが自動適用される
|
|
575
|
+
const stylex = useStylex();
|
|
576
|
+
<TouchableOpacity
|
|
577
|
+
style={stylex.flatten(stylex.mix(styles.button, { color: 'danger' }))}
|
|
578
|
+
/>
|
|
579
|
+
|
|
580
|
+
// 複数エントリを一つのオブジェクトにマージ
|
|
581
|
+
<ScrollView
|
|
582
|
+
contentContainerStyle={stylex.flatten(styles.container, styles.padding)}
|
|
583
|
+
/>
|
|
584
|
+
```
|
|
585
|
+
|
|
586
|
+
---
|
|
587
|
+
|
|
566
588
|
## メディアクエリ
|
|
567
589
|
|
|
568
590
|
メディアクエリ文字列はスタイルプロパティキーとして直接使用します。文字列はサポートされている範囲形式のいずれかに一致する必要があります。
|
|
@@ -597,6 +619,44 @@ const styles = create({
|
|
|
597
619
|
|
|
598
620
|
## 制限事項
|
|
599
621
|
|
|
622
|
+
`TouchableOpacity` のようにスタイルに配列を受け付けないコンポーネントや、`ScrollView` の `contentContainerStyle` のような特殊なスタイルキーを持つコンポーネントに遭遇することがあります。
|
|
623
|
+
その場合、以下の2つの解決策があります。
|
|
624
|
+
|
|
625
|
+
1. テーマ・メディアクエリ・バリアントを使わないスタイルの場合は、`stylex.create` の結果プロパティの `"default"` キーを使います。この値はいかなるオーバーライドも適用されていない `RNStyle` オブジェクトです。
|
|
626
|
+
|
|
627
|
+
```tsx
|
|
628
|
+
const styles = stylex.create({
|
|
629
|
+
scroll: {
|
|
630
|
+
width: 100,
|
|
631
|
+
},
|
|
632
|
+
});
|
|
633
|
+
|
|
634
|
+
<ScrollView contentContainerStyle={styles.scroll.default} />;
|
|
635
|
+
```
|
|
636
|
+
|
|
637
|
+
2. デフォルトスタイルにバリアント・テーマ・メディアを適用した結果を1つのオブジェクトにマージしたい場合は、`stylex.flatten()` と `stylex.mix()` を組み合わせます。
|
|
638
|
+
|
|
639
|
+
```tsx
|
|
640
|
+
const variants = createVariants({
|
|
641
|
+
h: {
|
|
642
|
+
height: {
|
|
643
|
+
default: 100,
|
|
644
|
+
lg: 200,
|
|
645
|
+
},
|
|
646
|
+
},
|
|
647
|
+
});
|
|
648
|
+
|
|
649
|
+
const styles = stylex.create({
|
|
650
|
+
touch: {
|
|
651
|
+
width: 100,
|
|
652
|
+
...variants.h,
|
|
653
|
+
},
|
|
654
|
+
});
|
|
655
|
+
|
|
656
|
+
const stylex = useStylex();
|
|
657
|
+
<TouchableOpacity style={stylex.flatten(stylex.mix(styles.touch, { h: 'lg' }))} />;
|
|
658
|
+
```
|
|
659
|
+
|
|
600
660
|
React Native には CSS カスケード、継承、キーフレーム、疑似要素、グローバルスタイルがありません。これらの機能は設計上サポートされていません。
|
|
601
661
|
|
|
602
662
|
| 非対応 | 代替手段 |
|
package/README.md
CHANGED
|
@@ -119,7 +119,9 @@ function Button({ danger }: { danger?: boolean }) {
|
|
|
119
119
|
return (
|
|
120
120
|
<Pressable
|
|
121
121
|
{...stylex.props(
|
|
122
|
-
stylex.mix<Variants<typeof buttonVariants>>(styles.button, {
|
|
122
|
+
stylex.mix<Variants<typeof buttonVariants>>(styles.button, {
|
|
123
|
+
color: danger ? 'danger' : 'default',
|
|
124
|
+
})
|
|
123
125
|
)}
|
|
124
126
|
>
|
|
125
127
|
<Text>Press me</Text>
|
|
@@ -139,8 +141,8 @@ stylex.mix<Variants<typeof buttonVariants>>(
|
|
|
139
141
|
styles.button,
|
|
140
142
|
{
|
|
141
143
|
media: stylex.windowWidth,
|
|
142
|
-
theme: themes.dark
|
|
143
|
-
}
|
|
144
|
+
theme: themes.dark,
|
|
145
|
+
},
|
|
144
146
|
],
|
|
145
147
|
{ color: danger ? 'danger' : 'default' }
|
|
146
148
|
);
|
|
@@ -284,11 +286,11 @@ const buttonVariants = createVariants({
|
|
|
284
286
|
backgroundColor: {
|
|
285
287
|
default: '#6200ee',
|
|
286
288
|
primary: '#6200ee',
|
|
287
|
-
danger:
|
|
289
|
+
danger: '#b00020',
|
|
288
290
|
},
|
|
289
291
|
borderColor: {
|
|
290
292
|
default: 'transparent',
|
|
291
|
-
danger:
|
|
293
|
+
danger: '#b00020',
|
|
292
294
|
},
|
|
293
295
|
},
|
|
294
296
|
size: {
|
|
@@ -317,7 +319,7 @@ import type { Variants } from '@mochi-inc-japan/react-native-stylex-sheet';
|
|
|
317
319
|
type ButtonVariants = Variants<typeof buttonVariants>;
|
|
318
320
|
// { color: 'primary' | 'danger' | 'default'; size: 'sm' | 'lg' | 'default' }
|
|
319
321
|
|
|
320
|
-
stylex.mix<Variants<ButtonVariants>>(styles.button, { color, size })
|
|
322
|
+
stylex.mix<Variants<ButtonVariants>>(styles.button, { color, size });
|
|
321
323
|
```
|
|
322
324
|
|
|
323
325
|
---
|
|
@@ -335,8 +337,8 @@ Activate a theme by passing its key to `RNStyleXProvider`:
|
|
|
335
337
|
Creates named theme keys. Returns `{ themes }` where each name maps to an opaque key string used as a style property key in `create()`.
|
|
336
338
|
|
|
337
339
|
```tsx
|
|
338
|
-
import * as stylex from '@mochi-inc-japan/react-native-stylex-sheet'
|
|
339
|
-
import { useStylex } from '@mochi-inc-japan/react-native-stylex-sheet'
|
|
340
|
+
import * as stylex from '@mochi-inc-japan/react-native-stylex-sheet';
|
|
341
|
+
import { useStylex } from '@mochi-inc-japan/react-native-stylex-sheet';
|
|
340
342
|
|
|
341
343
|
const { themes } = stylex.createThemes(['light', 'dark']);
|
|
342
344
|
|
|
@@ -345,27 +347,23 @@ const styles = stylex.create({
|
|
|
345
347
|
color: {
|
|
346
348
|
default: '#000',
|
|
347
349
|
[themes.light]: '#000',
|
|
348
|
-
[themes.dark]:
|
|
350
|
+
[themes.dark]: '#fff',
|
|
349
351
|
},
|
|
350
352
|
},
|
|
351
353
|
});
|
|
352
354
|
|
|
353
355
|
function App() {
|
|
354
|
-
const stylex = useStylex()
|
|
355
|
-
return (
|
|
356
|
-
<Text {...stylex.props(styles.text)}>
|
|
357
|
-
Hello World!
|
|
358
|
-
</Text>
|
|
359
|
-
)
|
|
356
|
+
const stylex = useStylex();
|
|
357
|
+
return <Text {...stylex.props(styles.text)}>Hello World!</Text>;
|
|
360
358
|
}
|
|
361
359
|
```
|
|
362
360
|
|
|
363
361
|
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:
|
|
364
362
|
|
|
365
363
|
```tsx
|
|
366
|
-
import { View, Text } from 'react-native'
|
|
367
|
-
import * as stylex from '@mochi-inc-japan/react-native-stylex-sheet'
|
|
368
|
-
import { useStylex } from '@mochi-inc-japan/react-native-stylex-sheet'
|
|
364
|
+
import { View, Text } from 'react-native';
|
|
365
|
+
import * as stylex from '@mochi-inc-japan/react-native-stylex-sheet';
|
|
366
|
+
import { useStylex } from '@mochi-inc-japan/react-native-stylex-sheet';
|
|
369
367
|
|
|
370
368
|
const { themes } = stylex.createThemes(['light', 'dark', 'other']);
|
|
371
369
|
|
|
@@ -373,55 +371,62 @@ const { themes } = stylex.createThemes(['light', 'dark', 'other']);
|
|
|
373
371
|
const defaultColors = stylex.defineVars({
|
|
374
372
|
primary: 'black',
|
|
375
373
|
danger: 'red',
|
|
376
|
-
})
|
|
374
|
+
});
|
|
377
375
|
|
|
378
376
|
const variables = stylex.createVariants({
|
|
379
377
|
text: {
|
|
380
|
-
color: defaultColors
|
|
381
|
-
}
|
|
378
|
+
color: defaultColors,
|
|
379
|
+
},
|
|
382
380
|
});
|
|
383
381
|
|
|
384
382
|
const styles = stylex.create({
|
|
385
383
|
view: {
|
|
386
384
|
width: '100%',
|
|
387
|
-
height: '100%'
|
|
385
|
+
height: '100%',
|
|
388
386
|
},
|
|
389
387
|
text: {
|
|
390
|
-
...variables.text
|
|
388
|
+
...variables.text,
|
|
391
389
|
},
|
|
392
390
|
});
|
|
393
391
|
|
|
394
392
|
// Variant style definitions for additional themes
|
|
395
393
|
const darkThemeStyleVariants = stylex.createVariants({
|
|
396
|
-
text: { color: { ...defaultColors,
|
|
397
|
-
})
|
|
394
|
+
text: { color: { ...defaultColors, primary: 'white' } },
|
|
395
|
+
});
|
|
398
396
|
|
|
399
397
|
const otherThemeStyleVariants = stylex.createVariants({
|
|
400
|
-
text: { color: { ...defaultColors,
|
|
401
|
-
})
|
|
398
|
+
text: { color: { ...defaultColors, primary: 'blue' } },
|
|
399
|
+
});
|
|
402
400
|
|
|
403
401
|
const viewTheme = stylex.create({
|
|
404
402
|
// Additional styles written directly into create
|
|
405
403
|
[themes.dark]: { backgroundColor: 'black' },
|
|
406
404
|
[themes.other]: { backgroundColor: 'gray' },
|
|
407
|
-
})
|
|
405
|
+
});
|
|
408
406
|
|
|
409
407
|
const textTheme = stylex.create({
|
|
410
|
-
[themes.dark]: {
|
|
408
|
+
[themes.dark]: {
|
|
409
|
+
borderColor: 'white',
|
|
410
|
+
borderWidth: 1,
|
|
411
|
+
...darkThemeStyleVariants.text,
|
|
412
|
+
},
|
|
411
413
|
[themes.other]: { ...otherThemeStyleVariants.text },
|
|
412
|
-
})
|
|
414
|
+
});
|
|
413
415
|
|
|
414
416
|
function App() {
|
|
415
|
-
const stylex = useStylex()
|
|
417
|
+
const stylex = useStylex();
|
|
416
418
|
return (
|
|
417
419
|
<View {...stylex.props(styles.view, viewTheme[stylex.theme])}>
|
|
418
420
|
<Text
|
|
419
|
-
{...stylex.props(
|
|
421
|
+
{...stylex.props(
|
|
422
|
+
styles.text,
|
|
423
|
+
stylex.mix(textTheme[stylex.theme], { text: 'primary' })
|
|
424
|
+
)}
|
|
420
425
|
>
|
|
421
426
|
Hello World!
|
|
422
427
|
</Text>
|
|
423
428
|
</View>
|
|
424
|
-
)
|
|
429
|
+
);
|
|
425
430
|
}
|
|
426
431
|
```
|
|
427
432
|
|
|
@@ -438,6 +443,7 @@ Provider component that supplies `theme` and `windowWidth` (the basis for media
|
|
|
438
443
|
```
|
|
439
444
|
|
|
440
445
|
Props:
|
|
446
|
+
|
|
441
447
|
- `theme` — a theme key string from `createThemes()`, or omit for no active theme
|
|
442
448
|
- `windowWidth` — override device width (defaults to `PixelRatio.getPixelSizeForLayoutSize(useWindowDimensions().width)`)
|
|
443
449
|
|
|
@@ -448,23 +454,23 @@ Props:
|
|
|
448
454
|
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.
|
|
449
455
|
|
|
450
456
|
```tsx
|
|
451
|
-
import * as stylex from '@mochi-inc-japan/react-native-stylex-sheet'
|
|
457
|
+
import * as stylex from '@mochi-inc-japan/react-native-stylex-sheet';
|
|
452
458
|
|
|
453
459
|
const { themes } = stylex.createThemes(['light', 'dark']);
|
|
454
460
|
const colors = stylex.defineVars({
|
|
455
461
|
default: '#6200ee',
|
|
456
462
|
primary: '#6200ee',
|
|
457
|
-
danger:
|
|
458
|
-
})
|
|
463
|
+
danger: '#b00020',
|
|
464
|
+
});
|
|
459
465
|
const cardVariants = stylex.createVariants({
|
|
460
466
|
// variant group name: 'bgcolor'
|
|
461
467
|
bgcolor: {
|
|
462
468
|
backgroundColor: colors,
|
|
463
|
-
}
|
|
464
|
-
})
|
|
469
|
+
},
|
|
470
|
+
});
|
|
465
471
|
const styles = stylex.create({
|
|
466
472
|
card: {
|
|
467
|
-
...cardVariants
|
|
473
|
+
...cardVariants,
|
|
468
474
|
},
|
|
469
475
|
title: {
|
|
470
476
|
color: {
|
|
@@ -477,14 +483,16 @@ const styles = stylex.create({
|
|
|
477
483
|
},
|
|
478
484
|
borderRadius: 8,
|
|
479
485
|
},
|
|
480
|
-
})
|
|
486
|
+
});
|
|
481
487
|
|
|
482
488
|
function Card({ bgcolor }: { bgcolor: keyof typeof colors }) {
|
|
483
489
|
const stylex = useStylex();
|
|
484
490
|
return (
|
|
485
|
-
<View
|
|
486
|
-
stylex.
|
|
487
|
-
|
|
491
|
+
<View
|
|
492
|
+
{...stylex.props(
|
|
493
|
+
stylex.mix<Variants<typeof cardVariants>>(styles.card, { bgcolor })
|
|
494
|
+
)}
|
|
495
|
+
>
|
|
488
496
|
{/* theme and media styles for styles.title are applied even without calling stylex.mix */}
|
|
489
497
|
<Text {...stylex.props(styles.title)}>Hello</Text>
|
|
490
498
|
</View>
|
|
@@ -493,9 +501,9 @@ function Card({ bgcolor }: { bgcolor: keyof typeof colors }) {
|
|
|
493
501
|
|
|
494
502
|
render(
|
|
495
503
|
<stylex.RNStylexProvider theme={themes.dark}>
|
|
496
|
-
<Card bgcolor=
|
|
504
|
+
<Card bgcolor="primary" />
|
|
497
505
|
</stylex.RNStylexProvider>
|
|
498
|
-
)
|
|
506
|
+
);
|
|
499
507
|
```
|
|
500
508
|
|
|
501
509
|
---
|
|
@@ -530,7 +538,7 @@ const style = stylex.mix(
|
|
|
530
538
|
{
|
|
531
539
|
media: media.md, // force a specific media match (or pass a numeric width)
|
|
532
540
|
theme: themes.dark, // force a specific theme key
|
|
533
|
-
}
|
|
541
|
+
},
|
|
534
542
|
],
|
|
535
543
|
{ color: 'danger' }
|
|
536
544
|
);
|
|
@@ -546,11 +554,37 @@ Collects style arrays into `{ style: [...] }` to spread on a React Native compon
|
|
|
546
554
|
// Combine multiple mix() results
|
|
547
555
|
function Component() {
|
|
548
556
|
const stylex = useStylex();
|
|
549
|
-
return
|
|
557
|
+
return (
|
|
558
|
+
<View
|
|
559
|
+
{...stylex.props(stylex.mix(styles.base), stylex.mix(styles.override))}
|
|
560
|
+
/>
|
|
561
|
+
);
|
|
550
562
|
}
|
|
551
563
|
|
|
552
564
|
// Module-level (non-reactive, default styles only) — import * as stylex
|
|
553
|
-
<View {...stylex.props(styles.container)}
|
|
565
|
+
<View {...stylex.props(styles.container)} />;
|
|
566
|
+
```
|
|
567
|
+
|
|
568
|
+
---
|
|
569
|
+
|
|
570
|
+
### `flatten(...args)`
|
|
571
|
+
|
|
572
|
+
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`.
|
|
573
|
+
|
|
574
|
+
```tsx
|
|
575
|
+
// Module-level (non-reactive, default styles only)
|
|
576
|
+
<TouchableOpacity style={stylex.flatten(styles.button)} />
|
|
577
|
+
|
|
578
|
+
// Inside component — theme + media from RNStyleXProvider applied automatically
|
|
579
|
+
const stylex = useStylex();
|
|
580
|
+
<TouchableOpacity
|
|
581
|
+
style={stylex.flatten(stylex.mix(styles.button, { color: 'danger' }))}
|
|
582
|
+
/>
|
|
583
|
+
|
|
584
|
+
// Merge multiple entries into one object
|
|
585
|
+
<ScrollView
|
|
586
|
+
contentContainerStyle={stylex.flatten(styles.container, styles.padding)}
|
|
587
|
+
/>
|
|
554
588
|
```
|
|
555
589
|
|
|
556
590
|
---
|
|
@@ -559,11 +593,11 @@ function Component() {
|
|
|
559
593
|
|
|
560
594
|
Media query strings are used directly as style property keys. The string must match one of the supported range formats:
|
|
561
595
|
|
|
562
|
-
| Format
|
|
563
|
-
|
|
564
|
-
| Lower bound | `(width >= 750px)` / `(width > 750px)`
|
|
596
|
+
| Format | Example |
|
|
597
|
+
| ----------- | ---------------------------------------- |
|
|
598
|
+
| Lower bound | `(width >= 750px)` / `(width > 750px)` |
|
|
565
599
|
| Upper bound | `(width <= 1080px)` / `(width < 1080px)` |
|
|
566
|
-
| Range
|
|
600
|
+
| Range | `(750px <= width < 1080px)` |
|
|
567
601
|
|
|
568
602
|
**Key ordering matters:** later matching keys overwrite earlier ones, so put more specific queries last.
|
|
569
603
|
|
|
@@ -588,12 +622,48 @@ const styles = create({
|
|
|
588
622
|
|
|
589
623
|
## Limitations
|
|
590
624
|
|
|
625
|
+
Sometimes, you encounter components, which deny array style value like TouchableOpacity or have special style key like "containerStyle" of ScrollView.
|
|
626
|
+
There are two solutions.
|
|
627
|
+
|
|
628
|
+
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.
|
|
629
|
+
|
|
630
|
+
```tsx
|
|
631
|
+
const styles = stylex.create({
|
|
632
|
+
scroll: {
|
|
633
|
+
width: 100
|
|
634
|
+
}
|
|
635
|
+
})
|
|
636
|
+
|
|
637
|
+
<ViewScroll contentContainerStyle={styles.scroll.default}>
|
|
638
|
+
```
|
|
639
|
+
|
|
640
|
+
2. Use `stylex.flatten()` with `stylex.mix()` when you want to merge all to overwrite default styles.
|
|
641
|
+
|
|
642
|
+
```tsx
|
|
643
|
+
const styles = stylex.create({
|
|
644
|
+
touch: {
|
|
645
|
+
width: 100
|
|
646
|
+
...styles.createVariants({
|
|
647
|
+
h: {
|
|
648
|
+
height: {
|
|
649
|
+
md: 100,
|
|
650
|
+
lg: 200
|
|
651
|
+
}
|
|
652
|
+
}
|
|
653
|
+
})
|
|
654
|
+
}
|
|
655
|
+
})
|
|
656
|
+
|
|
657
|
+
const stylex = useStylex()
|
|
658
|
+
<TouchableOpacity style={stylex.flatten(stylex.mix(styles.touch, {h: 'mg'}))} >
|
|
659
|
+
```
|
|
660
|
+
|
|
591
661
|
React Native has no CSS cascade, inheritance, keyframes, pseudo-elements, or global styles — these features are absent by design.
|
|
592
662
|
|
|
593
|
-
| Not supported
|
|
594
|
-
|
|
595
|
-
| CSS variables
|
|
596
|
-
| `shadows` token scale
|
|
597
|
-
| `transitions`
|
|
598
|
-
| Global styles
|
|
599
|
-
| Pseudo-classes / elements | Not applicable to React Native
|
|
663
|
+
| Not supported | Alternative |
|
|
664
|
+
| ------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
665
|
+
| CSS variables | Use `defineVars()` / `defineConsts()` for shared values |
|
|
666
|
+
| `shadows` token scale | iOS/Android have incompatible shadow APIs — define shadow styles directly |
|
|
667
|
+
| `transitions` | Use [Animated API](https://reactnative.dev/docs/animated) or [react-native-reanimated](https://github.com/software-mansion/react-native-reanimated) |
|
|
668
|
+
| Global styles | Not applicable to React Native |
|
|
669
|
+
| Pseudo-classes / elements | Not applicable to React Native |
|
package/lib/commonjs/index.js
CHANGED
|
@@ -39,6 +39,12 @@ Object.defineProperty(exports, "defineVars", {
|
|
|
39
39
|
return _tokens.defineVars;
|
|
40
40
|
}
|
|
41
41
|
});
|
|
42
|
+
Object.defineProperty(exports, "flatten", {
|
|
43
|
+
enumerable: true,
|
|
44
|
+
get: function () {
|
|
45
|
+
return _base.flatten;
|
|
46
|
+
}
|
|
47
|
+
});
|
|
42
48
|
Object.defineProperty(exports, "mix", {
|
|
43
49
|
enumerable: true,
|
|
44
50
|
get: function () {
|
|
@@ -1 +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":"
|
|
1
|
+
{"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":[]}
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.props = exports.mix = exports.create = void 0;
|
|
6
|
+
exports.props = exports.mix = exports.flatten = exports.create = void 0;
|
|
7
7
|
var _reactNative = require("react-native");
|
|
8
8
|
var _media = require("./media");
|
|
9
9
|
var _variant = require("./variant");
|
|
@@ -52,6 +52,10 @@ const mix = (target, variantArgs) => {
|
|
|
52
52
|
return results;
|
|
53
53
|
};
|
|
54
54
|
exports.mix = mix;
|
|
55
|
+
const flatten = function () {
|
|
56
|
+
return _reactNative.StyleSheet.flatten(props(...arguments).style);
|
|
57
|
+
};
|
|
58
|
+
exports.flatten = flatten;
|
|
55
59
|
const props = function () {
|
|
56
60
|
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
57
61
|
args[_key] = arguments[_key];
|
|
@@ -1 +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","
|
|
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","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":[]}
|
|
@@ -28,6 +28,13 @@ const RNStyleXProvider = componentProps => {
|
|
|
28
28
|
const sheets = args.map(v => Array.isArray(v) ? v : v && this.mix(v));
|
|
29
29
|
return (0, _base.props)(...sheets);
|
|
30
30
|
},
|
|
31
|
+
flatten() {
|
|
32
|
+
for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
|
|
33
|
+
args[_key2] = arguments[_key2];
|
|
34
|
+
}
|
|
35
|
+
const sheets = args.map(v => Array.isArray(v) ? v : v && this.mix(v));
|
|
36
|
+
return (0, _base.flatten)(...sheets);
|
|
37
|
+
},
|
|
31
38
|
mix(arg, variants) {
|
|
32
39
|
if (!arg) return [];
|
|
33
40
|
const config = {
|
|
@@ -1 +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;
|
|
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","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":[]}
|
|
@@ -1 +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":[]}
|
|
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} & { 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
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export { create, props, mix } from './utils/base';
|
|
1
|
+
export { create, props, mix, flatten } from './utils/base';
|
|
2
2
|
export { createVariants } from './utils/variant';
|
|
3
3
|
export { defineConsts, defineVars } from './utils/tokens';
|
|
4
4
|
export { useStylex, RNStyleXProvider } from './utils/hooks';
|
package/lib/module/index.js.map
CHANGED
|
@@ -1 +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;
|
|
1
|
+
{"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
CHANGED
|
@@ -44,6 +44,9 @@ export const mix = (target, variantArgs) => {
|
|
|
44
44
|
}
|
|
45
45
|
return results;
|
|
46
46
|
};
|
|
47
|
+
export const flatten = function () {
|
|
48
|
+
return StyleSheet.flatten(props(...arguments).style);
|
|
49
|
+
};
|
|
47
50
|
export const props = function () {
|
|
48
51
|
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
49
52
|
args[_key] = arguments[_key];
|
|
@@ -1 +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","
|
|
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","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":[]}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { Children, createContext, createElement, useContext, useMemo } from 'react';
|
|
2
2
|
import { PixelRatio, useWindowDimensions } from 'react-native';
|
|
3
|
-
import { mix, props } from './base';
|
|
3
|
+
import { flatten, mix, props } from './base';
|
|
4
4
|
import { detectMedia } from './media';
|
|
5
5
|
const RNStyleXContext = /*#__PURE__*/createContext(undefined);
|
|
6
6
|
export const RNStyleXProvider = componentProps => {
|
|
@@ -22,6 +22,13 @@ export const RNStyleXProvider = componentProps => {
|
|
|
22
22
|
const sheets = args.map(v => Array.isArray(v) ? v : v && this.mix(v));
|
|
23
23
|
return props(...sheets);
|
|
24
24
|
},
|
|
25
|
+
flatten() {
|
|
26
|
+
for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
|
|
27
|
+
args[_key2] = arguments[_key2];
|
|
28
|
+
}
|
|
29
|
+
const sheets = args.map(v => Array.isArray(v) ? v : v && this.mix(v));
|
|
30
|
+
return flatten(...sheets);
|
|
31
|
+
},
|
|
25
32
|
mix(arg, variants) {
|
|
26
33
|
if (!arg) return [];
|
|
27
34
|
const config = {
|
|
@@ -1 +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;
|
|
1
|
+
{"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":[]}
|
|
@@ -1 +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":[]}
|
|
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} & { 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":[]}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export { create, props, mix } from './utils/base';
|
|
1
|
+
export { create, props, mix, flatten } from './utils/base';
|
|
2
2
|
export { createVariants } from './utils/variant';
|
|
3
3
|
export { defineConsts, defineVars } from './utils/tokens';
|
|
4
4
|
export { useStylex, RNStyleXProvider } from './utils/hooks';
|
|
@@ -1,11 +1,12 @@
|
|
|
1
1
|
import { XRNStyleSheets, NamedStyles, RNStyle, VariantStyleSheet } from './types';
|
|
2
|
-
export declare const create: <T extends NamedStyles<any, R>, R extends RNStyle>(args: T) => XRNStyleSheets<T, R>;
|
|
2
|
+
export declare const create: <const T extends NamedStyles<any, R>, R extends RNStyle>(args: T) => XRNStyleSheets<T, R>;
|
|
3
3
|
export declare const mix: <Variants extends {
|
|
4
4
|
[key: string]: string | number | boolean | undefined;
|
|
5
5
|
}, Theme extends string = string, T extends VariantStyleSheet<string, RNStyle> = VariantStyleSheet<string, RNStyle>>(target?: T | [T, {
|
|
6
6
|
theme?: Theme;
|
|
7
7
|
media?: number | string;
|
|
8
8
|
}], variantArgs?: Variants) => RNStyle[];
|
|
9
|
+
export declare const flatten: <T extends RNStyle>(...args: (PropValue | RNStyle[] | false | null | undefined)[]) => T;
|
|
9
10
|
type PropValue = VariantStyleSheet<string, RNStyle> | RNStyle;
|
|
10
11
|
export declare const props: <T extends RNStyle>(...args: (PropValue | RNStyle[] | false | null | undefined)[]) => {
|
|
11
12
|
style: T[];
|
|
@@ -6,6 +6,8 @@ export type VariantStyle<S> = {
|
|
|
6
6
|
};
|
|
7
7
|
export type VariantStyleSheet<Key extends string, S extends RNStyle> = {
|
|
8
8
|
[key in Key]: S;
|
|
9
|
+
} & {
|
|
10
|
+
default: S;
|
|
9
11
|
};
|
|
10
12
|
export type XRNStyle<S extends RNStyle = RNStyle> = {
|
|
11
13
|
[key in keyof S]: VariantStyle<S[key]> | S[key];
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mochi-inc-japan/react-native-stylex-sheet",
|
|
3
3
|
"description": "The modern CSS-in-JS library for React Native",
|
|
4
|
-
"version": "1.0.
|
|
4
|
+
"version": "1.0.2",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"author": "Tkow",
|
|
7
7
|
"repository": "https://github.com/MOCHI-inc-JAPAN/react-native-stylex-sheet",
|