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

replace styled components

Browse source
This commit is contained in:
tristan 2024-01-01 06:33:57 +00:00
parent 003100e691
commit 30ffa6c9b3
11 changed files with 388 additions and 444 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

40
flake.nix
View file

@ -8,36 +8,52 @@
nixite = import ./nixite/. { inherit pkgs; }; nixite = import ./nixite/. { inherit pkgs; };
in nixite // { in nixite // {
packages.${system} = { packages.${system} = {
raw = nixite.mkSite (nixite.site.applyStyle ./testing/src/style.css raw = nixite.mkSite (let
(nixite.site.extractPaths { site = (nixite.site.extractPaths {
"test" = with nixite.elems; "test" = with nixite.elems;
(Doc [ let
blue = nixite.style.tag "span" "blue" {
style = { color = "blue"; };
};
underblue = nixite.style.extend blue "under" {
style = { text-decoration = "underline"; };
};
in (Doc { } [
[ [
(title "Nixite") (title { } "Nixite")
(nixite.html.tag "link" { (link {
rel = "shortcut icon"; rel = "shortcut icon";
type = "image/png"; type = "image/png";
href = ./testing/src/favicon.png; href = ./testing/src/favicon.png;
} "") } "")
(a "/readme" "Readme")
] ]
(main [ (main { } [
(a "/readme" "Readme")
(a "/blog" "blog") (a "/blog" "blog")
(List [ "item 1" "item 2" "item 3" ]) (List { } [ "item 1" "item 2" "item 3" ])
(p { } [
"check out my"
(blue "blue span")
"isn't it"
(underblue "great!")
])
]) ])
]); ]);
blog = nixite.md.readDir ./testing/blog; blog = nixite.md.readDir ./testing/blog;
"index.html" = nixite.md.mdToPage ./README.md; "index.html" = nixite.md.mdToPage ./README.md;
})); });
styles = # nixite.site.getStyles site;
nixite.style.getStyles site.test;
in nixite.site.applyStyle styles site);
default = nixite.serve self.packages.${system}.raw; default = nixite.serve self.packages.${system}.raw;
test = let run = import ./testing/run.nix pkgs; test = let run = import ./testing/run.nix pkgs;
in run [ in 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/site.test.nix ./testing/site.test.nix
./testing/style.test.nix ./testing/style.test.nix
]; ];
}; };

189
nixite/elems.nix
View file

