import { describe, it } from "https://esm.town/v/jxnblk/test";
import { assert, assertEquals, assertMatch } from "jsr:@std/assert@1";
import { css } from "https://esm.town/v/jxnblk/tuna";
const matches = (a, b) => assertMatch(a, new RegExp(b));
export default describe("tuna tests", () => {
const bodyStyles = css({
body: {
color: "red",
fontFamily: "sans-serif",
},
});
it("generates css", () => {
assertEquals(bodyStyles.css, "body{color:red;font-family:sans-serif}");
});
it("generates a style tag", () => {
assertEquals(bodyStyles.tag.dangerouslySetInnerHTML.__html, bodyStyles.css);
});
const styles = css({
button: {
color: "blue",
padding: "8px",
},
box: {
color: "blue",
padding: "32px",
},
});
it("creates atomic classnames", () => {
matches(styles.css, "x0");
matches(styles.css, "x1");
matches(styles.css, "x2");
});
it("creates atomic declarations", () => {
matches(styles.css, ".x0{color:blue}");
matches(styles.css, ".x1{padding:8px}");
matches(styles.css, ".x2{padding:32px}");
});
it("returns classnames for application", () => {
assertEquals(styles.button, "x0 x1");
assertEquals(styles.box, "x0 x2");
});
const pseudos = css({
box: {
backgroundColor: "tomato",
"&:hover": {
backgroundColor: "blue",
color: "black",
},
},
});
it("handles pseudoselectors", () => {
matches(pseudos.css, ".x3{background-color:tomato}");
matches(pseudos.css, ".x4:hover{background-color:blue}");
matches(pseudos.css, ".x5:hover{color:black}");
});
const children = css({
title: {
fontSize: "32px",
"& > span": {
fontSize: "16px",
},
},
});
it("handles child selectors", () => {
matches(children.css, ".x6{font-size:32px}");
matches(children.css, ".x7 > span{font-size:16px}");
});
const attrs = css({
input: {
"&[type=checkbox]": {
backgroundColor: "tomato",
},
},
});
it("handles attr selectors", () => {
assertEquals(attrs.css, ".x8[type=checkbox]{background-color:tomato}");