@niibase/uniwind 1.1.4 → 1.1.6
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/LICENSE +1 -1
- package/dist/common/core/config/config.js +13 -13
- package/dist/common/core/config/config.native.js +8 -8
- package/dist/common/css/insets.js +49 -30
- package/dist/metro/index.cjs +4 -5
- package/dist/metro/index.mjs +4 -5
- package/dist/metro/metro-transformer.cjs +22 -3
- package/dist/metro/metro-transformer.mjs +22 -3
- package/dist/module/core/config/config.d.ts +1 -1
- package/dist/module/core/config/config.js +13 -13
- package/dist/module/core/config/config.native.d.ts +2 -2
- package/dist/module/core/config/config.native.js +8 -8
- package/dist/module/css/insets.js +61 -36
- package/dist/shared/{uniwind.DhluOugg.mjs → uniwind.BxeutNHQ.mjs} +4 -1
- package/dist/shared/{uniwind.D8_HBWsJ.mjs → uniwind.sIHlVZql.mjs} +60 -37
- package/dist/shared/{uniwind.DeQhDtT7.cjs → uniwind.sUkMZ7RS.cjs} +60 -37
- package/dist/shared/{uniwind.BDoX4wlN.cjs → uniwind.thpLtIq6.cjs} +4 -0
- package/dist/vite/index.cjs +2 -2
- package/dist/vite/index.mjs +2 -2
- package/package.json +1 -1
- package/readme.md +1 -1
- package/src/core/config/config.native.ts +10 -10
- package/src/core/config/config.ts +18 -18
- package/src/css/insets.ts +74 -41
- package/src/metro/processor/css.ts +5 -0
- package/src/metro/processor/rn.ts +24 -2
- package/src/metro/resolvers.ts +4 -4
- package/src/metro/utils/common.ts +5 -0
- package/uniwind.css +137 -14
package/LICENSE
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
MIT License
|
|
2
2
|
|
|
3
|
-
Copyright (c)
|
|
3
|
+
Copyright (c) 2026 Uniwind
|
|
4
4
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
5
5
|
of this software and associated documentation files (the "Software"), to deal
|
|
6
6
|
in the Software without restriction, including without limitation the rights
|
|
@@ -13,19 +13,6 @@ class UniwindConfigBuilder extends _config.UniwindConfigBuilder {
|
|
|
13
13
|
constructor() {
|
|
14
14
|
super();
|
|
15
15
|
}
|
|
16
|
-
onThemeChange() {
|
|
17
|
-
if (typeof document === "undefined") {
|
|
18
|
-
return;
|
|
19
|
-
}
|
|
20
|
-
document.documentElement.removeAttribute("style");
|
|
21
|
-
const runtimeCSSVariables = this.runtimeCSSVariables.get(this.currentTheme);
|
|
22
|
-
if (!runtimeCSSVariables) {
|
|
23
|
-
return;
|
|
24
|
-
}
|
|
25
|
-
Object.entries(runtimeCSSVariables).forEach(([varName, varValue]) => {
|
|
26
|
-
this.applyCSSVariable(varName, varValue);
|
|
27
|
-
});
|
|
28
|
-
}
|
|
29
16
|
updateCSSVariables(theme, variables) {
|
|
30
17
|
Object.entries(variables).forEach(([varName, varValue]) => {
|
|
31
18
|
if (!varName.startsWith("--") && __DEV__) {
|
|
@@ -41,6 +28,19 @@ class UniwindConfigBuilder extends _config.UniwindConfigBuilder {
|
|
|
41
28
|
_listener.UniwindListener.notify([_types.StyleDependency.Variables]);
|
|
42
29
|
}
|
|
43
30
|
}
|
|
31
|
+
onThemeChange() {
|
|
32
|
+
if (typeof document === "undefined") {
|
|
33
|
+
return;
|
|
34
|
+
}
|
|
35
|
+
document.documentElement.removeAttribute("style");
|
|
36
|
+
const runtimeCSSVariables = this.runtimeCSSVariables.get(this.currentTheme);
|
|
37
|
+
if (!runtimeCSSVariables) {
|
|
38
|
+
return;
|
|
39
|
+
}
|
|
40
|
+
Object.entries(runtimeCSSVariables).forEach(([varName, varValue]) => {
|
|
41
|
+
this.applyCSSVariable(varName, varValue);
|
|
42
|
+
});
|
|
43
|
+
}
|
|
44
44
|
applyCSSVariable(varName, varValue) {
|
|
45
45
|
if (typeof document === "undefined") {
|
|
46
46
|
return;
|
|
@@ -14,14 +14,6 @@ class UniwindConfigBuilder extends _config.UniwindConfigBuilder {
|
|
|
14
14
|
constructor() {
|
|
15
15
|
super();
|
|
16
16
|
}
|
|
17
|
-
__reinit(generateStyleSheetCallback, themes) {
|
|
18
|
-
super.__reinit(generateStyleSheetCallback, themes);
|
|
19
|
-
_native.UniwindStore.reinit(generateStyleSheetCallback);
|
|
20
|
-
}
|
|
21
|
-
onThemeChange() {
|
|
22
|
-
_native.UniwindStore.runtime.currentThemeName = this.currentTheme;
|
|
23
|
-
_native.UniwindStore.reinit();
|
|
24
|
-
}
|
|
25
17
|
updateCSSVariables(theme, variables) {
|
|
26
18
|
Object.entries(variables).forEach(([varName, varValue]) => {
|
|
27
19
|
if (!varName.startsWith("--") && __DEV__) {
|
|
@@ -63,5 +55,13 @@ class UniwindConfigBuilder extends _config.UniwindConfigBuilder {
|
|
|
63
55
|
_native.UniwindStore.runtime.insets.right = insets.right ?? 0;
|
|
64
56
|
_listener.UniwindListener.notify([_types.StyleDependency.Insets]);
|
|
65
57
|
}
|
|
58
|
+
__reinit(generateStyleSheetCallback, themes) {
|
|
59
|
+
super.__reinit(generateStyleSheetCallback, themes);
|
|
60
|
+
_native.UniwindStore.reinit(generateStyleSheetCallback);
|
|
61
|
+
}
|
|
62
|
+
onThemeChange() {
|
|
63
|
+
_native.UniwindStore.runtime.currentThemeName = this.currentTheme;
|
|
64
|
+
_native.UniwindStore.reinit();
|
|
65
|
+
}
|
|
66
66
|
}
|
|
67
67
|
const Uniwind = exports.Uniwind = new UniwindConfigBuilder();
|
|
@@ -4,61 +4,80 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.generateCSSForInsets = void 0;
|
|
7
|
-
const types = ["
|
|
8
|
-
const sides = ["", "x", "y", "
|
|
7
|
+
const types = ["margin", "padding", "inset"];
|
|
8
|
+
const sides = ["inset", "x", "y", "top", "bottom", "left", "right"];
|
|
9
|
+
const safeAreaTypes = ["safe", "safe-or-*", "safe-offset-*"];
|
|
9
10
|
const spacing = "--spacing(--value(integer))";
|
|
10
11
|
const length = "--value([length])";
|
|
11
12
|
const generateCSSForInsets = () => {
|
|
12
13
|
let css = `@utility h-screen-safe {
|
|
13
14
|
height: calc(100vh - (env(safe-area-inset-top) + env(safe-area-inset-bottom)));
|
|
14
15
|
}
|
|
16
|
+
|
|
15
17
|
`;
|
|
16
18
|
const getInsetsForSide = side => {
|
|
17
19
|
switch (side) {
|
|
18
|
-
case "
|
|
20
|
+
case "top":
|
|
19
21
|
return ["top"];
|
|
20
|
-
case "
|
|
22
|
+
case "bottom":
|
|
21
23
|
return ["bottom"];
|
|
22
|
-
case "
|
|
24
|
+
case "left":
|
|
23
25
|
return ["left"];
|
|
24
|
-
case "
|
|
26
|
+
case "right":
|
|
25
27
|
return ["right"];
|
|
26
28
|
case "x":
|
|
27
29
|
return ["left", "right"];
|
|
28
30
|
case "y":
|
|
29
31
|
return ["top", "bottom"];
|
|
30
|
-
|
|
32
|
+
case "inset":
|
|
31
33
|
return ["top", "bottom", "left", "right"];
|
|
34
|
+
default:
|
|
35
|
+
side;
|
|
36
|
+
return [];
|
|
37
|
+
}
|
|
38
|
+
};
|
|
39
|
+
const getUtilityName = (typeName, side, safeAreaType) => {
|
|
40
|
+
if (typeName === "inset") {
|
|
41
|
+
return `${side}-${safeAreaType}`;
|
|
42
|
+
}
|
|
43
|
+
const sideSuffix = side === "inset" ? "" : side.at(0);
|
|
44
|
+
return `${typeName.at(0)}${sideSuffix}-${safeAreaType}`;
|
|
45
|
+
};
|
|
46
|
+
const getStyleProperty = (typeName, inset) => {
|
|
47
|
+
if (typeName === "inset") {
|
|
48
|
+
return inset;
|
|
49
|
+
}
|
|
50
|
+
return `${typeName}-${inset}`;
|
|
51
|
+
};
|
|
52
|
+
const getStylesForSafeAreaType = (safeAreaType, styles) => {
|
|
53
|
+
switch (safeAreaType) {
|
|
54
|
+
case "safe":
|
|
55
|
+
return styles;
|
|
56
|
+
case "safe-or-*":
|
|
57
|
+
return styles.flatMap(style => {
|
|
58
|
+
const styleWithoutSemicolon = style.replace(";", "");
|
|
59
|
+
return [styleWithoutSemicolon.replace(/: (env.*)/, (_, env) => `: max(${env}, ${spacing});`), styleWithoutSemicolon.replace(/: (env.*)/, (_, env) => `: max(${env}, ${length});`)];
|
|
60
|
+
});
|
|
61
|
+
case "safe-offset-*":
|
|
62
|
+
return styles.flatMap(style => {
|
|
63
|
+
const styleWithoutSemicolon = style.replace(";", "");
|
|
64
|
+
return [styleWithoutSemicolon.replace(/: (env.*)/, (_, env) => `: calc(${env} + ${spacing});`), styleWithoutSemicolon.replace(/: (env.*)/, (_, env) => `: calc(${env} + ${length});`)];
|
|
65
|
+
});
|
|
66
|
+
default:
|
|
67
|
+
safeAreaType;
|
|
68
|
+
return [];
|
|
32
69
|
}
|
|
33
70
|
};
|
|
34
71
|
types.forEach(type => {
|
|
35
72
|
sides.forEach(side => {
|
|
36
|
-
const styleName = type === "m" ? "margin" : "padding";
|
|
37
73
|
const insets = getInsetsForSide(side);
|
|
38
|
-
const styles = insets.map(inset => `${
|
|
39
|
-
|
|
40
|
-
const
|
|
41
|
-
|
|
42
|
-
});
|
|
43
|
-
const safeOffsetStyles = styles.flatMap(style => {
|
|
44
|
-
const styleWithoutSemicolon = style.replace(";", "");
|
|
45
|
-
return [styleWithoutSemicolon.replace(/: (env.*)/, (_, env) => `: calc(${env} + ${spacing});`), styleWithoutSemicolon.replace(/: (env.*)/, (_, env) => `: calc(${env} + ${length});`)];
|
|
74
|
+
const styles = insets.map(inset => `${getStyleProperty(type, inset)}: env(safe-area-inset-${inset});`);
|
|
75
|
+
safeAreaTypes.forEach(safeAreaType => {
|
|
76
|
+
const utilityName = getUtilityName(type, side, safeAreaType);
|
|
77
|
+
css += [`@utility ${utilityName} {`, ...getStylesForSafeAreaType(safeAreaType, styles).map(style => ` ${style}`), "}", "", ""].join("\n");
|
|
46
78
|
});
|
|
47
|
-
css += `
|
|
48
|
-
@utility ${type}${side}-safe {
|
|
49
|
-
${styles.join("\n ")}
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
@utility ${type}${side}-safe-or-* {
|
|
53
|
-
${safeStyles.join("\n ")}
|
|
54
|
-
}
|
|
55
|
-
|
|
56
|
-
@utility ${type}${side}-safe-offset-* {
|
|
57
|
-
${safeOffsetStyles.join("\n ")}
|
|
58
|
-
}
|
|
59
|
-
`;
|
|
60
79
|
});
|
|
61
80
|
});
|
|
62
|
-
return css.
|
|
81
|
+
return css.slice(0, -1);
|
|
63
82
|
};
|
|
64
83
|
exports.generateCSSForInsets = generateCSSForInsets;
|
package/dist/metro/index.cjs
CHANGED
|
@@ -4,7 +4,7 @@ const FileStoreBase = require('metro-cache/private/stores/FileStore');
|
|
|
4
4
|
const os = require('os');
|
|
5
5
|
const path = require('path');
|
|
6
6
|
const node_path = require('node:path');
|
|
7
|
-
const common = require('../shared/uniwind.
|
|
7
|
+
const common = require('../shared/uniwind.thpLtIq6.cjs');
|
|
8
8
|
const types = require('../shared/uniwind.BZIuaszw.cjs');
|
|
9
9
|
|
|
10
10
|
function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e.default : e; }
|
|
@@ -79,10 +79,9 @@ const nativeResolver = (extraComponents) => ({
|
|
|
79
79
|
}) => {
|
|
80
80
|
const resolution = resolver(context, moduleName, platform);
|
|
81
81
|
const isInternal = isFromThisModule(context.originModulePath);
|
|
82
|
-
const
|
|
83
|
-
|
|
84
|
-
)
|
|
85
|
-
if (isInternal || resolution.type !== "sourceFile" || isReactNativeIndex) {
|
|
82
|
+
const isFromReactNative = context.originModulePath.includes(`${node_path.sep}react-native${node_path.sep}`) || context.originModulePath.includes(`${node_path.sep}@react-native${node_path.sep}`);
|
|
83
|
+
const isReactNativeAnimated = context.originModulePath.includes(`${node_path.sep}Animated${node_path.sep}components${node_path.sep}`);
|
|
84
|
+
if (isInternal || resolution.type !== "sourceFile" || isFromReactNative && !isReactNativeAnimated) {
|
|
86
85
|
return resolution;
|
|
87
86
|
}
|
|
88
87
|
if (moduleName === "react-native") {
|
package/dist/metro/index.mjs
CHANGED
|
@@ -2,7 +2,7 @@ import FileStoreBase from 'metro-cache/private/stores/FileStore';
|
|
|
2
2
|
import os from 'os';
|
|
3
3
|
import path from 'path';
|
|
4
4
|
import { sep, basename, resolve } from 'node:path';
|
|
5
|
-
import { n as name, u as uniq } from '../shared/uniwind.
|
|
5
|
+
import { n as name, u as uniq } from '../shared/uniwind.BxeutNHQ.mjs';
|
|
6
6
|
import { P as Platform } from '../shared/uniwind.CyoRUwOj.mjs';
|
|
7
7
|
|
|
8
8
|
class FileStore extends FileStoreBase {
|
|
@@ -71,10 +71,9 @@ const nativeResolver = (extraComponents) => ({
|
|
|
71
71
|
}) => {
|
|
72
72
|
const resolution = resolver(context, moduleName, platform);
|
|
73
73
|
const isInternal = isFromThisModule(context.originModulePath);
|
|
74
|
-
const
|
|
75
|
-
|
|
76
|
-
)
|
|
77
|
-
if (isInternal || resolution.type !== "sourceFile" || isReactNativeIndex) {
|
|
74
|
+
const isFromReactNative = context.originModulePath.includes(`${sep}react-native${sep}`) || context.originModulePath.includes(`${sep}@react-native${sep}`);
|
|
75
|
+
const isReactNativeAnimated = context.originModulePath.includes(`${sep}Animated${sep}components${sep}`);
|
|
76
|
+
if (isInternal || resolution.type !== "sourceFile" || isFromReactNative && !isReactNativeAnimated) {
|
|
78
77
|
return resolution;
|
|
79
78
|
}
|
|
80
79
|
if (moduleName === "react-native") {
|
|
@@ -2,11 +2,11 @@
|
|
|
2
2
|
|
|
3
3
|
const fs = require('fs');
|
|
4
4
|
const path = require('path');
|
|
5
|
-
const common = require('../shared/uniwind.
|
|
5
|
+
const common = require('../shared/uniwind.thpLtIq6.cjs');
|
|
6
6
|
const node = require('@tailwindcss/node');
|
|
7
7
|
const oxide = require('@tailwindcss/oxide');
|
|
8
8
|
const types = require('../shared/uniwind.BZIuaszw.cjs');
|
|
9
|
-
const stringifyThemes = require('../shared/uniwind.
|
|
9
|
+
const stringifyThemes = require('../shared/uniwind.sUkMZ7RS.cjs');
|
|
10
10
|
const lightningcss = require('lightningcss');
|
|
11
11
|
const culori = require('culori');
|
|
12
12
|
|
|
@@ -448,6 +448,9 @@ class CSS {
|
|
|
448
448
|
case "srgb":
|
|
449
449
|
return this.Processor.Color.processColor(declarationValue);
|
|
450
450
|
case "delim":
|
|
451
|
+
if (declarationValue.value === ".") {
|
|
452
|
+
return ".";
|
|
453
|
+
}
|
|
451
454
|
return ` ${declarationValue.value} `;
|
|
452
455
|
case "ident":
|
|
453
456
|
if (this.Processor.Color.isColor(declarationValue.value)) {
|
|
@@ -1095,6 +1098,7 @@ const cssToRNMap = {
|
|
|
1095
1098
|
fontVariant: value
|
|
1096
1099
|
})
|
|
1097
1100
|
};
|
|
1101
|
+
const BORDER_WIDTH_KEYS = ["borderTopWidth", "borderRightWidth", "borderBottomWidth", "borderLeftWidth"];
|
|
1098
1102
|
class RN {
|
|
1099
1103
|
constructor(Processor) {
|
|
1100
1104
|
this.Processor = Processor;
|
|
@@ -1113,7 +1117,8 @@ class RN {
|
|
|
1113
1117
|
transformedProperty,
|
|
1114
1118
|
typeof value === "string" ? common.addMissingSpaces(value) : value
|
|
1115
1119
|
);
|
|
1116
|
-
|
|
1120
|
+
const joinedStyles = this.joinStyles(rn);
|
|
1121
|
+
return Object.entries(joinedStyles).filter(([, value2]) => common.isDefined(value2));
|
|
1117
1122
|
}
|
|
1118
1123
|
transformProperty(property, value) {
|
|
1119
1124
|
if (property in cssToRNMap) {
|
|
@@ -1183,6 +1188,20 @@ class RN {
|
|
|
1183
1188
|
};
|
|
1184
1189
|
}
|
|
1185
1190
|
}
|
|
1191
|
+
// Used when they're multiple styles with the same value that could be joined
|
|
1192
|
+
joinStyles(styles) {
|
|
1193
|
+
const keys = Object.keys(styles);
|
|
1194
|
+
if (BORDER_WIDTH_KEYS.every((key) => keys.includes(key))) {
|
|
1195
|
+
const borderWidth = styles.borderTopWidth;
|
|
1196
|
+
if (BORDER_WIDTH_KEYS.every((key) => styles[key] === borderWidth)) {
|
|
1197
|
+
return {
|
|
1198
|
+
...common.removeKeys(styles, BORDER_WIDTH_KEYS),
|
|
1199
|
+
borderWidth
|
|
1200
|
+
};
|
|
1201
|
+
}
|
|
1202
|
+
}
|
|
1203
|
+
return styles;
|
|
1204
|
+
}
|
|
1186
1205
|
}
|
|
1187
1206
|
|
|
1188
1207
|
class Units {
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import fs from 'fs';
|
|
2
2
|
import path from 'path';
|
|
3
|
-
import { p as pipe, r as roundToPrecision, i as isNumber, a as isValidJSValue, s as smartSplit, b as addMissingSpaces, t as toCamelCase, c as isDefined, d as deepEqual, e as shouldBeSerialized, n as name } from '../shared/uniwind.
|
|
3
|
+
import { p as pipe, r as roundToPrecision, i as isNumber, a as isValidJSValue, s as smartSplit, b as addMissingSpaces, t as toCamelCase, c as isDefined, d as deepEqual, e as shouldBeSerialized, f as removeKeys, n as name } from '../shared/uniwind.BxeutNHQ.mjs';
|
|
4
4
|
import { compile } from '@tailwindcss/node';
|
|
5
5
|
import { Scanner } from '@tailwindcss/oxide';
|
|
6
6
|
import { P as Platform } from '../shared/uniwind.CyoRUwOj.mjs';
|
|
7
|
-
import { L as Logger, p as processFunctions, s as stringifyThemes, b as buildDtsFile, a as buildCSS } from '../shared/uniwind.
|
|
7
|
+
import { L as Logger, p as processFunctions, s as stringifyThemes, b as buildDtsFile, a as buildCSS } from '../shared/uniwind.sIHlVZql.mjs';
|
|
8
8
|
import { transform as transform$1 } from 'lightningcss';
|
|
9
9
|
import { converter, parse, formatHex, formatHex8 } from 'culori';
|
|
10
10
|
|
|
@@ -441,6 +441,9 @@ class CSS {
|
|
|
441
441
|
case "srgb":
|
|
442
442
|
return this.Processor.Color.processColor(declarationValue);
|
|
443
443
|
case "delim":
|
|
444
|
+
if (declarationValue.value === ".") {
|
|
445
|
+
return ".";
|
|
446
|
+
}
|
|
444
447
|
return ` ${declarationValue.value} `;
|
|
445
448
|
case "ident":
|
|
446
449
|
if (this.Processor.Color.isColor(declarationValue.value)) {
|
|
@@ -1088,6 +1091,7 @@ const cssToRNMap = {
|
|
|
1088
1091
|
fontVariant: value
|
|
1089
1092
|
})
|
|
1090
1093
|
};
|
|
1094
|
+
const BORDER_WIDTH_KEYS = ["borderTopWidth", "borderRightWidth", "borderBottomWidth", "borderLeftWidth"];
|
|
1091
1095
|
class RN {
|
|
1092
1096
|
constructor(Processor) {
|
|
1093
1097
|
this.Processor = Processor;
|
|
@@ -1106,7 +1110,8 @@ class RN {
|
|
|
1106
1110
|
transformedProperty,
|
|
1107
1111
|
typeof value === "string" ? addMissingSpaces(value) : value
|
|
1108
1112
|
);
|
|
1109
|
-
|
|
1113
|
+
const joinedStyles = this.joinStyles(rn);
|
|
1114
|
+
return Object.entries(joinedStyles).filter(([, value2]) => isDefined(value2));
|
|
1110
1115
|
}
|
|
1111
1116
|
transformProperty(property, value) {
|
|
1112
1117
|
if (property in cssToRNMap) {
|
|
@@ -1176,6 +1181,20 @@ class RN {
|
|
|
1176
1181
|
};
|
|
1177
1182
|
}
|
|
1178
1183
|
}
|
|
1184
|
+
// Used when they're multiple styles with the same value that could be joined
|
|
1185
|
+
joinStyles(styles) {
|
|
1186
|
+
const keys = Object.keys(styles);
|
|
1187
|
+
if (BORDER_WIDTH_KEYS.every((key) => keys.includes(key))) {
|
|
1188
|
+
const borderWidth = styles.borderTopWidth;
|
|
1189
|
+
if (BORDER_WIDTH_KEYS.every((key) => styles[key] === borderWidth)) {
|
|
1190
|
+
return {
|
|
1191
|
+
...removeKeys(styles, BORDER_WIDTH_KEYS),
|
|
1192
|
+
borderWidth
|
|
1193
|
+
};
|
|
1194
|
+
}
|
|
1195
|
+
}
|
|
1196
|
+
return styles;
|
|
1197
|
+
}
|
|
1179
1198
|
}
|
|
1180
1199
|
|
|
1181
1200
|
class Units {
|
|
@@ -3,8 +3,8 @@ import { UniwindConfigBuilder as UniwindConfigBuilderBase } from './config.commo
|
|
|
3
3
|
declare class UniwindConfigBuilder extends UniwindConfigBuilderBase {
|
|
4
4
|
private runtimeCSSVariables;
|
|
5
5
|
constructor();
|
|
6
|
-
onThemeChange(): void;
|
|
7
6
|
updateCSSVariables(theme: ThemeName, variables: CSSVariables): void;
|
|
7
|
+
protected onThemeChange(): void;
|
|
8
8
|
private applyCSSVariable;
|
|
9
9
|
}
|
|
10
10
|
export declare const Uniwind: UniwindConfigBuilder;
|
|
@@ -7,19 +7,6 @@ class UniwindConfigBuilder extends UniwindConfigBuilderBase {
|
|
|
7
7
|
constructor() {
|
|
8
8
|
super();
|
|
9
9
|
}
|
|
10
|
-
onThemeChange() {
|
|
11
|
-
if (typeof document === "undefined") {
|
|
12
|
-
return;
|
|
13
|
-
}
|
|
14
|
-
document.documentElement.removeAttribute("style");
|
|
15
|
-
const runtimeCSSVariables = this.runtimeCSSVariables.get(this.currentTheme);
|
|
16
|
-
if (!runtimeCSSVariables) {
|
|
17
|
-
return;
|
|
18
|
-
}
|
|
19
|
-
Object.entries(runtimeCSSVariables).forEach(([varName, varValue]) => {
|
|
20
|
-
this.applyCSSVariable(varName, varValue);
|
|
21
|
-
});
|
|
22
|
-
}
|
|
23
10
|
updateCSSVariables(theme, variables) {
|
|
24
11
|
Object.entries(variables).forEach(([varName, varValue]) => {
|
|
25
12
|
if (!varName.startsWith("--") && __DEV__) {
|
|
@@ -35,6 +22,19 @@ class UniwindConfigBuilder extends UniwindConfigBuilderBase {
|
|
|
35
22
|
UniwindListener.notify([StyleDependency.Variables]);
|
|
36
23
|
}
|
|
37
24
|
}
|
|
25
|
+
onThemeChange() {
|
|
26
|
+
if (typeof document === "undefined") {
|
|
27
|
+
return;
|
|
28
|
+
}
|
|
29
|
+
document.documentElement.removeAttribute("style");
|
|
30
|
+
const runtimeCSSVariables = this.runtimeCSSVariables.get(this.currentTheme);
|
|
31
|
+
if (!runtimeCSSVariables) {
|
|
32
|
+
return;
|
|
33
|
+
}
|
|
34
|
+
Object.entries(runtimeCSSVariables).forEach(([varName, varValue]) => {
|
|
35
|
+
this.applyCSSVariable(varName, varValue);
|
|
36
|
+
});
|
|
37
|
+
}
|
|
38
38
|
applyCSSVariable(varName, varValue) {
|
|
39
39
|
if (typeof document === "undefined") {
|
|
40
40
|
return;
|
|
@@ -3,10 +3,10 @@ import { CSSVariables, GenerateStyleSheetsCallback, ThemeName } from '../types';
|
|
|
3
3
|
import { UniwindConfigBuilder as UniwindConfigBuilderBase } from './config.common';
|
|
4
4
|
declare class UniwindConfigBuilder extends UniwindConfigBuilderBase {
|
|
5
5
|
constructor();
|
|
6
|
-
__reinit(generateStyleSheetCallback: GenerateStyleSheetsCallback, themes: Array<string>): void;
|
|
7
|
-
onThemeChange(): void;
|
|
8
6
|
updateCSSVariables(theme: ThemeName, variables: CSSVariables): void;
|
|
9
7
|
updateInsets(insets: Insets): void;
|
|
8
|
+
protected __reinit(generateStyleSheetCallback: GenerateStyleSheetsCallback, themes: Array<string>): void;
|
|
9
|
+
protected onThemeChange(): void;
|
|
10
10
|
}
|
|
11
11
|
export declare const Uniwind: UniwindConfigBuilder;
|
|
12
12
|
export {};
|
|
@@ -8,14 +8,6 @@ class UniwindConfigBuilder extends UniwindConfigBuilderBase {
|
|
|
8
8
|
constructor() {
|
|
9
9
|
super();
|
|
10
10
|
}
|
|
11
|
-
__reinit(generateStyleSheetCallback, themes) {
|
|
12
|
-
super.__reinit(generateStyleSheetCallback, themes);
|
|
13
|
-
UniwindStore.reinit(generateStyleSheetCallback);
|
|
14
|
-
}
|
|
15
|
-
onThemeChange() {
|
|
16
|
-
UniwindStore.runtime.currentThemeName = this.currentTheme;
|
|
17
|
-
UniwindStore.reinit();
|
|
18
|
-
}
|
|
19
11
|
updateCSSVariables(theme, variables) {
|
|
20
12
|
Object.entries(variables).forEach(([varName, varValue]) => {
|
|
21
13
|
if (!varName.startsWith("--") && __DEV__) {
|
|
@@ -57,5 +49,13 @@ class UniwindConfigBuilder extends UniwindConfigBuilderBase {
|
|
|
57
49
|
UniwindStore.runtime.insets.right = insets.right ?? 0;
|
|
58
50
|
UniwindListener.notify([StyleDependency.Insets]);
|
|
59
51
|
}
|
|
52
|
+
__reinit(generateStyleSheetCallback, themes) {
|
|
53
|
+
super.__reinit(generateStyleSheetCallback, themes);
|
|
54
|
+
UniwindStore.reinit(generateStyleSheetCallback);
|
|
55
|
+
}
|
|
56
|
+
onThemeChange() {
|
|
57
|
+
UniwindStore.runtime.currentThemeName = this.currentTheme;
|
|
58
|
+
UniwindStore.reinit();
|
|
59
|
+
}
|
|
60
60
|
}
|
|
61
61
|
export const Uniwind = new UniwindConfigBuilder();
|
|
@@ -1,63 +1,88 @@
|
|
|
1
|
-
const types = ["
|
|
2
|
-
const sides = ["", "x", "y", "
|
|
1
|
+
const types = ["margin", "padding", "inset"];
|
|
2
|
+
const sides = ["inset", "x", "y", "top", "bottom", "left", "right"];
|
|
3
|
+
const safeAreaTypes = ["safe", "safe-or-*", "safe-offset-*"];
|
|
3
4
|
const spacing = "--spacing(--value(integer))";
|
|
4
5
|
const length = "--value([length])";
|
|
5
6
|
export const generateCSSForInsets = () => {
|
|
6
7
|
let css = `@utility h-screen-safe {
|
|
7
8
|
height: calc(100vh - (env(safe-area-inset-top) + env(safe-area-inset-bottom)));
|
|
8
9
|
}
|
|
10
|
+
|
|
9
11
|
`;
|
|
10
12
|
const getInsetsForSide = (side) => {
|
|
11
13
|
switch (side) {
|
|
12
|
-
case "
|
|
14
|
+
case "top":
|
|
13
15
|
return ["top"];
|
|
14
|
-
case "
|
|
16
|
+
case "bottom":
|
|
15
17
|
return ["bottom"];
|
|
16
|
-
case "
|
|
18
|
+
case "left":
|
|
17
19
|
return ["left"];
|
|
18
|
-
case "
|
|
20
|
+
case "right":
|
|
19
21
|
return ["right"];
|
|
20
22
|
case "x":
|
|
21
23
|
return ["left", "right"];
|
|
22
24
|
case "y":
|
|
23
25
|
return ["top", "bottom"];
|
|
24
|
-
|
|
26
|
+
case "inset":
|
|
25
27
|
return ["top", "bottom", "left", "right"];
|
|
28
|
+
default:
|
|
29
|
+
side;
|
|
30
|
+
return [];
|
|
31
|
+
}
|
|
32
|
+
};
|
|
33
|
+
const getUtilityName = (typeName, side, safeAreaType) => {
|
|
34
|
+
if (typeName === "inset") {
|
|
35
|
+
return `${side}-${safeAreaType}`;
|
|
36
|
+
}
|
|
37
|
+
const sideSuffix = side === "inset" ? "" : side.at(0);
|
|
38
|
+
return `${typeName.at(0)}${sideSuffix}-${safeAreaType}`;
|
|
39
|
+
};
|
|
40
|
+
const getStyleProperty = (typeName, inset) => {
|
|
41
|
+
if (typeName === "inset") {
|
|
42
|
+
return inset;
|
|
43
|
+
}
|
|
44
|
+
return `${typeName}-${inset}`;
|
|
45
|
+
};
|
|
46
|
+
const getStylesForSafeAreaType = (safeAreaType, styles) => {
|
|
47
|
+
switch (safeAreaType) {
|
|
48
|
+
case "safe":
|
|
49
|
+
return styles;
|
|
50
|
+
case "safe-or-*":
|
|
51
|
+
return styles.flatMap((style) => {
|
|
52
|
+
const styleWithoutSemicolon = style.replace(";", "");
|
|
53
|
+
return [
|
|
54
|
+
styleWithoutSemicolon.replace(/: (env.*)/, (_, env) => `: max(${env}, ${spacing});`),
|
|
55
|
+
styleWithoutSemicolon.replace(/: (env.*)/, (_, env) => `: max(${env}, ${length});`)
|
|
56
|
+
];
|
|
57
|
+
});
|
|
58
|
+
case "safe-offset-*":
|
|
59
|
+
return styles.flatMap((style) => {
|
|
60
|
+
const styleWithoutSemicolon = style.replace(";", "");
|
|
61
|
+
return [
|
|
62
|
+
styleWithoutSemicolon.replace(/: (env.*)/, (_, env) => `: calc(${env} + ${spacing});`),
|
|
63
|
+
styleWithoutSemicolon.replace(/: (env.*)/, (_, env) => `: calc(${env} + ${length});`)
|
|
64
|
+
];
|
|
65
|
+
});
|
|
66
|
+
default:
|
|
67
|
+
safeAreaType;
|
|
68
|
+
return [];
|
|
26
69
|
}
|
|
27
70
|
};
|
|
28
71
|
types.forEach((type) => {
|
|
29
72
|
sides.forEach((side) => {
|
|
30
|
-
const styleName = type === "m" ? "margin" : "padding";
|
|
31
73
|
const insets = getInsetsForSide(side);
|
|
32
|
-
const styles = insets.map((inset) => `${
|
|
33
|
-
|
|
34
|
-
const
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
return [
|
|
43
|
-
styleWithoutSemicolon.replace(/: (env.*)/, (_, env) => `: calc(${env} + ${spacing});`),
|
|
44
|
-
styleWithoutSemicolon.replace(/: (env.*)/, (_, env) => `: calc(${env} + ${length});`)
|
|
45
|
-
];
|
|
74
|
+
const styles = insets.map((inset) => `${getStyleProperty(type, inset)}: env(safe-area-inset-${inset});`);
|
|
75
|
+
safeAreaTypes.forEach((safeAreaType) => {
|
|
76
|
+
const utilityName = getUtilityName(type, side, safeAreaType);
|
|
77
|
+
css += [
|
|
78
|
+
`@utility ${utilityName} {`,
|
|
79
|
+
...getStylesForSafeAreaType(safeAreaType, styles).map((style) => ` ${style}`),
|
|
80
|
+
"}",
|
|
81
|
+
"",
|
|
82
|
+
""
|
|
83
|
+
].join("\n");
|
|
46
84
|
});
|
|
47
|
-
css += `
|
|
48
|
-
@utility ${type}${side}-safe {
|
|
49
|
-
${styles.join("\n ")}
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
@utility ${type}${side}-safe-or-* {
|
|
53
|
-
${safeStyles.join("\n ")}
|
|
54
|
-
}
|
|
55
|
-
|
|
56
|
-
@utility ${type}${side}-safe-offset-* {
|
|
57
|
-
${safeOffsetStyles.join("\n ")}
|
|
58
|
-
}
|
|
59
|
-
`;
|
|
60
85
|
});
|
|
61
86
|
});
|
|
62
|
-
return css.
|
|
87
|
+
return css.slice(0, -1);
|
|
63
88
|
};
|
|
@@ -66,5 +66,8 @@ const deepEqual = (a, b) => {
|
|
|
66
66
|
}
|
|
67
67
|
return keysA.every((key) => deepEqual(a[key], b[key]) && Object.prototype.hasOwnProperty.call(b, key));
|
|
68
68
|
};
|
|
69
|
+
const removeKeys = (obj, keysToRemove) => Object.fromEntries(
|
|
70
|
+
Object.entries(obj).filter(([key]) => !keysToRemove.includes(key))
|
|
71
|
+
);
|
|
69
72
|
|
|
70
|
-
export { isValidJSValue as a, addMissingSpaces as b, isDefined as c, deepEqual as d, shouldBeSerialized as e, isNumber as i, name as n, pipe as p, roundToPrecision as r, smartSplit as s, toCamelCase as t, uniq as u };
|
|
73
|
+
export { isValidJSValue as a, addMissingSpaces as b, isDefined as c, deepEqual as d, shouldBeSerialized as e, removeKeys as f, isNumber as i, name as n, pipe as p, roundToPrecision as r, smartSplit as s, toCamelCase as t, uniq as u };
|