media queries in styled components

flake.nix

@@ -34,12 +34,12 @@
         inherit (tix.packages.${system}) watch watchpipe results;
 
         test = tix.run [
-          #./testing/md.test.nix
+          # ./testing/md.test.nix
-          #./testing/html.test.nix
+          ./testing/html.test.nix
-          #./testing/elems.test.nix
+          ./testing/elems.test.nix
+          ./testing/builder.test.nix
           ./testing/site.test.nix
-          #./testing/style.test.nix
+          ./testing/style.test.nix
-          #./testing/builder.test.nix
         ];
       };
     };

nixite/style.nix

@@ -1,18 +1,23 @@
-let
+rec {
   styleToString = identifier: styles:
     if !builtins.isAttrs styles
     then ""
     else if styles == {}
     then ""
-    else
+    else assert builtins.isString identifier; ''
-      assert builtins.isString identifier; ''
+      ${identifier} {
-        ${identifier} {
+        ${
-          ${
+        toString (builtins.attrValues
-          toString (builtins.attrValues
+          (builtins.mapAttrs (
-            (builtins.mapAttrs (key: value: "${key}: ${value};") styles))
+              key: value:
-        }
+                if builtins.isString value
-        }
+                then "${key}: ${value};"
-      '';
+                else styleToString key value
+            )
+            styles))
+      }
+      }
+    '';
 
   getStyle = element:
     if !builtins.isAttrs element
@@ -20,8 +25,9 @@ let
     else if element.attrs ? __id
     then
       ({
-          ${element.attrs.__id} = element.attrs.style or {};
+          ${element.attrs.__id} = removeMediaQuery element.attrs.style or {};
         }
+        // getMediaQuery element.attrs.__id element.attrs.style or {}
         // (
           if element.attrs ? __extends
           then {
@@ -32,6 +38,12 @@ let
         ))
     else {};
 
+  removeMediaQuery = style: builtins.removeAttrs style ["__mediaQueries"];
+  getMediaQuery = id: style:
+    builtins.foldl' (a: b: a // b) {} (builtins.attrValues (builtins.mapAttrs
+      (name: value: {"@media ${name}" = {${id} = value;};})
+      (style."__mediaQueries" or {})));
+
   getStyles = element:
     (getStyle element)
     // (
@@ -59,9 +71,10 @@ let
 
   stylesToString = styles:
     builtins.concatStringsSep ""
-    (builtins.attrValues (builtins.mapAttrs styleToString styles));
+    (
-in {
+      builtins.sort (a: b: builtins.substring 0 1 b == "@")
-  inherit getStyle getStyles stylesToString;
+      (builtins.attrValues (builtins.mapAttrs styleToString styles))
+    );
 
   component = tag: class: props: tag (mkProps tag class props);
 }

testing/my-site.nix

@@ -1,17 +1,28 @@
-{nixite}: let
+{nixite}:
+with nixite.elems; let
+  blue = nixite.style.component span "blue" {
+    style = {
+      color = "blue";
+      __mediaQueries = {
+        "(max-width: 500px)" = {
+          color = "green";
+        };
+      };
+    };
+  };
+  underblue = nixite.style.component blue "under" {
+    style = {text-decoration = "underline";};
+  };
+  readme = nixite.site.link {
+    content = nixite.md.mdToPage ../README.md;
+    name = "readme";
+  };
   markup = {
-    "index.html" = with nixite.elems; let
+    "index.html" = (
-      blue = nixite.style.component span "blue" {
-        style = {color = "blue";};
-      };
-      underblue = nixite.style.component blue "under" {
-        style = {text-decoration = "underline";};
-      };
-    in (
       nixite.html.document {
         head = [(title "Nixite")];
         body = main [
-          (a "/" "Readme")
+          (a {href = readme;} "Readme")
           (a "/blog" "blog")
           (List {} ["item 1" "item 2" "item 3"])
           (p [

testing/style.test.nix

@@ -39,6 +39,41 @@ in [
         };
         actual = style.getStyle (para "");
       }))
+
+      (it "separates media queries" (let
+        s = {
+          foo = "bar";
+          __mediaQueries = {
+            "(max-width: 500px)" = {
+              foo = "nar";
+            };
+            "(prefers-color-scheme: dark)" = {
+              foo = "blar";
+            };
+          };
+        };
+        para = style.component elems.p "para" {
+          style = s;
+        };
+      in {
+        expected = {
+          "p" = {};
+          "p.para" = {
+            foo = "bar";
+          };
+          "@media (max-width: 500px)" = {
+            "p.para" = {
+              foo = "nar";
+            };
+          };
+          "@media (prefers-color-scheme: dark)" = {
+            "p.para" = {
+              foo = "blar";
+            };
+          };
+        };
+        actual = style.getStyle (para "");
+      }))
     ]
   )
   (
@@ -157,6 +192,35 @@ in [
         '';
         actual = style.stylesToString s;
       }))
+
+      (it "converts nested styles to string" (let
+        s = {
+          "p" = {};
+          "p.para" = {foo = "bar";};
+          "a.link" = {this = "that";};
+          "@media blah" = {
+            "a.link" = {
+              this = "not that";
+            };
+          };
+        };
+      in {
+        expected = ''
+          a.link {
+            this: that;
+          }
+          p.para {
+            foo: bar;
+          }
+          @media blah {
+            a.link {
+            this: not that;
+          }
+
+          }
+        '';
+        actual = style.stylesToString s;
+      }))
     ]
   )
 ]