8000 fix: inline style handling · wt-cristiano/nativescript-vue@c198bad · GitHub
[go: up one dir, main page]
Skip to content

Commit c198bad

Browse files
rigor789rigor789
committed
fix: inline style handling
closes nativescript-vue#1011
1 parent 3ab65c7 commit c198bad

File tree

2 files changed

+61
-20
lines changed

2 files changed

+61
-20
lines changed

‎demo/app/components/GH1011.vue

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<!-- https://github.com/nativescript-vue/nativescript-vue/issues/1011 -->
2+
<template>
3+
<Label
4+
text="Test text"
5+
class="text-2xl m-6"
6+
backgroundColor="yellow"
7+
style="background-color: red;"
8+
></Label>
9+
</template>

‎src/renderer/modules/style.ts

Lines changed: 52 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,74 @@
11
import { NSVElement } from "../../dom";
2+
import { NormalizedStyle } from "@vue/shared";
23

34
type Style = string | null;
45

5-
function isRule(node: any): boolean {
6-
return node.type === "rule";
6+
function normalizeStyle(style: NormalizedStyle | Style): NormalizedStyle {
7+
if (!style) {
8+
return null;
9+
}
10+
11+
if (typeof style === "string" && style?.trim().charAt(0) === "{") {
12+
return JSON.parse(style);
13+
}
14+
15+
return style as NormalizedStyle;
716
}
817

9-
function isDeclaration(node: any): boolean {
10-
return node.type === "declaration";
18+
function normalizeProperty(property: string) {
19+
if (property.endsWith("Align")) {
20+
// NativeScript uses Alignment instead of Align, this ensures that text-align works
21+
property += "ment";
22+
}
23+
24+
return property;
1125
}
1226

13-
function createDeclaration(decl: any): any {
14-
return { property: decl.property.toLowerCase(), value: decl.value };
27+
export const STYLE_ORIGINAL_VALUE = Symbol("style_original_value");
28+
29+
function addStyleProperty(el: NSVElement, property: string, value: any) {
30+
const _sov: Map<string, any> = (el[STYLE_ORIGINAL_VALUE] ??= new Map());
31+
property = normalizeProperty(property);
32+
33+
if (!_sov.has(property)) {
34+
_sov.set(property, el.style[property]);
35+
}
36+
37+
el.style[property] = value;
1538
}
1639

17-
function declarationsFromAstNodes(astRules: any[]): any[] {
18-
return astRules.filter(isRule).map((rule) => {
19-
return rule.declarations.filter(isDeclaration).map(createDeclaration);
20-
});
40+
function removeStyleProperty(el: NSVElement, property: string) {
41+
const _sov: Map<string, any> = (el[STYLE_ORIGINAL_VALUE] ??= new Map());
42+
property = normalizeProperty(property);
43+
44+
// only delete styles we added
45+
if (_sov.has(property)) {
46+
const originalValue = _sov.get(property);
47+
_sov.delete(property);
48+
// edge case: if a style property also exists as an attribute (ie backgroundColor)
49+
// changing the attribute will not update our originalValue, so when removing
50+
// the previous color will be applied. Fixing this would involve listening to
51+
// individual attribute changes, and it's not worth the overhead.
52+
el.style[property] = originalValue;
53+
}
2154
}
2255

2356
export function patchStyle(el: NSVElement, prev: Style, next: Style) {
2457
if (prev) {
25-
// todo: check if we can substitute cssTreeParse with parseInlineCSS from compiler/transforms/transformStyle (by extracting it to shared)
26-
// reset previous styles
27-
const localStyle = `local { ${prev} }`;
28-
// const ast: any = cssTreeParse(localStyle, undefined)
29-
// const [declarations] = declarationsFromAstNodes(ast.stylesheet.rules)
30-
31-
// declarations.forEach((d: any) => {
32-
// ;(el.nativeView.style as any)[d.property] = unsetValue
33-
// })
58+
const style = normalizeStyle(prev);
59+
// undo old styles
60+
Object.keys(style).forEach((property) => {
61+
removeStyleProperty(el, property);
62+
});
3463
}
3564

3665
if (!next) {
3766
el.removeAttribute("style");
3867
} else {
3968
// set new styles
40-
el.style = next;
69+
const style = normalizeStyle(next);
70+
Object.keys(style).forEach((property) => {
71+
addStyleProperty(el, property, style[property]);
72+
});
4173
}
4274
}

0 commit comments

Comments
 (0)
0