olexsmir.xyz/lua/tests/css_test.lua(view raw)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 |
local t = require "tests.testutils"
local _, T, css = t.setup "css"
local c = require "lego.css"
css["simple css"] = function()
local rules = {
body = {
margin = 0,
["font-family"] = "sans-serif",
},
}
t.eq(c.style(rules), [[body{font-family:sans-serif;margin:0;}]])
end
css["nested-styles"] = function()
local rules = {
body = {
margin = 0,
h1 = {
color = "red",
},
},
}
t.eq(c.style(rules), [[body{margin:0;}body h1{color:red;}]])
end
css["camelCase properties"] = function()
local rules = {
[".button"] = {
backgroundColor = "blue",
fontSize = "14px",
},
}
t.eq(c.style(rules), [[.button{background-color:blue;font-size:14px;}]])
end
css["multiple selectors"] = function()
local rules = {
body = { margin = 0 },
h1 = { color = "black" },
}
t.eq(c.style(rules), [[body{margin:0;}h1{color:black;}]])
end
css["deep nesting"] = function()
local rules = {
[".container"] = {
padding = "10px",
[".inner"] = {
margin = 0,
span = { fontWeight = "bold" },
["&:hover"] = { color = "blue" },
},
},
}
t.eq(
c.style(rules),
[[.container{padding:10px;}.container .inner{margin:0;}.container .inner span{font-weight:bold;}.container .inner:hover{color:blue;}]]
)
end
css["@media"] = function()
local rules = {
["@media screen and (min-width: 1200px)"] = {
margin = 0,
},
}
t.eq(c.style(rules), [[@media screen and (min-width: 1200px){margin:0;}]])
end
css[":root"] = function()
local rules = {
[":root"] = {
["--h1-size"] = "3rem",
},
["@media (true)"] = {
["--h1-size"] = "2rem",
},
h1 = { font_size = "0px" },
}
t.eq(c.style(rules), [[:root{--h1-size:3rem;}@media (true){--h1-size:2rem;}h1{font-size:0px;}]])
end
return T
|