@mochi-inc-japan/react-native-stylex-sheet 1.0.0 → 1.0.1
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/package.json +11 -5
- package/lib/commonjs/tests/index.test.js +0 -224
- package/lib/commonjs/tests/index.test.js.map +0 -1
- package/lib/commonjs/tests/media.test.js +0 -226
- package/lib/commonjs/tests/media.test.js.map +0 -1
- package/lib/commonjs/tests/mock.test.js +0 -54
- package/lib/commonjs/tests/mock.test.js.map +0 -1
- package/lib/commonjs/tests/test-utils.js +0 -60
- package/lib/commonjs/tests/test-utils.js.map +0 -1
- package/lib/module/tests/index.test.js +0 -220
- package/lib/module/tests/index.test.js.map +0 -1
- package/lib/module/tests/media.test.js +0 -222
- package/lib/module/tests/media.test.js.map +0 -1
- package/lib/module/tests/mock.test.js +0 -49
- package/lib/module/tests/mock.test.js.map +0 -1
- package/lib/module/tests/test-utils.js +0 -52
- package/lib/module/tests/test-utils.js.map +0 -1
- package/lib/types/tests/check-descriptor.test.d.ts +0 -0
- package/lib/types/tests/index.test.d.ts +0 -1
- package/lib/types/tests/media.test.d.ts +0 -1
- package/lib/types/tests/mock.test.d.ts +0 -1
- package/lib/types/tests/test-utils.d.ts +0 -7
- package/lib/types/tests/utils.d.ts +0 -6
- package/lib/types/utils/index.d.ts +0 -9
- package/lib/types/utils/utils.d.ts +0 -4
- /package/lib/{types → typescript}/index.d.ts +0 -0
- /package/lib/{types → typescript}/utils/base.d.ts +0 -0
- /package/lib/{types → typescript}/utils/hooks.d.ts +0 -0
- /package/lib/{types → typescript}/utils/media.d.ts +0 -0
- /package/lib/{types → typescript}/utils/theme.d.ts +0 -0
- /package/lib/{types → typescript}/utils/tokens.d.ts +0 -0
- /package/lib/{types → typescript}/utils/types.d.ts +0 -0
- /package/lib/{types → typescript}/utils/variant.d.ts +0 -0
|
@@ -1,60 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.finalStyle = finalStyle;
|
|
7
|
-
exports.mockDimensions = mockDimensions;
|
|
8
|
-
exports.reduceStyles = reduceStyles;
|
|
9
|
-
var _reactNative = require("@testing-library/react-native");
|
|
10
|
-
const aspectRatio = 19.5 / 9; // iPhone 14
|
|
11
|
-
|
|
12
|
-
function mockDimensions(_ref) {
|
|
13
|
-
let {
|
|
14
|
-
width = 750,
|
|
15
|
-
height = width * aspectRatio,
|
|
16
|
-
pixelRatio = 1
|
|
17
|
-
} = _ref;
|
|
18
|
-
jest.resetModules();
|
|
19
|
-
jest.doMock('react-native/Libraries/Utilities/useWindowDimensions', () => ({
|
|
20
|
-
__esModule: true,
|
|
21
|
-
default: jest.fn().mockReturnValue({
|
|
22
|
-
width,
|
|
23
|
-
height
|
|
24
|
-
})
|
|
25
|
-
}));
|
|
26
|
-
// The react-native index.js exports PixelRatio via a lazy getter:
|
|
27
|
-
// get PixelRatio() { return require('./Libraries/Utilities/PixelRatio').default }
|
|
28
|
-
// so the mock must be wrapped under `default`.
|
|
29
|
-
jest.doMock('react-native/Libraries/Utilities/PixelRatio', () => ({
|
|
30
|
-
__esModule: true,
|
|
31
|
-
default: {
|
|
32
|
-
get: () => pixelRatio,
|
|
33
|
-
getFontScale: () => 1,
|
|
34
|
-
getPixelSizeForLayoutSize: layoutSize => layoutSize * pixelRatio,
|
|
35
|
-
roundToNearestPixel: layoutSize => Math.round(layoutSize * pixelRatio) / pixelRatio
|
|
36
|
-
}
|
|
37
|
-
}));
|
|
38
|
-
jest.doMock('react-native/Libraries/Utilities/Dimensions', () => ({
|
|
39
|
-
__esModule: true,
|
|
40
|
-
default: {
|
|
41
|
-
get: jest.fn().mockReturnValue({
|
|
42
|
-
width,
|
|
43
|
-
height
|
|
44
|
-
}),
|
|
45
|
-
addEventListener: jest.fn(),
|
|
46
|
-
removeEventListener: jest.fn()
|
|
47
|
-
}
|
|
48
|
-
}));
|
|
49
|
-
}
|
|
50
|
-
function reduceStyles(s) {
|
|
51
|
-
return s.reduce((s1, s2) => ({
|
|
52
|
-
...s1,
|
|
53
|
-
...s2
|
|
54
|
-
}), {});
|
|
55
|
-
}
|
|
56
|
-
function finalStyle(Component) {
|
|
57
|
-
var _render$toJSON;
|
|
58
|
-
return reduceStyles((_render$toJSON = (0, _reactNative.render)(Component).toJSON()) === null || _render$toJSON === void 0 ? void 0 : _render$toJSON.props.style);
|
|
59
|
-
}
|
|
60
|
-
//# sourceMappingURL=test-utils.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["_reactNative","require","aspectRatio","mockDimensions","_ref","width","height","pixelRatio","jest","resetModules","doMock","__esModule","default","fn","mockReturnValue","get","getFontScale","getPixelSizeForLayoutSize","layoutSize","roundToNearestPixel","Math","round","addEventListener","removeEventListener","reduceStyles","s","reduce","s1","s2","finalStyle","Component","_render$toJSON","render","toJSON","props","style"],"sources":["test-utils.tsx"],"sourcesContent":["import { render } from '@testing-library/react-native';\n\nconst aspectRatio = 19.5 / 9; // iPhone 14\n\nexport function mockDimensions({\n width = 750,\n height = width * aspectRatio,\n pixelRatio = 1,\n}: {\n width?: number;\n height?: number;\n pixelRatio?: number;\n}) {\n jest.resetModules();\n jest.doMock('react-native/Libraries/Utilities/useWindowDimensions', () => ({\n __esModule: true,\n default: jest.fn().mockReturnValue({ width, height }),\n }));\n // The react-native index.js exports PixelRatio via a lazy getter:\n // get PixelRatio() { return require('./Libraries/Utilities/PixelRatio').default }\n // so the mock must be wrapped under `default`.\n jest.doMock('react-native/Libraries/Utilities/PixelRatio', () => ({\n __esModule: true,\n default: {\n get: () => pixelRatio,\n getFontScale: () => 1,\n getPixelSizeForLayoutSize: (layoutSize: number) =>\n layoutSize * pixelRatio,\n roundToNearestPixel: (layoutSize: number) =>\n Math.round(layoutSize * pixelRatio) / pixelRatio,\n },\n }));\n jest.doMock('react-native/Libraries/Utilities/Dimensions', () => ({\n __esModule: true,\n default: {\n get: jest.fn().mockReturnValue({ width, height }),\n addEventListener: jest.fn(),\n removeEventListener: jest.fn(),\n },\n }));\n}\n\nexport function reduceStyles(s: any) {\n return s.reduce((s1: any, s2: any) => ({ ...s1, ...s2 }), {});\n}\n\nexport function finalStyle(Component: React.ReactElement) {\n return reduceStyles(\n render(\n Component\n ).toJSON()?.props.style\n );\n}\n"],"mappings":";;;;;;;;AAAA,IAAAA,YAAA,GAAAC,OAAA;AAEA,MAAMC,WAAW,GAAG,IAAI,GAAG,CAAC,CAAC,CAAC;;AAEvB,SAASC,cAAcA,CAAAC,IAAA,EAQ3B;EAAA,IAR4B;IAC7BC,KAAK,GAAG,GAAG;IACXC,MAAM,GAAGD,KAAK,GAAGH,WAAW;IAC5BK,UAAU,GAAG;EAKf,CAAC,GAAAH,IAAA;EACCI,IAAI,CAACC,YAAY,CAAC,CAAC;EACnBD,IAAI,CAACE,MAAM,CAAC,sDAAsD,EAAE,OAAO;IACzEC,UAAU,EAAE,IAAI;IAChBC,OAAO,EAAEJ,IAAI,CAACK,EAAE,CAAC,CAAC,CAACC,eAAe,CAAC;MAAET,KAAK;MAAEC;IAAO,CAAC;EACtD,CAAC,CAAC,CAAC;EACH;EACA;EACA;EACAE,IAAI,CAACE,MAAM,CAAC,6CAA6C,EAAE,OAAO;IAChEC,UAAU,EAAE,IAAI;IAChBC,OAAO,EAAE;MACPG,GAAG,EAAEA,CAAA,KAAMR,UAAU;MACrBS,YAAY,EAAEA,CAAA,KAAM,CAAC;MACrBC,yBAAyB,EAAGC,UAAkB,IAC5CA,UAAU,GAAGX,UAAU;MACzBY,mBAAmB,EAAGD,UAAkB,IACtCE,IAAI,CAACC,KAAK,CAACH,UAAU,GAAGX,UAAU,CAAC,GAAGA;IAC1C;EACF,CAAC,CAAC,CAAC;EACHC,IAAI,CAACE,MAAM,CAAC,6CAA6C,EAAE,OAAO;IAChEC,UAAU,EAAE,IAAI;IAChBC,OAAO,EAAE;MACPG,GAAG,EAAEP,IAAI,CAACK,EAAE,CAAC,CAAC,CAACC,eAAe,CAAC;QAAET,KAAK;QAAEC;MAAO,CAAC,CAAC;MACjDgB,gBAAgB,EAAEd,IAAI,CAACK,EAAE,CAAC,CAAC;MAC3BU,mBAAmB,EAAEf,IAAI,CAACK,EAAE,CAAC;IAC/B;EACF,CAAC,CAAC,CAAC;AACL;AAEO,SAASW,YAAYA,CAACC,CAAM,EAAE;EACnC,OAAOA,CAAC,CAACC,MAAM,CAAC,CAACC,EAAO,EAAEC,EAAO,MAAM;IAAE,GAAGD,EAAE;IAAE,GAAGC;EAAG,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;AAC/D;AAEO,SAASC,UAAUA,CAACC,SAA6B,EAAE;EAAA,IAAAC,cAAA;EACxD,OAAOP,YAAY,EAAAO,cAAA,GACjB,IAAAC,mBAAM,EACJF,SACF,CAAC,CAACG,MAAM,CAAC,CAAC,cAAAF,cAAA,uBAFVA,cAAA,CAEYG,KAAK,CAACC,KACpB,CAAC;AACH","ignoreList":[]}
|
|
@@ -1,220 +0,0 @@
|
|
|
1
|
-
import { render } from '@testing-library/react-native';
|
|
2
|
-
import React from 'react';
|
|
3
|
-
import { StyleSheet, View } from 'react-native';
|
|
4
|
-
import * as stylex from '../';
|
|
5
|
-
import { finalStyle, reduceStyles } from './test-utils';
|
|
6
|
-
|
|
7
|
-
// ---------------------------------------------------------------------------
|
|
8
|
-
// Basic
|
|
9
|
-
// ---------------------------------------------------------------------------
|
|
10
|
-
|
|
11
|
-
describe('Basic', () => {
|
|
12
|
-
it('create() + props() returns base styles', () => {
|
|
13
|
-
const styles = stylex.create({
|
|
14
|
-
view: {
|
|
15
|
-
backgroundColor: 'red',
|
|
16
|
-
height: 100,
|
|
17
|
-
width: 100
|
|
18
|
-
}
|
|
19
|
-
});
|
|
20
|
-
const {
|
|
21
|
-
style
|
|
22
|
-
} = stylex.props(styles.view);
|
|
23
|
-
expect(style[0]).toMatchObject({
|
|
24
|
-
backgroundColor: 'red',
|
|
25
|
-
height: 100,
|
|
26
|
-
width: 100
|
|
27
|
-
});
|
|
28
|
-
});
|
|
29
|
-
it('stylex.props() renders base styles', () => {
|
|
30
|
-
var _toJSON;
|
|
31
|
-
const styles = stylex.create({
|
|
32
|
-
view: {
|
|
33
|
-
backgroundColor: 'red',
|
|
34
|
-
height: 100,
|
|
35
|
-
width: 100
|
|
36
|
-
},
|
|
37
|
-
view2: {
|
|
38
|
-
height: 200,
|
|
39
|
-
width: 200
|
|
40
|
-
}
|
|
41
|
-
});
|
|
42
|
-
function Comp() {
|
|
43
|
-
return /*#__PURE__*/React.createElement(View, stylex.props(styles.view, styles.view2));
|
|
44
|
-
}
|
|
45
|
-
const {
|
|
46
|
-
toJSON
|
|
47
|
-
} = render(/*#__PURE__*/React.createElement(Comp, null));
|
|
48
|
-
expect((_toJSON = toJSON()) === null || _toJSON === void 0 ? void 0 : _toJSON.props.style[1]).toMatchObject({
|
|
49
|
-
height: 200,
|
|
50
|
-
width: 200
|
|
51
|
-
});
|
|
52
|
-
});
|
|
53
|
-
it('stylex.props() has backward compatibility on StyleSheet', () => {
|
|
54
|
-
const sameArgs = {
|
|
55
|
-
view: {
|
|
56
|
-
backgroundColor: 'red',
|
|
57
|
-
height: 100,
|
|
58
|
-
width: 100
|
|
59
|
-
},
|
|
60
|
-
view2: {
|
|
61
|
-
height: 200,
|
|
62
|
-
width: 200
|
|
63
|
-
}
|
|
64
|
-
};
|
|
65
|
-
const styles = stylex.create(sameArgs);
|
|
66
|
-
const orgStyles = StyleSheet.create(sameArgs);
|
|
67
|
-
expect(stylex.props(styles.view, styles.view2).style).toMatchObject([orgStyles.view, orgStyles.view2]);
|
|
68
|
-
});
|
|
69
|
-
});
|
|
70
|
-
|
|
71
|
-
// ---------------------------------------------------------------------------
|
|
72
|
-
// Variants
|
|
73
|
-
// ---------------------------------------------------------------------------
|
|
74
|
-
|
|
75
|
-
describe('Variants', () => {
|
|
76
|
-
it('variants are applied correctly', () => {
|
|
77
|
-
const vars = stylex.defineVars({
|
|
78
|
-
colors: {
|
|
79
|
-
default: 'white',
|
|
80
|
-
primary: 'red',
|
|
81
|
-
secondary: 'blue'
|
|
82
|
-
},
|
|
83
|
-
sizes: {
|
|
84
|
-
default: 10,
|
|
85
|
-
small: 5,
|
|
86
|
-
medium: 15
|
|
87
|
-
}
|
|
88
|
-
});
|
|
89
|
-
const variants = stylex.createVariants({
|
|
90
|
-
var1: {
|
|
91
|
-
backgroundColor: vars.colors
|
|
92
|
-
},
|
|
93
|
-
var2: {
|
|
94
|
-
width: vars.sizes
|
|
95
|
-
}
|
|
96
|
-
});
|
|
97
|
-
const styles = stylex.create({
|
|
98
|
-
view: {
|
|
99
|
-
backgroundColor: variants.var1.backgroundColor,
|
|
100
|
-
width: variants.var2.width
|
|
101
|
-
}
|
|
102
|
-
});
|
|
103
|
-
expect(stylex.props(styles.view).style[0]).toMatchObject({
|
|
104
|
-
backgroundColor: 'white',
|
|
105
|
-
width: 10
|
|
106
|
-
});
|
|
107
|
-
expect(stylex.props(styles.view).style.length).toBe(1);
|
|
108
|
-
expect(stylex.props(stylex.mix(styles.view, {
|
|
109
|
-
var1: 'primary',
|
|
110
|
-
var2: 'medium'
|
|
111
|
-
})).style).toMatchObject([{
|
|
112
|
-
backgroundColor: 'white',
|
|
113
|
-
width: 10
|
|
114
|
-
}, {
|
|
115
|
-
backgroundColor: 'red'
|
|
116
|
-
}, {
|
|
117
|
-
width: 15
|
|
118
|
-
}]);
|
|
119
|
-
});
|
|
120
|
-
it('multiple style have same variant value is applied correctly', () => {
|
|
121
|
-
const variants = stylex.createVariants({
|
|
122
|
-
shape: {
|
|
123
|
-
borderRadius: {
|
|
124
|
-
default: 4,
|
|
125
|
-
round: 8,
|
|
126
|
-
square: 0,
|
|
127
|
-
test: 1
|
|
128
|
-
},
|
|
129
|
-
fontSize: {
|
|
130
|
-
default: 14,
|
|
131
|
-
round: 16,
|
|
132
|
-
square: 18
|
|
133
|
-
}
|
|
134
|
-
}
|
|
135
|
-
});
|
|
136
|
-
const styles = stylex.create({
|
|
137
|
-
view: {
|
|
138
|
-
...variants.shape
|
|
139
|
-
}
|
|
140
|
-
});
|
|
141
|
-
expect(reduceStyles(stylex.props(stylex.mix(styles.view, {
|
|
142
|
-
shape: 'round'
|
|
143
|
-
})).style)).toMatchObject({
|
|
144
|
-
borderRadius: 8,
|
|
145
|
-
fontSize: 16
|
|
146
|
-
});
|
|
147
|
-
expect(reduceStyles(stylex.props(stylex.mix(styles.view, {
|
|
148
|
-
shape: 'test'
|
|
149
|
-
})).style)).toMatchObject({
|
|
150
|
-
borderRadius: 1,
|
|
151
|
-
fontSize: 14
|
|
152
|
-
});
|
|
153
|
-
});
|
|
154
|
-
});
|
|
155
|
-
|
|
156
|
-
// ---------------------------------------------------------------------------
|
|
157
|
-
// Theme queries
|
|
158
|
-
// ---------------------------------------------------------------------------
|
|
159
|
-
|
|
160
|
-
describe('Theme', () => {
|
|
161
|
-
it('theme usage implicitly', () => {
|
|
162
|
-
const {
|
|
163
|
-
themes
|
|
164
|
-
} = stylex.createThemes(['light', 'dark']);
|
|
165
|
-
const styles = stylex.create({
|
|
166
|
-
view: {
|
|
167
|
-
borderBlockColor: {
|
|
168
|
-
default: 'black',
|
|
169
|
-
[themes.light]: 'white',
|
|
170
|
-
[themes.dark]: 'gray'
|
|
171
|
-
}
|
|
172
|
-
}
|
|
173
|
-
});
|
|
174
|
-
function Comp() {
|
|
175
|
-
const sx = stylex.useStylex();
|
|
176
|
-
return /*#__PURE__*/React.createElement(View, sx.props(styles.view));
|
|
177
|
-
}
|
|
178
|
-
const outputStyle = theme => {
|
|
179
|
-
return finalStyle(/*#__PURE__*/React.createElement(stylex.RNStyleXProvider, {
|
|
180
|
-
theme: themes[theme]
|
|
181
|
-
}, /*#__PURE__*/React.createElement(Comp, null)));
|
|
182
|
-
};
|
|
183
|
-
expect(outputStyle('light')).toMatchObject({
|
|
184
|
-
borderBlockColor: 'white'
|
|
185
|
-
});
|
|
186
|
-
expect(outputStyle('dark')).toMatchObject({
|
|
187
|
-
borderBlockColor: 'gray'
|
|
188
|
-
});
|
|
189
|
-
});
|
|
190
|
-
it('theme usage implicitly', () => {
|
|
191
|
-
const {
|
|
192
|
-
themes
|
|
193
|
-
} = stylex.createThemes(['light', 'dark']);
|
|
194
|
-
const styles = stylex.create({
|
|
195
|
-
view: {
|
|
196
|
-
borderBlockColor: {
|
|
197
|
-
default: 'black',
|
|
198
|
-
[themes.light]: 'white',
|
|
199
|
-
[themes.dark]: 'gray'
|
|
200
|
-
}
|
|
201
|
-
}
|
|
202
|
-
});
|
|
203
|
-
function Comp() {
|
|
204
|
-
const sx = stylex.useStylex();
|
|
205
|
-
return /*#__PURE__*/React.createElement(View, sx.props(sx.mix(styles.view)));
|
|
206
|
-
}
|
|
207
|
-
const outputStyle = theme => {
|
|
208
|
-
return finalStyle(/*#__PURE__*/React.createElement(stylex.RNStyleXProvider, {
|
|
209
|
-
theme: themes[theme]
|
|
210
|
-
}, /*#__PURE__*/React.createElement(Comp, null)));
|
|
211
|
-
};
|
|
212
|
-
expect(outputStyle('light')).toMatchObject({
|
|
213
|
-
borderBlockColor: 'white'
|
|
214
|
-
});
|
|
215
|
-
expect(outputStyle('dark')).toMatchObject({
|
|
216
|
-
borderBlockColor: 'gray'
|
|
217
|
-
});
|
|
218
|
-
});
|
|
219
|
-
});
|
|
220
|
-
//# sourceMappingURL=index.test.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["render","React","StyleSheet","View","stylex","finalStyle","reduceStyles","describe","it","styles","create","view","backgroundColor","height","width","style","props","expect","toMatchObject","_toJSON","view2","Comp","createElement","toJSON","sameArgs","orgStyles","vars","defineVars","colors","default","primary","secondary","sizes","small","medium","variants","createVariants","var1","var2","length","toBe","mix","shape","borderRadius","round","square","test","fontSize","themes","createThemes","borderBlockColor","light","dark","sx","useStylex","outputStyle","theme","RNStyleXProvider"],"sources":["index.test.tsx"],"sourcesContent":["import { render } from '@testing-library/react-native';\nimport React from 'react';\nimport { StyleSheet, View } from 'react-native';\n\nimport * as stylex from '../';\nimport { Variants } from '../utils/types';\nimport { finalStyle, reduceStyles } from './test-utils';\n\n// ---------------------------------------------------------------------------\n// Basic\n// ---------------------------------------------------------------------------\n\ndescribe('Basic', () => {\n it('create() + props() returns base styles', () => {\n const styles = stylex.create({\n view: {\n backgroundColor: 'red',\n height: 100,\n width: 100,\n },\n });\n\n const { style } = stylex.props(styles.view);\n expect(style[0]).toMatchObject({\n backgroundColor: 'red',\n height: 100,\n width: 100,\n });\n });\n\n it('stylex.props() renders base styles', () => {\n const styles = stylex.create({\n view: { backgroundColor: 'red', height: 100, width: 100 },\n view2: { height: 200, width: 200 },\n });\n\n function Comp() {\n return <View {...stylex.props(styles.view, styles.view2)} />;\n }\n const { toJSON } = render(<Comp />);\n expect(toJSON()?.props.style[1]).toMatchObject({\n height: 200,\n width: 200,\n });\n });\n\n it('stylex.props() has backward compatibility on StyleSheet', () => {\n const sameArgs = {\n view: { backgroundColor: 'red', height: 100, width: 100 },\n view2: { height: 200, width: 200 },\n };\n const styles = stylex.create(sameArgs);\n\n const orgStyles = StyleSheet.create(sameArgs);\n\n expect(stylex.props(styles.view, styles.view2).style).toMatchObject([\n orgStyles.view,\n orgStyles.view2,\n ]);\n });\n});\n\n// ---------------------------------------------------------------------------\n// Variants\n// ---------------------------------------------------------------------------\n\ndescribe('Variants', () => {\n it('variants are applied correctly', () => {\n const vars = stylex.defineVars({\n colors: {\n default: 'white',\n primary: 'red',\n secondary: 'blue',\n },\n sizes: {\n default: 10,\n small: 5,\n medium: 15,\n },\n });\n\n const variants = stylex.createVariants({\n var1: {\n backgroundColor: vars.colors,\n },\n var2: {\n width: vars.sizes,\n },\n });\n\n const styles = stylex.create({\n view: {\n backgroundColor: variants.var1.backgroundColor,\n width: variants.var2.width,\n },\n });\n\n expect(stylex.props(styles.view).style[0]).toMatchObject({\n backgroundColor: 'white',\n width: 10,\n });\n\n expect(stylex.props(styles.view).style.length).toBe(1);\n\n expect(\n stylex.props(\n stylex.mix<Variants<typeof variants>>(styles.view, {\n var1: 'primary',\n var2: 'medium',\n })\n ).style\n ).toMatchObject([\n {\n backgroundColor: 'white',\n width: 10,\n },\n {\n backgroundColor: 'red',\n },\n {\n width: 15,\n },\n ]);\n });\n\n it('multiple style have same variant value is applied correctly', () => {\n const variants = stylex.createVariants({\n shape: {\n borderRadius: {\n default: 4,\n round: 8,\n square: 0,\n test: 1,\n },\n fontSize: {\n default: 14,\n round: 16,\n square: 18,\n },\n },\n });\n const styles = stylex.create({\n view: {\n ...variants.shape,\n },\n });\n\n expect(\n reduceStyles(\n stylex.props(\n stylex.mix<Variants<typeof variants>>(styles.view, {\n shape: 'round',\n })\n ).style\n )\n ).toMatchObject({ borderRadius: 8, fontSize: 16 });\n expect(\n reduceStyles(\n stylex.props(\n stylex.mix<Variants<typeof variants>>(styles.view, {\n shape: 'test',\n })\n ).style\n )\n ).toMatchObject({ borderRadius: 1, fontSize: 14 });\n });\n});\n\n// ---------------------------------------------------------------------------\n// Theme queries\n// ---------------------------------------------------------------------------\n\ndescribe('Theme', () => {\n it('theme usage implicitly', () => {\n const { themes } = stylex.createThemes(['light', 'dark']);\n const styles = stylex.create({\n view: {\n borderBlockColor: {\n default: 'black',\n [themes.light]: 'white',\n [themes.dark]: 'gray',\n },\n },\n });\n\n function Comp() {\n const sx = stylex.useStylex();\n return <View {...sx.props(styles.view)} />;\n }\n\n const outputStyle = (theme: keyof typeof themes) => {\n return finalStyle(\n <stylex.RNStyleXProvider theme={themes[theme]}>\n <Comp />\n </stylex.RNStyleXProvider>\n );\n };\n\n expect(outputStyle('light')).toMatchObject({\n borderBlockColor: 'white',\n });\n expect(outputStyle('dark')).toMatchObject({\n borderBlockColor: 'gray',\n });\n });\n\n it('theme usage implicitly', () => {\n const { themes } = stylex.createThemes(['light', 'dark']);\n const styles = stylex.create({\n view: {\n borderBlockColor: {\n default: 'black',\n [themes.light]: 'white',\n [themes.dark]: 'gray',\n },\n },\n });\n\n function Comp() {\n const sx = stylex.useStylex();\n return <View {...sx.props(sx.mix(styles.view))} />;\n }\n\n const outputStyle = (theme: keyof typeof themes) => {\n return finalStyle(\n <stylex.RNStyleXProvider theme={themes[theme]}>\n <Comp />\n </stylex.RNStyleXProvider>\n );\n };\n\n expect(outputStyle('light')).toMatchObject({\n borderBlockColor: 'white',\n });\n expect(outputStyle('dark')).toMatchObject({\n borderBlockColor: 'gray',\n });\n });\n});\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,222 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { View } from 'react-native';
|
|
3
|
-
import * as stylex from '../';
|
|
4
|
-
import { mockDimensions, finalStyle } from './test-utils';
|
|
5
|
-
|
|
6
|
-
// ---------------------------------------------------------------------------
|
|
7
|
-
// Media queries
|
|
8
|
-
// ---------------------------------------------------------------------------
|
|
9
|
-
|
|
10
|
-
describe('Media', () => {
|
|
11
|
-
it('single media queries default', () => {
|
|
12
|
-
const media = stylex.defineConsts({
|
|
13
|
-
md: '(width >= 750px)',
|
|
14
|
-
lg: '(width >= 1080px)'
|
|
15
|
-
});
|
|
16
|
-
const styles = stylex.create({
|
|
17
|
-
view: {
|
|
18
|
-
backgroundColor: {
|
|
19
|
-
default: 'yellow',
|
|
20
|
-
[media.md]: 'blue',
|
|
21
|
-
[media.lg]: 'green'
|
|
22
|
-
}
|
|
23
|
-
}
|
|
24
|
-
});
|
|
25
|
-
function Comp() {
|
|
26
|
-
const sx = stylex.useStylex();
|
|
27
|
-
return /*#__PURE__*/React.createElement(View, sx.props(sx.mix(styles.view)));
|
|
28
|
-
}
|
|
29
|
-
mockDimensions({
|
|
30
|
-
width: 640
|
|
31
|
-
});
|
|
32
|
-
expect(finalStyle(/*#__PURE__*/React.createElement(stylex.RNStyleXProvider, null, /*#__PURE__*/React.createElement(Comp, null)))).toMatchObject({
|
|
33
|
-
backgroundColor: 'yellow'
|
|
34
|
-
});
|
|
35
|
-
});
|
|
36
|
-
it('usage from hooks implicitly', () => {
|
|
37
|
-
const media = stylex.defineConsts({
|
|
38
|
-
md: '(width >= 750px)',
|
|
39
|
-
lg: '(width >= 1080px)'
|
|
40
|
-
});
|
|
41
|
-
const styles = stylex.create({
|
|
42
|
-
view: {
|
|
43
|
-
backgroundColor: {
|
|
44
|
-
default: 'yellow',
|
|
45
|
-
[media.md]: 'blue',
|
|
46
|
-
[media.lg]: 'green'
|
|
47
|
-
}
|
|
48
|
-
}
|
|
49
|
-
});
|
|
50
|
-
function Comp() {
|
|
51
|
-
const sx = stylex.useStylex();
|
|
52
|
-
return /*#__PURE__*/React.createElement(View, sx.props(styles.view));
|
|
53
|
-
}
|
|
54
|
-
mockDimensions({
|
|
55
|
-
width: 750
|
|
56
|
-
});
|
|
57
|
-
expect(finalStyle(/*#__PURE__*/React.createElement(stylex.RNStyleXProvider, null, /*#__PURE__*/React.createElement(Comp, null)))).toMatchObject({
|
|
58
|
-
backgroundColor: 'blue'
|
|
59
|
-
});
|
|
60
|
-
});
|
|
61
|
-
it('single media queries md', () => {
|
|
62
|
-
const media = stylex.defineConsts({
|
|
63
|
-
md: '(width >= 750px)',
|
|
64
|
-
lg: '(width >= 1080px)'
|
|
65
|
-
});
|
|
66
|
-
const styles = stylex.create({
|
|
67
|
-
view: {
|
|
68
|
-
backgroundColor: {
|
|
69
|
-
default: 'yellow',
|
|
70
|
-
[media.md]: 'blue',
|
|
71
|
-
[media.lg]: 'green'
|
|
72
|
-
}
|
|
73
|
-
}
|
|
74
|
-
});
|
|
75
|
-
function Comp() {
|
|
76
|
-
const sx = stylex.useStylex();
|
|
77
|
-
return /*#__PURE__*/React.createElement(View, sx.props(sx.mix(styles.view)));
|
|
78
|
-
}
|
|
79
|
-
mockDimensions({
|
|
80
|
-
width: 750
|
|
81
|
-
});
|
|
82
|
-
expect(finalStyle(/*#__PURE__*/React.createElement(stylex.RNStyleXProvider, null, /*#__PURE__*/React.createElement(Comp, null)))).toMatchObject({
|
|
83
|
-
backgroundColor: 'blue'
|
|
84
|
-
});
|
|
85
|
-
});
|
|
86
|
-
it('single media queries lg', () => {
|
|
87
|
-
const media = stylex.defineConsts({
|
|
88
|
-
md: '(width >= 750px)',
|
|
89
|
-
lg: '(width >= 1080px)'
|
|
90
|
-
});
|
|
91
|
-
const styles = stylex.create({
|
|
92
|
-
view: {
|
|
93
|
-
backgroundColor: {
|
|
94
|
-
default: 'yellow',
|
|
95
|
-
[media.md]: 'blue',
|
|
96
|
-
[media.lg]: 'green'
|
|
97
|
-
}
|
|
98
|
-
}
|
|
99
|
-
});
|
|
100
|
-
function Comp() {
|
|
101
|
-
const sx = stylex.useStylex();
|
|
102
|
-
return /*#__PURE__*/React.createElement(View, sx.props(sx.mix(styles.view)));
|
|
103
|
-
}
|
|
104
|
-
mockDimensions({
|
|
105
|
-
width: 1080
|
|
106
|
-
});
|
|
107
|
-
expect(finalStyle(/*#__PURE__*/React.createElement(stylex.RNStyleXProvider, null, /*#__PURE__*/React.createElement(Comp, null)))).toMatchObject({
|
|
108
|
-
backgroundColor: 'green'
|
|
109
|
-
});
|
|
110
|
-
});
|
|
111
|
-
it('multi-range media query matches width inside range', () => {
|
|
112
|
-
const media = stylex.defineConsts({
|
|
113
|
-
md: '(750px <= width < 1080px)',
|
|
114
|
-
lg: '(width >= 1080px)'
|
|
115
|
-
});
|
|
116
|
-
const styles = stylex.create({
|
|
117
|
-
view: {
|
|
118
|
-
backgroundColor: {
|
|
119
|
-
default: 'yellow',
|
|
120
|
-
[media.md]: 'blue',
|
|
121
|
-
[media.lg]: 'green'
|
|
122
|
-
}
|
|
123
|
-
}
|
|
124
|
-
});
|
|
125
|
-
function Comp() {
|
|
126
|
-
const sx = stylex.useStylex();
|
|
127
|
-
return /*#__PURE__*/React.createElement(View, sx.props(sx.mix(styles.view)));
|
|
128
|
-
}
|
|
129
|
-
mockDimensions({
|
|
130
|
-
width: 900
|
|
131
|
-
});
|
|
132
|
-
expect(finalStyle(/*#__PURE__*/React.createElement(stylex.RNStyleXProvider, null, /*#__PURE__*/React.createElement(Comp, null)))).toMatchObject({
|
|
133
|
-
backgroundColor: 'blue'
|
|
134
|
-
});
|
|
135
|
-
});
|
|
136
|
-
it('multi-range media query does not match width outside range', () => {
|
|
137
|
-
const media = stylex.defineConsts({
|
|
138
|
-
md: '(750px <= width < 1080px)',
|
|
139
|
-
lg: '(width >= 1080px)'
|
|
140
|
-
});
|
|
141
|
-
const styles = stylex.create({
|
|
142
|
-
view: {
|
|
143
|
-
backgroundColor: {
|
|
144
|
-
default: 'yellow',
|
|
145
|
-
[media.md]: 'blue',
|
|
146
|
-
[media.lg]: 'green'
|
|
147
|
-
}
|
|
148
|
-
}
|
|
149
|
-
});
|
|
150
|
-
function Comp() {
|
|
151
|
-
const sx = stylex.useStylex();
|
|
152
|
-
return /*#__PURE__*/React.createElement(View, sx.props(sx.mix(styles.view)));
|
|
153
|
-
}
|
|
154
|
-
mockDimensions({
|
|
155
|
-
width: 1080
|
|
156
|
-
});
|
|
157
|
-
expect(finalStyle(/*#__PURE__*/React.createElement(stylex.RNStyleXProvider, null, /*#__PURE__*/React.createElement(Comp, null)))).toMatchObject({
|
|
158
|
-
backgroundColor: 'green'
|
|
159
|
-
});
|
|
160
|
-
});
|
|
161
|
-
it('multiple properties each with independent breakpoints', () => {
|
|
162
|
-
const media = stylex.defineConsts({
|
|
163
|
-
md: '(width >= 750px)',
|
|
164
|
-
lg: '(width >= 1080px)'
|
|
165
|
-
});
|
|
166
|
-
const styles = stylex.create({
|
|
167
|
-
view: {
|
|
168
|
-
backgroundColor: {
|
|
169
|
-
default: 'yellow',
|
|
170
|
-
[media.md]: 'blue',
|
|
171
|
-
[media.lg]: 'green'
|
|
172
|
-
},
|
|
173
|
-
width: {
|
|
174
|
-
default: 100,
|
|
175
|
-
[media.md]: 200,
|
|
176
|
-
[media.lg]: 300
|
|
177
|
-
}
|
|
178
|
-
}
|
|
179
|
-
});
|
|
180
|
-
function Comp() {
|
|
181
|
-
const sx = stylex.useStylex();
|
|
182
|
-
return /*#__PURE__*/React.createElement(View, sx.props(sx.mix(styles.view)));
|
|
183
|
-
}
|
|
184
|
-
mockDimensions({
|
|
185
|
-
width: 750
|
|
186
|
-
});
|
|
187
|
-
expect(finalStyle(/*#__PURE__*/React.createElement(stylex.RNStyleXProvider, null, /*#__PURE__*/React.createElement(Comp, null)))).toMatchObject({
|
|
188
|
-
backgroundColor: 'blue',
|
|
189
|
-
width: 200
|
|
190
|
-
});
|
|
191
|
-
});
|
|
192
|
-
it('multiple style entries with media queries are merged in order', () => {
|
|
193
|
-
const media = stylex.defineConsts({
|
|
194
|
-
md: '(width >= 750px)'
|
|
195
|
-
});
|
|
196
|
-
const styles = stylex.create({
|
|
197
|
-
base: {
|
|
198
|
-
backgroundColor: {
|
|
199
|
-
default: 'yellow'
|
|
200
|
-
},
|
|
201
|
-
height: 100
|
|
202
|
-
},
|
|
203
|
-
override: {
|
|
204
|
-
backgroundColor: {
|
|
205
|
-
[media.md]: 'purple'
|
|
206
|
-
}
|
|
207
|
-
}
|
|
208
|
-
});
|
|
209
|
-
function Comp() {
|
|
210
|
-
const sx = stylex.useStylex();
|
|
211
|
-
return /*#__PURE__*/React.createElement(View, sx.props(sx.mix(styles.base), sx.mix(styles.override)));
|
|
212
|
-
}
|
|
213
|
-
mockDimensions({
|
|
214
|
-
width: 750
|
|
215
|
-
});
|
|
216
|
-
expect(finalStyle(/*#__PURE__*/React.createElement(stylex.RNStyleXProvider, null, /*#__PURE__*/React.createElement(Comp, null)))).toMatchObject({
|
|
217
|
-
backgroundColor: 'purple',
|
|
218
|
-
height: 100
|
|
219
|
-
});
|
|
220
|
-
});
|
|
221
|
-
});
|
|
222
|
-
//# sourceMappingURL=media.test.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["React","View","stylex","mockDimensions","finalStyle","describe","it","media","defineConsts","md","lg","styles","create","view","backgroundColor","default","Comp","sx","useStylex","createElement","props","mix","width","expect","RNStyleXProvider","toMatchObject","base","height","override"],"sources":["media.test.tsx"],"sourcesContent":["import React from 'react';\nimport { View } from 'react-native';\n\nimport * as stylex from '../';\nimport { mockDimensions, finalStyle } from './test-utils';\n\n// ---------------------------------------------------------------------------\n// Media queries\n// ---------------------------------------------------------------------------\n\ndescribe('Media', () => {\n it('single media queries default', () => {\n const media = stylex.defineConsts({\n md: '(width >= 750px)',\n lg: '(width >= 1080px)',\n });\n\n const styles = stylex.create({\n view: {\n backgroundColor: {\n default: 'yellow',\n [media.md]: 'blue',\n [media.lg]: 'green',\n },\n },\n });\n\n function Comp() {\n const sx = stylex.useStylex();\n return <View {...sx.props(sx.mix(styles.view))} />;\n }\n\n mockDimensions({ width: 640 });\n expect(\n finalStyle(\n <stylex.RNStyleXProvider>\n <Comp />\n </stylex.RNStyleXProvider>\n )\n ).toMatchObject({\n backgroundColor: 'yellow',\n });\n });\n\n it('usage from hooks implicitly', () => {\n const media = stylex.defineConsts({\n md: '(width >= 750px)',\n lg: '(width >= 1080px)',\n });\n\n const styles = stylex.create({\n view: {\n backgroundColor: {\n default: 'yellow',\n [media.md]: 'blue',\n [media.lg]: 'green',\n },\n },\n });\n\n function Comp() {\n const sx = stylex.useStylex();\n return <View {...sx.props(styles.view)} />;\n }\n\n mockDimensions({ width: 750 });\n expect(\n finalStyle(\n <stylex.RNStyleXProvider>\n <Comp />\n </stylex.RNStyleXProvider>\n )\n ).toMatchObject({\n backgroundColor: 'blue',\n });\n });\n\n it('single media queries md', () => {\n const media = stylex.defineConsts({\n md: '(width >= 750px)',\n lg: '(width >= 1080px)',\n });\n\n const styles = stylex.create({\n view: {\n backgroundColor: {\n default: 'yellow',\n [media.md]: 'blue',\n [media.lg]: 'green',\n },\n },\n });\n\n function Comp() {\n const sx = stylex.useStylex();\n return <View {...sx.props(sx.mix(styles.view))} />;\n }\n\n mockDimensions({ width: 750 });\n expect(\n finalStyle(\n <stylex.RNStyleXProvider>\n <Comp />\n </stylex.RNStyleXProvider>\n )\n ).toMatchObject({\n backgroundColor: 'blue',\n });\n });\n\n it('single media queries lg', () => {\n const media = stylex.defineConsts({\n md: '(width >= 750px)',\n lg: '(width >= 1080px)',\n });\n\n const styles = stylex.create({\n view: {\n backgroundColor: {\n default: 'yellow',\n [media.md]: 'blue',\n [media.lg]: 'green',\n },\n },\n });\n\n function Comp() {\n const sx = stylex.useStylex();\n return <View {...sx.props(sx.mix(styles.view))} />;\n }\n\n mockDimensions({ width: 1080 });\n expect(\n finalStyle(\n <stylex.RNStyleXProvider>\n <Comp />\n </stylex.RNStyleXProvider>\n )\n ).toMatchObject({\n backgroundColor: 'green',\n });\n });\n\n it('multi-range media query matches width inside range', () => {\n const media = stylex.defineConsts({\n md: '(750px <= width < 1080px)',\n lg: '(width >= 1080px)',\n });\n\n const styles = stylex.create({\n view: {\n backgroundColor: {\n default: 'yellow',\n [media.md]: 'blue',\n [media.lg]: 'green',\n },\n },\n });\n\n function Comp() {\n const sx = stylex.useStylex();\n return <View {...sx.props(sx.mix(styles.view))} />;\n }\n\n mockDimensions({ width: 900 });\n expect(\n finalStyle(\n <stylex.RNStyleXProvider>\n <Comp />\n </stylex.RNStyleXProvider>\n )\n ).toMatchObject({\n backgroundColor: 'blue',\n });\n });\n\n it('multi-range media query does not match width outside range', () => {\n const media = stylex.defineConsts({\n md: '(750px <= width < 1080px)',\n lg: '(width >= 1080px)',\n });\n\n const styles = stylex.create({\n view: {\n backgroundColor: {\n default: 'yellow',\n [media.md]: 'blue',\n [media.lg]: 'green',\n },\n },\n });\n\n function Comp() {\n const sx = stylex.useStylex();\n return <View {...sx.props(sx.mix(styles.view))} />;\n }\n\n mockDimensions({ width: 1080 });\n expect(\n finalStyle(\n <stylex.RNStyleXProvider>\n <Comp />\n </stylex.RNStyleXProvider>\n )\n ).toMatchObject({\n backgroundColor: 'green',\n });\n });\n\n it('multiple properties each with independent breakpoints', () => {\n const media = stylex.defineConsts({\n md: '(width >= 750px)',\n lg: '(width >= 1080px)',\n });\n\n const styles = stylex.create({\n view: {\n backgroundColor: {\n default: 'yellow',\n [media.md]: 'blue',\n [media.lg]: 'green',\n },\n width: {\n default: 100,\n [media.md]: 200,\n [media.lg]: 300,\n },\n },\n });\n\n function Comp() {\n const sx = stylex.useStylex();\n return <View {...sx.props(sx.mix(styles.view))} />;\n }\n\n mockDimensions({ width: 750 });\n expect(\n finalStyle(\n <stylex.RNStyleXProvider>\n <Comp />\n </stylex.RNStyleXProvider>\n )\n ).toMatchObject({\n backgroundColor: 'blue',\n width: 200,\n });\n });\n\n it('multiple style entries with media queries are merged in order', () => {\n const media = stylex.defineConsts({\n md: '(width >= 750px)',\n });\n\n const styles = stylex.create({\n base: {\n backgroundColor: {\n default: 'yellow',\n },\n height: 100,\n },\n override: {\n backgroundColor: {\n [media.md]: 'purple',\n },\n },\n });\n\n function Comp() {\n const sx = stylex.useStylex();\n return (\n <View {...sx.props(sx.mix(styles.base), sx.mix(styles.override))} />\n );\n }\n\n mockDimensions({ width: 750 });\n expect(\n finalStyle(\n <stylex.RNStyleXProvider>\n <Comp />\n </stylex.RNStyleXProvider>\n )\n ).toMatchObject({\n backgroundColor: 'purple',\n height: 100,\n });\n });\n});\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,49 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { View } from 'react-native';
|
|
3
|
-
import { mockDimensions, finalStyle } from './test-utils';
|
|
4
|
-
jest.mock('../utils/media', () => {
|
|
5
|
-
const originalModule = jest.requireActual('../utils/media');
|
|
6
|
-
return {
|
|
7
|
-
...originalModule,
|
|
8
|
-
media: jest.fn(originalModule.media)
|
|
9
|
-
};
|
|
10
|
-
});
|
|
11
|
-
it('preset media effectively key access', async () => {
|
|
12
|
-
const mediaUtils = await import('../utils/media');
|
|
13
|
-
const stylex = await import('../');
|
|
14
|
-
const mocked = jest.mocked(mediaUtils.media);
|
|
15
|
-
const mediaVal = stylex.defineConsts({
|
|
16
|
-
md: '(width >= 750px)',
|
|
17
|
-
lg: '(width >= 1080px)'
|
|
18
|
-
});
|
|
19
|
-
const styles = stylex.create({
|
|
20
|
-
view: {
|
|
21
|
-
backgroundColor: {
|
|
22
|
-
default: 'yellow',
|
|
23
|
-
[mediaVal.md]: 'blue',
|
|
24
|
-
[mediaVal.lg]: 'green'
|
|
25
|
-
},
|
|
26
|
-
width: {
|
|
27
|
-
default: 100,
|
|
28
|
-
[mediaVal.md]: 200,
|
|
29
|
-
[mediaVal.lg]: 300
|
|
30
|
-
}
|
|
31
|
-
}
|
|
32
|
-
});
|
|
33
|
-
mockDimensions({
|
|
34
|
-
width: 750
|
|
35
|
-
});
|
|
36
|
-
function Comp() {
|
|
37
|
-
const sx = stylex.useStylex();
|
|
38
|
-
return /*#__PURE__*/React.createElement(View, sx.props(styles.view));
|
|
39
|
-
}
|
|
40
|
-
expect(finalStyle(/*#__PURE__*/React.createElement(stylex.RNStyleXProvider, {
|
|
41
|
-
media: mediaVal
|
|
42
|
-
}, /*#__PURE__*/React.createElement(Comp, null)))).toMatchObject({
|
|
43
|
-
backgroundColor: 'blue',
|
|
44
|
-
width: 200
|
|
45
|
-
});
|
|
46
|
-
expect(jest.isMockFunction(mocked)).toBe(true);
|
|
47
|
-
expect(mocked.mock.calls[0][1]).toBe(mediaVal.md);
|
|
48
|
-
});
|
|
49
|
-
//# sourceMappingURL=mock.test.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["React","View","mockDimensions","finalStyle","jest","mock","originalModule","requireActual","media","fn","it","mediaUtils","stylex","mocked","mediaVal","defineConsts","md","lg","styles","create","view","backgroundColor","default","width","Comp","sx","useStylex","createElement","props","expect","RNStyleXProvider","toMatchObject","isMockFunction","toBe","calls"],"sources":["mock.test.tsx"],"sourcesContent":["import React from 'react';\nimport { View } from 'react-native';\n\nimport { mockDimensions, finalStyle } from './test-utils';\n\njest.mock('../utils/media', () => {\n const originalModule = jest.requireActual('../utils/media');\n\n return {\n ...originalModule,\n media: jest.fn(originalModule.media),\n };\n});\n\nit('preset media effectively key access', async () => {\n const mediaUtils = await import( '../utils/media');\n const stylex = await import( '../');\n\n const mocked = jest.mocked(mediaUtils.media);\n\n const mediaVal = stylex.defineConsts({\n md: '(width >= 750px)',\n lg: '(width >= 1080px)',\n });\n\n const styles = stylex.create({\n view: {\n backgroundColor: {\n default: 'yellow',\n [mediaVal.md]: 'blue',\n [mediaVal.lg]: 'green',\n },\n width: {\n default: 100,\n [mediaVal.md]: 200,\n [mediaVal.lg]: 300,\n },\n },\n });\n\n mockDimensions({ width: 750 });\n\n function Comp() {\n const sx = stylex.useStylex();\n return <View {...sx.props(styles.view)} />;\n }\n\n expect(\n finalStyle(\n <stylex.RNStyleXProvider media={mediaVal}>\n <Comp />\n </stylex.RNStyleXProvider>\n )\n ).toMatchObject({\n backgroundColor: 'blue',\n width: 200,\n });\n\n expect(jest.isMockFunction(mocked)).toBe(true);\n expect(mocked.mock.calls[0][1]).toBe(mediaVal.md);\n});\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,QAAQ,cAAc;AAEnC,SAASC,cAAc,EAAEC,UAAU,QAAQ,cAAc;AAEzDC,IAAI,CAACC,IAAI,CAAC,gBAAgB,EAAE,MAAM;EAChC,MAAMC,cAAc,GAAGF,IAAI,CAACG,aAAa,CAAC,gBAAgB,CAAC;EAE3D,OAAO;IACL,GAAGD,cAAc;IACjBE,KAAK,EAAEJ,IAAI,CAACK,EAAE,CAACH,cAAc,CAACE,KAAK;EACrC,CAAC;AACH,CAAC,CAAC;AAEFE,EAAE,CAAC,qCAAqC,EAAE,YAAY;EACpD,MAAMC,UAAU,GAAG,MAAM,MAAM,CAAE,gBAAgB,CAAC;EAClD,MAAMC,MAAM,GAAG,MAAM,MAAM,CAAE,KAAK,CAAC;EAEnC,MAAMC,MAAM,GAAGT,IAAI,CAACS,MAAM,CAACF,UAAU,CAACH,KAAK,CAAC;EAE5C,MAAMM,QAAQ,GAAGF,MAAM,CAACG,YAAY,CAAC;IACnCC,EAAE,EAAE,kBAAkB;IACtBC,EAAE,EAAE;EACN,CAAC,CAAC;EAEF,MAAMC,MAAM,GAAGN,MAAM,CAACO,MAAM,CAAC;IAC3BC,IAAI,EAAE;MACJC,eAAe,EAAE;QACfC,OAAO,EAAE,QAAQ;QACjB,CAACR,QAAQ,CAACE,EAAE,GAAG,MAAM;QACrB,CAACF,QAAQ,CAACG,EAAE,GAAG;MACjB,CAAC;MACDM,KAAK,EAAE;QACLD,OAAO,EAAE,GAAG;QACZ,CAACR,QAAQ,CAACE,EAAE,GAAG,GAAG;QAClB,CAACF,QAAQ,CAACG,EAAE,GAAG;MACjB;IACF;EACF,CAAC,CAAC;EAEFf,cAAc,CAAC;IAAEqB,KAAK,EAAE;EAAI,CAAC,CAAC;EAE9B,SAASC,IAAIA,CAAA,EAAG;IACd,MAAMC,EAAE,GAAGb,MAAM,CAACc,SAAS,CAAC,CAAC;IAC7B,oBAAO1B,KAAA,CAAA2B,aAAA,CAAC1B,IAAI,EAAKwB,EAAE,CAACG,KAAK,CAACV,MAAM,CAACE,IAAI,CAAI,CAAC;EAC5C;EAEAS,MAAM,CACJ1B,UAAU,cACRH,KAAA,CAAA2B,aAAA,CAACf,MAAM,CAACkB,gBAAgB;IAACtB,KAAK,EAAEM;EAAS,gBACvCd,KAAA,CAAA2B,aAAA,CAACH,IAAI,MAAE,CACgB,CAC3B,CACF,CAAC,CAACO,aAAa,CAAC;IACdV,eAAe,EAAE,MAAM;IACvBE,KAAK,EAAE;EACT,CAAC,CAAC;EAEFM,MAAM,CAACzB,IAAI,CAAC4B,cAAc,CAACnB,MAAM,CAAC,CAAC,CAACoB,IAAI,CAAC,IAAI,CAAC;EAC9CJ,MAAM,CAAChB,MAAM,CAACR,IAAI,CAAC6B,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAACD,IAAI,CAACnB,QAAQ,CAACE,EAAE,CAAC;AACnD,CAAC,CAAC","ignoreList":[]}
|