styled components custom behavior

nixite/html.nix

@@ -8,7 +8,9 @@ rec {
 
   writeAttrs = attrs:
     toString (builtins.attrValues (
-      builtins.mapAttrs (key: value: ''${key}="${toString value}"'') attrs
+      builtins.mapAttrs (key: value:
+        if (builtins.substring 0 2 key) == "__" then ""
+          else ''${key}="${toString value}"'') attrs
     ));
 
   tag = tag: attrs: child: {

nixite/style.nix

@@ -8,7 +8,7 @@ let
       // {style = self.style + new.style;};
   };
 
-  mkStyle = identifier: styles: ''
+  mkStyle = identifier: styles: if styles == {} then "" else ''
     ${identifier} {
       ${toString (builtins.attrValues (
       builtins.mapAttrs (
@@ -34,8 +34,10 @@ let
     + id;
 in {
   styled = name: tag: cprops: styles:
-    {
+    let
-      ${name} = props: child: (html.tag tag (props // cprops) child);
+      custom = cprops.__child or (child: child);
+    in{
+      ${name} = props: child: (html.tag tag (props // cprops) (custom child));
 
       style = mkStyle (mkIdentifier tag cprops) styles;
     }

testing/style.test.nix

@@ -21,7 +21,13 @@ let
     })
     (style.style "body" {
       foo = "bar";
-    });
+    })
+    (style.styled "list" "ul" {
+      __child = child:
+        assert builtins.isList child;
+        (map (html.tag "li" {}) child);
+    } {})
+  ;
 in [
   (it "makes a p component" {
     expected = html.tag "p" {} "yes";
@@ -42,6 +48,13 @@ in [
     expected = html.tag "div" {class = ["foo" "bar"];} "foobar";
     actual = my.foobar {} "foobar";
   })
+  (it "does custom behavour" {
+    expected = toString (html.tag "ul" {} [
+      (html.tag "li" {} "1")
+      (html.tag "li" {} "2")
+    ]);
+    actual = toString ( my.list {} ["1" "2"] );
+  })
   (it "combines attrs" {
     expected = html.tag "div" {
       id = "foo";