Initial support for ::before and ::after pseudo elements (#153)

DioxusLabs · Oct 31, 2024 · 6b63c84 · 6b63c84
1 parent caa3bbf
commit 6b63c84
Show file tree

Hide file tree

Showing 6 changed files with 325 additions and 24 deletions.
diff --git a/examples/assets/pseudo.html b/examples/assets/pseudo.html
@@ -0,0 +1,82 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v6.6.0/css/all.css" />
+    <!--<link rel="stylesheet" href="file:///Users/nico/code/oss/blitz/examples/assets/fa5.css" />-->
+    <style type="text/css">
+
+      @font-face {
+        font-family: 'Font Awesome 6 Brands';
+        font-style: normal;
+        font-weight: 400;
+        font-display: block;
+        src: url("https://use.fontawesome.com/releases/v6.6.0/webfonts/fa-brands-400.woff2") format("woff2"), url("https://use.fontawesome.com/releases/v6.6.0/webfonts/fa-brands-400.ttf") format("truetype");
+      }
+
+      .pseudo::before {
+        content: "A";
+        font-style: normal;
+      }
+
+      .qqq {
+        font-family: "Font Awesome 6 Brands";
+        font-style: normal;
+        font-size: 32px;
+      }
+
+      .fa-solid,
+      .fa-regular,
+      .fa-brands,
+      .fas,
+      .far,
+      .fab,
+      .fa-sharp-solid,
+      .fa-classic,
+      .fa {
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-font-smoothing: antialiased;
+        display: var(--fa-display, inline-block);
+        font-style: normal;
+        font-variant: normal;
+        line-height: 1;
+        text-rendering: auto;
+      }
+
+      .fab,
+      .fa-brands {
+        font-family: 'Font Awesome 6 Brands';
+      }
+
+      .fab,
+      .fa-brands {
+        font-weight: 400;
+      }
+
+      .fa-github:before {
+        content: "\f09b";
+      }
+
+      .gh:before {
+        content: "\f09b";
+        font-family: 'Font Awesome 6 Brands';
+        font-style: normal;
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-font-smoothing: antialiased;
+      }
+
+
+    </style>
+  </head>
+  <body>
+    <div><span class="icon"><i class="gh"></i></span>Hello</div>
+    <!--<div><span class="icon"><i class="pseudo"></i></span>Hello</div>-->
+    <div><span class="icon"><i class="fab fa-github"></i></span>Hello</div>
+    <!--<p>
+      <span class="icon"><i class="fab fa-github"></i></span>
+      <span class="icon"><i class="fab fa-twitter"></i></span>
+      <span class="icon"><i class="fab fa-mastodon"></i></span>
+      <span class="icon"><i class="psuedo"></i>Hello</span>
+    </p>-->
+    <div class="qqq">&#xf09b; &#xf099; &#xf4f6;</div>
+  </body>
+</html>
diff --git a/packages/blitz-dom/src/debug.rs b/packages/blitz-dom/src/debug.rs
@@ -83,16 +83,15 @@ impl Document {
 
         println!("Layout Parent: {:?}", node.layout_parent.get());
 
-        let layout_children: Vec<_> = node
-            .layout_children
-            .borrow()
-            .as_ref()
-            .unwrap()
-            .iter()
-            .map(|id| &self.nodes[*id])
-            .map(|node| (node.id, node.order(), node.node_debug_str()))
-            .collect();
-        println!("Layout Children: {:?}", layout_children);
+        let layout_children: Option<Vec<_>> = node.layout_children.borrow().as_ref().map(|lc| {
+            lc.iter()
+                .map(|id| &self.nodes[*id])
+                .map(|node| (node.id, node.order(), node.node_debug_str()))
+                .collect()
+        });
+        if let Some(layout_children) = layout_children {
+            println!("Layout Children: {:?}", layout_children);
+        }
         // taffy::print_tree(&self.dom, node_id.into());
     }
 }
diff --git a/packages/blitz-dom/src/document.rs b/packages/blitz-dom/src/document.rs
@@ -861,6 +861,50 @@ impl Document {
         self.root_element().hit(x, y)
     }
 
+    pub fn iter_children_mut(&mut self, node_id: usize, mut cb: impl FnMut(usize, &mut Document)) {
+        let children = std::mem::take(&mut self.nodes[node_id].children);
+        for child_id in children.iter().cloned() {
+            cb(child_id, self);
+        }
+        self.nodes[node_id].children = children;
+    }
+
+    pub fn iter_subtree_mut(&mut self, node_id: usize, mut cb: impl FnMut(usize, &mut Document)) {
+        iter_subtree_mut_inner(self, node_id, &mut cb);
+        fn iter_subtree_mut_inner(
+            doc: &mut Document,
+            node_id: usize,
+            cb: &mut impl FnMut(usize, &mut Document),
+        ) {
+            let children = std::mem::take(&mut doc.nodes[node_id].children);
+            for child_id in children.iter().cloned() {
+                cb(child_id, doc);
+                iter_subtree_mut_inner(doc, child_id, cb);
+            }
+            doc.nodes[node_id].children = children;
+        }
+    }
+
+    pub fn iter_children_and_pseudos_mut(
+        &mut self,
+        node_id: usize,
+        mut cb: impl FnMut(usize, &mut Document),
+    ) {
+        let before = self.nodes[node_id].before.take();
+        if let Some(before_node_id) = before {
+            cb(before_node_id, self)
+        }
+        self.nodes[node_id].before = before;
+
+        self.iter_children_mut(node_id, &mut cb);
+
+        let after = self.nodes[node_id].after.take();
+        if let Some(after_node_id) = after {
+            cb(after_node_id, self)
+        }
+        self.nodes[node_id].after = after;
+    }
+
     pub fn next_node(&self, start: &Node, mut filter: impl FnMut(&Node) -> bool) -> Option<usize> {
         let start_id = start.id;
         let mut node = start;