@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.
Files changed (49) hide show
  1. package/dist/common/common/consts.js +18 -0
  2. package/dist/common/components/native/Pressable.js +13 -2
  3. package/dist/common/components/native/TouchableHighlight.js +11 -1
  4. package/dist/common/components/native/TouchableOpacity.js +11 -1
  5. package/dist/common/core/native/store.js +19 -2
  6. package/dist/common/css/variants.js +1 -1
  7. package/dist/metro/index.cjs +2 -2
  8. package/dist/metro/index.d.ts +1 -0
  9. package/dist/metro/index.mjs +1 -1
  10. package/dist/metro/metro-transformer.cjs +44 -11
  11. package/dist/metro/metro-transformer.mjs +42 -9
  12. package/dist/module/common/consts.d.ts +11 -0
  13. package/dist/module/common/consts.js +12 -0
  14. package/dist/module/components/native/Pressable.d.ts +5 -0
  15. package/dist/module/components/native/Pressable.js +12 -2
  16. package/dist/module/components/native/TouchableHighlight.js +11 -1
  17. package/dist/module/components/native/TouchableOpacity.js +11 -1
  18. package/dist/module/core/native/parsers/gradient.d.ts +1 -1
  19. package/dist/module/core/native/store.d.ts +1 -0
  20. package/dist/module/core/native/store.js +19 -2
  21. package/dist/module/css/variants.js +1 -1
  22. package/dist/shared/uniwind.B5q8hBGv.cjs +18 -0
  23. package/dist/shared/{uniwind.B_j3NcHy.mjs → uniwind.BWb5KNML.mjs} +1 -1
  24. package/dist/shared/{uniwind.D7C2Zt-r.cjs → uniwind.DTMo4epG.cjs} +1 -1
  25. package/dist/shared/uniwind.JSWK3vHl.mjs +14 -0
  26. package/dist/vite/index.cjs +1 -1
  27. package/dist/vite/index.mjs +1 -1
  28. package/package.json +17 -12
  29. package/readme.md +1 -1
  30. package/src/common/consts.ts +12 -0
  31. package/src/components/native/Pressable.tsx +17 -1
  32. package/src/components/native/TouchableHighlight.tsx +10 -0
  33. package/src/components/native/TouchableOpacity.tsx +10 -0
  34. package/src/core/config/config.common.ts +1 -2
  35. package/src/core/native/parsers/gradient.ts +1 -1
  36. package/src/core/native/store.ts +24 -2
  37. package/src/css/variants.ts +1 -1
  38. package/src/metro/addMetaToStylesTemplate.ts +9 -3
  39. package/src/metro/compileVirtual.ts +2 -1
  40. package/src/metro/index.d.ts +1 -0
  41. package/src/metro/metro-transformer.ts +19 -2
  42. package/src/metro/processor/mq.ts +12 -2
  43. package/src/metro/processor/processor.ts +3 -2
  44. package/src/metro/processor/rn.ts +10 -0
  45. package/src/metro/types.ts +2 -7
  46. package/src/metro/withUniwindConfig.ts +2 -1
  47. package/uniwind.css +5 -2
  48. package/dist/shared/uniwind.BZIuaszw.cjs +0 -11
  49. 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 };
@@ -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.D7C2Zt-r.cjs');
6
+ const stringifyThemes = require('../shared/uniwind.DTMo4epG.cjs');
7
7
  require('fs');
8
8
  require('lightningcss');
9
9
 
@@ -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.B_j3NcHy.mjs';
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.4.1",
5
- "description": "The fastest Tailwind bindings for React Native with Reanimated 4 support",
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.17",
83
- "@tailwindcss/oxide": "4.1.17",
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
- "@react-native/babel-preset": "0.83.0",
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
- "metro": "0.83.3",
106
- "dpdm": "3.14.0",
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
- "prettier": "3.7.4",
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.1.0",
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.2.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
  [![npm downloads](https://img.shields.io/npm/dt/uniwind?style=for-the-badge)](https://www.npmjs.com/package/uniwind)
16
16
  [![License: MIT](https://img.shields.io/badge/License-MIT-44CD11.svg?style=for-the-badge)](https://opensource.org/licenses/MIT)
17
17
 
18
- > **Note:** This is a fork of uniwind that uses **react-native-reanimated** (v4.0.0+) to provide CSS-like animations and transitions using Tailwind classes. Updates are frequently released with original uniwind package with versions in-sync.
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] as unknown as Array<Array<string>> : undefined,
17
+ positions: position !== undefined ? [position] : undefined,
18
18
  } satisfies InferFromReadonlyArray<GradientValue['colorStops']>
19
19
  })
20
20
 
@@ -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 platformVars = scopedVars[`__uniwind-platform-${Platform.OS}`]
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[`__uniwind-theme-${theme}`]
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()
@@ -1,4 +1,4 @@
1
- const variants = ['ios', 'android', 'web', 'native']
1
+ const variants = ['ios', 'android', 'web', 'native', 'tv', 'android-tv', 'apple-tv']
2
2
 
3
3
  export const generateCSSForVariants = () => {
4
4
  let css = ''
@@ -1,6 +1,7 @@
1
+ import { Platform } from '../common/consts'
1
2
  import { StyleDependency } from '../types'
2
3
  import { ProcessorBuilder } from './processor'
3
- import { Platform, StyleSheetTemplate } from './types'
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 && platform !== Platform.Native && platform !== currentPlatform) {
57
- return null
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 { Platform, Polyfills } from './types'
10
+ import { Polyfills } from './types'
10
11
  import { serializeJSObject } from './utils'
11
12
 
12
13
  type CompileVirtualConfig = {
@@ -10,6 +10,7 @@ type UniwindConfig = {
10
10
  dtsFile?: string
11
11
  polyfills?: Polyfills
12
12
  debug?: boolean
13
+ isTV?: boolean
13
14
  }
14
15
 
15
16
  export declare function withUniwindConfig(config: MetroConfig, options: UniwindConfig): MetroConfig
@@ -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 { Platform, UniwindConfig } from './types'
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 = options.platform as 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, Platform } from '../types'
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 ([Platform.Android, Platform.iOS, Platform.Native].includes(mediaType as Platform)) {
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 = `__uniwind-platform-${mq.platform}`
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 = `__uniwind-theme-${this.declarationConfig.theme}`
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']
@@ -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 { Platform, UniwindConfig } from './types'
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 *, .premium, .premium *)) {
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 *, .premium, .premium *)) {
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;
@@ -1,9 +0,0 @@
1
- var Platform = /* @__PURE__ */ ((Platform2) => {
2
- Platform2["Android"] = "android";
3
- Platform2["iOS"] = "ios";
4
- Platform2["Web"] = "web";
5
- Platform2["Native"] = "native";
6
- return Platform2;
7
- })(Platform || {});
8
-
9
- export { Platform as P };