react-native-unistyles 2.0.0-alpha.4 → 2.0.0-alpha.6
Sign up to get free protection for your applications and to get access to all the features.
- package/cxx/UnistylesRuntime.cpp +262 -0
- package/cxx/UnistylesRuntime.h +61 -0
- package/ios/UnistylesModule.mm +8 -3
- package/lib/commonjs/Unistyles.js +1 -1
- package/lib/commonjs/Unistyles.js.map +1 -1
- package/lib/commonjs/UnistylesEngine.js +9 -5
- package/lib/commonjs/UnistylesEngine.js.map +1 -1
- package/lib/commonjs/createStyleSheet.js.map +1 -1
- package/lib/commonjs/types/cxx.js +1 -2
- package/lib/commonjs/types/cxx.js.map +1 -1
- package/lib/commonjs/useStyles.js +0 -2
- package/lib/commonjs/useStyles.js.map +1 -1
- package/lib/commonjs/useUnistyles.js +9 -15
- package/lib/commonjs/useUnistyles.js.map +1 -1
- package/lib/commonjs/utils/breakpoints.js +23 -70
- package/lib/commonjs/utils/breakpoints.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.js +58 -149
- package/lib/commonjs/utils/mediaQueries.js.map +1 -1
- package/lib/commonjs/utils/styles.js +11 -51
- package/lib/commonjs/utils/styles.js.map +1 -1
- package/lib/module/Unistyles.js +2 -2
- package/lib/module/Unistyles.js.map +1 -1
- package/lib/module/UnistylesEngine.js +7 -3
- package/lib/module/UnistylesEngine.js.map +1 -1
- package/lib/module/createStyleSheet.js.map +1 -1
- package/lib/module/types/cxx.js +1 -2
- package/lib/module/types/cxx.js.map +1 -1
- package/lib/module/useStyles.js +0 -3
- package/lib/module/useStyles.js.map +1 -1
- package/lib/module/useUnistyles.js +9 -15
- package/lib/module/useUnistyles.js.map +1 -1
- package/lib/module/utils/breakpoints.js +24 -71
- package/lib/module/utils/breakpoints.js.map +1 -1
- package/lib/module/utils/common.js +7 -0
- package/lib/module/utils/common.js.map +1 -1
- package/lib/module/utils/index.js +1 -1
- package/lib/module/utils/index.js.map +1 -1
- package/lib/module/utils/mediaQueries.js +58 -149
- package/lib/module/utils/mediaQueries.js.map +1 -1
- package/lib/module/utils/styles.js +10 -51
- package/lib/module/utils/styles.js.map +1 -1
- package/lib/typescript/src/Unistyles.d.ts +2 -2
- package/lib/typescript/src/Unistyles.d.ts.map +1 -1
- package/lib/typescript/src/UnistylesEngine.d.ts +4 -1
- package/lib/typescript/src/UnistylesEngine.d.ts.map +1 -1
- package/lib/typescript/src/UnistylesRuntime.d.ts +2 -2
- package/lib/typescript/src/UnistylesRuntime.d.ts.map +1 -1
- package/lib/typescript/src/createStyleSheet.d.ts +2 -5
- package/lib/typescript/src/createStyleSheet.d.ts.map +1 -1
- package/lib/typescript/src/global.d.ts +2 -1
- package/lib/typescript/src/global.d.ts.map +1 -1
- package/lib/typescript/src/types/breakpoints.d.ts +2 -1
- package/lib/typescript/src/types/breakpoints.d.ts.map +1 -1
- package/lib/typescript/src/types/core.d.ts +18 -16
- package/lib/typescript/src/types/core.d.ts.map +1 -1
- package/lib/typescript/src/types/cxx.d.ts +15 -14
- package/lib/typescript/src/types/cxx.d.ts.map +1 -1
- package/lib/typescript/src/types/index.d.ts +1 -1
- package/lib/typescript/src/types/index.d.ts.map +1 -1
- package/lib/typescript/src/types/mediaQueries.d.ts +5 -3
- package/lib/typescript/src/types/mediaQueries.d.ts.map +1 -1
- package/lib/typescript/src/useStyles.d.ts +2 -4
- package/lib/typescript/src/useStyles.d.ts.map +1 -1
- package/lib/typescript/src/useUnistyles.d.ts +3 -1
- package/lib/typescript/src/useUnistyles.d.ts.map +1 -1
- package/lib/typescript/src/utils/breakpoints.d.ts +2 -60
- package/lib/typescript/src/utils/breakpoints.d.ts.map +1 -1
- package/lib/typescript/src/utils/common.d.ts +7 -0
- package/lib/typescript/src/utils/common.d.ts.map +1 -1
- package/lib/typescript/src/utils/index.d.ts +1 -1
- package/lib/typescript/src/utils/index.d.ts.map +1 -1
- package/lib/typescript/src/utils/mediaQueries.d.ts +8 -127
- package/lib/typescript/src/utils/mediaQueries.d.ts.map +1 -1
- package/lib/typescript/src/utils/styles.d.ts +1 -46
- package/lib/typescript/src/utils/styles.d.ts.map +1 -1
- package/package.json +10 -1
- package/src/Unistyles.ts +3 -3
- package/src/UnistylesEngine.ts +12 -3
- package/src/createStyleSheet.ts +2 -5
- package/src/global.ts +2 -1
- package/src/types/breakpoints.ts +6 -3
- package/src/types/core.ts +25 -22
- package/src/types/cxx.ts +17 -16
- package/src/types/index.ts +1 -1
- package/src/types/mediaQueries.ts +9 -4
- package/src/useStyles.ts +5 -8
- package/src/useUnistyles.ts +12 -24
- package/src/utils/breakpoints.ts +31 -74
- package/src/utils/common.ts +8 -0
- package/src/utils/index.ts +1 -1
- package/src/utils/mediaQueries.ts +105 -154
- package/src/utils/styles.ts +13 -55
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"names":["NativeEventEmitter","NativeModules","useEffect","useState","CxxUnistylesEventTypes","unistyles","unistylesEvents","Unistyles","useUnistyles","
|
1
|
+
{"version":3,"names":["NativeEventEmitter","NativeModules","useEffect","useState","CxxUnistylesEventTypes","unistyles","unistylesEvents","Unistyles","useUnistyles","orientation","setOrientation","runtime","theme","setTheme","getTheme","themeName","breakpoint","setBreakpoint","screenSize","setScreenSize","width","screen","height","subscription","addListener","event","type","Theme","themeEvent","payload","Layout","layoutEvent","remove"],"sourceRoot":"../../src","sources":["useUnistyles.ts"],"mappings":"AAAA,SAASA,kBAAkB,EAAEC,aAAa,QAAQ,cAAc;AAChE,SAASC,SAAS,EAAEC,QAAQ,QAAQ,OAAO;AAE3C,SAASC,sBAAsB,QAA2B,SAAS;AACnE,SAASC,SAAS,QAAQ,aAAa;AAEvC,MAAMC,eAAe,GAAG,IAAIN,kBAAkB,CAACC,aAAa,CAACM,SAAS,CAAC;AAEvE,OAAO,MAAMC,YAAY,GAAGA,CAAA,KAAM;EAC9B,MAAM,CAACC,WAAW,EAAEC,cAAc,CAAC,GAAGP,QAAQ,CAAoBE,SAAS,CAACM,OAAO,CAACF,WAAW,CAAC;EAChG,MAAM,CAACG,KAAK,EAAEC,QAAQ,CAAC,GAAGV,QAAQ,CAACE,SAAS,CAACM,OAAO,CAACG,QAAQ,CAACT,SAAS,CAACM,OAAO,CAACI,SAAS,CAAC,CAAC;EAC3F,MAAM,CAACC,UAAU,EAAEC,aAAa,CAAC,GAAGd,QAAQ,CAACE,SAAS,CAACM,OAAO,CAACK,UAAU,CAAC;EAC1E,MAAM,CAACE,UAAU,EAAEC,aAAa,CAAC,GAAGhB,QAAQ,CAAC;IACzCiB,KAAK,EAAEf,SAAS,CAACM,OAAO,CAACU,MAAM,CAACD,KAAK;IACrCE,MAAM,EAAEjB,SAAS,CAACM,OAAO,CAACU,MAAM,CAACC;EACrC,CAAC,CAAC;EAEFpB,SAAS,CAAC,MAAM;IACZ,MAAMqB,YAAY,GAAGjB,eAAe,CAACkB,WAAW,CAC5C,UAAU,EACTC,KAAsB,IAAK;MACxB,QAAQA,KAAK,CAACC,IAAI;QACd,KAAKtB,sBAAsB,CAACuB,KAAK;UAAE;YAC/B,MAAMC,UAAU,GAAGH,KAA4B;YAE/CZ,QAAQ,CAACR,SAAS,CAACM,OAAO,CAACG,QAAQ,CAACc,UAAU,CAACC,OAAO,CAACd,SAAS,CAAC,CAAC;YAElE;UACJ;QACA,KAAKX,sBAAsB,CAAC0B,MAAM;UAAE;YAChC,MAAMC,WAAW,GAAGN,KAAmC;YAEvDR,aAAa,CAACc,WAAW,CAACF,OAAO,CAACb,UAAU,CAAC;YAC7CN,cAAc,CAACqB,WAAW,CAACF,OAAO,CAACpB,WAAW,CAAC;YAC/CU,aAAa,CAACY,WAAW,CAACF,OAAO,CAACR,MAAM,CAAC;YAEzC;UACJ;QACA;UACI;MACR;IACJ,CACJ,CAAC;IAED,OAAOE,YAAY,CAACS,MAAM;EAC9B,CAAC,EAAE,EAAE,CAAC;EAEN,OAAO;IACHpB,KAAK;IACLH,WAAW;IACXO,UAAU;IACVE;EACJ,CAAC;AACL,CAAC"}
|
@@ -1,25 +1,6 @@
|
|
1
1
|
import { unistyles } from '../Unistyles';
|
2
|
-
import { throwError } from './common';
|
3
|
-
import {
|
4
|
-
/**
|
5
|
-
* Sorts the breakpoints object based on its numeric values in ascending order and validates them.
|
6
|
-
*
|
7
|
-
* This function takes an object where keys represent breakpoint names and values are numeric.
|
8
|
-
* It returns a new object with the same keys but sorted based on their corresponding numeric values.
|
9
|
-
* Additionally, it validates that:
|
10
|
-
* 1. The first breakpoint starts with a value of 0.
|
11
|
-
* 2. No duplicate breakpoint values exist.
|
12
|
-
*
|
13
|
-
* If the validation fails, appropriate error messages are logged to the console.
|
14
|
-
*
|
15
|
-
* @template B - An object type where keys are strings and values are numbers.
|
16
|
-
* @param {B} breakpoints - The breakpoints object to be sorted and validated.
|
17
|
-
* @returns {B} A new object with sorted and validated breakpoints.
|
18
|
-
*
|
19
|
-
* @example
|
20
|
-
* const input = { md: 768, lg: 1024, sm: 0 }
|
21
|
-
* sortAndValidateBreakpoints(input) // returns { sm: 0, md: 768, lg: 1024 }
|
22
|
-
*/
|
2
|
+
import { isMobile, Orientation, throwError } from './common';
|
3
|
+
import { ScreenOrientation } from '../types';
|
23
4
|
export const sortAndValidateBreakpoints = breakpoints => {
|
24
5
|
const sortedPairs = Object.entries(breakpoints).sort((breakpoint1, breakpoint2) => {
|
25
6
|
const [, value1] = breakpoint1;
|
@@ -37,22 +18,6 @@ export const sortAndValidateBreakpoints = breakpoints => {
|
|
37
18
|
}
|
38
19
|
return sortedBreakpoints;
|
39
20
|
};
|
40
|
-
|
41
|
-
/**
|
42
|
-
* Determines the appropriate breakpoint key for a given screen width based on provided breakpoints.
|
43
|
-
*
|
44
|
-
* This function takes a screen width and an object of breakpoints. It returns the key of the breakpoint
|
45
|
-
* that the screen width falls into. The breakpoints are assumed to be sorted in ascending order.
|
46
|
-
*
|
47
|
-
* @template B - An object type where keys are strings and values are numbers representing screen widths.
|
48
|
-
* @param {number} width - The screen width to determine the breakpoint for.
|
49
|
-
* @param breakpointEntries - sorted pairs of breakpoints
|
50
|
-
* @returns {keyof B & string} The key of the breakpoint that the screen width falls into.
|
51
|
-
*
|
52
|
-
* @example
|
53
|
-
* const breakpoints = { sm: 0, md: 768, lg: 1024 }
|
54
|
-
* getBreakpointFromScreenWidth(800, breakpoints) // returns 'md'
|
55
|
-
*/
|
56
21
|
export const getBreakpointFromScreenWidth = (width, breakpointEntries) => {
|
57
22
|
const [key] = breakpointEntries.find((_ref, index, otherBreakpoints) => {
|
58
23
|
let [, value] = _ref;
|
@@ -65,56 +30,44 @@ export const getBreakpointFromScreenWidth = (width, breakpointEntries) => {
|
|
65
30
|
});
|
66
31
|
return key;
|
67
32
|
};
|
68
|
-
|
69
|
-
/**
|
70
|
-
* Retrieves the value associated with a given breakpoint or custom media query based on the provided screen size.
|
71
|
-
*
|
72
|
-
* The function first checks for custom media queries. If a matching custom media query is found, its associated value is returned.
|
73
|
-
* If no custom media query matches, the function then checks for a direct breakpoint match.
|
74
|
-
* If there's no direct breakpoint match, the function simulates CSS cascading to find the closest matching breakpoint.
|
75
|
-
*
|
76
|
-
* @template B - An object type where keys represent breakpoint names and values represent breakpoint values.
|
77
|
-
*
|
78
|
-
* @param {Record<keyof B & string, string | number>} value - An object containing values associated with breakpoints or custom media queries.
|
79
|
-
* @param {keyof B & string} breakpoint - The breakpoint name to check against.
|
80
|
-
* @param {ScreenSize} screenSize - An object representing the screen size to be checked against the media queries.
|
81
|
-
* @param breakpointPairs - sorted pairs of breakpoints
|
82
|
-
*
|
83
|
-
* @returns {string | number | undefined} Returns the value associated with the matching breakpoint or custom media query, or `undefined` if no match is found.
|
84
|
-
*
|
85
|
-
* @example
|
86
|
-
*
|
87
|
-
* const values = { ':w[200]': 'value1', sm: 'value2', md: 'value3' }
|
88
|
-
* const screenSize = { width: 250, height: 400 }
|
89
|
-
* const breakpoints = { sm: 300, md: 600, lg: 900 }
|
90
|
-
*
|
91
|
-
* getValueForBreakpoint(values, 'sm', screenSize, breakpoints); // 'value1'
|
92
|
-
*/
|
93
|
-
export const getValueForBreakpoint = (value, breakpoint, screenSize) => {
|
33
|
+
export const getValueForBreakpoint = value => {
|
94
34
|
// the highest priority is for custom media queries
|
95
35
|
const customMediaQueries = Object.entries(value).filter(_ref2 => {
|
96
36
|
let [key] = _ref2;
|
97
|
-
return isMediaQuery(key);
|
37
|
+
return unistyles.engine.isMediaQuery(key);
|
98
38
|
});
|
99
|
-
const customMediaQueryKey = getKeyForCustomMediaQuery(customMediaQueries, screenSize)
|
39
|
+
// const customMediaQueryKey = getKeyForCustomMediaQuery(customMediaQueries, screenSize) as keyof typeof value
|
40
|
+
const customMediaQueryKey = unistyles.engine.didMatchMediaQuery(customMediaQueries);
|
100
41
|
if (customMediaQueryKey && customMediaQueryKey in value) {
|
101
42
|
return value[customMediaQueryKey];
|
102
43
|
}
|
103
44
|
|
104
|
-
//
|
105
|
-
|
106
|
-
const
|
45
|
+
// at this point user didn't use custom media queries (:w, :h)
|
46
|
+
// check if user defined any breakpoints
|
47
|
+
const hasBreakpoints = unistyles.runtime.sortedBreakpoints.length > 0;
|
48
|
+
|
49
|
+
// if not then we can fallback to horizontal and portrait (mobile only)
|
50
|
+
if (!hasBreakpoints && isMobile && (Orientation.Landscape in value || Orientation.Portrait in value)) {
|
51
|
+
return value[unistyles.runtime.orientation === ScreenOrientation.Portrait ? Orientation.Portrait : Orientation.Landscape];
|
52
|
+
}
|
53
|
+
const breakpoint = unistyles.runtime.breakpoint;
|
54
|
+
if (!breakpoint) {
|
55
|
+
return undefined;
|
56
|
+
}
|
57
|
+
|
58
|
+
// if user defined breakpoints, then we look for the valid one
|
59
|
+
const directBreakpoint = value[breakpoint];
|
107
60
|
|
108
61
|
// if there is a direct key like 'sm' or 'md', or value for this key exists but its undefined
|
109
|
-
if (directBreakpoint ||
|
62
|
+
if (directBreakpoint || breakpoint in value) {
|
110
63
|
return directBreakpoint;
|
111
64
|
}
|
112
65
|
|
113
|
-
// there is no direct hit for breakpoint nor media-query,
|
66
|
+
// there is no direct hit for breakpoint nor media-query, let's simulate CSS cascading
|
114
67
|
const breakpointPairs = unistyles.runtime.sortedBreakpoints;
|
115
68
|
const currentBreakpoint = breakpointPairs.findIndex(_ref3 => {
|
116
69
|
let [key] = _ref3;
|
117
|
-
return key ===
|
70
|
+
return key === breakpoint;
|
118
71
|
});
|
119
72
|
const availableBreakpoints = breakpointPairs.filter((_ref4, index) => {
|
120
73
|
let [key] = _ref4;
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"names":["unistyles","
|
1
|
+
{"version":3,"names":["unistyles","isMobile","Orientation","throwError","ScreenOrientation","sortAndValidateBreakpoints","breakpoints","sortedPairs","Object","entries","sort","breakpoint1","breakpoint2","value1","value2","sortedBreakpoints","freeze","fromEntries","breakpointValues","values","firstBreakpoint","length","Set","size","getBreakpointFromScreenWidth","width","breakpointEntries","key","find","_ref","index","otherBreakpoints","value","minVal","maxVal","getValueForBreakpoint","customMediaQueries","filter","_ref2","engine","isMediaQuery","customMediaQueryKey","didMatchMediaQuery","hasBreakpoints","runtime","Landscape","Portrait","orientation","breakpoint","undefined","directBreakpoint","breakpointPairs","currentBreakpoint","findIndex","_ref3","availableBreakpoints","_ref4","map","_ref5"],"sourceRoot":"../../../src","sources":["utils/breakpoints.ts"],"mappings":"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"}
|
@@ -5,6 +5,13 @@ export const throwError = message => {
|
|
5
5
|
export const warn = message => {
|
6
6
|
console.warn(`🦄 [react-native-unistyles]: ${message}`);
|
7
7
|
};
|
8
|
+
export const isMobile = Platform.OS === 'android' || Platform.OS === 'ios';
|
8
9
|
export const isWeb = Platform.OS === 'web';
|
10
|
+
export const isIOS = Platform.OS === 'ios';
|
11
|
+
export const isAndroid = Platform.OS === 'android';
|
9
12
|
export const isServer = typeof window === 'undefined';
|
13
|
+
export const Orientation = {
|
14
|
+
Landscape: 'landscape',
|
15
|
+
Portrait: 'portrait'
|
16
|
+
};
|
10
17
|
//# sourceMappingURL=common.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"names":["Platform","throwError","message","Error","warn","console","
|
1
|
+
{"version":3,"names":["Platform","throwError","message","Error","warn","console","isMobile","OS","isWeb","isIOS","isAndroid","isServer","window","Orientation","Landscape","Portrait"],"sourceRoot":"../../../src","sources":["utils/common.ts"],"mappings":"AAAA,SAASA,QAAQ,QAAQ,cAAc;AAEvC,OAAO,MAAMC,UAAU,GAAIC,OAAe,IAAK;EAC3C,MAAM,IAAIC,KAAK,CAAE,gCAA+BD,OAAQ,EAAC,CAAC;AAC9D,CAAC;AAED,OAAO,MAAME,IAAI,GAAIF,OAAe,IAAK;EACrCG,OAAO,CAACD,IAAI,CAAE,gCAA+BF,OAAQ,EAAC,CAAC;AAC3D,CAAC;AAED,OAAO,MAAMI,QAAQ,GAAGN,QAAQ,CAACO,EAAE,KAAK,SAAS,IAAIP,QAAQ,CAACO,EAAE,KAAK,KAAK;AAC1E,OAAO,MAAMC,KAAK,GAAGR,QAAQ,CAACO,EAAE,KAAK,KAAK;AAC1C,OAAO,MAAME,KAAK,GAAGT,QAAQ,CAACO,EAAE,KAAK,KAAK;AAC1C,OAAO,MAAMG,SAAS,GAAGV,QAAQ,CAACO,EAAE,KAAK,SAAS;AAClD,OAAO,MAAMI,QAAQ,GAAG,OAAOC,MAAM,KAAK,WAAW;AAErD,OAAO,MAAMC,WAAW,GAAG;EACvBC,SAAS,EAAE,WAAW;EACtBC,QAAQ,EAAE;AACd,CAAU"}
|
@@ -2,6 +2,6 @@ export { normalizeStyles } from './normalizeStyles';
|
|
2
2
|
export * from './normalizer';
|
3
3
|
export { getBreakpointFromScreenWidth, sortAndValidateBreakpoints, getValueForBreakpoint } from './breakpoints';
|
4
4
|
export { proxifyFunction, parseStyle } from './styles';
|
5
|
-
export { isServer } from './common';
|
5
|
+
export { isServer, Orientation } from './common';
|
6
6
|
export { extractValues, getKeyForCustomMediaQuery, isMediaQuery, isWithinTheHeight, isWithinTheWidth, isWithinTheWidthAndHeight } from './mediaQueries';
|
7
7
|
//# sourceMappingURL=index.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"names":["normalizeStyles","getBreakpointFromScreenWidth","sortAndValidateBreakpoints","getValueForBreakpoint","proxifyFunction","parseStyle","isServer","extractValues","getKeyForCustomMediaQuery","isMediaQuery","isWithinTheHeight","isWithinTheWidth","isWithinTheWidthAndHeight"],"sourceRoot":"../../../src","sources":["utils/index.ts"],"mappings":"AAAA,SAASA,eAAe,QAAQ,mBAAmB;AACnD,cAAc,cAAc;AAC5B,SAASC,4BAA4B,EAAEC,0BAA0B,EAAEC,qBAAqB,QAAQ,eAAe;AAC/G,SAASC,eAAe,EAAEC,UAAU,QAAQ,UAAU;AACtD,SAASC,QAAQ,QAAQ,UAAU;
|
1
|
+
{"version":3,"names":["normalizeStyles","getBreakpointFromScreenWidth","sortAndValidateBreakpoints","getValueForBreakpoint","proxifyFunction","parseStyle","isServer","Orientation","extractValues","getKeyForCustomMediaQuery","isMediaQuery","isWithinTheHeight","isWithinTheWidth","isWithinTheWidthAndHeight"],"sourceRoot":"../../../src","sources":["utils/index.ts"],"mappings":"AAAA,SAASA,eAAe,QAAQ,mBAAmB;AACnD,cAAc,cAAc;AAC5B,SAASC,4BAA4B,EAAEC,0BAA0B,EAAEC,qBAAqB,QAAQ,eAAe;AAC/G,SAASC,eAAe,EAAEC,UAAU,QAAQ,UAAU;AACtD,SAASC,QAAQ,EAAEC,WAAW,QAAQ,UAAU;AAChD,SACIC,aAAa,EACbC,yBAAyB,EACzBC,YAAY,EACZC,iBAAiB,EACjBC,gBAAgB,EAChBC,yBAAyB,QACtB,gBAAgB"}
|
@@ -1,175 +1,84 @@
|
|
1
|
-
|
2
|
-
|
3
|
-
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
1
|
+
const parseLhs = (lhs, breakpoints, hasRhs) => {
|
2
|
+
const matches = lhs.match(/([([])|([^[\]()]+)|([\])])/g);
|
3
|
+
if (!hasRhs) {
|
4
|
+
const [openBracket, value, closeBracket] = matches;
|
5
|
+
const spacelessValue = value?.trim();
|
6
|
+
const parsedNumber = Number(spacelessValue);
|
7
|
+
const parsedValue = isNaN(parsedNumber) ? breakpoints[spacelessValue] : parsedNumber;
|
8
|
+
return [Number(openBracket === '('), closeBracket === ')' ? parsedValue - 1 : parsedValue];
|
9
|
+
}
|
10
|
+
const [openBracket, value] = matches;
|
11
|
+
if (!value) {
|
12
|
+
return [Number(openBracket === '(')];
|
13
|
+
}
|
14
|
+
const spacelessValue = value?.trim();
|
15
|
+
const parsedNumber = Number(spacelessValue);
|
16
|
+
const parsedValue = isNaN(parsedNumber) ? breakpoints[spacelessValue] : parsedNumber;
|
17
|
+
return openBracket === '(' ? [parsedValue - 1] : [parsedValue];
|
18
|
+
};
|
19
|
+
const parseRhs = (rhs, breakpoints) => {
|
20
|
+
const matches = rhs.match(/([([])|([^[\]()]+)|([\])])/g);
|
21
|
+
const [value, closeBrackets] = matches;
|
22
|
+
const spacelessValue = value.trim();
|
23
|
+
const parsedNumber = Number(spacelessValue);
|
24
|
+
const parsedValue = isNaN(parsedNumber) ? breakpoints[spacelessValue] : parsedNumber;
|
25
|
+
return [closeBrackets === ')' ? parsedValue - 1 : parsedValue];
|
26
|
+
};
|
27
|
+
export const extractValues = (pattern, breakpoints) => {
|
28
|
+
const [lhs, rhs] = pattern.replace(/(:w|:h)/g, '').split(',');
|
29
|
+
if (!rhs) {
|
30
|
+
return parseLhs(lhs, breakpoints, false);
|
31
|
+
}
|
32
|
+
const [parsedLhs] = parseLhs(lhs, breakpoints, true);
|
33
|
+
if (parsedLhs === undefined || isNaN(parsedLhs)) {
|
34
|
+
return [];
|
35
|
+
}
|
36
|
+
const [parsedRhs] = parseRhs(rhs, breakpoints);
|
37
|
+
if (parsedRhs === undefined || isNaN(parsedRhs)) {
|
38
|
+
return [];
|
39
|
+
}
|
40
|
+
return [parsedLhs, parsedRhs];
|
19
41
|
};
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
* specified by the breakpoint query. The query can specify width (using 'w'), height (using 'h'),
|
26
|
-
* or both.
|
27
|
-
*
|
28
|
-
* @param {string} query - The breakpoint query string. Examples: 'w[100,200]', 'h[300]', 'w[100,200]h[300,400]'.
|
29
|
-
* @param {ScreenSize} screenSize - The screen size to check against the breakpoint query.
|
30
|
-
* @returns {boolean} True if the screen size matches the breakpoint query, false otherwise.
|
31
|
-
*
|
32
|
-
* @example
|
33
|
-
* const screenSize = { width: 150, height: 350 }
|
34
|
-
* isWithinBreakpoint('w[100,200]', screenSize) // returns true
|
35
|
-
* isWithinBreakpoint('h[400]', screenSize) // returns false
|
36
|
-
*/
|
37
|
-
export const isWithinBreakpoint = (query, screenSize) => {
|
38
|
-
if (query.includes('w') && query.includes('h')) {
|
39
|
-
return isWithinTheWidthAndHeight(query, screenSize);
|
42
|
+
export const isWithinBreakpoint = (query, screenSize, breakpoints) => {
|
43
|
+
const hasWidthBreakpoint = query.includes(':w');
|
44
|
+
const hasHeightBreakpoint = query.includes(':h');
|
45
|
+
if (hasWidthBreakpoint && hasHeightBreakpoint) {
|
46
|
+
return isWithinTheWidthAndHeight(query, screenSize, breakpoints);
|
40
47
|
}
|
41
|
-
if (
|
42
|
-
return isWithinTheWidth(query, screenSize.width);
|
48
|
+
if (hasWidthBreakpoint) {
|
49
|
+
return isWithinTheWidth(query, screenSize.width, breakpoints);
|
43
50
|
}
|
44
|
-
if (
|
45
|
-
return isWithinTheHeight(query, screenSize.height);
|
51
|
+
if (hasHeightBreakpoint) {
|
52
|
+
return isWithinTheHeight(query, screenSize.height, breakpoints);
|
46
53
|
}
|
47
54
|
return false;
|
48
55
|
};
|
49
|
-
|
50
|
-
|
51
|
-
* Determines if the given width matches the specified width range in the query.
|
52
|
-
*
|
53
|
-
* The function checks if the provided width falls within the range specified by the query.
|
54
|
-
* The query specifies a width range using a format like 'w[100,200]'. If only one value is provided,
|
55
|
-
* it's treated as a minimum width.
|
56
|
-
*
|
57
|
-
* @param {string} query - The width query string. Examples: 'w[100,200]' or 'w[100]'.
|
58
|
-
* @param {number} width - The width to check against the query.
|
59
|
-
* @returns {boolean} True if the width matches the query range, false otherwise.
|
60
|
-
*
|
61
|
-
* @example
|
62
|
-
* isWithinTheWidth('w[100,200]', 150) // returns true
|
63
|
-
* isWithinTheWidth('w[100]', 50) // returns false
|
64
|
-
* isWithinTheWidth('w[100]', 150) // returns true
|
65
|
-
*/
|
66
|
-
export const isWithinTheWidth = (query, width) => {
|
67
|
-
const [minWidth, maxWidth] = extractValues(query);
|
56
|
+
export const isWithinTheWidth = (query, width, breakpoints) => {
|
57
|
+
const [minWidth, maxWidth] = extractValues(query, breakpoints);
|
68
58
|
if (maxWidth && width >= minWidth && width <= maxWidth) {
|
69
59
|
return true;
|
70
60
|
}
|
71
61
|
return !maxWidth && width >= minWidth;
|
72
62
|
};
|
73
|
-
|
74
|
-
|
75
|
-
* Determines if the given height matches the specified height range in the query.
|
76
|
-
*
|
77
|
-
* The function checks if the provided height falls within the range specified by the query.
|
78
|
-
* The query specifies a height range using a format like 'h[100,200]'. If only one value is provided,
|
79
|
-
* it's treated as a minimum height.
|
80
|
-
*
|
81
|
-
* @param {string} query - The height query string. Examples: 'h[100,200]' or 'h[100]'.
|
82
|
-
* @param {number} height - The height to check against the query.
|
83
|
-
* @returns {boolean} True if the height matches the query range, false otherwise.
|
84
|
-
*
|
85
|
-
* @example
|
86
|
-
* isWithinTheHeight('h[100,200]', 150) // returns true
|
87
|
-
* isWithinTheHeight('h[100]', 50) // returns false
|
88
|
-
* isWithinTheHeight('h[100]', 150) // returns true
|
89
|
-
*/
|
90
|
-
export const isWithinTheHeight = (query, height) => {
|
91
|
-
const [minHeight, maxHeight] = extractValues(query);
|
63
|
+
export const isWithinTheHeight = (query, height, breakpoints) => {
|
64
|
+
const [minHeight, maxHeight] = extractValues(query, breakpoints);
|
92
65
|
if (maxHeight && height >= minHeight && height <= maxHeight) {
|
93
66
|
return true;
|
94
67
|
}
|
95
68
|
return !maxHeight && height >= minHeight;
|
96
69
|
};
|
97
|
-
|
98
|
-
|
99
|
-
* Determines if the given screen size matches both the specified width and height ranges in the query.
|
100
|
-
*
|
101
|
-
* The function checks if the provided screen size (both width and height) falls within the ranges
|
102
|
-
* specified by the query. The query can specify both width and height using a format like 'w[100,200]:h[300,400]'.
|
103
|
-
*
|
104
|
-
* @param {string} query - The combined width and height query string. Example: 'w[100,200]:h[300,400]'.
|
105
|
-
* @param {ScreenSize} screenSize - The screen size to check against the query.
|
106
|
-
* @returns {boolean} True if the screen size matches both the width and height ranges in the query, false otherwise.
|
107
|
-
*
|
108
|
-
* @example
|
109
|
-
* const screenSize = { width: 150, height: 350 }
|
110
|
-
* isWithinTheWidthAndHeight('w[100,200]:h[300,400]', screenSize) // returns true
|
111
|
-
* isWithinTheWidthAndHeight('w[100,200]:h[400,500]', screenSize) // returns false
|
112
|
-
*/
|
113
|
-
export const isWithinTheWidthAndHeight = (query, screenSize) => {
|
114
|
-
const result = query.split(':').filter(Boolean).map(q => isWithinBreakpoint(q, screenSize)).filter(Boolean);
|
70
|
+
export const isWithinTheWidthAndHeight = (query, screenSize, breakpoints) => {
|
71
|
+
const result = query.split(':').filter(Boolean).map(q => isWithinBreakpoint(`:${q}`, screenSize, breakpoints)).filter(Boolean);
|
115
72
|
return result.length === 2;
|
116
73
|
};
|
117
|
-
|
118
|
-
/**
|
119
|
-
* Checks if the given query string is a valid custom media query.
|
120
|
-
*
|
121
|
-
* The valid custom media query formats include:
|
122
|
-
* - :w[200]
|
123
|
-
* - :w[0, 200]
|
124
|
-
* - :w[, 300]
|
125
|
-
* - :h[200]
|
126
|
-
* - :h[0, 500]
|
127
|
-
* - :h[,200]
|
128
|
-
* - :w[100, 300]:h[200,500]
|
129
|
-
* - :h[200,500]:w[100, 300]
|
130
|
-
*
|
131
|
-
* @param {string} query - The query string to be checked.
|
132
|
-
* @returns {boolean} Returns `true` if the query is a valid custom media query, otherwise `false`.
|
133
|
-
* @example
|
134
|
-
*
|
135
|
-
* isMediaQuery(':w[200]') // true
|
136
|
-
* isMediaQuery(':w100]') // false
|
137
|
-
*/
|
138
74
|
export const isMediaQuery = query => {
|
139
|
-
const regex =
|
75
|
+
const regex = /(:w|:h)/;
|
140
76
|
return query.length > 0 && regex.test(query);
|
141
77
|
};
|
142
|
-
|
143
|
-
/**
|
144
|
-
* Retrieves the first matching custom media query key based on the provided screen size.
|
145
|
-
*
|
146
|
-
* The function processes an array of media queries and returns the first query that matches
|
147
|
-
* the given screen size. The media queries can be in formats like:
|
148
|
-
* - w[200]
|
149
|
-
* - w[0, 200]
|
150
|
-
* - w[, 300]
|
151
|
-
* - h[200]
|
152
|
-
* - h[0, 500]
|
153
|
-
* - h[,200]
|
154
|
-
* - w[100, 300]:h[200,500]
|
155
|
-
* - h[200,500]:w[100, 300]
|
156
|
-
*
|
157
|
-
* @param {Array<[string, string | number]>} mediaQueries - An array of tuples containing media query keys and associated values.
|
158
|
-
* @param {ScreenSize} screenSize - An object representing the screen size to be checked against the media queries.
|
159
|
-
* @returns {string | undefined} Returns the first matching media query key or `undefined` if no match is found.
|
160
|
-
* @example
|
161
|
-
*
|
162
|
-
* const queries = [[':w[200]', 'value1'], [':h[300,500]', 'value2']]
|
163
|
-
* const size = { width: 250, height: 400 }
|
164
|
-
* getKeyForCustomMediaQuery(queries, size) // ':w[200]
|
165
|
-
*/
|
166
|
-
export const getKeyForCustomMediaQuery = (mediaQueries, screenSize) => {
|
78
|
+
export const getKeyForCustomMediaQuery = (mediaQueries, screenSize, breakpoints) => {
|
167
79
|
const [matchedQuery] = mediaQueries.flatMap(_ref => {
|
168
80
|
let [key] = _ref;
|
169
|
-
|
170
|
-
return isWithinBreakpoint(key, screenSize) ? key : undefined;
|
171
|
-
}
|
172
|
-
return key.split(':').filter(Boolean).map(query => isWithinBreakpoint(query, screenSize) ? key : undefined);
|
81
|
+
return isWithinBreakpoint(key, screenSize, breakpoints) ? key : undefined;
|
173
82
|
}).filter(Boolean);
|
174
83
|
return matchedQuery;
|
175
84
|
};
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"names":["
|
1
|
+
{"version":3,"names":["parseLhs","lhs","breakpoints","hasRhs","matches","match","openBracket","value","closeBracket","spacelessValue","trim","parsedNumber","Number","parsedValue","isNaN","parseRhs","rhs","closeBrackets","extractValues","pattern","replace","split","parsedLhs","undefined","parsedRhs","isWithinBreakpoint","query","screenSize","hasWidthBreakpoint","includes","hasHeightBreakpoint","isWithinTheWidthAndHeight","isWithinTheWidth","width","isWithinTheHeight","height","minWidth","maxWidth","minHeight","maxHeight","result","filter","Boolean","map","q","length","isMediaQuery","regex","test","getKeyForCustomMediaQuery","mediaQueries","matchedQuery","flatMap","_ref","key"],"sourceRoot":"../../../src","sources":["utils/mediaQueries.ts"],"mappings":"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"}
|
@@ -1,58 +1,17 @@
|
|
1
1
|
import { getValueForBreakpoint } from './breakpoints';
|
2
2
|
import { normalizeStyles } from './normalizeStyles';
|
3
|
-
import { isWeb } from './common';
|
4
|
-
/**
|
5
|
-
* Proxies a function to parse its return value for custom media queries or breakpoints.
|
6
|
-
*
|
7
|
-
* @template B - An object type where keys represent breakpoint names and values represent breakpoint values.
|
8
|
-
*
|
9
|
-
* @param {Function} fn - The function to be proxified.
|
10
|
-
* @param {keyof B & string} breakpoint - The breakpoint name to check against.
|
11
|
-
* @param {ScreenSize} screenSize - An object representing the screen size to be checked against the media queries.
|
12
|
-
* @param breakpointPairs - sorted pairs of breakpoints
|
13
|
-
*
|
14
|
-
* @returns {Function} Returns the proxified function
|
15
|
-
*
|
16
|
-
* @example
|
17
|
-
*
|
18
|
-
* const myFunction = () => ({ ':w[200]': 'value1', sm: 'value2' })
|
19
|
-
* const screenSize = { width: 250, height: 400 }
|
20
|
-
* const breakpoints = { sm: 300, md: 600 }
|
21
|
-
*
|
22
|
-
* const proxifiedFunction = proxifyFunction(myFunction, 'sm', screenSize, breakpoints)
|
23
|
-
* proxifiedFunction() // parsed style based on screenSize and breakpoints
|
24
|
-
*/
|
3
|
+
import { isAndroid, isIOS, isWeb } from './common';
|
25
4
|
export const proxifyFunction = (fn, breakpoint, screenSize) => new Proxy(fn, {
|
26
5
|
apply: (target, thisArg, argumentsList) => parseStyle(target.apply(thisArg, argumentsList), breakpoint, screenSize)
|
27
6
|
});
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
*
|
35
|
-
* @template T - The type of the style object.
|
36
|
-
* @template B - An object type where keys represent breakpoint names and values represent breakpoint values.
|
37
|
-
*
|
38
|
-
* @param {CustomNamedStyles<T, B>} style - The style object to be parsed.
|
39
|
-
* @param {keyof B & string} breakpoint - The breakpoint name to check against.
|
40
|
-
* @param {ScreenSize} screenSize - An object representing the screen size to be checked against the media queries.
|
41
|
-
* @param breakpointPairs - sorted pairs of breakpoints
|
42
|
-
*
|
43
|
-
* @returns {Record<string, string | number | Function>} Returns the parsed style object with resolved custom media queries or breakpoints.
|
44
|
-
*
|
45
|
-
* @example
|
46
|
-
*
|
47
|
-
* const style = { fontSize: { sm: '12px', md: '16px' } }
|
48
|
-
* const screenSize = { width: 300, height: 400 }
|
49
|
-
* const breakpoints = { xs: 0, sm: 300, md: 600 }
|
50
|
-
*
|
51
|
-
* const parsedStyle = parseStyle(style, 'sm', screenSize, breakpoints)
|
52
|
-
* // { fontSize: '12px' }
|
53
|
-
*/
|
7
|
+
export const isPlatformColor = value => {
|
8
|
+
if (isIOS) {
|
9
|
+
return 'semantic' in value && typeof value.semantic === 'object';
|
10
|
+
}
|
11
|
+
return isAndroid && 'resource_paths' in value && typeof value.resource_paths === 'object';
|
12
|
+
};
|
54
13
|
export const parseStyle = (style, breakpoint, screenSize) => {
|
55
|
-
const entries = Object.entries(style);
|
14
|
+
const entries = Object.entries(style || {});
|
56
15
|
const parsedStyles = Object.fromEntries(entries.map(_ref => {
|
57
16
|
let [key, value] = _ref;
|
58
17
|
const hasNestedProperties = key === 'shadowOffset' || key === 'textShadowOffset';
|
@@ -64,11 +23,11 @@ export const parseStyle = (style, breakpoint, screenSize) => {
|
|
64
23
|
return [key, value.map(value => parseStyle(value, breakpoint, screenSize))];
|
65
24
|
}
|
66
25
|
const isDynamicFunction = typeof value === 'function';
|
67
|
-
const isValidStyle = typeof value !== 'object';
|
26
|
+
const isValidStyle = typeof value !== 'object' || isPlatformColor(value);
|
68
27
|
if (isDynamicFunction || isValidStyle) {
|
69
28
|
return [key, value];
|
70
29
|
}
|
71
|
-
return [key, getValueForBreakpoint(value
|
30
|
+
return [key, getValueForBreakpoint(value)];
|
72
31
|
}));
|
73
32
|
return isWeb ? normalizeStyles(parsedStyles) : parsedStyles;
|
74
33
|
};
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"names":["getValueForBreakpoint","normalizeStyles","isWeb","proxifyFunction","fn","breakpoint","screenSize","Proxy","apply","target","thisArg","argumentsList","parseStyle","style","entries","Object","parsedStyles","fromEntries","map","_ref","key","
|
1
|
+
{"version":3,"names":["getValueForBreakpoint","normalizeStyles","isAndroid","isIOS","isWeb","proxifyFunction","fn","breakpoint","screenSize","Proxy","apply","target","thisArg","argumentsList","parseStyle","isPlatformColor","value","semantic","resource_paths","style","entries","Object","parsedStyles","fromEntries","map","_ref","key","hasNestedProperties","isTransform","Array","isArray","isDynamicFunction","isValidStyle"],"sourceRoot":"../../../src","sources":["utils/styles.ts"],"mappings":"AACA,SAASA,qBAAqB,QAAQ,eAAe;AACrD,SAASC,eAAe,QAAQ,mBAAmB;AAEnD,SAASC,SAAS,EAAEC,KAAK,EAAEC,KAAK,QAAQ,UAAU;AAElD,OAAO,MAAMC,eAAe,GAAGA,CAC3BC,EAAY,EAAEC,UAA+C,EAC7DC,UAAsB,KACX,IAAIC,KAAK,CAACH,EAAE,EAAE;EACzBI,KAAK,EAAEA,CAACC,MAAM,EAAEC,OAAO,EAAEC,aAAa,KAClCC,UAAU,CAACH,MAAM,CAACD,KAAK,CAACE,OAAO,EAAEC,aAAa,CAAC,EAAEN,UAAU,EAAEC,UAAU;AAC/E,CAAC,CAAC;AAEF,OAAO,MAAMO,eAAe,GAAkBC,KAAQ,IAAc;EAChE,IAAIb,KAAK,EAAE;IACP,OAAO,UAAU,IAAIa,KAAK,IAAI,OAAOA,KAAK,CAACC,QAAQ,KAAK,QAAQ;EACpE;EAEA,OAAOf,SAAS,IAAI,gBAAgB,IAAIc,KAAK,IAAI,OAAOA,KAAK,CAACE,cAAc,KAAK,QAAQ;AAC7F,CAAC;AAED,OAAO,MAAMJ,UAAU,GAAGA,CACtBK,KAA2B,EAC3BZ,UAA+C,EAC/CC,UAAsB,KAClB;EACJ,MAAMY,OAAO,GAAGC,MAAM,CAACD,OAAO,CAACD,KAAK,IAAI,CAAC,CAAC,CAGzC;EAED,MAAMG,YAAY,GAAGD,MAAM,CACtBE,WAAW,CAACH,OAAO,CACfI,GAAG,CAACC,IAAA,IAAkB;IAAA,IAAjB,CAACC,GAAG,EAAEV,KAAK,CAAC,GAAAS,IAAA;IACd,MAAME,mBAAmB,GAAGD,GAAG,KAAK,cAAc,IAAIA,GAAG,KAAK,kBAAkB;IAEhF,IAAIC,mBAAmB,EAAE;MACrB,OAAO,CACHD,GAAG,EACHZ,UAAU,CAACE,KAAK,EAA0BT,UAAU,EAAEC,UAAU,CAAC,CACpE;IACL;IAEA,MAAMoB,WAAW,GAAGF,GAAG,KAAK,WAAW;IAEvC,IAAIE,WAAW,IAAIC,KAAK,CAACC,OAAO,CAACd,KAAK,CAAC,EAAE;MACrC,OAAO,CACHU,GAAG,EACHV,KAAK,CAACQ,GAAG,CAACR,KAAK,IAAIF,UAAU,CAACE,KAAK,EAAET,UAAU,EAAEC,UAAU,CAAC,CAAC,CAChE;IACL;IAEA,MAAMuB,iBAAiB,GAAG,OAAOf,KAAK,KAAK,UAAU;IACrD,MAAMgB,YAAY,GAAG,OAAOhB,KAAK,KAAK,QAAQ,IAAID,eAAe,CAACC,KAAK,CAAC;IAExE,IAAIe,iBAAiB,IAAIC,YAAY,EAAE;MACnC,OAAO,CAACN,GAAG,EAAEV,KAAK,CAAC;IACvB;IAEA,OAAO,CACHU,GAAG,EACH1B,qBAAqB,CAACgB,KAAuF,CAAC,CACjH;EACL,CAAC,CACL,CAAC;EAEL,OAAOZ,KAAK,GACNH,eAAe,CAACqB,YAAY,CAAC,GAC7BA,YAAY;AACtB,CAAC"}
|
@@ -1,5 +1,5 @@
|
|
1
1
|
import { UnistylesRuntime } from './UnistylesRuntime';
|
2
|
-
import {
|
2
|
+
import { UnistylesBuiltInEngine } from './UnistylesEngine';
|
3
3
|
import { UnistyleRegistry } from './UnistyleRegistry';
|
4
4
|
declare class Unistyles {
|
5
5
|
private _runtime;
|
@@ -9,7 +9,7 @@ declare class Unistyles {
|
|
9
9
|
constructor();
|
10
10
|
get registry(): UnistyleRegistry;
|
11
11
|
get runtime(): UnistylesRuntime;
|
12
|
-
get engine():
|
12
|
+
get engine(): UnistylesBuiltInEngine;
|
13
13
|
}
|
14
14
|
export declare const unistyles: Unistyles;
|
15
15
|
export {};
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Unistyles.d.ts","sourceRoot":"","sources":["../../../src/Unistyles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AACrD,OAAO,EAAE,
|
1
|
+
{"version":3,"file":"Unistyles.d.ts","sourceRoot":"","sources":["../../../src/Unistyles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AACrD,OAAO,EAAE,sBAAsB,EAAE,MAAM,mBAAmB,CAAA;AAC1D,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AAIrD,cAAM,SAAS;IACX,OAAO,CAAC,QAAQ,CAAkB;IAClC,OAAO,CAAC,OAAO,CAAwB;IACvC,OAAO,CAAC,SAAS,CAAkB;IACnC,OAAO,CAAC,OAAO,CAAiB;;IAgBhC,IAAW,QAAQ,qBAElB;IAED,IAAW,OAAO,qBAEjB;IAED,IAAW,MAAM,2BAEhB;CACJ;AAED,eAAO,MAAM,SAAS,WAAkB,CAAA"}
|
@@ -1,8 +1,11 @@
|
|
1
1
|
import type { UnistyleRegistry } from './UnistyleRegistry';
|
2
2
|
import type { UnistylesRuntime } from './UnistylesRuntime';
|
3
|
-
|
3
|
+
import type { UnistylesEngine, NestedKeys } from './types';
|
4
|
+
export declare class UnistylesBuiltInEngine implements UnistylesEngine {
|
4
5
|
private registry;
|
5
6
|
private runtime;
|
6
7
|
constructor(registry: UnistyleRegistry, runtime: UnistylesRuntime);
|
8
|
+
isMediaQuery: (key: string) => boolean;
|
9
|
+
didMatchMediaQuery: (keys: NestedKeys) => string | undefined;
|
7
10
|
}
|
8
11
|
//# sourceMappingURL=UnistylesEngine.d.ts.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"UnistylesEngine.d.ts","sourceRoot":"","sources":["../../../src/UnistylesEngine.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AAC1D,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;
|
1
|
+
{"version":3,"file":"UnistylesEngine.d.ts","sourceRoot":"","sources":["../../../src/UnistylesEngine.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AAC1D,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AAE1D,OAAO,KAAK,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AAE1D,qBAAa,sBAAuB,YAAW,eAAe;IAC9C,OAAO,CAAC,QAAQ;IAAoB,OAAO,CAAC,OAAO;gBAA3C,QAAQ,EAAE,gBAAgB,EAAU,OAAO,EAAE,gBAAgB;IAK1E,YAAY,QAAS,MAAM,aAIjC;IAEM,kBAAkB,2CAC0D;CAKtF"}
|
@@ -8,9 +8,9 @@ export declare class UnistylesRuntime {
|
|
8
8
|
constructor(unistylesBridge: UnistylesBridge, registry: UnistyleRegistry);
|
9
9
|
get colorScheme(): import("./types").ColorSchemeName;
|
10
10
|
get hasAdaptiveThemes(): boolean;
|
11
|
-
get sortedBreakpoints(): ["
|
11
|
+
get sortedBreakpoints(): [keyof import("./global").UnistylesBreakpoints, number | undefined][];
|
12
12
|
get themeName(): never;
|
13
|
-
get breakpoint(): "
|
13
|
+
get breakpoint(): keyof import("./global").UnistylesBreakpoints;
|
14
14
|
get screen(): {
|
15
15
|
width: number;
|
16
16
|
height: number;
|