@niibase/uniwind 1.4.1 → 1.5.0
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/dist/common/common/consts.js +18 -0
- package/dist/common/components/native/Pressable.js +13 -2
- package/dist/common/components/native/TouchableHighlight.js +11 -1
- package/dist/common/components/native/TouchableOpacity.js +11 -1
- package/dist/common/core/native/store.js +19 -2
- package/dist/common/css/variants.js +1 -1
- package/dist/metro/index.cjs +2 -2
- package/dist/metro/index.d.ts +1 -0
- package/dist/metro/index.mjs +1 -1
- package/dist/metro/metro-transformer.cjs +44 -11
- package/dist/metro/metro-transformer.mjs +42 -9
- package/dist/module/common/consts.d.ts +11 -0
- package/dist/module/common/consts.js +12 -0
- package/dist/module/components/native/Pressable.d.ts +5 -0
- package/dist/module/components/native/Pressable.js +12 -2
- package/dist/module/components/native/TouchableHighlight.js +11 -1
- package/dist/module/components/native/TouchableOpacity.js +11 -1
- package/dist/module/core/native/parsers/gradient.d.ts +1 -1
- package/dist/module/core/native/store.d.ts +1 -0
- package/dist/module/core/native/store.js +19 -2
- package/dist/module/css/variants.js +1 -1
- package/dist/shared/uniwind.B5q8hBGv.cjs +18 -0
- package/dist/shared/{uniwind.B_j3NcHy.mjs → uniwind.BWb5KNML.mjs} +1 -1
- package/dist/shared/{uniwind.D7C2Zt-r.cjs → uniwind.DTMo4epG.cjs} +1 -1
- package/dist/shared/uniwind.JSWK3vHl.mjs +14 -0
- package/dist/vite/index.cjs +1 -1
- package/dist/vite/index.mjs +1 -1
- package/package.json +17 -12
- package/readme.md +1 -1
- package/src/common/consts.ts +12 -0
- package/src/components/native/Pressable.tsx +17 -1
- package/src/components/native/TouchableHighlight.tsx +10 -0
- package/src/components/native/TouchableOpacity.tsx +10 -0
- package/src/core/config/config.common.ts +1 -2
- package/src/core/native/parsers/gradient.ts +1 -1
- package/src/core/native/store.ts +24 -2
- package/src/css/variants.ts +1 -1
- package/src/metro/addMetaToStylesTemplate.ts +9 -3
- package/src/metro/compileVirtual.ts +2 -1
- package/src/metro/index.d.ts +1 -0
- package/src/metro/metro-transformer.ts +19 -2
- package/src/metro/processor/mq.ts +12 -2
- package/src/metro/processor/processor.ts +3 -2
- package/src/metro/processor/rn.ts +10 -0
- package/src/metro/types.ts +2 -7
- package/src/metro/withUniwindConfig.ts +2 -1
- package/uniwind.css +5 -2
- package/dist/shared/uniwind.BZIuaszw.cjs +0 -11
- package/dist/shared/uniwind.CyoRUwOj.mjs +0 -9
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var Platform = /* @__PURE__ */ ((Platform2) => {
|
|
4
|
+
Platform2["Android"] = "android";
|
|
5
|
+
Platform2["iOS"] = "ios";
|
|
6
|
+
Platform2["Web"] = "web";
|
|
7
|
+
Platform2["Native"] = "native";
|
|
8
|
+
Platform2["TV"] = "tv";
|
|
9
|
+
Platform2["AndroidTV"] = "android-tv";
|
|
10
|
+
Platform2["AppleTV"] = "apple-tv";
|
|
11
|
+
return Platform2;
|
|
12
|
+
})(Platform || {});
|
|
13
|
+
const UNIWIND_PLATFORM_VARIABLES = "__uniwind-platform-";
|
|
14
|
+
const UNIWIND_THEME_VARIABLES = "__uniwind-theme-";
|
|
15
|
+
|
|
16
|
+
exports.Platform = Platform;
|
|
17
|
+
exports.UNIWIND_PLATFORM_VARIABLES = UNIWIND_PLATFORM_VARIABLES;
|
|
18
|
+
exports.UNIWIND_THEME_VARIABLES = UNIWIND_THEME_VARIABLES;
|
|
@@ -424,7 +424,7 @@ const generateCSSForThemes = async (themes, input) => {
|
|
|
424
424
|
return uniwindCSS;
|
|
425
425
|
};
|
|
426
426
|
|
|
427
|
-
const variants = ["ios", "android", "web", "native"];
|
|
427
|
+
const variants = ["ios", "android", "web", "native", "tv", "android-tv", "apple-tv"];
|
|
428
428
|
const generateCSSForVariants = () => {
|
|
429
429
|
let css = "";
|
|
430
430
|
variants.forEach((variant) => {
|
|
@@ -431,7 +431,7 @@ const generateCSSForThemes = async (themes, input) => {
|
|
|
431
431
|
return uniwindCSS;
|
|
432
432
|
};
|
|
433
433
|
|
|
434
|
-
const variants = ["ios", "android", "web", "native"];
|
|
434
|
+
const variants = ["ios", "android", "web", "native", "tv", "android-tv", "apple-tv"];
|
|
435
435
|
const generateCSSForVariants = () => {
|
|
436
436
|
let css = "";
|
|
437
437
|
variants.forEach((variant) => {
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
var Platform = /* @__PURE__ */ ((Platform2) => {
|
|
2
|
+
Platform2["Android"] = "android";
|
|
3
|
+
Platform2["iOS"] = "ios";
|
|
4
|
+
Platform2["Web"] = "web";
|
|
5
|
+
Platform2["Native"] = "native";
|
|
6
|
+
Platform2["TV"] = "tv";
|
|
7
|
+
Platform2["AndroidTV"] = "android-tv";
|
|
8
|
+
Platform2["AppleTV"] = "apple-tv";
|
|
9
|
+
return Platform2;
|
|
10
|
+
})(Platform || {});
|
|
11
|
+
const UNIWIND_PLATFORM_VARIABLES = "__uniwind-platform-";
|
|
12
|
+
const UNIWIND_THEME_VARIABLES = "__uniwind-theme-";
|
|
13
|
+
|
|
14
|
+
export { Platform as P, UNIWIND_PLATFORM_VARIABLES as U, UNIWIND_THEME_VARIABLES as a };
|
package/dist/vite/index.cjs
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
const node = require('@tailwindcss/node');
|
|
4
4
|
const path = require('path');
|
|
5
5
|
const common = require('../shared/uniwind.nl8746mK.cjs');
|
|
6
|
-
const stringifyThemes = require('../shared/uniwind.
|
|
6
|
+
const stringifyThemes = require('../shared/uniwind.DTMo4epG.cjs');
|
|
7
7
|
require('fs');
|
|
8
8
|
require('lightningcss');
|
|
9
9
|
|
package/dist/vite/index.mjs
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { normalizePath } from '@tailwindcss/node';
|
|
2
2
|
import path from 'path';
|
|
3
3
|
import { u as uniq, n as name } from '../shared/uniwind.F-0-Rr--.mjs';
|
|
4
|
-
import { s as stringifyThemes, U as UniwindCSSVisitor, a as buildCSS, b as buildDtsFile } from '../shared/uniwind.
|
|
4
|
+
import { s as stringifyThemes, U as UniwindCSSVisitor, a as buildCSS, b as buildDtsFile } from '../shared/uniwind.BWb5KNML.mjs';
|
|
5
5
|
import 'fs';
|
|
6
6
|
import 'lightningcss';
|
|
7
7
|
|
package/package.json
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
{
|
|
2
2
|
"private": false,
|
|
3
3
|
"name": "@niibase/uniwind",
|
|
4
|
-
"version": "1.
|
|
5
|
-
"description": "
|
|
4
|
+
"version": "1.5.0",
|
|
5
|
+
"description": "A fork of Uniwind with Reanimated 4 support",
|
|
6
6
|
"homepage": "https://uniwind.dev",
|
|
7
7
|
"author": "Unistack",
|
|
8
8
|
"type": "module",
|
|
@@ -18,9 +18,10 @@
|
|
|
18
18
|
"prepublishOnly": "bun run build",
|
|
19
19
|
"circular:check": "dpdm --no-warning --no-tree -T --exit-code circular:1 'src/**/*.ts' 'src/**/*.tsx'",
|
|
20
20
|
"build:css": "bun run src/css/index.ts",
|
|
21
|
-
"postinstall": "node scripts/postinstall.mjs",
|
|
22
21
|
"test:native": "jest --config jest.config.native.js",
|
|
23
|
-
"test:web": "jest --config jest.config.web.js"
|
|
22
|
+
"test:web": "jest --config jest.config.web.js",
|
|
23
|
+
"test:e2e": "playwright test",
|
|
24
|
+
"release": "release-it"
|
|
24
25
|
},
|
|
25
26
|
"keywords": [
|
|
26
27
|
"unistyles",
|
|
@@ -79,8 +80,8 @@
|
|
|
79
80
|
"LICENSE"
|
|
80
81
|
],
|
|
81
82
|
"dependencies": {
|
|
82
|
-
"@tailwindcss/node": "4.1
|
|
83
|
-
"@tailwindcss/oxide": "4.1
|
|
83
|
+
"@tailwindcss/node": "4.2.1",
|
|
84
|
+
"@tailwindcss/oxide": "4.2.1",
|
|
84
85
|
"culori": "4.0.2",
|
|
85
86
|
"lightningcss": "1.30.1"
|
|
86
87
|
},
|
|
@@ -93,7 +94,8 @@
|
|
|
93
94
|
"tailwindcss": ">=4"
|
|
94
95
|
},
|
|
95
96
|
"devDependencies": {
|
|
96
|
-
"@
|
|
97
|
+
"@playwright/test": "1.58.2",
|
|
98
|
+
"@react-native/babel-preset": "0.84.1",
|
|
97
99
|
"@testing-library/jest-dom": "6.9.1",
|
|
98
100
|
"@testing-library/jest-native": "5.4.3",
|
|
99
101
|
"@testing-library/react": "16.3.2",
|
|
@@ -102,19 +104,22 @@
|
|
|
102
104
|
"@types/culori": "4.0.1",
|
|
103
105
|
"@types/jest": "30.0.0",
|
|
104
106
|
"@types/react": "catalog:",
|
|
105
|
-
"
|
|
106
|
-
"
|
|
107
|
+
"dpdm": "4.0.1",
|
|
108
|
+
"git-cliff": "2.12.0",
|
|
107
109
|
"jest": "30.2.0",
|
|
108
110
|
"jest-environment-jsdom": "30.2.0",
|
|
109
|
-
"
|
|
111
|
+
"metro": "0.84.2",
|
|
112
|
+
"prettier": "3.8.1",
|
|
110
113
|
"react-native-gesture-handler": "2.28.0",
|
|
111
114
|
"react-native-reanimated": "catalog:",
|
|
112
115
|
"react-native-safe-area-context": "5.6.0",
|
|
113
116
|
"react-native-web": "catalog:",
|
|
114
|
-
"react-test-renderer": "19.
|
|
117
|
+
"react-test-renderer": "19.2.4",
|
|
118
|
+
"release-it": "19.2.4",
|
|
115
119
|
"ts-jest": "29.4.6",
|
|
116
120
|
"typescript": "catalog:",
|
|
117
121
|
"unbuild": "3.6.1",
|
|
118
|
-
"vite": "7.
|
|
122
|
+
"vite": "7.3.1",
|
|
123
|
+
"esbuild": "0.27.3"
|
|
119
124
|
}
|
|
120
125
|
}
|
package/readme.md
CHANGED
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
[](https://www.npmjs.com/package/uniwind)
|
|
16
16
|
[](https://opensource.org/licenses/MIT)
|
|
17
17
|
|
|
18
|
-
> **Note:** This is a fork of uniwind that
|
|
18
|
+
> **Note:** This is a fork of **uniwind** that leverages **react-native-reanimated** (v4.0.0+) to enable CSS-like animations and transitions using Tailwind classes. This package is kept in sync with the original `uniwind` releases.
|
|
19
19
|
|
|
20
20
|
## Installation
|
|
21
21
|
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
export const enum Platform {
|
|
2
|
+
Android = 'android',
|
|
3
|
+
iOS = 'ios',
|
|
4
|
+
Web = 'web',
|
|
5
|
+
Native = 'native',
|
|
6
|
+
TV = 'tv',
|
|
7
|
+
AndroidTV = 'android-tv',
|
|
8
|
+
AppleTV = 'apple-tv',
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
export const UNIWIND_PLATFORM_VARIABLES = '__uniwind-platform-'
|
|
12
|
+
export const UNIWIND_THEME_VARIABLES = '__uniwind-theme-'
|
|
@@ -3,11 +3,19 @@ import { Pressable as RNPressable, PressableProps } from 'react-native'
|
|
|
3
3
|
import { copyComponentProperties } from '../utils'
|
|
4
4
|
import { useStyle } from './useStyle'
|
|
5
5
|
|
|
6
|
+
declare module 'react-native' {
|
|
7
|
+
interface PressableStateCallbackType {
|
|
8
|
+
focused?: boolean
|
|
9
|
+
}
|
|
10
|
+
}
|
|
11
|
+
|
|
6
12
|
export const Pressable = copyComponentProperties(RNPressable, (props: PressableProps) => {
|
|
7
13
|
const [isPressed, setIsPressed] = useState(false)
|
|
14
|
+
const [isFocused, setIsFocused] = useState(false)
|
|
8
15
|
const { Component, style } = useStyle(RNPressable, props.className, props, {
|
|
9
16
|
isDisabled: Boolean(props.disabled),
|
|
10
17
|
isPressed,
|
|
18
|
+
isFocused,
|
|
11
19
|
})
|
|
12
20
|
|
|
13
21
|
return (
|
|
@@ -15,7 +23,7 @@ export const Pressable = copyComponentProperties(RNPressable, (props: PressableP
|
|
|
15
23
|
{...props}
|
|
16
24
|
style={[
|
|
17
25
|
style,
|
|
18
|
-
typeof props.style === 'function' ? props.style({ pressed: isPressed }) : props.style,
|
|
26
|
+
typeof props.style === 'function' ? props.style({ pressed: isPressed, focused: isFocused }) : props.style,
|
|
19
27
|
]}
|
|
20
28
|
onPressIn={event => {
|
|
21
29
|
setIsPressed(true)
|
|
@@ -25,6 +33,14 @@ export const Pressable = copyComponentProperties(RNPressable, (props: PressableP
|
|
|
25
33
|
setIsPressed(false)
|
|
26
34
|
props.onPressOut?.(event)
|
|
27
35
|
}}
|
|
36
|
+
onFocus={event => {
|
|
37
|
+
setIsFocused(true)
|
|
38
|
+
props.onFocus?.(event)
|
|
39
|
+
}}
|
|
40
|
+
onBlur={event => {
|
|
41
|
+
setIsFocused(false)
|
|
42
|
+
props.onBlur?.(event)
|
|
43
|
+
}}
|
|
28
44
|
/>
|
|
29
45
|
)
|
|
30
46
|
})
|
|
@@ -6,9 +6,11 @@ import { useStyle } from './useStyle'
|
|
|
6
6
|
|
|
7
7
|
export const TouchableHighlight = copyComponentProperties(RNTouchableHighlight, (props: TouchableHighlightProps) => {
|
|
8
8
|
const [isPressed, setIsPressed] = useState(false)
|
|
9
|
+
const [isFocused, setIsFocused] = useState(false)
|
|
9
10
|
const state = {
|
|
10
11
|
isDisabled: Boolean(props.disabled),
|
|
11
12
|
isPressed,
|
|
13
|
+
isFocused,
|
|
12
14
|
} satisfies ComponentState
|
|
13
15
|
const { Component, style } = useStyle(RNTouchableHighlight, props.className, props, state)
|
|
14
16
|
const underlayColor = useStyle(props.underlayColorClassName, props, state).accentColor
|
|
@@ -26,6 +28,14 @@ export const TouchableHighlight = copyComponentProperties(RNTouchableHighlight,
|
|
|
26
28
|
setIsPressed(false)
|
|
27
29
|
props.onPressOut?.(event)
|
|
28
30
|
}}
|
|
31
|
+
onFocus={event => {
|
|
32
|
+
setIsFocused(true)
|
|
33
|
+
props.onFocus?.(event)
|
|
34
|
+
}}
|
|
35
|
+
onBlur={event => {
|
|
36
|
+
setIsFocused(false)
|
|
37
|
+
props.onBlur?.(event)
|
|
38
|
+
}}
|
|
29
39
|
/>
|
|
30
40
|
)
|
|
31
41
|
})
|
|
@@ -6,9 +6,11 @@ import { useStyle } from './useStyle'
|
|
|
6
6
|
|
|
7
7
|
export const TouchableOpacity = copyComponentProperties(RNTouchableOpacity, (props: TouchableOpacityProps) => {
|
|
8
8
|
const [isPressed, setIsPressed] = useState(false)
|
|
9
|
+
const [isFocused, setIsFocused] = useState(false)
|
|
9
10
|
const state = {
|
|
10
11
|
isDisabled: Boolean(props.disabled),
|
|
11
12
|
isPressed,
|
|
13
|
+
isFocused,
|
|
12
14
|
} satisfies ComponentState
|
|
13
15
|
const { Component, style } = useStyle(RNTouchableOpacity, props.className, props, state)
|
|
14
16
|
|
|
@@ -24,6 +26,14 @@ export const TouchableOpacity = copyComponentProperties(RNTouchableOpacity, (pro
|
|
|
24
26
|
setIsPressed(false)
|
|
25
27
|
props.onPressOut?.(event)
|
|
26
28
|
}}
|
|
29
|
+
onFocus={event => {
|
|
30
|
+
setIsFocused(true)
|
|
31
|
+
props.onFocus?.(event)
|
|
32
|
+
}}
|
|
33
|
+
onBlur={event => {
|
|
34
|
+
setIsFocused(false)
|
|
35
|
+
props.onBlur?.(event)
|
|
36
|
+
}}
|
|
27
37
|
/>
|
|
28
38
|
)
|
|
29
39
|
})
|
|
@@ -19,9 +19,9 @@ export class UniwindConfigBuilder {
|
|
|
19
19
|
|
|
20
20
|
constructor() {
|
|
21
21
|
Appearance.addChangeListener(event => {
|
|
22
|
-
// @ts-expect-error RN >0.82 - breaking change
|
|
23
22
|
const colorScheme = event.colorScheme === 'unspecified'
|
|
24
23
|
? ColorScheme.Light
|
|
24
|
+
// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
|
|
25
25
|
: event.colorScheme ?? ColorScheme.Light
|
|
26
26
|
const prevTheme = this.#currentTheme
|
|
27
27
|
|
|
@@ -44,7 +44,6 @@ export class UniwindConfigBuilder {
|
|
|
44
44
|
private get colorScheme() {
|
|
45
45
|
const colorScheme = Appearance.getColorScheme()
|
|
46
46
|
|
|
47
|
-
// @ts-expect-error RN >0.82 - breaking change
|
|
48
47
|
if (colorScheme === 'unspecified') {
|
|
49
48
|
return ColorScheme.Light
|
|
50
49
|
}
|
|
@@ -14,7 +14,7 @@ export const resolveGradient = (value: string) => {
|
|
|
14
14
|
|
|
15
15
|
return {
|
|
16
16
|
color: color!,
|
|
17
|
-
positions: position !== undefined ? [position]
|
|
17
|
+
positions: position !== undefined ? [position] : undefined,
|
|
18
18
|
} satisfies InferFromReadonlyArray<GradientValue['colorStops']>
|
|
19
19
|
})
|
|
20
20
|
|
package/src/core/native/store.ts
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
/* eslint-disable max-depth */
|
|
2
2
|
import { Dimensions, Platform } from 'react-native'
|
|
3
3
|
import { CSSAnimationKeyframes } from 'react-native-reanimated'
|
|
4
|
+
import { Platform as UniwindPlatform, UNIWIND_PLATFORM_VARIABLES, UNIWIND_THEME_VARIABLES } from '../../common/consts'
|
|
4
5
|
import { Orientation, StyleDependency } from '../../types'
|
|
5
6
|
import { UniwindListener } from '../listener'
|
|
6
7
|
import { ComponentState, GenerateStyleSheetsCallback, RNStyle, Style, StyleSheets, ThemeName, UniwindContextType } from '../types'
|
|
@@ -67,7 +68,14 @@ class UniwindStoreBuilder {
|
|
|
67
68
|
reinit = (generateStyleSheetCallback: GenerateStyleSheetsCallback, themes: Array<string>) => {
|
|
68
69
|
const { scopedVars, stylesheet, vars, keyframes } = generateStyleSheetCallback(this.runtime)
|
|
69
70
|
|
|
70
|
-
const
|
|
71
|
+
const platform = this.getCurrentPlatform()
|
|
72
|
+
const commonPlatform = platform.includes('tv') ? UniwindPlatform.TV : UniwindPlatform.Native
|
|
73
|
+
const commonPlatformVars = scopedVars[`${UNIWIND_PLATFORM_VARIABLES}${commonPlatform}`]
|
|
74
|
+
const platformVars = scopedVars[`${UNIWIND_PLATFORM_VARIABLES}${platform}`]
|
|
75
|
+
|
|
76
|
+
if (commonPlatformVars) {
|
|
77
|
+
Object.defineProperties(vars, Object.getOwnPropertyDescriptors(commonPlatformVars))
|
|
78
|
+
}
|
|
71
79
|
|
|
72
80
|
if (platformVars) {
|
|
73
81
|
Object.defineProperties(vars, Object.getOwnPropertyDescriptors(platformVars))
|
|
@@ -77,7 +85,7 @@ class UniwindStoreBuilder {
|
|
|
77
85
|
this.stylesheet = stylesheet
|
|
78
86
|
this.vars = Object.fromEntries(themes.map(theme => {
|
|
79
87
|
const clonedVars = cloneWithAccessors(vars)
|
|
80
|
-
const themeVars = scopedVars[
|
|
88
|
+
const themeVars = scopedVars[`${UNIWIND_THEME_VARIABLES}${theme}`]
|
|
81
89
|
|
|
82
90
|
if (themeVars) {
|
|
83
91
|
Object.defineProperties(clonedVars, Object.getOwnPropertyDescriptors(themeVars))
|
|
@@ -298,6 +306,20 @@ class UniwindStoreBuilder {
|
|
|
298
306
|
|
|
299
307
|
return true
|
|
300
308
|
}
|
|
309
|
+
|
|
310
|
+
private getCurrentPlatform() {
|
|
311
|
+
const platform = Platform.OS
|
|
312
|
+
|
|
313
|
+
if (platform === 'android') {
|
|
314
|
+
return Platform.isTV ? UniwindPlatform.AndroidTV : UniwindPlatform.Android
|
|
315
|
+
}
|
|
316
|
+
|
|
317
|
+
if (platform === 'ios') {
|
|
318
|
+
return Platform.isTV ? UniwindPlatform.AppleTV : UniwindPlatform.iOS
|
|
319
|
+
}
|
|
320
|
+
|
|
321
|
+
return platform
|
|
322
|
+
}
|
|
301
323
|
}
|
|
302
324
|
|
|
303
325
|
export const UniwindStore = new UniwindStoreBuilder()
|
package/src/css/variants.ts
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
|
+
import { Platform } from '../common/consts'
|
|
1
2
|
import { StyleDependency } from '../types'
|
|
2
3
|
import { ProcessorBuilder } from './processor'
|
|
3
|
-
import {
|
|
4
|
+
import { StyleSheetTemplate } from './types'
|
|
4
5
|
import { isDefined, serialize, toCamelCase } from './utils'
|
|
5
6
|
|
|
6
7
|
const extractVarsFromString = (value: string) => {
|
|
@@ -53,8 +54,13 @@ export const addMetaToStylesTemplate = (Processor: ProcessorBuilder, currentPlat
|
|
|
53
54
|
.flatMap(([property, value]) => Processor.RN.cssToRN(property, value))
|
|
54
55
|
.map(([property, value]) => [`"${property}"`, `function() { return ${serialize(value)} }`])
|
|
55
56
|
|
|
56
|
-
if (platform
|
|
57
|
-
|
|
57
|
+
if (platform) {
|
|
58
|
+
const isTV = currentPlatform === Platform.AndroidTV || currentPlatform === Platform.AppleTV
|
|
59
|
+
const commonPlatform = isTV ? Platform.TV : Platform.Native
|
|
60
|
+
|
|
61
|
+
if (platform !== commonPlatform && platform !== currentPlatform) {
|
|
62
|
+
return null
|
|
63
|
+
}
|
|
58
64
|
}
|
|
59
65
|
|
|
60
66
|
if (entries.length === 0) {
|
|
@@ -2,11 +2,12 @@ import { compile } from '@tailwindcss/node'
|
|
|
2
2
|
import { Scanner } from '@tailwindcss/oxide'
|
|
3
3
|
import { transform } from 'lightningcss'
|
|
4
4
|
import path from 'path'
|
|
5
|
+
import { Platform } from '../common/consts'
|
|
5
6
|
import { UniwindCSSVisitor } from '../css-visitor'
|
|
6
7
|
import { addMetaToStylesTemplate } from './addMetaToStylesTemplate'
|
|
7
8
|
import { Logger } from './logger'
|
|
8
9
|
import { ProcessorBuilder } from './processor'
|
|
9
|
-
import {
|
|
10
|
+
import { Polyfills } from './types'
|
|
10
11
|
import { serializeJSObject } from './utils'
|
|
11
12
|
|
|
12
13
|
type CompileVirtualConfig = {
|
package/src/metro/index.d.ts
CHANGED
|
@@ -2,9 +2,10 @@ import fs from 'fs'
|
|
|
2
2
|
import type { JsTransformerConfig, JsTransformOptions } from 'metro-transform-worker'
|
|
3
3
|
import path from 'path'
|
|
4
4
|
import { name } from '../../package.json'
|
|
5
|
+
import { Platform } from '../common/consts'
|
|
5
6
|
import { compileVirtual } from './compileVirtual'
|
|
6
7
|
import { injectThemes } from './injectThemes'
|
|
7
|
-
import {
|
|
8
|
+
import { UniwindConfig } from './types'
|
|
8
9
|
|
|
9
10
|
let worker: typeof import('metro-transform-worker')
|
|
10
11
|
|
|
@@ -52,6 +53,22 @@ export const transform = async (
|
|
|
52
53
|
return worker.transform(config, projectRoot, filePath, data, options)
|
|
53
54
|
}
|
|
54
55
|
|
|
56
|
+
const getPlatform = () => {
|
|
57
|
+
if (!config.uniwind.isTV) {
|
|
58
|
+
return options.platform as Platform
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
if (options.platform === Platform.Android) {
|
|
62
|
+
return Platform.AndroidTV
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
if (options.platform === Platform.iOS) {
|
|
66
|
+
return Platform.AppleTV
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
throw new Error(`Platform ${options.platform} not supported`)
|
|
70
|
+
}
|
|
71
|
+
|
|
55
72
|
const cssPath = path.join(process.cwd(), config.uniwind.cssEntryFile)
|
|
56
73
|
const injectedThemesCode = await injectThemes({
|
|
57
74
|
input: cssPath,
|
|
@@ -59,7 +76,7 @@ export const transform = async (
|
|
|
59
76
|
dtsPath: config.uniwind.dtsFile,
|
|
60
77
|
})
|
|
61
78
|
const css = fs.readFileSync(filePath, 'utf-8')
|
|
62
|
-
const platform =
|
|
79
|
+
const platform = getPlatform()
|
|
63
80
|
const virtualCode = await compileVirtual({
|
|
64
81
|
css,
|
|
65
82
|
platform,
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { MediaCondition, MediaQuery, QueryFeatureFor_MediaFeatureId } from 'lightningcss'
|
|
2
|
+
import { Platform } from '../../common/consts'
|
|
2
3
|
import { ColorScheme, Orientation } from '../../types'
|
|
3
|
-
import { MediaQueryResolver
|
|
4
|
+
import { MediaQueryResolver } from '../types'
|
|
4
5
|
import type { ProcessorBuilder } from './processor'
|
|
5
6
|
|
|
6
7
|
export class MQ {
|
|
@@ -12,7 +13,16 @@ export class MQ {
|
|
|
12
13
|
for (const mediaQuery of mediaQueries) {
|
|
13
14
|
const { condition, mediaType } = mediaQuery
|
|
14
15
|
|
|
15
|
-
if (
|
|
16
|
+
if (
|
|
17
|
+
[
|
|
18
|
+
Platform.Android,
|
|
19
|
+
Platform.iOS,
|
|
20
|
+
Platform.Native,
|
|
21
|
+
Platform.AndroidTV,
|
|
22
|
+
Platform.AppleTV,
|
|
23
|
+
Platform.TV,
|
|
24
|
+
].includes(mediaType as Platform)
|
|
25
|
+
) {
|
|
16
26
|
mq.platform = mediaType as Platform
|
|
17
27
|
continue
|
|
18
28
|
}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { Declaration, MediaQuery, Rule, transform } from 'lightningcss'
|
|
2
2
|
import { CSSAnimationKeyframes } from 'react-native-reanimated'
|
|
3
|
+
import { UNIWIND_PLATFORM_VARIABLES, UNIWIND_THEME_VARIABLES } from '../../common/consts'
|
|
3
4
|
import { parseTransformsMutation } from '../../core/native/parsers/transforms'
|
|
4
5
|
import { AnimationFrame, MediaQueryResolver, Polyfills, ProcessMetaValues } from '../types'
|
|
5
6
|
import { Color } from './color'
|
|
@@ -99,7 +100,7 @@ export class ProcessorBuilder {
|
|
|
99
100
|
}
|
|
100
101
|
|
|
101
102
|
if (mq.platform !== null) {
|
|
102
|
-
const platformKey =
|
|
103
|
+
const platformKey = `${UNIWIND_PLATFORM_VARIABLES}${mq.platform}`
|
|
103
104
|
this.scopedVars[platformKey] ??= {}
|
|
104
105
|
|
|
105
106
|
return this.scopedVars[platformKey]
|
|
@@ -115,7 +116,7 @@ export class ProcessorBuilder {
|
|
|
115
116
|
return this.vars
|
|
116
117
|
}
|
|
117
118
|
|
|
118
|
-
const themeKey =
|
|
119
|
+
const themeKey = `${UNIWIND_THEME_VARIABLES}${this.declarationConfig.theme}`
|
|
119
120
|
this.scopedVars[themeKey] ??= {}
|
|
120
121
|
|
|
121
122
|
return this.scopedVars[themeKey]
|
|
@@ -216,6 +216,16 @@ const cssToRNMap: Record<string, (value: any) => Record<string, any>> = {
|
|
|
216
216
|
fontVariantNumeric: value => ({
|
|
217
217
|
fontVariant: value,
|
|
218
218
|
}),
|
|
219
|
+
display: value => {
|
|
220
|
+
if (value === '"box"') {
|
|
221
|
+
return {
|
|
222
|
+
display: '"flex"',
|
|
223
|
+
}
|
|
224
|
+
}
|
|
225
|
+
return {
|
|
226
|
+
display: value,
|
|
227
|
+
}
|
|
228
|
+
},
|
|
219
229
|
}
|
|
220
230
|
|
|
221
231
|
const BORDER_WIDTH_KEYS = ['borderTopWidth', 'borderRightWidth', 'borderBottomWidth', 'borderLeftWidth']
|
package/src/metro/types.ts
CHANGED
|
@@ -11,6 +11,7 @@ import type {
|
|
|
11
11
|
TokenOrValue,
|
|
12
12
|
UnresolvedColor,
|
|
13
13
|
} from 'lightningcss'
|
|
14
|
+
import { Platform } from '../common/consts'
|
|
14
15
|
import { ColorScheme, Orientation } from '../types'
|
|
15
16
|
|
|
16
17
|
export type Polyfills = {
|
|
@@ -25,6 +26,7 @@ export type UniwindConfig = {
|
|
|
25
26
|
dtsFile?: string
|
|
26
27
|
polyfills?: Polyfills
|
|
27
28
|
debug?: boolean
|
|
29
|
+
isTV?: boolean
|
|
28
30
|
}
|
|
29
31
|
|
|
30
32
|
export type MediaQueryResolver = {
|
|
@@ -43,13 +45,6 @@ export type MediaQueryResolver = {
|
|
|
43
45
|
dataAttributes: Record<string, string> | null
|
|
44
46
|
}
|
|
45
47
|
|
|
46
|
-
export const enum Platform {
|
|
47
|
-
Android = 'android',
|
|
48
|
-
iOS = 'ios',
|
|
49
|
-
Web = 'web',
|
|
50
|
-
Native = 'native',
|
|
51
|
-
}
|
|
52
|
-
|
|
53
48
|
type TakeArray<T> = T extends Array<any> ? T : never
|
|
54
49
|
|
|
55
50
|
export type DeclarationValues =
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import type { MetroConfig } from 'metro-config'
|
|
2
|
+
import { Platform } from '../common/consts'
|
|
2
3
|
import { cacheStore, patchMetroGraphToSupportUncachedModules } from './metro-css-patches'
|
|
3
4
|
import { nativeResolver, webResolver } from './resolvers'
|
|
4
|
-
import {
|
|
5
|
+
import { UniwindConfig } from './types'
|
|
5
6
|
import { uniq } from './utils'
|
|
6
7
|
|
|
7
8
|
export const withUniwindConfig = <T extends MetroConfig>(
|
package/uniwind.css
CHANGED
|
@@ -2,6 +2,9 @@
|
|
|
2
2
|
@custom-variant android (@media android);
|
|
3
3
|
@custom-variant web (html &);
|
|
4
4
|
@custom-variant native (@media native);
|
|
5
|
+
@custom-variant tv (@media tv);
|
|
6
|
+
@custom-variant android-tv (@media android-tv);
|
|
7
|
+
@custom-variant apple-tv (@media apple-tv);
|
|
5
8
|
|
|
6
9
|
@utility h-screen-safe {
|
|
7
10
|
height: calc(100vh - (env(safe-area-inset-top) + env(safe-area-inset-bottom)));
|
|
@@ -396,7 +399,7 @@
|
|
|
396
399
|
}
|
|
397
400
|
|
|
398
401
|
@media (prefers-color-scheme: light) {
|
|
399
|
-
&:not(:where(.light, .light *, .dark, .dark
|
|
402
|
+
&:not(:where(.light, .light *, .dark, .dark *)) {
|
|
400
403
|
@slot;
|
|
401
404
|
}
|
|
402
405
|
}
|
|
@@ -408,7 +411,7 @@
|
|
|
408
411
|
}
|
|
409
412
|
|
|
410
413
|
@media (prefers-color-scheme: dark) {
|
|
411
|
-
&:not(:where(.light, .light *, .dark, .dark
|
|
414
|
+
&:not(:where(.light, .light *, .dark, .dark *)) {
|
|
412
415
|
@slot;
|
|
413
416
|
}
|
|
414
417
|
}
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var Platform = /* @__PURE__ */ ((Platform2) => {
|
|
4
|
-
Platform2["Android"] = "android";
|
|
5
|
-
Platform2["iOS"] = "ios";
|
|
6
|
-
Platform2["Web"] = "web";
|
|
7
|
-
Platform2["Native"] = "native";
|
|
8
|
-
return Platform2;
|
|
9
|
-
})(Platform || {});
|
|
10
|
-
|
|
11
|
-
exports.Platform = Platform;
|