@ -1,60 +1,143 @@
let let html = import ./html.nix;
html = import ./html.nix; in {
s = import ./style.nix; html = html.tag "html";
base = tag: (s.styled tag tag { class = [ ]; }); # Document metadata
in (base "html") (base "head") (base "title") (base "base") (base "link") head = html.tag "head";
(base "meta") title = html.tag "title";
# (base "style" ) # borks styled coponents base = html.tag "base";
(base "body") (base "article") (base "section") (base "nav") (base "aside") link = html.tag "link";
(base "h1") (base "h2") (base "h3") (base "h4") (base "h5") (base "h6") meta = html.tag "meta";
(base "hgroup") (base "header") (base "footer") (base "address") (base "p") style = html.tag "style";
(base "hr") (base "pre") (base "blockquote") (base "ol") (base "ul") # Sections
(base "menu") (base "li") (base "dl") (base "dt") (base "dd") (base "figure") body = html.tag "body";
(base "figcaption") (base "main") (base "div") (base "a") (base "em") article = html.tag "article";
(base "strong") (base "small") (base "s") (base "cite") (base "q") (base "dfn") section = html.tag "section";
(base "abbr") (base "ruby") (base "rt") (base "rp") (base "data") (base "time") nav = html.tag "nav";
(base "code") (base "var") (base "samp") (base "kbd") (base "sub") (base "sup") aside = html.tag "aside";
(base "i") (base "b") (base "u") (base "mark") (base "bdi") (base "bdo") h1 = html.tag "h1";
(base "span") (base "br") (base "wbr") (base "ins") (base "del") h2 = html.tag "h2";
(base "picture") (base "source") (base "img") (base "iframe") (base "embed") h3 = html.tag "h3";
(base "object") (base "param") (base "video") (base "audio") (base "track") h4 = html.tag "h4";
(base "map") (base "area") (base "table") (base "caption") (base "colgroup") h5 = html.tag "h5";
(base "col") (base "tbody") (base "thead") (base "tfoot") (base "tr") h6 = html.tag "h6";
(base "td") (base "th") (base "form") (base "label") (base "input") hgroup = html.tag "hgroup";
(base "button") (base "select") (base "datalist") (base "optgroup") header = html.tag "header";
(base "option") (base "textarea") (base "output") (base "progress") footer = html.tag "footer";
(base "meter") (base "fieldset") (base "legend") (base "details") address = html.tag "address";
(base "summary") (base "dialog") (base "script") (base "noscript") # Grouping content
(base "template") (base "slot") (base "canvas") p = html.tag "p";
hr = html.tag "hr";
(s.styled "List" "ul" { pre = html.tag "pre";
__child = child: blockquote = html.tag "blockquote";
ol = html.tag "ol";
ul = html.tag "ul";
menu = html.tag "menu";
li = html.tag "li";
dl = html.tag "dl";
dt = html.tag "dt";
dd = html.tag "dd";
figure = html.tag "figure";
figcaption = html.tag "figcaption";
main = html.tag "main";
div = html.tag "div";
# Text-level semantics
a = params:
html.tag "a"
(if builtins.isString params then { href = params; } else params);
em = html.tag "em";
strong = html.tag "strong";
small = html.tag "small";
s = html.tag "s";
cite = html.tag "cite";
q = html.tag "q";
dfn = html.tag "dfn";
abbr = html.tag "abbr";
ruby = html.tag "ruby";
rt = html.tag "rt";
rp = html.tag "rp";
data = html.tag "data";
time = html.tag "time";
code = html.tag "code";
var = html.tag "var";
samp = html.tag "samp";
kbd = html.tag "kbd";
sub = html.tag "sub";
sup = html.tag "sup";
i = html.tag "i";
b = html.tag "b";
u = html.tag "u";
mark = html.tag "mark";
bdi = html.tag "bdi";
bdo = html.tag "bdo";
span = html.tag "span";
br = html.tag "br";
wbr = html.tag "wbr";
# Edits
ins = html.tag "ins";
del = html.tag "del";
# Embedded content
picture = html.tag "picture";
source = html.tag "source";
img = html.tag "img";
iframe = html.tag "iframe";
embed = html.tag "embed";
object = html.tag "object";
param = html.tag "param";
video = html.tag "video";
audio = html.tag "audio";
track = html.tag "track";
map = html.tag "map";
area = html.tag "area";
# Tabular data
table = html.tag "table";
caption = html.tag "caption";
colgroup = html.tag "colgroup";
col = html.tag "col";
tbody = html.tag "tbody";
thead = html.tag "thead";
tfoot = html.tag "tfoot";
tr = html.tag "tr";
td = html.tag "td";
th = html.tag "th";
# Forms
form = html.tag "form";
label = html.tag "label";
input = html.tag "input";
button = html.tag "button";
select = html.tag "select";
datalist = html.tag "datalist";
optgroup = html.tag "optgroup";
option = html.tag "option";
textarea = html.tag "textarea";
output = html.tag "output";
progress = html.tag "progress";
meter = html.tag "meter";
fieldset = html.tag "fieldset";
legend = html.tag "legend";
# Interactive elements
details = html.tag "details";
summary = html.tag "summary";
dialog = html.tag "dialog";
# Scripting
script = html.tag "script";
noscript = html.tag "noscript";
template = html.tag "template";
slot = html.tag "slot";
canvas = html.tag "canvas";
# custom
List = params: child:
assert builtins.isList child; assert builtins.isList child;
(map (html.tag "li" { }) child); html.tag "ul" { } (map (html.tag "li" { }) child);
}) (s.styled "Doc" "html" { Doc = params: child:
__child = child:
assert builtins.isList child; assert builtins.isList child;
assert builtins.length child == 2; assert builtins.length child == 2;
assert builtins.isList (builtins.elemAt child 0); [ assert builtins.isList (builtins.elemAt child 0);
html.tag "html" ({ lang = "en"; } // params) [
(html.tag "head" { } (builtins.elemAt child 0)) (html.tag "head" { } (builtins.elemAt child 0))
(html.tag "body" { } (builtins.elemAt child 1)) (html.tag "body" { } (builtins.elemAt child 1))
]; ];
lang = "en"; Stylesheet = params:
class = [ ]; html.tag "link" ({
}) (s.styled "a" "a" { rel = "stylesheet";
__self = self: attrs: child: } // (if builtins.isString params then { href = params; } else params)) "";
if builtins.isString attrs then
self { href = attrs; } child
else
self attrs child;
}) (s.styled "Stylesheet" "link" {
rel = "stylesheet";
class = [ ];
__self = self: attrs:
if builtins.isString attrs then
self { href = attrs; } ""
else
self attrs "";
}) // {
H = v: child: html.tag "h${toString v}" { } child;
} }

