tristan/nixite
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

media queries in styled components

Browse source
This commit is contained in:
Tristan 2024-01-04 22:37:43 +00:00
parent 4f5bedbc45
commit 89b29b2e46
4 changed files with 117 additions and 29 deletions
Download patch file Download diff file Expand all files Collapse all files

31
testing/my-site.nix
View file

@ -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
blue = nixite.style.component span "blue" {
style = {color = "blue";};
};
underblue = nixite.style.component blue "under" {
style = {text-decoration = "underline";};
};
in (
"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 [

64
testing/style.test.nix
View file

@ -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;
}))
]
)
]