allow for LESS style extension syntax in haxeui css

haxeui · Jul 3, 2024 · e6045e6 · e6045e6
1 parent 276c5cb
commit e6045e6
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 6 deletions.
diff --git a/haxe/ui/styles/CompositeStyleSheet.hx b/haxe/ui/styles/CompositeStyleSheet.hx
@@ -98,20 +98,27 @@ class CompositeStyleSheet {
         return null;
     }
 
-    public function findRule(selector:String):RuleElement {
+    public function findRule(selector:String, useCache:Bool = false):RuleElement {
         for (s in _styleSheets) {
-            var el = s.findRule(selector);
+            var el = s.findRule(selector, useCache);
             if (el != null) {
                 return el;
             }
         }
         return null;
     }
 
-    public function findMatchingRules(selector:String):Array<RuleElement> {
+    private var _matchingRuleCache:Map<String, Array<RuleElement>> = new Map<String, Array<RuleElement>>();
+    public function findMatchingRules(selector:String, useCache = false):Array<RuleElement> {
+        if (useCache && _matchingRuleCache.exists(selector)) {
+            return _matchingRuleCache.get(selector);
+        }
         var m = [];
         for (s in _styleSheets) {
-            m = m.concat(s.findMatchingRules(selector));
+            m = m.concat(s.findMatchingRules(selector, useCache));
+        }
+        if (useCache && m.length > 0) {
+            _matchingRuleCache.set(selector, m);
         }
         return m;
     }

diff --git a/haxe/ui/styles/Parser.hx b/haxe/ui/styles/Parser.hx
@@ -3,13 +3,16 @@ package haxe.ui.styles;
 import haxe.ui.styles.elements.AnimationKeyFrames;
 import haxe.ui.styles.elements.AnimationKeyFrame;
 import haxe.ui.styles.elements.Directive;
+import haxe.ui.styles.elements.DirectiveExtension;
 import haxe.ui.styles.elements.ImportElement;
 import haxe.ui.styles.elements.MediaQuery;
 import haxe.ui.styles.elements.RuleElement;
 import haxe.ui.themes.ThemeManager;
 
 // based on: https://github.com/jotform/css.js/blob/master/css.js
 
+using StringTools;
+
 @:access(haxe.ui.themes.ThemeManager)
 class Parser {
     static var cssKeyframesRegex:EReg = ~/@keyframes\s*(\w+?)\s*\{([\s\S]*?\}\s*?)\}/gi;
@@ -172,6 +175,8 @@ class Parser {
                 return null;
             }
             d = new Directive(cssDirective, ValueTools.parse(cssValue));
+        } else if (line.startsWith(".")) {
+            d = new DirectiveExtension(line);
         } else {
             d = new Directive("", ValueTools.parse(line), true);
         }

diff --git a/haxe/ui/styles/Style.hx b/haxe/ui/styles/Style.hx
@@ -4,6 +4,7 @@ import haxe.ui.filters.Filter;
 import haxe.ui.filters.FilterParser;
 import haxe.ui.styles.animation.Animation.AnimationOptions;
 import haxe.ui.styles.elements.Directive;
+import haxe.ui.styles.elements.DirectiveExtension;
 import haxe.ui.util.Variant;
 
 enum StyleBorderType {
@@ -197,6 +198,14 @@ class Style {
     public function mergeDirectives(map:Map<String, Directive>) {
         for (key in map.keys()) {
             var v = map.get(key);
+            if ((v is DirectiveExtension)) {
+                var ruleElements = Toolkit.styleSheet.findMatchingRules(v.directive, true);
+                if (ruleElements != null) {
+                    for (ruleElement in ruleElements) {
+                        mergeDirectives(ruleElement.directives);
+                    }
+                }
+            }
 
             switch (key) {
                 case "left":

diff --git a/haxe/ui/styles/StyleSheet.hx b/haxe/ui/styles/StyleSheet.hx
@@ -50,7 +50,7 @@ class StyleSheet {
         return _mediaQueries.length > 0;
     }
 
-    public function findRule(selector:String):RuleElement {
+    public function findRule(selector:String, useCache = false):RuleElement {
         for (r in rules) {
             if (r.selector.toString() == selector) {
                 return r;
@@ -59,7 +59,7 @@ class StyleSheet {
         return null;
     }
 
-    public function findMatchingRules(selector:String):Array<RuleElement> {
+    public function findMatchingRules(selector:String, useCache = false):Array<RuleElement> {
         var m = [];
         for (r in rules) {
             if (r.selector.toString() == selector) {

diff --git a/haxe/ui/styles/elements/DirectiveExtension.hx b/haxe/ui/styles/elements/DirectiveExtension.hx
@@ -0,0 +1,7 @@
+package haxe.ui.styles.elements;
+
+class DirectiveExtension extends Directive {
+    public function new(directive:String) {
+        super(directive, null, false);
+    }
+}