10
nixite/html.nix
View file

@ -1,9 +1,9 @@
let let
keyvalue = key: value: keyvalue = key: value:
assert builtins.isString key; assert builtins.isString key;
if builtins.isAttrs value then if builtins.isAttrs value then
builtins.trace "Skipping ${key} as it is a set" "" else builtins.trace "Skipping ${key} as it is a set" ""
if value == "" || value == [ ] then else if value == "" || value == [ ] then
"" ""
else else
''${key}="${toString value}"''; ''${key}="${toString value}"'';
@ -37,7 +37,9 @@ in rec {
inherit tag attrs; inherit tag attrs;
__functor = self: child: __functor = self: child:
if !(isTag child) then if !(isTag child) then
throw "tag child must be tag, list, or string" throw "tag child must be tag, list, or string, got ${
builtins.typeOf child
}"
else { else {
inherit tag attrs child; inherit tag attrs child;
__toString = toHTML; __toString = toHTML;

18
nixite/md.nix
View file

@ -1,4 +1,15 @@
let elems = import ./elems.nix; let
elems = import ./elems.nix;
html = import ./html.nix;
H = n:
let
v = if n < 1 then
builtins.trace "attempted to make heading size ${n} (min is 1)" 1
else if n > 6 then
builtins.trace "attempted to make heading size ${n} (max is 6)" 6
else
n;
in html.tag "h${toString v}" { };
in rec { in rec {
readMd = md: readMd = md:
if builtins.isPath md then if builtins.isPath md then
@ -30,13 +41,14 @@ in rec {
readDir = root: recFixAppendix (recReadMd root); readDir = root: recFixAppendix (recReadMd root);
mdToPage = md: elems.Doc [ [ (elems.title "markdown file") ] (readMd md) ]; mdToPage = md:
elems.Doc { } [ [ (elems.title { } "markdown file") ] (readMd md) ];
mdBlock = block: mdBlock = block:
let let
m = heading block; m = heading block;
h = if m == null then 0 else builtins.stringLength (builtins.elemAt m 0); h = if m == null then 0 else builtins.stringLength (builtins.elemAt m 0);
in if m == null then elems.p { } block else elems.H h (builtins.elemAt m 1); in if m == null then elems.p { } block else H h (builtins.elemAt m 1);
heading = block: builtins.match "(#+) (.*)" block; heading = block: builtins.match "(#+) (.*)" block;
} }

6
nixite/site.nix
View file

@ -4,6 +4,12 @@ let
in rec { in rec {
applyStyle = style: site: (linkStyle site) // { "style.css" = style; }; applyStyle = style: site: (linkStyle site) // { "style.css" = style; };
getStyles = site: ''
.blue {
color: blue;
}
'';
linkStyle = site: linkStyle = site:
(builtins.mapAttrs (name: content: (builtins.mapAttrs (name: content:
if builtins.isAttrs content && content ? "__toString" then if builtins.isAttrs content && content ? "__toString" then

120
nixite/style.nix
View file

@ -1,16 +1,6 @@
let let
html = import ./html.nix; html = import ./html.nix;
join = {
__functor = self: new: self // new // { style = self.style // new.style; };
};
mkStyle = identifier: styles: {
${identifier} = styles;
__toString = self:
toString (builtins.attrValues (builtins.mapAttrs styleToString self));
};
styleToString = identifier: styles: styleToString = identifier: styles:
if !builtins.isAttrs styles then if !builtins.isAttrs styles then
"" ""
@ -26,76 +16,50 @@ let
} }
''; '';
mkIdentifier = name: tag: getStyle = element:
assert builtins.isString name; if builtins.isAttrs element && element.attrs ? __id then
let ({
elem = if builtins.isString tag then tag else tag.tag or ""; ${element.attrs.__id} = element.attrs.style or { };
inheritClass = } // (if element.attrs ? __extends then {
if builtins.isString tag then [ ] else tag.attrs.class or [ ]; ${element.attrs.__extends.attrs.__id} =
in { class ? [ name ] ++ inheritClass, id ? "", ... }: element.attrs.__extends.attrs.style or { };
"${elem}" + builtins.concatStringsSep "" (map (c: "." + c) class) } else
+ (if id != "" then "#" else "") + id; { }))
else
{ };
getStyles = element:
getStyle = element: if builtins.isAttrs element && element.attrs ? __id (getStyle element) // (if builtins.isList element then
then {${element.attrs.__id} = element.attrs.style or {};} else {}; getStylesFromList element
else if element ? child then
getStyles = element: ( getStyle element ) // getStyles element.child
(if builtins.isList element then getStylesFromList element else else
if element ? child then getStyles element.child else {}); { }) // {
__toString = stylesToString;
getStylesFromList = elements: builtins.zipAttrsWith (name: value: builtins.elemAt value 0) (map getStyles elements);
in {
inherit getStyle getStyles;
stylesToString = styles: builtins.concatStringsSep "" ( builtins.attrValues ( builtins.mapAttrs (styleToString) styles ) );
tag = tag: class: props: (html.tag tag (props // {__id = "${tag}.${class}";}));
styled = name: tag: cprops:
assert builtins.isString name;
let
__child = cprops.__child or (child: child);
joinProps = (cprops // {
__functor = prev: next:
prev // next // {
class = prev.class ++ next.class or [ ];
};
class = if cprops ? class then
if cprops.class == [ ] then [ ] else [ name ] ++ cprops.class
else
[ name ];
});
self = if tag ? __functor && builtins.isFunction tag.__functor then
props: tag (joinProps props)
else if builtins.isString tag then
props: html.tag tag (joinProps props)
else
throw "You may only style a tag (string) or element, got ${
builtins.typeOf tag
}";
__self = (cprops.__self or (self: props:
if builtins.isAttrs props then
(child: (self props (__child child)))
else if builtins.isString props || builtins.isList props then
(self { } (__child props))
else
throw "Call element with attributes and child.")) self;
in {
${name} = {
tag = (if builtins.isString tag then tag else tag.tag);
attrs =
joinProps (if builtins.isString tag then { } else tag.attrs or { });
__functor = self: __self;
}; };
style = mkStyle (mkIdentifier name tag cprops) (cprops.style or { }); getStylesFromList = elements:
} // join; builtins.zipAttrsWith (name: value: builtins.elemAt value 0)
(map getStyles elements);
style = identifier: styles: { style = mkStyle identifier styles; } // join; mkProps = props: tag: class:
props // {
__id = "${tag}.${builtins.concatStringsSep "." class}";
class = class ++ (props.class or [ ]);
};
stylesToString = styles:
builtins.concatStringsSep ""
(builtins.attrValues (builtins.mapAttrs (styleToString) styles));
in {
inherit getStyle getStyles stylesToString;
extend = tag: class: props:
(html.tag tag.tag ((mkProps props tag.tag (tag.attrs.class ++ [ class ]))
// {
__extends = tag;
}));
tag = tag: class: props: (html.tag tag (mkProps props tag [ class ]));
} }

