format

flake.nix

@@ -20,34 +20,33 @@
     style = nixite.style;
 
     packages.${system} = {
-      default = 
+      default = nixite.mkSite (nixite.site.applyStyle ./testing/src/style.css {
-        nixite.mkSite (nixite.site.applyStyle ./testing/src/style.css {
+        "index.html" = with nixite.elems; (doc
+          [
+            (title "Nixite")
+          ]
+          (main [
+            (nixite.md.readMd ./testing/src/index.md)
+            (link "/blog" "blog")
+            (list [
+              "item 1"
+              "item 2"
+              "item 3"
+            ])
+          ]));
+        blog = {
           "index.html" = with nixite.elems; (doc
             [
-              (title "Nixite")
+              (title "A post")
             ]
             (main [
-              (nixite.md.readMd ./testing/src/index.md)
+              (p ''
-              (link "/blog" "blog")
+                This is a post
-              (list [
+              '')
-                "item 1"
+              (link "/" "Home")
-                "item 2"
-                "item 3"
-              ])
             ]));
-          blog = {
+        };
-            "index.html" = with nixite.elems; (doc
+      });
-              [
-                (title "A post")
-              ]
-              (main [
-                (p ''
-                  This is a post
-                '')
-                (link "/" "Home")
-              ]));
-          };
-        });
 
       serve = self.serve self.packages.${system}.default;
 

nixite/style.nix

@@ -2,38 +2,48 @@ let
   html = import ./html.nix;
 
   join = {
-    __functor = self: new: self // new //
+    __functor = self: new:
-      { style = self.style + new.style; };
+      self
+      // new
+      // {style = self.style + new.style;};
   };
 
   mkStyle = identifier: styles: ''
-      ${identifier} {
+    ${identifier} {
-        ${toString (builtins.attrValues (
+      ${toString (builtins.attrValues (
-          builtins.mapAttrs (key: value:
+      builtins.mapAttrs (
-            ''${key}: ${value};''
+        key: value: ''${key}: ${value};''
-          ) styles
+      )
-        ))}
+      styles
-      }
+    ))}
-    '';
+    }
+  '';
 
-  mkIdentifier = tag: { class ? [], id ? "", ... }: "${tag}"
+  mkIdentifier = tag: {
-  + builtins.concatStringsSep "" (map (c: "." + c) class)
+    class ? [],
-  + ( if id != "" then "#" else "" ) + id;
+    id ? "",
+    ...
+  }:
+    "${tag}"
+    + builtins.concatStringsSep "" (map (c: "." + c) class)
+    + (
+      if id != ""
+      then "#"
+      else ""
+    )
+    + id;
+in {
+  styled = name: tag: cprops: styles:
+    {
+      ${name} = props: child: (html.tag tag (props // cprops) child);
 
-in
+      style = mkStyle (mkIdentifier tag cprops) styles;
-{
+    }
-  styled = name: tag: cprops: styles: {
+    // join;
 
-    ${name} = props: child:
+  style = identifier: styles:
-      (html.tag tag (props // cprops) child);
+    {
-
+      style = mkStyle identifier styles;
-    style = mkStyle (mkIdentifier tag cprops) styles;
+    }
-
+    // join;
-  } // join;
-
-  style = identifier: styles: {
-
-    style = mkStyle identifier styles;
-
-  } // join;
 }

testing/style.test.nix

@@ -7,58 +7,66 @@ let
     (style.styled "p" "p" {} {
       some-style = "some value";
     })
-    (style.styled "div" "div" { class = ["something"]; } {
+    (style.styled "div" "div" {class = ["something"];} {
       this = "that";
     })
-    (style.styled "s" "div" { id = "s"; class = ["something"]; } {
+    (style.styled "s" "div" {
-      s = "yes";
+        id = "s";
-    })
+        class = ["something"];
-    (style.styled "foobar" "div" { class = ["foo" "bar"]; } {
+      } {
+        s = "yes";
+      })
+    (style.styled "foobar" "div" {class = ["foo" "bar"];} {
       something = "something";
     })
     (style.style "body" {
       foo = "bar";
     });
-
 in [
-    (it "makes a p component" ({
+  (it "makes a p component" {
-      expected = (html.tag "p" {} "yes");
+    expected = html.tag "p" {} "yes";
-      actual = my.p {} "yes";
+    actual = my.p {} "yes";
-    }))
+  })
-    (it "makes a component" ({
+  (it "makes a component" {
-      expected = (html.tag "div" { class = ["something"]; } "foobar");
+    expected = html.tag "div" {class = ["something"];} "foobar";
-      actual = my.div {} "foobar";
+    actual = my.div {} "foobar";
-    }))
+  })
-    (it "makes special components" ({
+  (it "makes special components" {
-      expected = (html.tag "div" { id = "s"; class = ["something"]; } "foobar");
+    expected = html.tag "div" {
-      actual = my.s {} "foobar";
+      id = "s";
-    }))
+      class = ["something"];
-    (it "works on many classes" ({
+    } "foobar";
-      expected = (html.tag "div" { class = ["foo" "bar"]; } "foobar");
+    actual = my.s {} "foobar";
-      actual = my.foobar {} "foobar";
+  })
-    }))
+  (it "works on many classes" {
-    (it "combines attrs" ({
+    expected = html.tag "div" {class = ["foo" "bar"];} "foobar";
-      expected = (html.tag "div" { id = "foo"; class = ["something"]; } "foobar");
+    actual = my.foobar {} "foobar";
-      actual = my.div { id = "foo"; } "foobar";
+  })
-    }))
+  (it "combines attrs" {
-    (it "makes a style" ({
+    expected = html.tag "div" {
-      expected = ''
+      id = "foo";
-        p {
+      class = ["something"];
-          some-style: some value;
+    } "foobar";
-        }
+    actual = my.div {id = "foo";} "foobar";
-        div.something {
+  })
-          this: that;
+  (it "makes a style" {
-        }
+    expected = ''
-        div.something#s {
+      p {
-          s: yes;
+        some-style: some value;
-        }
+      }
-        div.foo.bar {
+      div.something {
-          something: something;
+        this: that;
-        }
+      }
-        body {
+      div.something#s {
-          foo: bar;
+        s: yes;
-        }
+      }
-      '';
+      div.foo.bar {
-      actual = my.style;
+        something: something;
-    }))
+      }
-  ]
+      body {
+        foo: bar;
+      }
+    '';
+    actual = my.style;
+  })
+]