@niibase/uniwind 1.7.0 → 1.8.0
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/CHANGELOG.md +35 -0
- package/dist/cli/index.cjs +91 -0
- package/dist/cli/index.mjs +84 -0
- package/dist/common/bundler/artifacts/css/themes.js +3 -0
- package/dist/common/bundler/cli/index.js +76 -0
- package/dist/common/bundler/config.js +6 -0
- package/dist/common/bundler/css-compiler/compileNativeCSS.js +3 -3
- package/dist/common/bundler/css-processor/addMetaToStylesTemplate.js +3 -3
- package/dist/common/bundler/css-processor/color.js +1 -1
- package/dist/common/bundler/css-processor/css.js +2 -2
- package/dist/common/bundler/css-processor/processor.js +7 -7
- package/dist/common/bundler/css-processor/units.js +1 -1
- package/dist/common/bundler/css-processor/utils.js +3 -5
- package/dist/common/bundler/css-processor/var.js +1 -1
- package/dist/common/bundler/css-visitor/rule-visitor.js +2 -2
- package/dist/common/bundler/logger.js +3 -0
- package/dist/common/core/config/config.native.js +1 -5
- package/dist/common/core/native/native-utils.js +1 -8
- package/dist/common/core/native/parsers/textShadow.js +6 -18
- package/dist/common/core/native/parsers/transforms.js +1 -5
- package/dist/common/core/native/store.js +19 -65
- package/dist/common/hooks/useCSSVariable/getVariableValue.native.js +4 -1
- package/dist/metro/index.cjs +29 -13
- package/dist/metro/index.mjs +22 -6
- package/dist/metro/transformer.cjs +61 -65
- package/dist/metro/transformer.mjs +23 -27
- package/dist/module/bundler/artifacts/css/themes.js +3 -0
- package/dist/module/bundler/cli/index.d.ts +2 -0
- package/dist/module/bundler/cli/index.js +81 -0
- package/dist/module/bundler/config.d.ts +1 -0
- package/dist/module/bundler/config.js +8 -0
- package/dist/module/bundler/css-compiler/compileNativeCSS.js +3 -3
- package/dist/module/bundler/css-compiler/compileTailwind.d.ts +1 -1
- package/dist/module/bundler/css-processor/addMetaToStylesTemplate.js +3 -3
- package/dist/module/bundler/css-processor/color.js +1 -1
- package/dist/module/bundler/css-processor/css.js +2 -2
- package/dist/module/bundler/css-processor/processor.js +7 -7
- package/dist/module/bundler/css-processor/units.js +1 -1
- package/dist/module/bundler/css-processor/utils.d.ts +0 -1
- package/dist/module/bundler/css-processor/utils.js +2 -4
- package/dist/module/bundler/css-processor/var.js +1 -1
- package/dist/module/bundler/css-visitor/rule-visitor.js +2 -2
- package/dist/module/bundler/logger.d.ts +1 -0
- package/dist/module/bundler/logger.js +3 -0
- package/dist/module/components/native/useStyle.d.ts +1 -1
- package/dist/module/components/react-native-gesture-handler/native/Text.d.ts +4 -1
- package/dist/module/core/config/config.native.js +1 -5
- package/dist/module/core/native/native-utils.d.ts +0 -1
- package/dist/module/core/native/native-utils.js +0 -6
- package/dist/module/core/native/parsers/textShadow.js +6 -18
- package/dist/module/core/native/parsers/transforms.js +1 -5
- package/dist/module/core/native/store.d.ts +2 -2
- package/dist/module/core/native/store.js +21 -63
- package/dist/module/core/types.d.ts +6 -4
- package/dist/module/hooks/useCSSVariable/getVariableValue.native.js +4 -1
- package/dist/shared/{uniwind.CFiAZ3D-.cjs → uniwind.BEqYiPBB.cjs} +17 -5
- package/dist/shared/uniwind.CFAAUZ2t.mjs +3 -0
- package/dist/shared/uniwind.DJ5M1Q4q.cjs +5 -0
- package/dist/shared/{uniwind.u-s1XVU8.mjs → uniwind.DgC4MT51.mjs} +18 -5
- package/dist/vite/index.cjs +75 -42
- package/dist/vite/index.mjs +72 -40
- package/package.json +37 -21
- package/src/bundler/adapters/metro/metro.ts +24 -3
- package/src/bundler/adapters/metro/patches.ts +1 -1
- package/src/bundler/adapters/vite/vite.ts +104 -51
- package/src/bundler/artifacts/css/themes.ts +6 -1
- package/src/bundler/cli/index.ts +105 -0
- package/src/bundler/config.ts +10 -0
- package/src/bundler/css-compiler/compileNativeCSS.ts +3 -3
- package/src/bundler/css-processor/addMetaToStylesTemplate.ts +3 -3
- package/src/bundler/css-processor/color.ts +1 -1
- package/src/bundler/css-processor/css.ts +2 -2
- package/src/bundler/css-processor/processor.ts +7 -7
- package/src/bundler/css-processor/units.ts +1 -1
- package/src/bundler/css-processor/utils.ts +2 -5
- package/src/bundler/css-processor/var.ts +1 -1
- package/src/bundler/css-visitor/rule-visitor.ts +2 -2
- package/src/bundler/logger.ts +4 -0
- package/src/core/config/config.native.ts +1 -5
- package/src/core/native/native-utils.ts +0 -9
- package/src/core/native/parsers/textShadow.ts +6 -18
- package/src/core/native/parsers/transforms.ts +1 -5
- package/src/core/native/runtime.ts +1 -1
- package/src/core/native/store.ts +24 -66
- package/src/core/types.ts +7 -4
- package/src/hooks/useCSSVariable/getVariableValue.native.ts +5 -2
|
@@ -8,7 +8,7 @@ export const compileNativeCSS = (bundlerConfig, tailwindCSS) => {
|
|
|
8
8
|
);
|
|
9
9
|
const vars = serializeJSObject(
|
|
10
10
|
Processor.vars,
|
|
11
|
-
(key, value) => `
|
|
11
|
+
(key, value) => `"${key}": vars => ${value}`
|
|
12
12
|
);
|
|
13
13
|
const keyframes = serializeJSObject(
|
|
14
14
|
Processor.keyframes,
|
|
@@ -17,11 +17,11 @@ export const compileNativeCSS = (bundlerConfig, tailwindCSS) => {
|
|
|
17
17
|
const scopedVars = Object.fromEntries(
|
|
18
18
|
Object.entries(Processor.scopedVars).map(([scopedVarsName, scopedVars2]) => [
|
|
19
19
|
scopedVarsName,
|
|
20
|
-
serializeJSObject(scopedVars2, (key, value) => `
|
|
20
|
+
serializeJSObject(scopedVars2, (key, value) => `"${key}": vars => ${value}`)
|
|
21
21
|
])
|
|
22
22
|
);
|
|
23
23
|
const serializedScopedVars = Object.entries(scopedVars).map(([scopedVarsName, scopedVars2]) => `"${scopedVarsName}": ({ ${scopedVars2} }),`).join("");
|
|
24
|
-
const currentColorVar = `
|
|
24
|
+
const currentColorVar = `currentColor: () => rt.colorScheme === 'dark' ? '#ffffff' : '#000000',`;
|
|
25
25
|
return [
|
|
26
26
|
"({",
|
|
27
27
|
`scopedVars: ({ ${serializedScopedVars} }),`,
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import type { UniwindBundlerConfig } from '../config';
|
|
2
|
-
export declare const compileTailwind: (bundlerConfig: UniwindBundlerConfig) => Promise<
|
|
2
|
+
export declare const compileTailwind: (bundlerConfig: UniwindBundlerConfig) => Promise<string>;
|
|
@@ -3,8 +3,8 @@ import { isDefined } from "@/common/utils";
|
|
|
3
3
|
import { serialize } from "./serialize.js";
|
|
4
4
|
import { toCamelCase } from "./utils.js";
|
|
5
5
|
const extractVarsFromString = (value) => {
|
|
6
|
-
const
|
|
7
|
-
return
|
|
6
|
+
const varsIndexes = [...value.matchAll(/vars\[/g)].map((m) => m.index);
|
|
7
|
+
return varsIndexes.map((index) => {
|
|
8
8
|
const afterIndex = value.slice(index + 5);
|
|
9
9
|
const closingIndex = afterIndex.indexOf("]");
|
|
10
10
|
const varName = afterIndex.slice(0, closingIndex);
|
|
@@ -56,7 +56,7 @@ export const addMetaToStylesTemplate = (Processor, currentPlatform) => {
|
|
|
56
56
|
dataAttributes,
|
|
57
57
|
...rest
|
|
58
58
|
} = style;
|
|
59
|
-
const entries = Object.entries(rest).flatMap(([property, value]) => Processor.RN.cssToRN(property, value)).map(([property, value]) => [`"${property}"`, `function() { return ${serialize(value)} }`]);
|
|
59
|
+
const entries = Object.entries(rest).flatMap(([property, value]) => Processor.RN.cssToRN(property, value)).map(([property, value]) => [`"${property}"`, `function(vars) { return ${serialize(value)} }`]);
|
|
60
60
|
if (platform) {
|
|
61
61
|
const isTV = currentPlatform === Platform.AndroidTV || currentPlatform === Platform.AppleTV;
|
|
62
62
|
const commonPlatform = isTV ? Platform.TV : Platform.Native;
|
|
@@ -24,7 +24,7 @@ export class Color {
|
|
|
24
24
|
}
|
|
25
25
|
try {
|
|
26
26
|
if (color.type === "currentcolor") {
|
|
27
|
-
return '
|
|
27
|
+
return 'vars["currentColor"]?.(vars)';
|
|
28
28
|
}
|
|
29
29
|
if (color.type === "rgb" || color.type === "srgb") {
|
|
30
30
|
const alpha = typeof color.alpha === "number" ? color.alpha : pipe(color.alpha)(
|
|
@@ -234,7 +234,7 @@ export class CSS {
|
|
|
234
234
|
return this.Processor.Color.processColor(declarationValue.value);
|
|
235
235
|
}
|
|
236
236
|
if (declarationValue.value === "currentcolor") {
|
|
237
|
-
return '
|
|
237
|
+
return 'vars["currentColor"]?.(vars)';
|
|
238
238
|
}
|
|
239
239
|
return declarationValue.value;
|
|
240
240
|
case "env":
|
|
@@ -271,7 +271,7 @@ export class CSS {
|
|
|
271
271
|
case "pair":
|
|
272
272
|
return declarationValue.inside.type;
|
|
273
273
|
case "currentcolor":
|
|
274
|
-
return '
|
|
274
|
+
return 'vars["currentColor"]?.(vars)';
|
|
275
275
|
case "calc":
|
|
276
276
|
return this.Processor.Functions.processCalc(declarationValue.value);
|
|
277
277
|
case "min":
|
|
@@ -121,7 +121,7 @@ export class ProcessorBuilder {
|
|
|
121
121
|
if (!isVar && important) {
|
|
122
122
|
style.importantProperties.push(property);
|
|
123
123
|
}
|
|
124
|
-
const match = typeof value === "string" ? value.match(/
|
|
124
|
+
const match = typeof value === "string" ? value.match(/vars\["(.*?)"\]/) : null;
|
|
125
125
|
if (match && !isVar) {
|
|
126
126
|
const className = this.declarationConfig.className;
|
|
127
127
|
if (className === null) {
|
|
@@ -251,12 +251,12 @@ export class ProcessorBuilder {
|
|
|
251
251
|
}
|
|
252
252
|
});
|
|
253
253
|
if ([rtl, theme, active, focus, disabled, dataAttributes].some(Boolean)) {
|
|
254
|
-
this.declarationConfig.rtl
|
|
255
|
-
this.declarationConfig.theme
|
|
256
|
-
this.declarationConfig.active
|
|
257
|
-
this.declarationConfig.focus
|
|
258
|
-
this.declarationConfig.disabled
|
|
259
|
-
this.declarationConfig.dataAttributes
|
|
254
|
+
this.declarationConfig.rtl ??= rtl;
|
|
255
|
+
this.declarationConfig.theme ??= theme;
|
|
256
|
+
this.declarationConfig.active ??= active;
|
|
257
|
+
this.declarationConfig.focus ??= focus;
|
|
258
|
+
this.declarationConfig.disabled ??= disabled;
|
|
259
|
+
this.declarationConfig.dataAttributes ??= dataAttributes;
|
|
260
260
|
rule.value.declarations?.declarations?.forEach((declaration) => this.addDeclaration(declaration));
|
|
261
261
|
rule.value.declarations?.importantDeclarations?.forEach((declaration) => this.addDeclaration(declaration, true));
|
|
262
262
|
rule.value.rules?.forEach((rule2) => this.parseRuleRec(rule2));
|
|
@@ -19,7 +19,7 @@ export class Units {
|
|
|
19
19
|
case "rem":
|
|
20
20
|
return length.value * this.Processor.vars["--uniwind-em"];
|
|
21
21
|
case "em":
|
|
22
|
-
return `
|
|
22
|
+
return `vars["--uniwind-em"]?.(vars) * ${length.value}`;
|
|
23
23
|
default:
|
|
24
24
|
this.logger.warn(`Unsupported unit - ${length.unit}`);
|
|
25
25
|
return length.value;
|
|
@@ -15,7 +15,6 @@ export declare const pipe: <T>(data: T) => PipeFns<T>;
|
|
|
15
15
|
export declare const isNumber: (data: any) => boolean;
|
|
16
16
|
export declare const smartSplit: (str: string, separator?: string | RegExp) => string[];
|
|
17
17
|
export declare const addMissingSpaces: (str: string) => string;
|
|
18
|
-
export declare const uniq: <T>(arr: Array<T>) => T[];
|
|
19
18
|
export declare const isValidJSValue: (jsValueString: string) => boolean;
|
|
20
19
|
export declare const shouldBeSerialized: (value: string) => boolean;
|
|
21
20
|
export declare const roundToPrecision: (value: number, precision: number) => number;
|
|
@@ -20,13 +20,11 @@ export const smartSplit = (str, separator = " ") => {
|
|
|
20
20
|
};
|
|
21
21
|
export const addMissingSpaces = (str) => pipe(str)(
|
|
22
22
|
(x) => x.trim(),
|
|
23
|
-
(x) => x.replace(/([^ {])this/g, "$1 this"),
|
|
24
23
|
(x) => x.replace(/\](?=\d)/g, "] "),
|
|
25
24
|
(x) => x.replace(/\](?=")/g, "] "),
|
|
26
|
-
(x) => x.replace(/\)(
|
|
25
|
+
(x) => x.replace(/\)(?=[^\s,])/g, ") "),
|
|
27
26
|
(x) => x.replace(/(?<!^)(?<!\s)"(?=\d)/g, '" ')
|
|
28
27
|
);
|
|
29
|
-
export const uniq = (arr) => Array.from(new Set(arr));
|
|
30
28
|
export const isValidJSValue = (jsValueString) => {
|
|
31
29
|
try {
|
|
32
30
|
new Function(`const test = ${jsValueString}`);
|
|
@@ -41,7 +39,7 @@ export const shouldBeSerialized = (value) => {
|
|
|
41
39
|
}
|
|
42
40
|
return [
|
|
43
41
|
isNumber(value),
|
|
44
|
-
value.startsWith("
|
|
42
|
+
value.startsWith("vars["),
|
|
45
43
|
value.startsWith("rt."),
|
|
46
44
|
/[*/+-]/.test(value),
|
|
47
45
|
value.includes('"'),
|
|
@@ -3,7 +3,7 @@ export class Var {
|
|
|
3
3
|
this.Processor = Processor;
|
|
4
4
|
}
|
|
5
5
|
processVar(variable) {
|
|
6
|
-
const value = `
|
|
6
|
+
const value = `vars[${JSON.stringify(variable.name.ident)}]?.(vars)`;
|
|
7
7
|
if (!variable.fallback || variable.fallback.length === 0) {
|
|
8
8
|
return value;
|
|
9
9
|
}
|
|
@@ -81,7 +81,7 @@ export class RuleVisitor {
|
|
|
81
81
|
return;
|
|
82
82
|
}
|
|
83
83
|
this.processedClassNames.add(firstSelector.name);
|
|
84
|
-
return {
|
|
84
|
+
return this.removeNulls({
|
|
85
85
|
type: "scope",
|
|
86
86
|
value: {
|
|
87
87
|
loc: styleRule.value.loc,
|
|
@@ -89,7 +89,7 @@ export class RuleVisitor {
|
|
|
89
89
|
scopeStart: [[{ type: "class", name: selectedVariant }]],
|
|
90
90
|
scopeEnd: this.bundlerConfig.themes.filter((theme) => theme !== selectedVariant).map((theme) => [{ type: "class", name: theme }])
|
|
91
91
|
}
|
|
92
|
-
};
|
|
92
|
+
});
|
|
93
93
|
}
|
|
94
94
|
// Fixes lightningcss serialization bug
|
|
95
95
|
removeNulls(value) {
|
|
@@ -3,6 +3,7 @@ export declare class Logger {
|
|
|
3
3
|
static debug: boolean;
|
|
4
4
|
constructor(name: string);
|
|
5
5
|
static log(message: string, meta?: string): void;
|
|
6
|
+
static info(message: string): void;
|
|
6
7
|
static error(message: string, meta?: string): void;
|
|
7
8
|
static warn(message: string, meta?: string): void;
|
|
8
9
|
log(message: string): void;
|
|
@@ -13,6 +13,9 @@ export class Logger {
|
|
|
13
13
|
}
|
|
14
14
|
console.log(`${blue}Uniwind ${meta}- ${message}${reset}`);
|
|
15
15
|
}
|
|
16
|
+
static info(message) {
|
|
17
|
+
console.log(`${blue}[Uniwind] ${message}${reset}`);
|
|
18
|
+
}
|
|
16
19
|
static error(message, meta = "") {
|
|
17
20
|
console.log(`${red}Uniwind Error ${meta}- ${message}${reset}`);
|
|
18
21
|
}
|
|
@@ -5,6 +5,6 @@ export declare function useStyle<T extends React.ComponentType<any>>(component:
|
|
|
5
5
|
style: RNStyle;
|
|
6
6
|
Component: T;
|
|
7
7
|
};
|
|
8
|
-
export declare const animatedComponentFamily: ((key: ComponentType, args: void) => ComponentType) & {
|
|
8
|
+
export declare const animatedComponentFamily: ((key: ComponentType, args: void) => ComponentType | import("react-native-reanimated/lib/typescript/createAnimatedComponent").AnimatedComponentType<Readonly<{}>, ComponentType>) & {
|
|
9
9
|
has(key: ComponentType): boolean;
|
|
10
10
|
};
|
|
@@ -1,2 +1,5 @@
|
|
|
1
|
-
|
|
1
|
+
import type { TextProps } from 'react-native';
|
|
2
|
+
export declare const Text: (props: TextProps & {
|
|
3
|
+
ref?: import("react").Ref<import("react").ComponentRef<typeof import("react-native").Text> | null>;
|
|
4
|
+
}) => React.JSX.Element;
|
|
2
5
|
export default Text;
|
|
@@ -25,11 +25,7 @@ class UniwindConfigBuilder extends UniwindConfigBuilderBase {
|
|
|
25
25
|
return varValue;
|
|
26
26
|
};
|
|
27
27
|
UniwindStore.vars[theme] ??= {};
|
|
28
|
-
|
|
29
|
-
configurable: true,
|
|
30
|
-
enumerable: true,
|
|
31
|
-
get: getValue
|
|
32
|
-
});
|
|
28
|
+
UniwindStore.vars[theme][varName] = getValue;
|
|
33
29
|
});
|
|
34
30
|
UniwindListener.notify([StyleDependency.Variables]);
|
|
35
31
|
}
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import type { UniwindRuntime } from '../types';
|
|
2
2
|
export declare const colorMix: (color: string, weight: number | string, mixColor: string) => string;
|
|
3
3
|
export declare function lightDark(this: UniwindRuntime, light: string, dark: string): string;
|
|
4
|
-
export declare const cloneWithAccessors: <T extends object>(obj: T) => any;
|
|
5
4
|
export declare const parseColor: (type: string, color: string) => string;
|
|
@@ -19,12 +19,6 @@ export function lightDark(light, dark) {
|
|
|
19
19
|
}
|
|
20
20
|
return light;
|
|
21
21
|
}
|
|
22
|
-
export const cloneWithAccessors = (obj) => {
|
|
23
|
-
const proto = Object.getPrototypeOf(obj);
|
|
24
|
-
const clone = Object.create(proto);
|
|
25
|
-
Object.defineProperties(clone, Object.getOwnPropertyDescriptors(obj));
|
|
26
|
-
return clone;
|
|
27
|
-
};
|
|
28
22
|
export const parseColor = (type, color) => {
|
|
29
23
|
try {
|
|
30
24
|
const parsedColor = parse(`${type}(${color})`);
|
|
@@ -7,26 +7,14 @@ export const parseTextShadowMutation = (styles) => {
|
|
|
7
7
|
const offsets = tokens.filter((token) => token !== color);
|
|
8
8
|
const [offsetX, offsetY, radius] = offsets;
|
|
9
9
|
if (offsetX !== void 0 && offsetY !== void 0) {
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
width: Number(offsetX),
|
|
15
|
-
height: Number(offsetY)
|
|
16
|
-
}
|
|
17
|
-
});
|
|
10
|
+
styles.textShadowOffset = {
|
|
11
|
+
width: Number(offsetX),
|
|
12
|
+
height: Number(offsetY)
|
|
13
|
+
};
|
|
18
14
|
delete styles.textShadow;
|
|
19
15
|
}
|
|
20
16
|
if (radius !== void 0) {
|
|
21
|
-
|
|
22
|
-
configurable: true,
|
|
23
|
-
enumerable: true,
|
|
24
|
-
value: Number(radius)
|
|
25
|
-
});
|
|
17
|
+
styles.textShadowRadius = Number(radius);
|
|
26
18
|
}
|
|
27
|
-
|
|
28
|
-
configurable: true,
|
|
29
|
-
enumerable: true,
|
|
30
|
-
value: color
|
|
31
|
-
});
|
|
19
|
+
styles.textShadowColor = color;
|
|
32
20
|
};
|
|
@@ -42,10 +42,6 @@ export const parseTransformsMutation = (styles, preserve = false) => {
|
|
|
42
42
|
}
|
|
43
43
|
}
|
|
44
44
|
if (transformsResult.length > 0) {
|
|
45
|
-
|
|
46
|
-
configurable: true,
|
|
47
|
-
enumerable: true,
|
|
48
|
-
value: transformsResult
|
|
49
|
-
});
|
|
45
|
+
styles.transform = transformsResult;
|
|
50
46
|
}
|
|
51
47
|
};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { StyleDependency } from '../../common/consts';
|
|
2
|
-
import type { ComponentState, GenerateStyleSheetsCallback, RNStyle, ThemeName, UniwindContextType } from '../types';
|
|
2
|
+
import type { ComponentState, GenerateStyleSheetsCallback, RNStyle, ThemeName, UniwindContextType, Vars } from '../types';
|
|
3
3
|
type StylesResult = {
|
|
4
4
|
styles: RNStyle;
|
|
5
5
|
dependencies: Array<StyleDependency>;
|
|
@@ -7,7 +7,7 @@ type StylesResult = {
|
|
|
7
7
|
};
|
|
8
8
|
declare class UniwindStoreBuilder {
|
|
9
9
|
runtime: import("../types").UniwindRuntime;
|
|
10
|
-
vars: Record<ThemeName,
|
|
10
|
+
vars: Record<ThemeName, Vars>;
|
|
11
11
|
private stylesheet;
|
|
12
12
|
private keyframes;
|
|
13
13
|
private cache;
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import { Dimensions, Platform } from "react-native";
|
|
2
2
|
import { Orientation, Platform as UniwindPlatform, StyleDependency, UNIWIND_PLATFORM_VARIABLES, UNIWIND_THEME_VARIABLES } from "../../common/consts.js";
|
|
3
3
|
import { UniwindListener } from "../listener.js";
|
|
4
|
-
import { cloneWithAccessors } from "./native-utils.js";
|
|
5
4
|
import {
|
|
6
5
|
parseBoxShadow,
|
|
7
6
|
parseFontVariant,
|
|
@@ -45,18 +44,18 @@ class UniwindStoreBuilder {
|
|
|
45
44
|
const commonPlatformVars = scopedVars[`${UNIWIND_PLATFORM_VARIABLES}${commonPlatform}`];
|
|
46
45
|
const platformVars = scopedVars[`${UNIWIND_PLATFORM_VARIABLES}${platform}`];
|
|
47
46
|
if (commonPlatformVars) {
|
|
48
|
-
Object.
|
|
47
|
+
Object.assign(vars, commonPlatformVars);
|
|
49
48
|
}
|
|
50
49
|
if (platformVars) {
|
|
51
|
-
Object.
|
|
50
|
+
Object.assign(vars, platformVars);
|
|
52
51
|
}
|
|
53
52
|
this.keyframes = keyframes;
|
|
54
53
|
this.stylesheet = stylesheet;
|
|
55
54
|
this.vars = Object.fromEntries(themes.map((theme) => {
|
|
56
|
-
const clonedVars =
|
|
55
|
+
const clonedVars = Object.create(vars);
|
|
57
56
|
const themeVars = scopedVars[`${UNIWIND_THEME_VARIABLES}${theme}`];
|
|
58
57
|
if (themeVars) {
|
|
59
|
-
Object.
|
|
58
|
+
Object.assign(clonedVars, themeVars);
|
|
60
59
|
}
|
|
61
60
|
return [theme, clonedVars];
|
|
62
61
|
}));
|
|
@@ -66,7 +65,7 @@ class UniwindStoreBuilder {
|
|
|
66
65
|
}
|
|
67
66
|
};
|
|
68
67
|
resolveStyles(classNames, componentProps, state, uniwindContext) {
|
|
69
|
-
const
|
|
68
|
+
const resultGetters = {};
|
|
70
69
|
const theme = uniwindContext.scopedTheme ?? this.runtime.currentThemeName;
|
|
71
70
|
let vars = this.vars[theme];
|
|
72
71
|
const originalVars = vars;
|
|
@@ -102,93 +101,52 @@ class UniwindStoreBuilder {
|
|
|
102
101
|
}
|
|
103
102
|
if (property[0] === "-") {
|
|
104
103
|
if (vars === originalVars) {
|
|
105
|
-
vars =
|
|
104
|
+
vars = Object.create(originalVars);
|
|
106
105
|
}
|
|
107
|
-
|
|
108
|
-
configurable: true,
|
|
109
|
-
enumerable: true,
|
|
110
|
-
get: valueGetter
|
|
111
|
-
});
|
|
106
|
+
vars[property] = valueGetter;
|
|
112
107
|
} else {
|
|
113
|
-
|
|
114
|
-
configurable: true,
|
|
115
|
-
enumerable: true,
|
|
116
|
-
get: () => valueGetter.call(vars)
|
|
117
|
-
});
|
|
108
|
+
resultGetters[property] = valueGetter;
|
|
118
109
|
}
|
|
119
110
|
bestBreakpoints.set(property, style);
|
|
120
111
|
}
|
|
121
112
|
}
|
|
122
113
|
}
|
|
114
|
+
const result = Object.fromEntries(
|
|
115
|
+
Object.entries(resultGetters).map(([property, valueGetter]) => [property, valueGetter(vars)])
|
|
116
|
+
);
|
|
123
117
|
if (result.lineHeight !== void 0 && result.lineHeight < 6) {
|
|
124
|
-
|
|
125
|
-
value: result.fontSize * result.lineHeight,
|
|
126
|
-
configurable: true,
|
|
127
|
-
enumerable: true
|
|
128
|
-
});
|
|
118
|
+
result.lineHeight *= result.fontSize;
|
|
129
119
|
}
|
|
130
120
|
if (result.boxShadow !== void 0) {
|
|
131
|
-
|
|
132
|
-
value: parseBoxShadow(result.boxShadow),
|
|
133
|
-
configurable: true,
|
|
134
|
-
enumerable: true
|
|
135
|
-
});
|
|
121
|
+
result.boxShadow = parseBoxShadow(result.boxShadow);
|
|
136
122
|
}
|
|
137
123
|
if (result.visibility === "hidden") {
|
|
138
|
-
|
|
139
|
-
value: "none",
|
|
140
|
-
configurable: true,
|
|
141
|
-
enumerable: true
|
|
142
|
-
});
|
|
124
|
+
result.display = "none";
|
|
143
125
|
}
|
|
144
126
|
if (result.borderStyle !== void 0 && result.borderColor === void 0) {
|
|
145
|
-
|
|
146
|
-
value: "#000000",
|
|
147
|
-
configurable: true,
|
|
148
|
-
enumerable: true
|
|
149
|
-
});
|
|
127
|
+
result.borderColor = "#000000";
|
|
150
128
|
}
|
|
151
129
|
if (result.outlineStyle !== void 0 && result.outlineColor === void 0) {
|
|
152
|
-
|
|
153
|
-
value: "#000000",
|
|
154
|
-
configurable: true,
|
|
155
|
-
enumerable: true
|
|
156
|
-
});
|
|
130
|
+
result.outlineColor = "#000000";
|
|
157
131
|
}
|
|
158
132
|
if (result.fontVariant !== void 0) {
|
|
159
|
-
|
|
160
|
-
value: parseFontVariant(result.fontVariant),
|
|
161
|
-
configurable: true,
|
|
162
|
-
enumerable: true
|
|
163
|
-
});
|
|
133
|
+
result.fontVariant = parseFontVariant(result.fontVariant);
|
|
164
134
|
}
|
|
165
135
|
parseTransformsMutation(result);
|
|
166
136
|
parseTransitionsMutation(result);
|
|
167
137
|
if (typeof result.animationName === "string") {
|
|
168
|
-
|
|
169
|
-
value: this.keyframes[result.animationName] ?? [],
|
|
170
|
-
configurable: true,
|
|
171
|
-
enumerable: true
|
|
172
|
-
});
|
|
138
|
+
result.animationName = this.keyframes[result.animationName] ?? [];
|
|
173
139
|
} else if (Array.isArray(result.animationName)) {
|
|
174
|
-
|
|
175
|
-
value: result.animationName.map((animationName) => this.keyframes[animationName] ?? void 0).filter(Boolean),
|
|
176
|
-
configurable: true,
|
|
177
|
-
enumerable: true
|
|
178
|
-
});
|
|
140
|
+
result.animationName = result.animationName.map((animationName) => this.keyframes[animationName] ?? void 0).filter(Boolean);
|
|
179
141
|
}
|
|
180
142
|
if (result.experimental_backgroundImage !== void 0) {
|
|
181
|
-
|
|
182
|
-
value: resolveGradient(result.experimental_backgroundImage),
|
|
183
|
-
configurable: true,
|
|
184
|
-
enumerable: true
|
|
185
|
-
});
|
|
143
|
+
result.experimental_backgroundImage = resolveGradient(result.experimental_backgroundImage);
|
|
186
144
|
}
|
|
187
145
|
if (result.textShadow !== void 0) {
|
|
188
146
|
parseTextShadowMutation(result);
|
|
189
147
|
}
|
|
190
148
|
return {
|
|
191
|
-
styles:
|
|
149
|
+
styles: result,
|
|
192
150
|
dependencies: Array.from(dependencies),
|
|
193
151
|
dependencySum,
|
|
194
152
|
hasDataAttributes
|
|
@@ -4,12 +4,14 @@ import type { CSSAnimationKeyframes } from 'react-native-reanimated';
|
|
|
4
4
|
import type { ControlPoint, CubicBezierEasing, LinearEasing, StepsEasing, StepsModifier } from 'react-native-reanimated/lib/typescript/css/easing';
|
|
5
5
|
import type { ColorScheme, Orientation, StyleDependency } from '../common/consts';
|
|
6
6
|
import type { UniwindContext } from './context';
|
|
7
|
+
export type Vars = Record<PropertyKey, Var>;
|
|
8
|
+
export type Var = (vars: Vars) => unknown;
|
|
7
9
|
export type Style = {
|
|
8
|
-
entries: Array<[string,
|
|
10
|
+
entries: Array<[string, Var]>;
|
|
9
11
|
minWidth: number;
|
|
10
12
|
maxWidth: number;
|
|
11
13
|
orientation: Orientation | null;
|
|
12
|
-
theme:
|
|
14
|
+
theme: ThemeName | null;
|
|
13
15
|
rtl: boolean | null;
|
|
14
16
|
native: boolean;
|
|
15
17
|
dependencies: Array<StyleDependency> | null;
|
|
@@ -25,9 +27,9 @@ export type Style = {
|
|
|
25
27
|
export type StyleSheets = Record<string, Array<Style>>;
|
|
26
28
|
export type GenerateStyleSheetsCallback = (rt: UniwindRuntime) => {
|
|
27
29
|
stylesheet: StyleSheets;
|
|
28
|
-
vars:
|
|
30
|
+
vars: Vars;
|
|
29
31
|
keyframes: Record<string, CSSAnimationKeyframes>;
|
|
30
|
-
scopedVars: Partial<Record<string,
|
|
32
|
+
scopedVars: Partial<Record<string, Vars>>;
|
|
31
33
|
};
|
|
32
34
|
export interface UniwindConfig {
|
|
33
35
|
}
|
|
@@ -1,2 +1,5 @@
|
|
|
1
1
|
import { UniwindRuntime, UniwindStore } from "../../core/native/index.js";
|
|
2
|
-
export const getVariableValue = (name, uniwindContext) =>
|
|
2
|
+
export const getVariableValue = (name, uniwindContext) => {
|
|
3
|
+
const vars = UniwindStore.vars[uniwindContext.scopedTheme ?? UniwindRuntime.currentThemeName];
|
|
4
|
+
return vars?.[name]?.(vars);
|
|
5
|
+
};
|
|
@@ -136,6 +136,7 @@ const overwriteDisabled = `@custom-variant disabled {
|
|
|
136
136
|
const OVERWRITE_CSS = overwriteDisabled;
|
|
137
137
|
|
|
138
138
|
const red = "\x1B[91m";
|
|
139
|
+
const blue = "\x1B[36m";
|
|
139
140
|
const reset = "\x1B[0m";
|
|
140
141
|
class Logger {
|
|
141
142
|
constructor(name) {
|
|
@@ -147,6 +148,9 @@ class Logger {
|
|
|
147
148
|
return;
|
|
148
149
|
}
|
|
149
150
|
}
|
|
151
|
+
static info(message) {
|
|
152
|
+
console.log(`${blue}[Uniwind] ${message}${reset}`);
|
|
153
|
+
}
|
|
150
154
|
static error(message, meta = "") {
|
|
151
155
|
console.log(`${red}Uniwind Error ${meta}- ${message}${reset}`);
|
|
152
156
|
}
|
|
@@ -212,6 +216,9 @@ const generateCSSForThemes = async (themes, input) => {
|
|
|
212
216
|
}
|
|
213
217
|
const importUrls = /* @__PURE__ */ new Set();
|
|
214
218
|
const importsCSS = dependencies.filter((dependency) => {
|
|
219
|
+
if (dependency.type !== "import") {
|
|
220
|
+
return false;
|
|
221
|
+
}
|
|
215
222
|
if (dependency.url.startsWith(".")) {
|
|
216
223
|
importUrls.add(path__default.resolve(path__default.dirname(cssPath), dependency.url));
|
|
217
224
|
return false;
|
|
@@ -455,7 +462,7 @@ class RuleVisitor {
|
|
|
455
462
|
return;
|
|
456
463
|
}
|
|
457
464
|
this.processedClassNames.add(firstSelector.name);
|
|
458
|
-
return {
|
|
465
|
+
return this.removeNulls({
|
|
459
466
|
type: "scope",
|
|
460
467
|
value: {
|
|
461
468
|
loc: styleRule.value.loc,
|
|
@@ -463,7 +470,7 @@ class RuleVisitor {
|
|
|
463
470
|
scopeStart: [[{ type: "class", name: selectedVariant }]],
|
|
464
471
|
scopeEnd: this.bundlerConfig.themes.filter((theme) => theme !== selectedVariant).map((theme) => [{ type: "class", name: theme }])
|
|
465
472
|
}
|
|
466
|
-
};
|
|
473
|
+
});
|
|
467
474
|
}
|
|
468
475
|
// Fixes lightningcss serialization bug
|
|
469
476
|
removeNulls(value) {
|
|
@@ -561,6 +568,14 @@ class UniwindBundlerConfig {
|
|
|
561
568
|
static fromViteConfig(config) {
|
|
562
569
|
return new UniwindBundlerConfig(config, Platform.Web);
|
|
563
570
|
}
|
|
571
|
+
static fromCliConfig(config) {
|
|
572
|
+
if (typeof config.cssEntryFile === "undefined") {
|
|
573
|
+
throw new Error(
|
|
574
|
+
"Uniwind: You need to pass css entry file, e.g. uniwind generate-artifacts --css ./global.css. Run uniwind generate-artifacts --help for usage."
|
|
575
|
+
);
|
|
576
|
+
}
|
|
577
|
+
return new UniwindBundlerConfig(config, Platform.Web);
|
|
578
|
+
}
|
|
564
579
|
get cssPath() {
|
|
565
580
|
return path__default.join(process.cwd(), this.config.cssEntryFile);
|
|
566
581
|
}
|
|
@@ -591,8 +606,6 @@ class UniwindBundlerConfig {
|
|
|
591
606
|
}
|
|
592
607
|
}
|
|
593
608
|
|
|
594
|
-
const name = "@niibase/uniwind";
|
|
595
|
-
|
|
596
609
|
exports.DEFAULT_SCREEN_HEIGHT = DEFAULT_SCREEN_HEIGHT;
|
|
597
610
|
exports.DEFAULT_SCREEN_WIDTH = DEFAULT_SCREEN_WIDTH;
|
|
598
611
|
exports.Logger = Logger;
|
|
@@ -602,4 +615,3 @@ exports.UNIWIND_PLATFORM_VARIABLES = UNIWIND_PLATFORM_VARIABLES;
|
|
|
602
615
|
exports.UNIWIND_THEME_VARIABLES = UNIWIND_THEME_VARIABLES;
|
|
603
616
|
exports.UniwindBundlerConfig = UniwindBundlerConfig;
|
|
604
617
|
exports.isDefined = isDefined;
|
|
605
|
-
exports.name = name;
|