@vitus-labs/unistyle 1.4.2 → 1.4.3-alpha.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/lib/index.d.ts +0 -10
- package/lib/index.js +22 -12
- package/lib/vitus-labs-unistyle.native.js +22 -12
- package/package.json +4 -3
package/lib/index.d.ts
CHANGED
|
@@ -98,16 +98,6 @@ type MakeItResponsive = ({
|
|
|
98
98
|
theme?: Theme$1;
|
|
99
99
|
[key: string]: any;
|
|
100
100
|
}) => any;
|
|
101
|
-
/**
|
|
102
|
-
* Core responsive engine used by every styled component in the system.
|
|
103
|
-
*
|
|
104
|
-
* Returns a styled-components interpolation function that:
|
|
105
|
-
* 1. Reads the component's theme prop (via `key` or direct `theme`)
|
|
106
|
-
* 2. Without breakpoints → renders plain CSS
|
|
107
|
-
* 3. With breakpoints → normalizes, transforms (property-per-breakpoint →
|
|
108
|
-
* breakpoint-per-property), optimizes (deduplicates identical breakpoints),
|
|
109
|
-
* and wraps each breakpoint's styles in the appropriate `@media` query.
|
|
110
|
-
*/
|
|
111
101
|
declare const makeItResponsive: MakeItResponsive;
|
|
112
102
|
//#endregion
|
|
113
103
|
//#region src/responsive/normalizeTheme.d.ts
|
package/lib/index.js
CHANGED
|
@@ -154,7 +154,10 @@ const transformTheme = ({ theme, breakpoints }) => {
|
|
|
154
154
|
* breakpoint-per-property), optimizes (deduplicates identical breakpoints),
|
|
155
155
|
* and wraps each breakpoint's styles in the appropriate `@media` query.
|
|
156
156
|
*/
|
|
157
|
-
|
|
157
|
+
let lastThemeRef = null;
|
|
158
|
+
let lastBreakpointsRef = null;
|
|
159
|
+
let lastOptimized = null;
|
|
160
|
+
const makeItResponsive = ({ theme: customTheme, key = "", css, styles, normalize = true }) => ({ theme = {}, ...props }) => {
|
|
158
161
|
const internalTheme = customTheme || props[key];
|
|
159
162
|
if (isEmpty(internalTheme)) return "";
|
|
160
163
|
const { rootSize, breakpoints, __VITUS_LABS__, ...restTheme } = theme;
|
|
@@ -168,18 +171,25 @@ const makeItResponsive = ({ theme: customTheme, key = "", css, styles, normalize
|
|
|
168
171
|
${renderStyles(internalTheme)}
|
|
169
172
|
`;
|
|
170
173
|
const { media, sortedBreakpoints } = __VITUS_LABS__;
|
|
171
|
-
let
|
|
172
|
-
if (
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
theme: transformTheme({
|
|
178
|
-
theme: helperTheme,
|
|
174
|
+
let optimizedTheme;
|
|
175
|
+
if (internalTheme === lastThemeRef && sortedBreakpoints === lastBreakpointsRef && lastOptimized) optimizedTheme = lastOptimized;
|
|
176
|
+
else {
|
|
177
|
+
let helperTheme = internalTheme;
|
|
178
|
+
if (normalize) helperTheme = normalizeTheme({
|
|
179
|
+
theme: internalTheme,
|
|
179
180
|
breakpoints: sortedBreakpoints
|
|
180
|
-
})
|
|
181
|
-
|
|
182
|
-
|
|
181
|
+
});
|
|
182
|
+
optimizedTheme = optimizeTheme({
|
|
183
|
+
theme: transformTheme({
|
|
184
|
+
theme: helperTheme,
|
|
185
|
+
breakpoints: sortedBreakpoints
|
|
186
|
+
}),
|
|
187
|
+
breakpoints: sortedBreakpoints
|
|
188
|
+
});
|
|
189
|
+
lastThemeRef = internalTheme;
|
|
190
|
+
lastBreakpointsRef = sortedBreakpoints;
|
|
191
|
+
lastOptimized = optimizedTheme;
|
|
192
|
+
}
|
|
183
193
|
return sortedBreakpoints.map((item) => {
|
|
184
194
|
const breakpointTheme = optimizedTheme[item];
|
|
185
195
|
if (!breakpointTheme || !media) return "";
|
|
@@ -154,7 +154,10 @@ const transformTheme = ({ theme, breakpoints }) => {
|
|
|
154
154
|
* breakpoint-per-property), optimizes (deduplicates identical breakpoints),
|
|
155
155
|
* and wraps each breakpoint's styles in the appropriate `@media` query.
|
|
156
156
|
*/
|
|
157
|
-
|
|
157
|
+
let lastThemeRef = null;
|
|
158
|
+
let lastBreakpointsRef = null;
|
|
159
|
+
let lastOptimized = null;
|
|
160
|
+
const makeItResponsive = ({ theme: customTheme, key = "", css, styles, normalize = true }) => ({ theme = {}, ...props }) => {
|
|
158
161
|
const internalTheme = customTheme || props[key];
|
|
159
162
|
if (isEmpty(internalTheme)) return "";
|
|
160
163
|
const { rootSize, breakpoints, __VITUS_LABS__, ...restTheme } = theme;
|
|
@@ -168,18 +171,25 @@ const makeItResponsive = ({ theme: customTheme, key = "", css, styles, normalize
|
|
|
168
171
|
${renderStyles(internalTheme)}
|
|
169
172
|
`;
|
|
170
173
|
const { media, sortedBreakpoints } = __VITUS_LABS__;
|
|
171
|
-
let
|
|
172
|
-
if (
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
theme: transformTheme({
|
|
178
|
-
theme: helperTheme,
|
|
174
|
+
let optimizedTheme;
|
|
175
|
+
if (internalTheme === lastThemeRef && sortedBreakpoints === lastBreakpointsRef && lastOptimized) optimizedTheme = lastOptimized;
|
|
176
|
+
else {
|
|
177
|
+
let helperTheme = internalTheme;
|
|
178
|
+
if (normalize) helperTheme = normalizeTheme({
|
|
179
|
+
theme: internalTheme,
|
|
179
180
|
breakpoints: sortedBreakpoints
|
|
180
|
-
})
|
|
181
|
-
|
|
182
|
-
|
|
181
|
+
});
|
|
182
|
+
optimizedTheme = optimizeTheme({
|
|
183
|
+
theme: transformTheme({
|
|
184
|
+
theme: helperTheme,
|
|
185
|
+
breakpoints: sortedBreakpoints
|
|
186
|
+
}),
|
|
187
|
+
breakpoints: sortedBreakpoints
|
|
188
|
+
});
|
|
189
|
+
lastThemeRef = internalTheme;
|
|
190
|
+
lastBreakpointsRef = sortedBreakpoints;
|
|
191
|
+
lastOptimized = optimizedTheme;
|
|
192
|
+
}
|
|
183
193
|
return sortedBreakpoints.map((item) => {
|
|
184
194
|
const breakpointTheme = optimizedTheme[item];
|
|
185
195
|
if (!breakpointTheme || !media) return "";
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vitus-labs/unistyle",
|
|
3
|
-
"version": "1.4.
|
|
3
|
+
"version": "1.4.3-alpha.1+cf4e0a6",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"author": "Vit Bokisch <vit@bokisch.cz>",
|
|
6
6
|
"maintainers": [
|
|
@@ -9,6 +9,7 @@
|
|
|
9
9
|
"type": "module",
|
|
10
10
|
"sideEffects": false,
|
|
11
11
|
"exports": {
|
|
12
|
+
"source": "./src/index.ts",
|
|
12
13
|
"import": "./lib/index.js",
|
|
13
14
|
"types": "./lib/index.d.ts"
|
|
14
15
|
},
|
|
@@ -51,9 +52,9 @@
|
|
|
51
52
|
"react": ">= 19"
|
|
52
53
|
},
|
|
53
54
|
"devDependencies": {
|
|
54
|
-
"@vitus-labs/core": "1.4.
|
|
55
|
+
"@vitus-labs/core": "1.4.3-alpha.1+cf4e0a6",
|
|
55
56
|
"@vitus-labs/tools-rolldown": "^1.6.0",
|
|
56
57
|
"@vitus-labs/tools-typescript": "^1.6.0"
|
|
57
58
|
},
|
|
58
|
-
"gitHead": "
|
|
59
|
+
"gitHead": "cf4e0a6230687c5c7acc2e07a3248bae4ae55f07"
|
|
59
60
|
}
|