20
testing/elems.test.nix
View file

@ -28,26 +28,13 @@ in with elems; [
actual = main { } [ "yeet" ]; actual = main { } [ "yeet" ];
asString = true; asString = true;
}) })
(it "makes an h1 tag" {
expected = html.tag "h1" { } "foobar";
actual = H 1 "foobar";
asString = true;
})
(it "makes an h2 tag" {
expected = html.tag "h2" { } "foobar";
actual = H 2 "foobar";
asString = true;
})
(it "makes a title tag" { (it "makes a title tag" {
expected = html.tag "title" { } "foobar"; expected = html.tag "title" { } "foobar";
actual = title { } "foobar"; actual = title { } "foobar";
asString = true; asString = true;
}) })
(it "makes an a tag" { (it "makes an a tag" {
expected = html.tag "a" { expected = html.tag "a" { href = "https://example.com"; } "example";
class = [ "a" ];
href = "https://example.com";
} "example";
actual = a "https://example.com" "example"; actual = a "https://example.com" "example";
asString = true; asString = true;
}) })
@ -60,10 +47,7 @@ in with elems; [
asString = true; asString = true;
}) })
(it "makes a list" { (it "makes a list" {
expected = html.tag "ul" { expected = html.tag "ul" { __ = ""; } [
__ = "";
class = [ "List" ];
} [
(html.tag "li" { } "foo") (html.tag "li" { } "foo")
(html.tag "li" { } "bar") (html.tag "li" { } "bar")
(html.tag "li" { } "baz") (html.tag "li" { } "baz")

84
testing/html.test.nix
View file

@ -31,58 +31,52 @@ in with html; [
}; };
}) })
(it "makes element" (it "makes element" (let para = (tag "p" { });
(let para = (tag "p" {}); in {
in { expected = "p";
expected = "p"; actual = para.tag;
actual = para.tag; }))
}))
(it "keeps attrs on element" (it "keeps attrs on element" (let
(let
attrs = { style = { foo = "bar"; }; }; attrs = { style = { foo = "bar"; }; };
para = (tag "p" attrs); para = (tag "p" attrs);
in { in {
expected = attrs; expected = attrs;
actual = para.attrs; actual = para.attrs;
})) }))
(it "makes renderable element" (it "makes renderable element" (let
(let attrs = { style = { foo = "bar"; }; };
attrs = { style = { foo = "bar"; }; }; para = (tag "p" attrs);
para = (tag "p" attrs); in {
in { expected = "<p ></p>";
expected = "<p ></p>"; actual = toString (para "");
actual = toString ( para "" ); }))
}))
(it "keeps tag" (it "keeps tag" (let
(let attrs = { style = { foo = "bar"; }; };
attrs = { style = { foo = "bar"; }; }; para = (tag "p" attrs);
para = (tag "p" attrs); in {
in { expected = "p";
expected = "p"; actual = (para "").tag;
actual = ( para "" ).tag; }))
}))
(it "keeps style" (it "keeps style" (let
(let attrs = { style = { foo = "bar"; }; };
attrs = { style = { foo = "bar"; }; }; para = (tag "p" attrs);
para = (tag "p" attrs); in {
in { expected = { foo = "bar"; };
expected = { foo = "bar"; }; actual = (para "").attrs.style;
actual = ( para "" ).attrs.style; }))
}))
(it "works recursively" (it "works recursively" (let
(let attrs = { style = { foo = "bar"; }; };
attrs = { style = { foo = "bar"; }; }; para = (tag "p" attrs);
para = (tag "p" attrs); a = (tag "a" { });
a = (tag "a" {}); in {
in { expected = "<p ><a >hello</a></p>";
expected = "<p ><a >hello</a></p>"; actual = toString (para (a "hello"));
actual = toString ( para (a "hello") ); }))
}))
(it "concatinates classes" { (it "concatinates classes" {
actual = toString (tag "p" { class = [ "class1" "class2" ]; } "Hello"); actual = toString (tag "p" { class = [ "class1" "class2" ]; } "Hello");

4
testing/it.nix
View file

@ -1,9 +1,11 @@
msg: msg:
{ actual, expected, asString ? false, asJSON ? false, }: { actual, expected, asString ? false, asJSON ? false, removeDunders ? false, }:
if (if asString then if (if asString then
toString actual == toString expected toString actual == toString expected
else if asJSON then else if asJSON then
builtins.toJSON actual == builtins.toJSON expected builtins.toJSON actual == builtins.toJSON expected
else if removeDunders then
builtins.removeAttrs actual [ "__toString" "__functor" ] == expected
else else
actual == expected) then '' actual == expected) then ''
echo 'it ${msg}' echo 'it ${msg}'

10
testing/md.test.nix
View file

@ -19,7 +19,7 @@ in with md; [
lorem ipsum lorem ipsum
''; '';
expected = [ expected = [
(elems.H 1 "foo bar") (elems.h1 { } "foo bar")
"" ""
(elems.p { } '' (elems.p { } ''
lorem ipsum lorem ipsum
@ -33,6 +33,14 @@ in with md; [
expected = "index.html"; expected = "index.html";
}) })
(it "converts markdown to a page" {
actual = mdToPage ./blog/index.md;
expected = ''
<html lang="en"><head ><title >markdown file</title></head> <body ><h1 >yeee</h1> <p >ye</p> <p >&amp;</p> <p ><a href="dir">dir</a>
<a href="/">home</a></p> <p ></p></body></html>'';
asString = true;
})
(it "recursively reads dir" { (it "recursively reads dir" {
actual = recReadMd ./blog; actual = recReadMd ./blog;
expected = { expected = {

331
testing/style.test.nix
View file

@ -1,256 +1,129 @@
let let
style = import ../nixite/style.nix; style = import ../nixite/style.nix;
html = import ../nixite/html.nix;
it = import ./it.nix; it = import ./it.nix;
in [ in [
(it "makes a p component" (let (it "fetches empty style" (let para = (style.tag "p" "para" { });
my = (style.styled "para" "p" { style = { some-style = "some value"; }; });
in { in {
expected = html.tag "p" { class = [ "para" ]; } "yes"; expected = { "p.para" = { }; };
actual = my.para { } "yes"; actual = style.getStyle (para "");
asString = true;
})) }))
(it "extends existing components" (let (it "fetches style" (let
my = (style.styled "generic" "p" { attrs = { style = { foo = "bar"; }; };
foo = "bar"; para = (style.tag "p" "para" attrs);
forgetme = "nothing";
});
this = (style.styled "quote" my.generic {
baz = "baz";
forgetme = "forgotten";
});
in { in {
expected = html.tag "p" { expected = { "p.para" = attrs.style; };
forgetme = "forgotten"; actual = style.getStyle (para "");
baz = "baz";
foo = "bar";
class = [ "generic" "quote" ];
} "yes";
actual = this.quote { } "yes";
asString = true;
})) }))
(it "makes a component with no class" (it "appliess class" (let
(let my = (style.styled "classless" "div" { class = [ ]; }); attrs = { style = { foo = "bar"; }; };
in { para = (style.tag "p" "para" attrs);
expected = html.tag "div" { class = [ ]; } "yes";
actual = my.classless { } "yes";
asString = true;
}))
(it "does not error without attrs" (let
my = (style.styled "div" "div" {
class = [ "something" ];
style = { this = "that"; };
});
in{
expected = html.tag "div" { class = [ "div" "something" ]; } "yes";
actual = my.div "yes";
asString = true;
}))
(it "makes a component" (let
my = (style.styled "div" "div" {
class = [ "something" ];
style = { this = "that"; };
});
in{
expected = html.tag "div" { class = [ "div" "something" ]; } "foobar";
actual = my.div { } "foobar";
asString = true;
}))
(it "makes special components" (let
my = (style.styled "s" "div" {
id = "s";
class = [ "something" ];
style = { s = "yes"; };
});
in{
expected = html.tag "div" {
id = "s";
class = [ "s" "something" ];
} "foobar";
actual = my.s { } "foobar";
asString = true;
}))
(it "works on many classes" (let
my = (style.styled "foobar" "div" {
class = [ "foo" "bar" ];
style = { something = "something"; };
});
in{
expected = html.tag "div" { class = [ "foobar" "foo" "bar" ]; } "foobar";
actual = my.foobar { } "foobar";
asString = true;
}))
(it "does custom behavour" (let
my = (style.styled "list" "ul" {
__child = child:
assert builtins.isList child;
(map (html.tag "li" { }) child);
});
in {
expected = html.tag "ul" {
__ = "";
class = [ "list" ];
} [ (html.tag "li" { } "1") (html.tag "li" { } "2") ];
actual = my.list { } [ "1" "2" ];
asString = true;
}))
(it "combines attrs" (let
my = (style.styled "div" "div" {
class = [ "something" ];
style = { this = "that"; };
}) (style.styled "s" "div" {
id = "s";
class = [ "something" ];
style = { s = "yes"; };
}) (style.styled "foobar" "div" {
class = [ "foo" "bar" ];
style = { something = "something"; };
}) (style.style "body" { foo = "bar"; }) (style.styled "list" "ul" {
__child = child:
assert builtins.isList child;
(map (html.tag "li" { }) child);
});
in {
expected = html.tag "div" {
id = "foo";
class = [ "div" "something" ];
} "foobar";
actual = my.div { id = "foo"; } "foobar";
asString = true;
}))
(it "makes a style"
(let my = (style.styled "para" "p" { style = { foo = "bar"; }; });
in {
expected = { "p.para" = { foo = "bar"; }; };
actual = removeAttrs my.style [ "__toString" ];
}))
(it "retains tag"
(let p = (style.styled "para" "p" { style = { foo = "bar"; }; });
in {
expected = "p";
actual = p.para.tag;
}))
(it "retains attrs"
(let p = (style.styled "para" "p" { style = { foo = "bar"; }; });
in {
expected = { foo = "bar"; };
actual = p.para.attrs.style;
}))
(it "retains class" (let p = (style.styled "para" "p" { });
in { in {
expected = [ "para" ]; expected = [ "para" ];
actual = p.para.attrs.class; actual = (para "").attrs.class;
})) }))
(it "merges styles" (let (it "applies classes from props" (let
p = (style.styled "para" "p" { style = { foo = "bar"; }; }); attrs = {
d = (style.styled "para2" p.para { style = { baz = "bar"; }; }); style = { foo = "bar"; };
my = p d; class = [ "other" "class" ];
in {
expected = {
"p.para" = { foo = "bar"; };
"p.para2.para" = {
foo = "bar";
baz = "bar";
};
}; };
actual = removeAttrs my.style [ "__toString" ]; para = (style.tag "p" "para" attrs);
in {
expected = [ "para" "other" "class" ];
actual = (para "").attrs.class;
})) }))
(it "fetches empty style" (it "fetches style for class" (let
(let s = { foo = "bar"; };
para = (style.tag "p" "para" {}); para = (style.tag "p" "para" { style = s; });
in { in {
expected = {"p.para" = {};}; expected = { "p.para" = s; };
actual = style.getStyle ( para "" ); actual = style.getStyle (para "");
})) }))
(it "fetches style" (it "fetches style recursively" (let
(let s = {
attrs = { style = { foo = "bar"; }; }; "p.para" = { foo = "bar"; };
para = (style.tag "p" "para" attrs); "a.link" = { this = "that"; };
in { };
expected = {"p.para" = attrs.style;}; para = (style.tag "p" "para" { style = s."p.para"; });
actual = style.getStyle ( para "" ); a = (style.tag "a" "link" { style = s."a.link"; });
})) in {
expected = s;
actual = style.getStyles (para (a "hello"));
removeDunders = true;
}))
(it "fetches style for class" (it "fetches style recursively through lists" (let
(let s = {
s = { foo = "bar"; }; "p.para" = { foo = "bar"; };
para = (style.tag "p" "para" {style = s;}); "a.link" = { this = "that"; };
in { };
expected = {"p.para" = s;}; para = (style.tag "p" "para" { style = s."p.para"; });
actual = style.getStyle ( para "" ); a = (style.tag "a" "link" { style = s."a.link"; });
})) in {
expected = s;
actual = style.getStyles (para [ (a "hello") ]);
removeDunders = true;
}))
(it "fetches style recursively" (it "fetches style recursively with repeats" (let
(let s = {
s = { "p.para" = { foo = "bar"; };
"p.para" = { foo = "bar"; }; "a.link" = { this = "that"; };
"a.link" = { this = "that"; }; };
}; para = (style.tag "p" "para" { style = s."p.para"; });
para = (style.tag "p" "para" {style = s."p.para";}); a = (style.tag "a" "link" { style = s."a.link"; });
a = (style.tag "a" "link" {style = s."a.link";}); in {
in { expected = s;
expected = s; actual = style.getStyles (para [ (a "hello") (a "hello") ]);
actual = style.getStyles ( para (a "hello") ); removeDunders = true;
})) }))
(it "fetches style recursively through lists" (it "converts styles to string" (let
(let s = {
s = { "p.para" = { foo = "bar"; };
"p.para" = { foo = "bar"; }; "a.link" = { this = "that"; };
"a.link" = { this = "that"; }; };
}; in {
para = (style.tag "p" "para" {style = s."p.para";}); expected = ''
a = (style.tag "a" "link" {style = s."a.link";}); a.link {
in { this: that;
expected = s; }
actual = style.getStyles ( para [(a "hello")] ); p.para {
})) foo: bar;
}
'';
actual = style.stylesToString s;
}))
(it "fetches style recursively with repeats" (it "extends styled tags" (let
(let s = {
s = { "p.para" = { foo = "bar"; };
"p.para" = { foo = "bar"; }; "p.para.oof" = { oof = "yes"; };
"a.link" = { this = "that"; }; };
}; para = (style.tag "p" "para" { style = s."p.para"; });
para = (style.tag "p" "para" {style = s."p.para";}); para2 = (style.extend para "oof" { style = s."p.para.oof"; });
a = (style.tag "a" "link" {style = s."a.link";}); in {
in { expected = s;
expected = s; actual = style.getStyles (para2 "");
actual = style.getStyles ( para [(a "hello") (a "hello")] ); removeDunders = true;
})) }))
(it "converts styles to string" (it "extends styled tags classes" (let
(let s = {
s = { "p.para" = { foo = "bar"; };
"p.para" = { foo = "bar"; }; "p.para.oof" = { oof = "yes"; };
"a.link" = { this = "that"; }; };
}; para = (style.tag "p" "para" { style = s."p.para"; });
in { para2 = (style.extend para "oof" { style = s."p.para.oof"; });
expected = '' in {
a.link { expected = [ "para" "oof" ];
this: that; actual = (para2 "").attrs.class;
} }))
p.para {
foo: bar;
}
'';
actual = style.stylesToString s;
}))
] ]