Use 'sauron::jss' macro to simplify creating a css from settings

4 files changed, 89 insertions, 90 deletions

diff --git a/Cargo.toml b/Cargo.toml
index b5c92ed..69a9fb3 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -4,6 +4,6 @@ members = [
     "svgbob_cli",
 ]
 
-#[path.crates-io]
-#sauron = { path = "../sauron" }
-#mt-dom = { path = "../mt-dom" }
+[path.crates-io]
+sauron = { path = "../sauron" }
+mt-dom = { path = "../mt-dom" }
diff --git a/svgbob/Cargo.toml b/svgbob/Cargo.toml
index 3ad6f7b..a44e7f0 100644
--- a/svgbob/Cargo.toml
+++ b/svgbob/Cargo.toml
@@ -13,7 +13,7 @@ license = "Apache-2.0"
 nalgebra = "0.28"
 parry2d = "0.6"
 lazy_static = "1.3.0"
-sauron = { version = "0.34" }
+sauron = { version = "0.39", path = "../../sauron" }
 unicode-width = "0.1.5"
 itertools = "0.8.0"
 pom = { version = "3.1.0" }
diff --git a/svgbob/src/buffer/cell_buffer.rs b/svgbob/src/buffer/cell_buffer.rs
index 4151693..10eb165 100644
--- a/svgbob/src/buffer/cell_buffer.rs
+++ b/svgbob/src/buffer/cell_buffer.rs
@@ -299,91 +299,90 @@ impl CellBuffer {
     }
 
     fn get_style<MSG>(settings: &Settings, legend_css: String) -> Node<MSG> {
-        html::tags::style(
-            vec![],
-            vec![text(format!(
-                "line, path, circle,rect,polygon {{
-                          stroke: {stroke_color};
-                          stroke-width: {stroke_width};
-                          stroke-opacity: 1;
-                          fill-opacity: 1;
-                          stroke-linecap: round;
-                          stroke-linejoin: miter;
-                        }}
-
-                    text {{
-                        /* This fix the spacing bug in svg text*/
-                        white-space: pre;
-                        fill: {stroke_color};
-                        }}
-                        rect.backdrop{{
-                            stroke: none;
-                            fill: {background};
-                        }}
-                        .broken{{
-                            stroke-dasharray: 8;
-                        }}
-                        .filled{{
-                            fill: {fill_color};
-                        }}
-                        .bg_filled{{
-                            fill: {background};
-                        }}
-                        .nofill{{
-                            fill: {background};
-                        }}
-
-                        text {{
-                         font-family: {font_family};
-                         font-size: {font_size}px;
-                        }}
-
-                        .end_marked_arrow{{
-                            marker-end: url(#arrow);
-                         }}
-                        .start_marked_arrow{{
-                            marker-start: url(#arrow);
-                         }}
-
-                        .end_marked_diamond{{
-                            marker-end: url(#diamond);
-                         }}
-                        .start_marked_diamond{{
-                            marker-start: url(#diamond);
-                         }}
-
-                        .end_marked_circle{{
-                            marker-end: url(#circle);
-                         }}
-                        .start_marked_circle{{
-                            marker-start: url(#circle);
-                         }}
-
-                        .end_marked_open_circle{{
-                            marker-end: url(#open_circle);
-                         }}
-                        .start_marked_open_circle{{
-                            marker-start: url(#open_circle);
-                         }}
-
-                        .end_marked_big_open_circle{{
-                            marker-end: url(#big_open_circle);
-                         }}
-                        .start_marked_big_open_circle{{
-                            marker-start: url(#big_open_circle);
-                         }}
-
-                         {legend_css}
-                        ",
-                background = settings.background,
-                fill_color = settings.fill_color,
-                stroke_color = settings.stroke_color,
-                stroke_width = settings.stroke_width,
-                font_size = settings.font_size,
-                font_family = settings.font_family,
-                legend_css = legend_css,
-            ))],
-        )
+        use sauron::html::units::px;
+
+        let element_styles = sauron::jss!({
+                "line, path, circle,rect,polygon": {
+                      "stroke": settings.stroke_color,
+                      "stroke-width": settings.stroke_width,
+                      "stroke-opacity": 1,
+                      "fill-opacity": 1,
+                      "stroke-linecap": "round",
+                      "stroke-linejoin": "miter",
+                },
+
+                "text": {
+                    /* This fix the spacing bug in svg text*/
+                    "white-space": "pre",
+                    "fill": settings.stroke_color,
+                },
+
+               "rect.backdrop":{
+                    "stroke": "none",
+                    "fill": settings.background,
+                },
+
+                ".broken":{
+                    "stroke-dasharray": 8,
+                },
+
+                ".filled":{
+                    "fill": settings.fill_color,
+                },
+
+                ".bg_filled":{
+                    "fill": settings.background,
+                },
+
+                ".nofill":{
+                    "fill": settings.background,
+                },
+
+                "text": {
+                 "font-family": settings.font_family,
+                 "font-size": px(settings.font_size),
+                },
+
+                ".end_marked_arrow":{
+                    "marker-end": "url(#arrow)",
+                 },
+
+                ".start_marked_arrow":{
+                    "marker-start": "url(#arrow)",
+                 },
+
+                ".end_marked_diamond":{
+                    "marker-end": "url(#diamond)",
+                 },
+                ".start_marked_diamond":{
+                    "marker-start": "url(#diamond)",
+                 },
+
+                ".end_marked_circle":{
+                    "marker-end": "url(#circle)",
+                 },
+
+                ".start_marked_circle":{
+                    "marker-start": "url(#circle)",
+                 },
+
+                ".end_marked_open_circle":{
+                    "marker-end": "url(#open_circle)",
+                 },
+
+                ".start_marked_open_circle":{
+                    "marker-start": "url(#open_circle)",
+                 },
+
+                ".end_marked_big_open_circle":{
+                    "marker-end": "url(#big_open_circle)",
+                 },
+
+                ".start_marked_big_open_circle": {
+                    "marker-start": "url(#big_open_circle)",
+                 }
+        });
+        html::tags::style(vec![], vec![text(element_styles), text(legend_css)])
     }
 
     /// convert the fragments into svg nodes using the supplied settings, with size for the
diff --git a/svgbob/src/buffer/fragment_buffer/fragment/line.rs b/svgbob/src/buffer/fragment_buffer/fragment/line.rs
index a426f2e..649e113 100644
--- a/svgbob/src/buffer/fragment_buffer/fragment/line.rs
+++ b/svgbob/src/buffer/fragment_buffer/fragment/line.rs
@@ -515,7 +515,7 @@ impl fmt::Display for Line {
 
 impl<MSG> Into<Node<MSG>> for Line {
     fn into(self) -> Node<MSG> {
-        svg::tags::line(
+        svg::line(
             vec![
                 x1(self.start.x),
                 y1(self.start.y),