From fad4f77f057c6120618f9bcaab987093eeaad061 Mon Sep 17 00:00:00 2001 From: Shallowmallow Date: Sat, 26 Aug 2023 19:24:10 +0200 Subject: [PATCH 1/6] selectors precedence --- haxe/ui/styles/StyleSheet.hx | 25 ++++++++++++++++++++- haxe/ui/styles/elements/Selector.hx | 34 +++++++++++++++++++++++++++++ 2 files changed, 58 insertions(+), 1 deletion(-) diff --git a/haxe/ui/styles/StyleSheet.hx b/haxe/ui/styles/StyleSheet.hx index 09195ec18..a1b8bf446 100644 --- a/haxe/ui/styles/StyleSheet.hx +++ b/haxe/ui/styles/StyleSheet.hx @@ -2,9 +2,11 @@ package haxe.ui.styles; import haxe.ui.core.Component; import haxe.ui.styles.elements.AnimationKeyFrames; +import haxe.ui.styles.elements.Directive; import haxe.ui.styles.elements.ImportElement; import haxe.ui.styles.elements.MediaQuery; import haxe.ui.styles.elements.RuleElement; +import haxe.ui.styles.elements.Selector; class StyleSheet { public var name:String; @@ -129,14 +131,35 @@ class StyleSheet { if (style == null) { style = {}; } + + if (rules.length <= 0) { + return style; + } + + var directives = new Map(); + var priorities = new Map(); + for (r in rules) { if (!r.match(c)) { continue; } - style.mergeDirectives(r.directives); + for (k in r.directives.keys()) { + var v = r.directives.get(k); + if (!directives.exists(k)) { + directives[k] = v; + priorities[k] = r.selector; + } else { + if (r.selector.hasPrecedenceOrEqualOver(priorities[k])) { + directives[k] = v; + priorities[k] = r.selector; + } + } + } } + style.mergeDirectives(directives); + return style; } } \ No newline at end of file diff --git a/haxe/ui/styles/elements/Selector.hx b/haxe/ui/styles/elements/Selector.hx index fd83e34bc..8358740a6 100644 --- a/haxe/ui/styles/elements/Selector.hx +++ b/haxe/ui/styles/elements/Selector.hx @@ -2,6 +2,7 @@ package haxe.ui.styles.elements; class Selector { public var parts:Array = []; + public var weight:Weight = new Weight(); public function new(s:String) { s = StringTools.replace(s, ">", " > "); @@ -45,9 +46,42 @@ class Selector { parts.push(current); parent = current; } + + // https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity + // Combinators, such as +, >, ~, " ", and ||, may make a selector more specific in what is selected + // but they don't add any value to the specificity weight. + for ( p in parts) { + if (p.id != null) { + weight.a++; + } + if (p.className != null) { + weight.b++; + } + if (p.pseudoClass != null) { + weight.c++; + } + } + } + + public function hasPrecedenceOrEqualOver(s:Selector) { + if (weight.a > s.weight.a) return true; + if (weight.a < s.weight.a) return false; + if (weight.b > s.weight.b) return true; + if (weight.b < s.weight.b) return false; + if (weight.c > s.weight.c) return true; + if (weight.c < s.weight.c) return false; + return true; } public function toString():String { return parts.join(" "); } } + +class Weight { + public var a:Int; + public var b:Int; + public var c:Int; + + public function new() {} +} From 9f06e2e2f5ae3995cd55bec6a8f427c7d9d86707 Mon Sep 17 00:00:00 2001 From: Shallowmallow Date: Sat, 26 Aug 2023 20:29:56 +0200 Subject: [PATCH 2/6] Renaming --- haxe/ui/styles/StyleSheet.hx | 8 ++++---- haxe/ui/styles/elements/Selector.hx | 2 +- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/haxe/ui/styles/StyleSheet.hx b/haxe/ui/styles/StyleSheet.hx index a1b8bf446..33f98b643 100644 --- a/haxe/ui/styles/StyleSheet.hx +++ b/haxe/ui/styles/StyleSheet.hx @@ -137,7 +137,7 @@ class StyleSheet { } var directives = new Map(); - var priorities = new Map(); + var selectedSelectors = new Map(); for (r in rules) { if (!r.match(c)) { @@ -148,11 +148,11 @@ class StyleSheet { var v = r.directives.get(k); if (!directives.exists(k)) { directives[k] = v; - priorities[k] = r.selector; + selectedSelectors[k] = r.selector; } else { - if (r.selector.hasPrecedenceOrEqualOver(priorities[k])) { + if (r.selector.hasPrecedenceOrEqualTo(selectedSelectors[k])) { directives[k] = v; - priorities[k] = r.selector; + selectedSelectors[k] = r.selector; } } } diff --git a/haxe/ui/styles/elements/Selector.hx b/haxe/ui/styles/elements/Selector.hx index 8358740a6..2c6575382 100644 --- a/haxe/ui/styles/elements/Selector.hx +++ b/haxe/ui/styles/elements/Selector.hx @@ -63,7 +63,7 @@ class Selector { } } - public function hasPrecedenceOrEqualOver(s:Selector) { + public function hasPrecedenceOrEqualTo(s:Selector) { if (weight.a > s.weight.a) return true; if (weight.a < s.weight.a) return false; if (weight.b > s.weight.b) return true; From b89b9427f7acede6cd6271e684192545a9ad913a Mon Sep 17 00:00:00 2001 From: Shallowmallow Date: Sun, 27 Aug 2023 21:17:53 +0200 Subject: [PATCH 3/6] Making it work for all apps --- haxe/ui/styles/StyleSheet.hx | 4 ++++ haxe/ui/styles/elements/Selector.hx | 4 ++-- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/haxe/ui/styles/StyleSheet.hx b/haxe/ui/styles/StyleSheet.hx index 33f98b643..06abb7ee1 100644 --- a/haxe/ui/styles/StyleSheet.hx +++ b/haxe/ui/styles/StyleSheet.hx @@ -153,6 +153,10 @@ class StyleSheet { if (r.selector.hasPrecedenceOrEqualTo(selectedSelectors[k])) { directives[k] = v; selectedSelectors[k] = r.selector; + if (k == "background-color") { + directives["background-color-end"] = v; + selectedSelectors["background-color-end"] = r.selector; + } } } } diff --git a/haxe/ui/styles/elements/Selector.hx b/haxe/ui/styles/elements/Selector.hx index 2c6575382..543275d94 100644 --- a/haxe/ui/styles/elements/Selector.hx +++ b/haxe/ui/styles/elements/Selector.hx @@ -68,8 +68,8 @@ class Selector { if (weight.a < s.weight.a) return false; if (weight.b > s.weight.b) return true; if (weight.b < s.weight.b) return false; - if (weight.c > s.weight.c) return true; - if (weight.c < s.weight.c) return false; + //if (weight.c > s.weight.c) return true; + //if (weight.c < s.weight.c) return false; return true; } From e4b4eb2fce8def559e372c24366465390cd62d68 Mon Sep 17 00:00:00 2001 From: Shallowmallow Date: Mon, 28 Aug 2023 18:00:17 +0200 Subject: [PATCH 4/6] Making it work for all apps --- haxe/ui/styles/elements/Selector.hx | 31 ++++++++++++----------------- haxe/ui/themes/ThemeManager.hx | 8 +++++--- 2 files changed, 18 insertions(+), 21 deletions(-) diff --git a/haxe/ui/styles/elements/Selector.hx b/haxe/ui/styles/elements/Selector.hx index 543275d94..54d1e12c5 100644 --- a/haxe/ui/styles/elements/Selector.hx +++ b/haxe/ui/styles/elements/Selector.hx @@ -2,7 +2,10 @@ package haxe.ui.styles.elements; class Selector { public var parts:Array = []; - public var weight:Weight = new Weight(); + + private var weightA = 0; + private var weightB = 0; + private var weightC = 0; public function new(s:String) { s = StringTools.replace(s, ">", " > "); @@ -52,24 +55,24 @@ class Selector { // but they don't add any value to the specificity weight. for ( p in parts) { if (p.id != null) { - weight.a++; + weightA++; } if (p.className != null) { - weight.b++; + weightB++; } if (p.pseudoClass != null) { - weight.c++; + weightC++; } } } public function hasPrecedenceOrEqualTo(s:Selector) { - if (weight.a > s.weight.a) return true; - if (weight.a < s.weight.a) return false; - if (weight.b > s.weight.b) return true; - if (weight.b < s.weight.b) return false; - //if (weight.c > s.weight.c) return true; - //if (weight.c < s.weight.c) return false; + if (weightA > s.weightA) return true; + if (weightA < s.weightA) return false; + if (weightB > s.weightB) return true; + if (weightB < s.weightB) return false; + if (weightC > s.weightC) return true; + if (weightC < s.weightC) return false; return true; } @@ -77,11 +80,3 @@ class Selector { return parts.join(" "); } } - -class Weight { - public var a:Int; - public var b:Int; - public var c:Int; - - public function new() {} -} diff --git a/haxe/ui/themes/ThemeManager.hx b/haxe/ui/themes/ThemeManager.hx index 3a5091dad..20738aa92 100644 --- a/haxe/ui/themes/ThemeManager.hx +++ b/haxe/ui/themes/ThemeManager.hx @@ -164,7 +164,9 @@ class ThemeManager { style += "\n" + styleData; } if (style != null) { - addStyleString(style); + var p = haxe.io.Path.directory(resourceId); + addStyleString(style, p); //haxe.io.Path.directory(resourceId)); + //priority++; } else { #if debug trace("WARNING: could not find " + resourceId); @@ -172,8 +174,8 @@ class ThemeManager { } } - public function addStyleString(style:String) { - Toolkit.styleSheet.parse(style); + public function addStyleString(style:String, sheetName:String) { + Toolkit.styleSheet.parse(style, sheetName); } private function buildThemeVars(themeName:String, vars:Map) { From 4bd30a5e6aeb313eef13da00aed1de07d6ef3951 Mon Sep 17 00:00:00 2001 From: Shallowmallow Date: Mon, 28 Aug 2023 18:58:13 +0200 Subject: [PATCH 5/6] Speed improvement --- haxe/ui/styles/StyleSheet.hx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/haxe/ui/styles/StyleSheet.hx b/haxe/ui/styles/StyleSheet.hx index 06abb7ee1..091c90077 100644 --- a/haxe/ui/styles/StyleSheet.hx +++ b/haxe/ui/styles/StyleSheet.hx @@ -127,6 +127,9 @@ class StyleSheet { } } + var directives = new Map(); + var selectedSelectors = new Map(); + public function buildStyleFor(c:Component, style:Style = null):Style { if (style == null) { style = {}; @@ -138,6 +141,7 @@ class StyleSheet { var directives = new Map(); var selectedSelectors = new Map(); + directives.clear(); for (r in rules) { if (!r.match(c)) { From 558d4e34fd6a4a601758af69f5fccc50ab48ef08 Mon Sep 17 00:00:00 2001 From: Shallowmallow Date: Mon, 28 Aug 2023 19:02:45 +0200 Subject: [PATCH 6/6] Speed improvement --- haxe/ui/styles/StyleSheet.hx | 2 -- 1 file changed, 2 deletions(-) diff --git a/haxe/ui/styles/StyleSheet.hx b/haxe/ui/styles/StyleSheet.hx index 091c90077..6966f56f3 100644 --- a/haxe/ui/styles/StyleSheet.hx +++ b/haxe/ui/styles/StyleSheet.hx @@ -139,8 +139,6 @@ class StyleSheet { return style; } - var directives = new Map(); - var selectedSelectors = new Map(); directives.clear(); for (r in rules) {