media queries in styled components
This commit is contained in:
parent
4f5bedbc45
commit
89b29b2e46
|
@ -35,11 +35,11 @@
|
|||
|
||||
test = tix.run [
|
||||
# ./testing/md.test.nix
|
||||
#./testing/html.test.nix
|
||||
#./testing/elems.test.nix
|
||||
./testing/html.test.nix
|
||||
./testing/elems.test.nix
|
||||
./testing/builder.test.nix
|
||||
./testing/site.test.nix
|
||||
#./testing/style.test.nix
|
||||
#./testing/builder.test.nix
|
||||
./testing/style.test.nix
|
||||
];
|
||||
};
|
||||
};
|
||||
|
|
|
@ -1,15 +1,20 @@
|
|||
let
|
||||
rec {
|
||||
styleToString = identifier: styles:
|
||||
if !builtins.isAttrs styles
|
||||
then ""
|
||||
else if styles == {}
|
||||
then ""
|
||||
else
|
||||
assert builtins.isString identifier; ''
|
||||
else assert builtins.isString identifier; ''
|
||||
${identifier} {
|
||||
${
|
||||
toString (builtins.attrValues
|
||||
(builtins.mapAttrs (key: value: "${key}: ${value};") styles))
|
||||
(builtins.mapAttrs (
|
||||
key: value:
|
||||
if builtins.isString value
|
||||
then "${key}: ${value};"
|
||||
else styleToString key value
|
||||
)
|
||||
styles))
|
||||
}
|
||||
}
|
||||
'';
|
||||
|
@ -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 {
|
||||
inherit getStyle getStyles stylesToString;
|
||||
(
|
||||
builtins.sort (a: b: builtins.substring 0 1 b == "@")
|
||||
(builtins.attrValues (builtins.mapAttrs styleToString styles))
|
||||
);
|
||||
|
||||
component = tag: class: props: tag (mkProps tag class props);
|
||||
}
|
||||
|
|
|
@ -1,17 +1,28 @@
|
|||
{nixite}: let
|
||||
markup = {
|
||||
"index.html" = with nixite.elems; let
|
||||
{nixite}:
|
||||
with nixite.elems; let
|
||||
blue = nixite.style.component span "blue" {
|
||||
style = {color = "blue";};
|
||||
style = {
|
||||
color = "blue";
|
||||
__mediaQueries = {
|
||||
"(max-width: 500px)" = {
|
||||
color = "green";
|
||||
};
|
||||
};
|
||||
};
|
||||
};
|
||||
underblue = nixite.style.component blue "under" {
|
||||
style = {text-decoration = "underline";};
|
||||
};
|
||||
in (
|
||||
readme = nixite.site.link {
|
||||
content = nixite.md.mdToPage ../README.md;
|
||||
name = "readme";
|
||||
};
|
||||
markup = {
|
||||
"index.html" = (
|
||||
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 [
|
||||
|
|
|
@ -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;
|
||||
}))
|
||||
]
|
||||
)
|
||||
]
|
||||
|
|
Loading…
Reference in a new issue