react-native-unistyles 1.0.0-beta.4 → 1.0.0-beta.5
Sign up to get free protection for your applications and to get access to all the features.
- package/lib/commonjs/createUnistyles.js +10 -12
- package/lib/commonjs/createUnistyles.js.map +1 -1
- package/lib/commonjs/mediaQueries.js +2 -0
- package/lib/commonjs/mediaQueries.js.map +1 -0
- package/lib/commonjs/utils/breakpoints.js +12 -16
- package/lib/commonjs/utils/breakpoints.js.map +1 -1
- package/lib/commonjs/utils/breakpoints.spec.js +20 -15
- package/lib/commonjs/utils/breakpoints.spec.js.map +1 -1
- package/lib/commonjs/utils/common.js +8 -1
- package/lib/commonjs/utils/common.js.map +1 -1
- package/lib/commonjs/utils/index.js +7 -0
- package/lib/commonjs/utils/index.js.map +1 -1
- package/lib/commonjs/utils/mediaQueries.spec.js +1 -1
- package/lib/commonjs/utils/mediaQueries.spec.js.map +1 -1
- package/lib/commonjs/utils/normalizeStyles.js +10 -0
- package/lib/commonjs/utils/normalizeStyles.js.map +1 -0
- package/lib/commonjs/utils/normalizeStyles.web.js +59 -0
- package/lib/commonjs/utils/normalizeStyles.web.js.map +1 -0
- package/lib/commonjs/utils/styles.js +14 -11
- package/lib/commonjs/utils/styles.js.map +1 -1
- package/lib/commonjs/utils/styles.spec.js +17 -7
- package/lib/commonjs/utils/styles.spec.js.map +1 -1
- package/lib/module/createUnistyles.js +10 -12
- package/lib/module/createUnistyles.js.map +1 -1
- package/lib/module/mediaQueries.js +2 -0
- package/lib/module/mediaQueries.js.map +1 -0
- package/lib/module/utils/breakpoints.js +12 -16
- package/lib/module/utils/breakpoints.js.map +1 -1
- package/lib/module/utils/breakpoints.spec.js +20 -15
- package/lib/module/utils/breakpoints.spec.js.map +1 -1
- package/lib/module/utils/common.js +5 -0
- package/lib/module/utils/common.js.map +1 -1
- package/lib/module/utils/index.js +1 -0
- package/lib/module/utils/index.js.map +1 -1
- package/lib/module/utils/mediaQueries.spec.js +1 -1
- package/lib/module/utils/mediaQueries.spec.js.map +1 -1
- package/lib/module/utils/normalizeStyles.js +3 -0
- package/lib/module/utils/normalizeStyles.js.map +1 -0
- package/lib/module/utils/normalizeStyles.web.js +52 -0
- package/lib/module/utils/normalizeStyles.web.js.map +1 -0
- package/lib/module/utils/styles.js +14 -11
- package/lib/module/utils/styles.js.map +1 -1
- package/lib/module/utils/styles.spec.js +17 -7
- package/lib/module/utils/styles.spec.js.map +1 -1
- package/lib/typescript/src/createUnistyles.d.ts +2 -2
- package/lib/typescript/src/createUnistyles.d.ts.map +1 -1
- package/lib/typescript/src/mediaQueries.d.ts +2 -0
- package/lib/typescript/src/mediaQueries.d.ts.map +1 -0
- package/lib/typescript/src/types.d.ts +35 -13
- package/lib/typescript/src/types.d.ts.map +1 -1
- package/lib/typescript/src/utils/breakpoints.d.ts +6 -6
- package/lib/typescript/src/utils/breakpoints.d.ts.map +1 -1
- package/lib/typescript/src/utils/common.d.ts +2 -0
- package/lib/typescript/src/utils/common.d.ts.map +1 -1
- package/lib/typescript/src/utils/index.d.ts +1 -0
- package/lib/typescript/src/utils/index.d.ts.map +1 -1
- package/lib/typescript/src/utils/normalizeStyles.d.ts +2 -0
- package/lib/typescript/src/utils/normalizeStyles.d.ts.map +1 -0
- package/lib/typescript/src/utils/normalizeStyles.web.d.ts +2 -0
- package/lib/typescript/src/utils/normalizeStyles.web.d.ts.map +1 -0
- package/lib/typescript/src/utils/styles.d.ts +5 -5
- package/lib/typescript/src/utils/styles.d.ts.map +1 -1
- package/package.json +9 -2
- package/src/createUnistyles.ts +20 -14
- package/src/mediaQueries.ts +33 -0
- package/src/types.ts +42 -15
- package/src/utils/breakpoints.ts +15 -15
- package/src/utils/common.ts +8 -0
- package/src/utils/index.ts +1 -0
- package/src/utils/normalizeStyles.ts +2 -0
- package/src/utils/normalizeStyles.web.ts +103 -0
- package/src/utils/styles.ts +20 -14
@@ -1,4 +1,6 @@
|
|
1
1
|
import { getValueForBreakpoint } from './breakpoints';
|
2
|
+
import { normalizeStyles } from './normalizeStyles';
|
3
|
+
import { isWeb } from './common';
|
2
4
|
|
3
5
|
/**
|
4
6
|
* Proxies a function to parse its return value for custom media queries or breakpoints.
|
@@ -8,7 +10,7 @@ import { getValueForBreakpoint } from './breakpoints';
|
|
8
10
|
* @param {Function} fn - The function to be proxified.
|
9
11
|
* @param {keyof B & string} breakpoint - The breakpoint name to check against.
|
10
12
|
* @param {ScreenSize} screenSize - An object representing the screen size to be checked against the media queries.
|
11
|
-
* @param
|
13
|
+
* @param breakpointPairs - sorted pairs of breakpoints
|
12
14
|
*
|
13
15
|
* @returns {Function} Returns the proxified function
|
14
16
|
*
|
@@ -21,8 +23,8 @@ import { getValueForBreakpoint } from './breakpoints';
|
|
21
23
|
* const proxifiedFunction = proxifyFunction(myFunction, 'sm', screenSize, breakpoints)
|
22
24
|
* proxifiedFunction() // parsed style based on screenSize and breakpoints
|
23
25
|
*/
|
24
|
-
export const proxifyFunction = (fn, breakpoint, screenSize,
|
25
|
-
apply: (target, thisArg, argumentsList) => parseStyle(target.apply(thisArg, argumentsList), breakpoint, screenSize,
|
26
|
+
export const proxifyFunction = (fn, breakpoint, screenSize, breakpointPairs) => new Proxy(fn, {
|
27
|
+
apply: (target, thisArg, argumentsList) => parseStyle(target.apply(thisArg, argumentsList), breakpoint, screenSize, breakpointPairs)
|
26
28
|
});
|
27
29
|
|
28
30
|
/**
|
@@ -37,7 +39,7 @@ export const proxifyFunction = (fn, breakpoint, screenSize, breakpoints) => new
|
|
37
39
|
* @param {CustomNamedStyles<T, B>} style - The style object to be parsed.
|
38
40
|
* @param {keyof B & string} breakpoint - The breakpoint name to check against.
|
39
41
|
* @param {ScreenSize} screenSize - An object representing the screen size to be checked against the media queries.
|
40
|
-
* @param
|
42
|
+
* @param breakpointPairs - sorted pairs of breakpoints
|
41
43
|
*
|
42
44
|
* @returns {Record<string, string | number | Function>} Returns the parsed style object with resolved custom media queries or breakpoints.
|
43
45
|
*
|
@@ -50,24 +52,25 @@ export const proxifyFunction = (fn, breakpoint, screenSize, breakpoints) => new
|
|
50
52
|
* const parsedStyle = parseStyle(style, 'sm', screenSize, breakpoints)
|
51
53
|
* // { fontSize: '12px' }
|
52
54
|
*/
|
53
|
-
export const parseStyle = (style, breakpoint, screenSize,
|
55
|
+
export const parseStyle = (style, breakpoint, screenSize, breakpointPairs) => {
|
54
56
|
const entries = Object.entries(style);
|
55
|
-
|
57
|
+
const parsedStyles = Object.fromEntries(entries.map(_ref => {
|
56
58
|
let [key, value] = _ref;
|
57
|
-
const
|
58
|
-
if (
|
59
|
-
return [key, parseStyle(value, breakpoint, screenSize,
|
59
|
+
const hasNestedProperties = key === 'shadowOffset' || key === 'textShadowOffset';
|
60
|
+
if (hasNestedProperties) {
|
61
|
+
return [key, parseStyle(value, breakpoint, screenSize, breakpointPairs)];
|
60
62
|
}
|
61
63
|
const isTransform = key === 'transform';
|
62
64
|
if (isTransform && Array.isArray(value)) {
|
63
|
-
return [key, value.map(value => parseStyle(value, breakpoint, screenSize,
|
65
|
+
return [key, value.map(value => parseStyle(value, breakpoint, screenSize, breakpointPairs))];
|
64
66
|
}
|
65
67
|
const isDynamicFunction = typeof value === 'function';
|
66
68
|
const isValidStyle = typeof value !== 'object';
|
67
69
|
if (isDynamicFunction || isValidStyle) {
|
68
70
|
return [key, value];
|
69
71
|
}
|
70
|
-
return [key, getValueForBreakpoint(value, breakpoint, screenSize,
|
72
|
+
return [key, getValueForBreakpoint(value, breakpoint, screenSize, breakpointPairs)];
|
71
73
|
}));
|
74
|
+
return isWeb() ? normalizeStyles(parsedStyles) : parsedStyles;
|
72
75
|
};
|
73
76
|
//# sourceMappingURL=styles.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"names":["getValueForBreakpoint","proxifyFunction","fn","breakpoint","screenSize","
|
1
|
+
{"version":3,"names":["getValueForBreakpoint","normalizeStyles","isWeb","proxifyFunction","fn","breakpoint","screenSize","breakpointPairs","Proxy","apply","target","thisArg","argumentsList","parseStyle","style","entries","Object","parsedStyles","fromEntries","map","_ref","key","value","hasNestedProperties","isTransform","Array","isArray","isDynamicFunction","isValidStyle"],"sourceRoot":"../../../src","sources":["utils/styles.ts"],"mappings":"AACA,SAASA,qBAAqB,QAAQ,eAAe;AACrD,SAASC,eAAe,QAAQ,mBAAmB;AACnD,SAASC,KAAK,QAAQ,UAAU;;AAEhC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,eAAe,GAAGA,CAC3BC,EAAY,EAAEC,UAA4B,EAC1CC,UAAsB,EACtBC,eAA2C,KAChC,IAAIC,KAAK,CAACJ,EAAE,EAAE;EACzBK,KAAK,EAAEA,CAACC,MAAM,EAAEC,OAAO,EAAEC,aAAa,KAClCC,UAAU,CAACH,MAAM,CAACD,KAAK,CAACE,OAAO,EAAEC,aAAa,CAAC,EAAEP,UAAU,EAAEC,UAAU,EAAEC,eAAe;AAChG,CAAC,CAAC;;AAEF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMM,UAAU,GAAGA,CACtBC,KAA8B,EAC9BT,UAA4B,EAC5BC,UAAsB,EACtBC,eAA2C,KACvC;EACJ,MAAMQ,OAAO,GAAGC,MAAM,CAACD,OAAO,CAACD,KAAK,CAGnC;EAED,MAAMG,YAAY,GAAGD,MAAM,CACtBE,WAAW,CAACH,OAAO,CACfI,GAAG,CAACC,IAAA,IAAkB;IAAA,IAAjB,CAACC,GAAG,EAAEC,KAAK,CAAC,GAAAF,IAAA;IACd,MAAMG,mBAAmB,GAAGF,GAAG,KAAK,cAAc,IAAIA,GAAG,KAAK,kBAAkB;IAEhF,IAAIE,mBAAmB,EAAE;MACrB,OAAO,CACHF,GAAG,EACHR,UAAU,CAACS,KAAK,EAA6BjB,UAAU,EAAEC,UAAU,EAAEC,eAAe,CAAC,CACxF;IACL;IAEA,MAAMiB,WAAW,GAAGH,GAAG,KAAK,WAAW;IAEvC,IAAIG,WAAW,IAAIC,KAAK,CAACC,OAAO,CAACJ,KAAK,CAAC,EAAE;MACrC,OAAO,CACHD,GAAG,EACHC,KAAK,CAACH,GAAG,CAACG,KAAK,IAAIT,UAAU,CAACS,KAAK,EAAEjB,UAAU,EAAEC,UAAU,EAAEC,eAAe,CAAC,CAAC,CACjF;IACL;IAEA,MAAMoB,iBAAiB,GAAG,OAAOL,KAAK,KAAK,UAAU;IACrD,MAAMM,YAAY,GAAG,OAAON,KAAK,KAAK,QAAQ;IAE9C,IAAIK,iBAAiB,IAAIC,YAAY,EAAE;MACnC,OAAO,CAACP,GAAG,EAAEC,KAAK,CAAC;IACvB;IAEA,OAAO,CACHD,GAAG,EACHrB,qBAAqB,CACjBsB,KAAK,EACLjB,UAAU,EACVC,UAAU,EACVC,eACJ,CAAC,CACJ;EACL,CAAC,CACL,CAAC;EAEL,OAAOL,KAAK,CAAC,CAAC,GACRD,eAAe,CAACgB,YAAY,CAAC,GAC7BA,YAAY;AACtB,CAAC"}
|
@@ -12,13 +12,14 @@ describe('styles', () => {
|
|
12
12
|
sm: 400,
|
13
13
|
md: 800
|
14
14
|
};
|
15
|
+
const breakpointPairs = Object.entries(breakpoints);
|
15
16
|
const dynamicFunction = isEven => ({
|
16
17
|
backgroundColor: {
|
17
18
|
sm: isEven ? 'green' : 'red',
|
18
19
|
md: isEven ? 'orange' : 'pink'
|
19
20
|
}
|
20
21
|
});
|
21
|
-
expect(proxifyFunction(dynamicFunction, breakpoint, screenSize,
|
22
|
+
expect(proxifyFunction(dynamicFunction, breakpoint, screenSize, breakpointPairs)(true)).toEqual({
|
22
23
|
backgroundColor: 'green'
|
23
24
|
});
|
24
25
|
});
|
@@ -33,13 +34,14 @@ describe('styles', () => {
|
|
33
34
|
sm: 400,
|
34
35
|
md: 800
|
35
36
|
};
|
37
|
+
const breakpointPairs = Object.entries(breakpoints);
|
36
38
|
const dynamicFunction = isEven => ({
|
37
39
|
backgroundColor: {
|
38
40
|
':w[,399]': isEven ? 'green' : 'red',
|
39
41
|
':w[400]': isEven ? 'orange' : 'pink'
|
40
42
|
}
|
41
43
|
});
|
42
|
-
expect(proxifyFunction(dynamicFunction, breakpoint, screenSize,
|
44
|
+
expect(proxifyFunction(dynamicFunction, breakpoint, screenSize, breakpointPairs)(false)).toEqual({
|
43
45
|
backgroundColor: 'pink'
|
44
46
|
});
|
45
47
|
});
|
@@ -54,10 +56,11 @@ describe('styles', () => {
|
|
54
56
|
sm: 400,
|
55
57
|
md: 800
|
56
58
|
};
|
59
|
+
const breakpointPairs = Object.entries(breakpoints);
|
57
60
|
const dynamicFunction = isEven => ({
|
58
61
|
backgroundColor: isEven ? 'pink' : 'purple'
|
59
62
|
});
|
60
|
-
expect(proxifyFunction(dynamicFunction, breakpoint, screenSize,
|
63
|
+
expect(proxifyFunction(dynamicFunction, breakpoint, screenSize, breakpointPairs)(false)).toEqual({
|
61
64
|
backgroundColor: 'purple'
|
62
65
|
});
|
63
66
|
});
|
@@ -74,6 +77,7 @@ describe('styles', () => {
|
|
74
77
|
sm: 400,
|
75
78
|
md: 800
|
76
79
|
};
|
80
|
+
const breakpointPairs = Object.entries(breakpoints);
|
77
81
|
const style = {
|
78
82
|
fontSize: {
|
79
83
|
sm: 12,
|
@@ -85,7 +89,8 @@ describe('styles', () => {
|
|
85
89
|
},
|
86
90
|
fontWeight: 'bold'
|
87
91
|
};
|
88
|
-
|
92
|
+
const parsedStyles = parseStyle(style, breakpoint, screenSize, breakpointPairs);
|
93
|
+
expect(parsedStyles).toEqual({
|
89
94
|
fontSize: 12,
|
90
95
|
backgroundColor: 'pink',
|
91
96
|
fontWeight: 'bold'
|
@@ -102,6 +107,7 @@ describe('styles', () => {
|
|
102
107
|
sm: 400,
|
103
108
|
md: 800
|
104
109
|
};
|
110
|
+
const breakpointPairs = Object.entries(breakpoints);
|
105
111
|
const style = {
|
106
112
|
transform: [{
|
107
113
|
translateX: {
|
@@ -111,7 +117,8 @@ describe('styles', () => {
|
|
111
117
|
translateY: 200
|
112
118
|
}]
|
113
119
|
};
|
114
|
-
|
120
|
+
const parsedStyles = parseStyle(style, breakpoint, screenSize, breakpointPairs);
|
121
|
+
expect(parsedStyles).toEqual({
|
115
122
|
transform: [{
|
116
123
|
translateX: 120,
|
117
124
|
translateY: 200
|
@@ -129,6 +136,7 @@ describe('styles', () => {
|
|
129
136
|
sm: 400,
|
130
137
|
md: 800
|
131
138
|
};
|
139
|
+
const breakpointPairs = Object.entries(breakpoints);
|
132
140
|
const style = {
|
133
141
|
shadowOffset: {
|
134
142
|
width: 0,
|
@@ -144,13 +152,15 @@ describe('styles', () => {
|
|
144
152
|
}
|
145
153
|
}
|
146
154
|
};
|
147
|
-
|
155
|
+
const parsedStyles = parseStyle(style, breakpoint, screenSize, breakpointPairs);
|
156
|
+
const parsedStylesWithBreakpoints = parseStyle(styleWithBreakpoints, breakpoint, screenSize, breakpointPairs);
|
157
|
+
expect(parsedStyles).toEqual({
|
148
158
|
shadowOffset: {
|
149
159
|
width: 0,
|
150
160
|
height: 4
|
151
161
|
}
|
152
162
|
});
|
153
|
-
expect(
|
163
|
+
expect(parsedStylesWithBreakpoints).toEqual({
|
154
164
|
shadowOffset: {
|
155
165
|
width: 0,
|
156
166
|
height: 10
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"names":["parseStyle","proxifyFunction","describe","it","screenSize","width","height","breakpoint","breakpoints","xs","sm","md","dynamicFunction","isEven","backgroundColor","expect","toEqual","style","fontSize","fontWeight","transform","translateX","translateY","shadowOffset","styleWithBreakpoints"],"sourceRoot":"../../../src","sources":["utils/styles.spec.ts"],"mappings":"AAAA,SAASA,UAAU,EAAEC,eAAe,QAAQ,UAAU;
|
1
|
+
{"version":3,"names":["parseStyle","proxifyFunction","describe","it","screenSize","width","height","breakpoint","breakpoints","xs","sm","md","breakpointPairs","Object","entries","dynamicFunction","isEven","backgroundColor","expect","toEqual","style","fontSize","fontWeight","parsedStyles","transform","translateX","translateY","shadowOffset","styleWithBreakpoints","parsedStylesWithBreakpoints"],"sourceRoot":"../../../src","sources":["utils/styles.spec.ts"],"mappings":"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"}
|
@@ -1,5 +1,5 @@
|
|
1
|
-
import type { CreateStylesFactory, CustomNamedStyles, ExtractBreakpoints, RemoveKeysWithPrefix } from './types';
|
2
|
-
export declare const createUnistyles: <B extends
|
1
|
+
import type { Breakpoints, CreateStylesFactory, CustomNamedStyles, ExtractBreakpoints, RemoveKeysWithPrefix } from './types';
|
2
|
+
export declare const createUnistyles: <B extends Breakpoints, T = {}>(breakpoints: B) => {
|
3
3
|
/**
|
4
4
|
* @deprecated The method should not be used, proposed version by the community is createStyleSheet, will be removed in RC
|
5
5
|
*/
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"createUnistyles.d.ts","sourceRoot":"","sources":["../../../src/createUnistyles.ts"],"names":[],"mappings":"
|
1
|
+
{"version":3,"file":"createUnistyles.d.ts","sourceRoot":"","sources":["../../../src/createUnistyles.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EACR,WAAW,EACX,mBAAmB,EACnB,iBAAiB,EACjB,kBAAkB,EAClB,oBAAoB,EAEvB,MAAM,SAAS,CAAA;AAKhB,eAAO,MAAM,eAAe;IAMpB;;OAEG;;;;;;;CAuDV,CAAA"}
|
@@ -0,0 +1,2 @@
|
|
1
|
+
export type MediaQueries = `:w[${bigint}]` | `:w[,${bigint}]` | `:w[${bigint},${bigint}]` | `:h[${bigint}]` | `:h[,${bigint}]` | `:h[${bigint},${bigint}]` | `:w[${bigint}]:h[${bigint}]` | `:w[${bigint},${bigint}]:h[${bigint}]` | `:w[${bigint}]:h[${bigint},${bigint}]` | `:w[${bigint},${bigint}]:h[${bigint},${bigint}]` | `:w[,${bigint}]:h[,${bigint}]` | `:w[,${bigint}]:h[${bigint}]` | `:w[${bigint}]:h[,${bigint}]` | `:w[,${bigint}]:h[${bigint},${bigint}]` | `:w[${bigint},${bigint}]:h[,${bigint}]` | `:h[${bigint}]:w[${bigint}]` | `:h[${bigint},${bigint}]:w[${bigint}]` | `:h[${bigint}]:w[${bigint},${bigint}]` | `:h[${bigint},${bigint}]:w[${bigint},${bigint}]` | `:h[,${bigint}]:w[,${bigint}]` | `:h[,${bigint}]:w[${bigint}]` | `:h[${bigint}]:w[,${bigint}]` | `:h[,${bigint}]:w[${bigint},${bigint}]` | `:h[${bigint},${bigint}]:w[,${bigint}]`;
|
2
|
+
//# sourceMappingURL=mediaQueries.d.ts.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"mediaQueries.d.ts","sourceRoot":"","sources":["../../../src/mediaQueries.ts"],"names":[],"mappings":"AACA,MAAM,MAAM,YAAY,GAExB,MAAM,MAAM,GAAG,GACf,OAAO,MAAM,GAAG,GAChB,MAAM,MAAM,IAAI,MAAM,GAAG,GAGzB,MAAM,MAAM,GAAG,GACf,OAAO,MAAM,GAAG,GAChB,MAAM,MAAM,IAAI,MAAM,GAAG,GAGzB,MAAM,MAAM,OAAO,MAAM,GAAG,GAC5B,MAAM,MAAM,IAAI,MAAM,OAAO,MAAM,GAAG,GACtC,MAAM,MAAM,OAAO,MAAM,IAAI,MAAM,GAAG,GACtC,MAAM,MAAM,IAAI,MAAM,OAAO,MAAM,IAAI,MAAM,GAAG,GAChD,OAAO,MAAM,QAAQ,MAAM,GAAG,GAC9B,OAAO,MAAM,OAAO,MAAM,GAAG,GAC7B,MAAM,MAAM,QAAQ,MAAM,GAAG,GAC7B,OAAO,MAAM,OAAO,MAAM,IAAI,MAAM,GAAG,GACvC,MAAM,MAAM,IAAI,MAAM,QAAQ,MAAM,GAAG,GAGvC,MAAM,MAAM,OAAO,MAAM,GAAG,GAC5B,MAAM,MAAM,IAAI,MAAM,OAAO,MAAM,GAAG,GACtC,MAAM,MAAM,OAAO,MAAM,IAAI,MAAM,GAAG,GACtC,MAAM,MAAM,IAAI,MAAM,OAAO,MAAM,IAAI,MAAM,GAAG,GAChD,OAAO,MAAM,QAAQ,MAAM,GAAG,GAC9B,OAAO,MAAM,OAAO,MAAM,GAAG,GAC7B,MAAM,MAAM,QAAQ,MAAM,GAAG,GAC7B,OAAO,MAAM,OAAO,MAAM,IAAI,MAAM,GAAG,GACvC,MAAM,MAAM,IAAI,MAAM,QAAQ,MAAM,GAAG,CAAA"}
|
@@ -1,43 +1,65 @@
|
|
1
1
|
import type { ImageStyle, TextStyle, ViewStyle } from 'react-native';
|
2
2
|
import type { MatrixTransform, PerpectiveTransform, RotateTransform, RotateXTransform, RotateYTransform, RotateZTransform, ScaleTransform, ScaleXTransform, ScaleYTransform, SkewXTransform, SkewYTransform, TranslateXTransform, TranslateYTransform } from 'react-native/Libraries/StyleSheet/StyleSheetTypes';
|
3
|
+
import type { MediaQueries } from './mediaQueries';
|
4
|
+
export type Breakpoints = Record<string, number>;
|
5
|
+
export type SortedBreakpointEntries<B extends Breakpoints> = [[keyof B & string, number]];
|
3
6
|
export type ScreenSize = {
|
4
7
|
width: number;
|
5
8
|
height: number;
|
6
9
|
};
|
7
10
|
export type CreateStylesFactory<ST, Theme> = (theme: Theme) => ST;
|
8
|
-
type StyleProperty<T, B extends
|
11
|
+
type StyleProperty<T, B extends Breakpoints> = {
|
9
12
|
[K in keyof T]: {
|
10
13
|
[innerKey in keyof B]?: T[K];
|
11
14
|
} | {
|
12
|
-
[innerKey in
|
15
|
+
[innerKey in MediaQueries]?: T[K];
|
13
16
|
} | T[K];
|
14
17
|
};
|
15
|
-
type ShadowOffsetProps<B
|
18
|
+
type ShadowOffsetProps<B> = {
|
16
19
|
shadowOffset: {
|
17
20
|
width: number | {
|
18
21
|
[innerKey in keyof B]?: number;
|
22
|
+
} | {
|
23
|
+
[innerKey in MediaQueries]: number;
|
19
24
|
};
|
20
25
|
height: number | {
|
21
26
|
[innerKey in keyof B]?: number;
|
27
|
+
} | {
|
28
|
+
[innerKey in MediaQueries]: number;
|
22
29
|
};
|
23
30
|
};
|
24
31
|
};
|
25
|
-
type
|
26
|
-
|
32
|
+
type TextShadowOffsetProps<B> = {
|
33
|
+
textShadowOffset: {
|
34
|
+
width: number | {
|
35
|
+
[innerKey in keyof B]?: number;
|
36
|
+
} | {
|
37
|
+
[innerKey in MediaQueries]: number;
|
38
|
+
};
|
39
|
+
height: number | {
|
40
|
+
[innerKey in keyof B]?: number;
|
41
|
+
} | {
|
42
|
+
[innerKey in MediaQueries]: number;
|
43
|
+
};
|
44
|
+
};
|
45
|
+
};
|
46
|
+
type TransformStyles<B extends Breakpoints> = PerpectiveTransform | StyleProperty<PerpectiveTransform, B> | RotateTransform | StyleProperty<RotateTransform, B> | RotateXTransform | StyleProperty<RotateXTransform, B> | RotateYTransform | StyleProperty<RotateYTransform, B> | RotateZTransform | StyleProperty<RotateZTransform, B> | ScaleTransform | StyleProperty<ScaleTransform, B> | ScaleXTransform | StyleProperty<ScaleXTransform, B> | ScaleYTransform | StyleProperty<ScaleYTransform, B> | TranslateXTransform | StyleProperty<TranslateXTransform, B> | TranslateYTransform | StyleProperty<TranslateYTransform, B> | SkewXTransform | StyleProperty<SkewXTransform, B> | SkewYTransform | StyleProperty<SkewYTransform, B> | MatrixTransform | StyleProperty<MatrixTransform, B>;
|
47
|
+
type TransformProps<B extends Breakpoints> = {
|
27
48
|
transform: Array<TransformStyles<B>>;
|
28
49
|
};
|
29
|
-
type UnistyleView = Omit<Omit<ViewStyle, 'shadowOffset'>, 'transform'>;
|
30
|
-
type UnistyleText = Omit<Omit<TextStyle, 'shadowOffset'>, 'transform'>;
|
31
|
-
type UnistyleImage = Omit<Omit<ImageStyle, 'shadowOffset'>, 'transform'>;
|
32
|
-
export type StaticStyles<B extends
|
33
|
-
export type CustomNamedStyles<T, B extends
|
50
|
+
type UnistyleView = Omit<Omit<Omit<ViewStyle, 'shadowOffset'>, 'transform'>, 'textShadowOffset'>;
|
51
|
+
type UnistyleText = Omit<Omit<Omit<TextStyle, 'shadowOffset'>, 'transform'>, 'textShadowOffset'>;
|
52
|
+
type UnistyleImage = Omit<Omit<Omit<ImageStyle, 'shadowOffset'>, 'transform'>, 'textShadowOffset'>;
|
53
|
+
export type StaticStyles<B extends Breakpoints> = (UnistyleView | StyleProperty<UnistyleView, B>) | (UnistyleText | StyleProperty<UnistyleText, B>) | (UnistyleImage | StyleProperty<UnistyleImage, B>) & TransformProps<B> & ShadowOffsetProps<B> & TextShadowOffsetProps<B>;
|
54
|
+
export type CustomNamedStyles<T, B extends Breakpoints> = {
|
34
55
|
[K in keyof T]: T[K] extends (...args: infer A) => unknown ? (...args: A) => StaticStyles<B> : StaticStyles<B>;
|
35
56
|
};
|
36
|
-
|
57
|
+
type WithEmptyObject<V> = keyof V extends never ? {} : V;
|
58
|
+
export type ExtractBreakpoints<T, B extends Breakpoints> = T extends Partial<Record<keyof B & string, infer V>> ? WithEmptyObject<V> : T extends (...args: infer A) => infer R ? (...args: A) => ExtractBreakpoints<R, B> : {
|
37
59
|
[K in keyof T]: T[K] extends (...args: infer A) => infer R ? (...args: A) => ExtractBreakpoints<R, B> : T[K] extends object ? ExtractBreakpoints<T[K], B> : T[K];
|
38
60
|
};
|
39
|
-
export type RemoveKeysWithPrefix<T, B extends
|
40
|
-
[K in keyof T as K extends
|
61
|
+
export type RemoveKeysWithPrefix<T, B extends Breakpoints> = T extends (...args: Array<any>) => infer R ? (...args: Parameters<T>) => RemoveKeysWithPrefix<R, B> : T extends object ? T extends Record<string, infer _V> ? {
|
62
|
+
[K in keyof T as K extends MediaQueries ? keyof B & string : K]: RemoveKeysWithPrefix<T[K], B>;
|
41
63
|
} : {
|
42
64
|
[K in keyof T]: RemoveKeysWithPrefix<T[K], B>;
|
43
65
|
} : T;
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AACpE,OAAO,KAAK,EACR,eAAe,EACf,mBAAmB,EACnB,eAAe,EACf,gBAAgB,EAChB,gBAAgB,EAChB,gBAAgB,EAChB,cAAc,EACd,eAAe,EACf,eAAe,EACf,cAAc,EACd,cAAc,EACd,mBAAmB,EACnB,mBAAmB,EACtB,MAAM,mDAAmD,CAAA;
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/types.ts"],"names":[],"mappings":"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"}
|
@@ -1,4 +1,4 @@
|
|
1
|
-
import type { ScreenSize } from '../types';
|
1
|
+
import type { Breakpoints, ScreenSize, SortedBreakpointEntries } from '../types';
|
2
2
|
/**
|
3
3
|
* Sorts the breakpoints object based on its numeric values in ascending order and validates them.
|
4
4
|
*
|
@@ -18,7 +18,7 @@ import type { ScreenSize } from '../types';
|
|
18
18
|
* const input = { md: 768, lg: 1024, sm: 0 }
|
19
19
|
* sortAndValidateBreakpoints(input) // returns { sm: 0, md: 768, lg: 1024 }
|
20
20
|
*/
|
21
|
-
export declare const sortAndValidateBreakpoints: <B extends
|
21
|
+
export declare const sortAndValidateBreakpoints: <B extends Breakpoints>(breakpoints: B) => B;
|
22
22
|
/**
|
23
23
|
* Determines the appropriate breakpoint key for a given screen width based on provided breakpoints.
|
24
24
|
*
|
@@ -27,14 +27,14 @@ export declare const sortAndValidateBreakpoints: <B extends Record<string, numbe
|
|
27
27
|
*
|
28
28
|
* @template B - An object type where keys are strings and values are numbers representing screen widths.
|
29
29
|
* @param {number} width - The screen width to determine the breakpoint for.
|
30
|
-
* @param
|
30
|
+
* @param breakpointEntries - sorted pairs of breakpoints
|
31
31
|
* @returns {keyof B & string} The key of the breakpoint that the screen width falls into.
|
32
32
|
*
|
33
33
|
* @example
|
34
34
|
* const breakpoints = { sm: 0, md: 768, lg: 1024 }
|
35
35
|
* getBreakpointFromScreenWidth(800, breakpoints) // returns 'md'
|
36
36
|
*/
|
37
|
-
export declare const getBreakpointFromScreenWidth: <B extends
|
37
|
+
export declare const getBreakpointFromScreenWidth: <B extends Breakpoints>(width: number, breakpointEntries: SortedBreakpointEntries<B>) => keyof B & string;
|
38
38
|
/**
|
39
39
|
* Retrieves the value associated with a given breakpoint or custom media query based on the provided screen size.
|
40
40
|
*
|
@@ -47,7 +47,7 @@ export declare const getBreakpointFromScreenWidth: <B extends Record<string, num
|
|
47
47
|
* @param {Record<keyof B & string, string | number>} value - An object containing values associated with breakpoints or custom media queries.
|
48
48
|
* @param {keyof B & string} breakpoint - The breakpoint name to check against.
|
49
49
|
* @param {ScreenSize} screenSize - An object representing the screen size to be checked against the media queries.
|
50
|
-
* @param
|
50
|
+
* @param breakpointPairs - sorted pairs of breakpoints
|
51
51
|
*
|
52
52
|
* @returns {string | number | undefined} Returns the value associated with the matching breakpoint or custom media query, or `undefined` if no match is found.
|
53
53
|
*
|
@@ -59,5 +59,5 @@ export declare const getBreakpointFromScreenWidth: <B extends Record<string, num
|
|
59
59
|
*
|
60
60
|
* getValueForBreakpoint(values, 'sm', screenSize, breakpoints); // 'value1'
|
61
61
|
*/
|
62
|
-
export declare const getValueForBreakpoint: <B extends
|
62
|
+
export declare const getValueForBreakpoint: <B extends Breakpoints>(value: Record<keyof B & string, string | number | undefined>, breakpoint: keyof B & string, screenSize: ScreenSize, breakpointPairs: SortedBreakpointEntries<B>) => string | number | undefined;
|
63
63
|
//# sourceMappingURL=breakpoints.d.ts.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"breakpoints.d.ts","sourceRoot":"","sources":["../../../../src/utils/breakpoints.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;
|
1
|
+
{"version":3,"file":"breakpoints.d.ts","sourceRoot":"","sources":["../../../../src/utils/breakpoints.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,UAAU,EAAE,uBAAuB,EAAE,MAAM,UAAU,CAAA;AAGhF;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,0BAA0B,8CAuBtC,CAAA;AAED;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,4BAA4B,iCAAkC,MAAM,oEAchF,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,eAAO,MAAM,qBAAqB,kIAGlB,UAAU,kDAEvB,MAAM,GAAG,MAAM,GAAG,SA+BpB,CAAA"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"common.d.ts","sourceRoot":"","sources":["../../../../src/utils/common.ts"],"names":[],"mappings":"
|
1
|
+
{"version":3,"file":"common.d.ts","sourceRoot":"","sources":["../../../../src/utils/common.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,UAAU,YAAa,MAAM,UAEzC,CAAA;AAED,eAAO,MAAM,IAAI,YAAa,MAAM,SAEnC,CAAA;AAED,eAAO,MAAM,KAAK,eAA8B,CAAA"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,4BAA4B,EAAE,0BAA0B,EAAE,MAAM,eAAe,CAAA;AACxF,OAAO,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA"}
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AACnD,OAAO,EAAE,4BAA4B,EAAE,0BAA0B,EAAE,MAAM,eAAe,CAAA;AACxF,OAAO,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA"}
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"normalizeStyles.d.ts","sourceRoot":"","sources":["../../../../src/utils/normalizeStyles.ts"],"names":[],"mappings":"AACA,eAAO,MAAM,eAAe,qBAAgC,CAAA"}
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"normalizeStyles.web.d.ts","sourceRoot":"","sources":["../../../../src/utils/normalizeStyles.web.ts"],"names":[],"mappings":"AA8EA,eAAO,MAAM,eAAe,gCAwB3B,CAAA"}
|
@@ -1,4 +1,4 @@
|
|
1
|
-
import type { CustomNamedStyles, ScreenSize } from '../types';
|
1
|
+
import type { Breakpoints, CustomNamedStyles, ScreenSize, SortedBreakpointEntries } from '../types';
|
2
2
|
/**
|
3
3
|
* Proxies a function to parse its return value for custom media queries or breakpoints.
|
4
4
|
*
|
@@ -7,7 +7,7 @@ import type { CustomNamedStyles, ScreenSize } from '../types';
|
|
7
7
|
* @param {Function} fn - The function to be proxified.
|
8
8
|
* @param {keyof B & string} breakpoint - The breakpoint name to check against.
|
9
9
|
* @param {ScreenSize} screenSize - An object representing the screen size to be checked against the media queries.
|
10
|
-
* @param
|
10
|
+
* @param breakpointPairs - sorted pairs of breakpoints
|
11
11
|
*
|
12
12
|
* @returns {Function} Returns the proxified function
|
13
13
|
*
|
@@ -20,7 +20,7 @@ import type { CustomNamedStyles, ScreenSize } from '../types';
|
|
20
20
|
* const proxifiedFunction = proxifyFunction(myFunction, 'sm', screenSize, breakpoints)
|
21
21
|
* proxifiedFunction() // parsed style based on screenSize and breakpoints
|
22
22
|
*/
|
23
|
-
export declare const proxifyFunction: <B extends
|
23
|
+
export declare const proxifyFunction: <B extends Breakpoints>(fn: Function, breakpoint: keyof B & string, screenSize: ScreenSize, breakpointPairs: SortedBreakpointEntries<B>) => Function;
|
24
24
|
/**
|
25
25
|
* Parses a style object to resolve custom media queries or breakpoints based on the provided screen size and breakpoints.
|
26
26
|
*
|
@@ -33,7 +33,7 @@ export declare const proxifyFunction: <B extends Record<string, number>>(fn: Fun
|
|
33
33
|
* @param {CustomNamedStyles<T, B>} style - The style object to be parsed.
|
34
34
|
* @param {keyof B & string} breakpoint - The breakpoint name to check against.
|
35
35
|
* @param {ScreenSize} screenSize - An object representing the screen size to be checked against the media queries.
|
36
|
-
* @param
|
36
|
+
* @param breakpointPairs - sorted pairs of breakpoints
|
37
37
|
*
|
38
38
|
* @returns {Record<string, string | number | Function>} Returns the parsed style object with resolved custom media queries or breakpoints.
|
39
39
|
*
|
@@ -46,5 +46,5 @@ export declare const proxifyFunction: <B extends Record<string, number>>(fn: Fun
|
|
46
46
|
* const parsedStyle = parseStyle(style, 'sm', screenSize, breakpoints)
|
47
47
|
* // { fontSize: '12px' }
|
48
48
|
*/
|
49
|
-
export declare const parseStyle: <T, B extends
|
49
|
+
export declare const parseStyle: <T, B extends Breakpoints>(style: CustomNamedStyles<T, B>, breakpoint: keyof B & string, screenSize: ScreenSize, breakpointPairs: SortedBreakpointEntries<B>) => T;
|
50
50
|
//# sourceMappingURL=styles.d.ts.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/utils/styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;
|
1
|
+
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/utils/styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,iBAAiB,EAAE,UAAU,EAAE,uBAAuB,EAAE,MAAM,UAAU,CAAA;AAKnG;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,eAAe,8BACpB,QAAQ,4CACA,UAAU,kDAEvB,QAGD,CAAA;AAEF;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,eAAO,MAAM,UAAU,uGAGP,UAAU,mDAmDzB,CAAA"}
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "react-native-unistyles",
|
3
|
-
"version": "1.0.0-beta.
|
3
|
+
"version": "1.0.0-beta.5",
|
4
4
|
"description": "Level up your React Native StyleSheet",
|
5
5
|
"scripts": {
|
6
6
|
"test": "jest",
|
@@ -68,12 +68,19 @@
|
|
68
68
|
"react": "18.2.0",
|
69
69
|
"react-native": "0.72.5",
|
70
70
|
"react-native-builder-bob": "0.23.0",
|
71
|
+
"react-native-web": "0.19.9",
|
71
72
|
"release-it": "16.2.1",
|
72
73
|
"typescript": "5.2.2"
|
73
74
|
},
|
74
75
|
"peerDependencies": {
|
75
76
|
"react": "*",
|
76
|
-
"react-native": "*"
|
77
|
+
"react-native": "*",
|
78
|
+
"react-native-web": "*"
|
79
|
+
},
|
80
|
+
"peerDependenciesMeta": {
|
81
|
+
"react-native-web": {
|
82
|
+
"optional": true
|
83
|
+
}
|
77
84
|
},
|
78
85
|
"workspaces": [
|
79
86
|
"example"
|
package/src/createUnistyles.ts
CHANGED
@@ -1,11 +1,21 @@
|
|
1
1
|
import { useContext } from 'react'
|
2
|
-
import
|
2
|
+
import { StyleSheet } from 'react-native'
|
3
|
+
import type {
|
4
|
+
Breakpoints,
|
5
|
+
CreateStylesFactory,
|
6
|
+
CustomNamedStyles,
|
7
|
+
ExtractBreakpoints,
|
8
|
+
RemoveKeysWithPrefix,
|
9
|
+
SortedBreakpointEntries
|
10
|
+
} from './types'
|
3
11
|
import { UnistylesContext } from './UnistylesTheme'
|
4
|
-
import { getBreakpointFromScreenWidth, proxifyFunction, parseStyle, sortAndValidateBreakpoints } from './utils'
|
5
12
|
import { useDimensions } from './hooks'
|
13
|
+
import { getBreakpointFromScreenWidth, proxifyFunction, parseStyle, sortAndValidateBreakpoints } from './utils'
|
6
14
|
|
7
|
-
export const createUnistyles = <B extends
|
15
|
+
export const createUnistyles = <B extends Breakpoints, T = {}>(breakpoints: B) => {
|
8
16
|
const sortedBreakpoints = sortAndValidateBreakpoints(breakpoints)
|
17
|
+
const sortedBreakpointEntries = Object
|
18
|
+
.entries(sortedBreakpoints) as SortedBreakpointEntries<B>
|
9
19
|
|
10
20
|
return {
|
11
21
|
/**
|
@@ -27,12 +37,7 @@ export const createUnistyles = <B extends Record<string, number>, T = {}>(breakp
|
|
27
37
|
},
|
28
38
|
useStyles: <ST extends CustomNamedStyles<ST, B>>(stylesheet?: ST | CreateStylesFactory<ST, T>) => {
|
29
39
|
const theme = useContext(UnistylesContext) as T
|
30
|
-
const
|
31
|
-
const breakpoint = getBreakpointFromScreenWidth<B>(dimensions.width, sortedBreakpoints)
|
32
|
-
const screenSize: ScreenSize = {
|
33
|
-
width: dimensions.width,
|
34
|
-
height: dimensions.height
|
35
|
-
}
|
40
|
+
const screenSize = useDimensions()
|
36
41
|
|
37
42
|
if (!stylesheet) {
|
38
43
|
return {
|
@@ -44,23 +49,24 @@ export const createUnistyles = <B extends Record<string, number>, T = {}>(breakp
|
|
44
49
|
const parsedStyles = typeof stylesheet === 'function'
|
45
50
|
? stylesheet(theme)
|
46
51
|
: stylesheet
|
52
|
+
const breakpoint = getBreakpointFromScreenWidth<B>(screenSize.width, sortedBreakpointEntries)
|
47
53
|
|
48
54
|
const dynamicStyleSheet = Object
|
49
55
|
.entries(parsedStyles)
|
50
56
|
.reduce((acc, [key, value]) => {
|
51
|
-
const
|
57
|
+
const style = value as CustomNamedStyles<ST, B>
|
52
58
|
|
53
59
|
if (typeof value === 'function') {
|
54
60
|
return {
|
55
61
|
...acc,
|
56
|
-
[key]: proxifyFunction<B>(value, breakpoint, screenSize,
|
62
|
+
[key]: proxifyFunction<B>(value, breakpoint, screenSize, sortedBreakpointEntries)
|
57
63
|
}
|
58
64
|
}
|
59
65
|
|
60
|
-
return {
|
66
|
+
return StyleSheet.create({
|
61
67
|
...acc,
|
62
|
-
[key]: parseStyle<ST, B>(
|
63
|
-
}
|
68
|
+
[key]: parseStyle<ST, B>(style, breakpoint, screenSize, sortedBreakpointEntries)
|
69
|
+
})
|
64
70
|
}, {} as ST)
|
65
71
|
|
66
72
|
return {
|
@@ -0,0 +1,33 @@
|
|
1
|
+
// this is super weird, but number passes empty string and bigint does not
|
2
|
+
export type MediaQueries =
|
3
|
+
// For :w
|
4
|
+
`:w[${bigint}]` |
|
5
|
+
`:w[,${bigint}]` |
|
6
|
+
`:w[${bigint},${bigint}]` |
|
7
|
+
|
8
|
+
// For :h
|
9
|
+
`:h[${bigint}]` |
|
10
|
+
`:h[,${bigint}]` |
|
11
|
+
`:h[${bigint},${bigint}]` |
|
12
|
+
|
13
|
+
// Combinations of :w and :h
|
14
|
+
`:w[${bigint}]:h[${bigint}]` |
|
15
|
+
`:w[${bigint},${bigint}]:h[${bigint}]` |
|
16
|
+
`:w[${bigint}]:h[${bigint},${bigint}]` |
|
17
|
+
`:w[${bigint},${bigint}]:h[${bigint},${bigint}]` |
|
18
|
+
`:w[,${bigint}]:h[,${bigint}]` |
|
19
|
+
`:w[,${bigint}]:h[${bigint}]` |
|
20
|
+
`:w[${bigint}]:h[,${bigint}]` |
|
21
|
+
`:w[,${bigint}]:h[${bigint},${bigint}]` |
|
22
|
+
`:w[${bigint},${bigint}]:h[,${bigint}]` |
|
23
|
+
|
24
|
+
// Combinations of :h and :w
|
25
|
+
`:h[${bigint}]:w[${bigint}]` |
|
26
|
+
`:h[${bigint},${bigint}]:w[${bigint}]` |
|
27
|
+
`:h[${bigint}]:w[${bigint},${bigint}]` |
|
28
|
+
`:h[${bigint},${bigint}]:w[${bigint},${bigint}]` |
|
29
|
+
`:h[,${bigint}]:w[,${bigint}]` |
|
30
|
+
`:h[,${bigint}]:w[${bigint}]` |
|
31
|
+
`:h[${bigint}]:w[,${bigint}]` |
|
32
|
+
`:h[,${bigint}]:w[${bigint},${bigint}]` |
|
33
|
+
`:h[${bigint},${bigint}]:w[,${bigint}]`
|