diffdown.com
Diffdown is a real-time collaborative Markdown editor/previewer built on the AT Protocol
diffdown.com
1import {StyleModule} from "style-mod"
2import ist from "ist"
3
4describe("StyleModule", () => {
5 it("renders objects to CSS text", () => {
6 ist(rules(new StyleModule({main: {color: "red", border: "1px solid green"}})),
7 ["main {color: red; border: 1px solid green;}"], eqRules)
8 })
9
10 it("handles multiple rules", () => {
11 ist(rules(new StyleModule({
12 one: {color: "green"},
13 two: {color: "blue"}
14 })), [
15 "one {color: green;}",
16 "two {color: blue;}"
17 ], eqRules)
18 })
19
20 it("supports &-nesting", () => {
21 ist(rules(new StyleModule({
22 main: {
23 color: "yellow",
24 "&:hover": {fontWeight: "bold"}
25 }
26 })), [
27 "main:hover {font-weight: bold;}",
28 "main {color: yellow;}"
29 ], eqRules)
30 })
31
32 it("can replace multiple & markers", () => {
33 ist(rules(new StyleModule({
34 main: {
35 "p &, div &": {color: "blue"}
36 }
37 })), [
38 "p main, div main {color: blue;}"
39 ], eqRules)
40 })
41
42 it("supports media queries", () => {
43 ist(rules(new StyleModule({
44 "@media screen and (min-width: 400px)": {
45 main: {
46 fontFamily: '"URW Bookman"',
47 MozBoxSizing: "border-box"
48 }
49 }
50 })), ["@media screen and (min-width: 400px) {main {font-family: \"URW Bookman\"; -moz-box-sizing: border-box;}}"], eqRules)
51 })
52
53 it("can render keyframes", () => {
54 ist(rules(new StyleModule({
55 "@keyframes foo": {
56 "0%": {color: "blue"},
57 "50%": {color: "red"}
58 }
59 })), ["@keyframes foo {0% {color: blue;} 50% {color: red;}}"], eqRules)
60 })
61
62 it("doesn't mangle keyframe names", () => {
63 ist(rules(new StyleModule({
64 "@keyframes foo": {
65 "0%": {color: "blue"},
66 "50%": {color: "red"}
67 }
68 }, {finish: s => ".foo " + s})), ["@keyframes foo {0% {color: blue;} 50% {color: red;}}"], eqRules)
69 })
70
71 it("can render multiple instances of a property", () => {
72 ist(rules(new StyleModule({
73 main: {
74 color: "rgba(100, 100, 100, .5)",
75 color_2: "grey"
76 }
77 })), ["main {color: rgba(100, 100, 100, .5); color: grey;}"], eqRules)
78 })
79
80 it("can expand multiple selectors at once", () => {
81 ist(rules(new StyleModule({
82 "one, two": {
83 "&.x": {
84 color: "yellow"
85 }
86 }
87 })), ["one.x, two.x {color: yellow;}"], eqRules)
88 })
89
90 it("allows processing of selectors", () => {
91 ist(rules(new StyleModule({
92 "abc, cba": {color: "yellow"},
93 "@media stuff": {abc: {fontWeight: "bold"}}
94 }, {
95 finish: x => x.replace(/a/g, "u")
96 })), ["ubc, cbu {color: yellow;}", "@media stuff {ubc {font-weight: bold;}}"], eqRules)
97 })
98})
99
100function rules(module) { return module.rules }
101
102function eqRules(a, b) {
103 return JSON.stringify(a) == JSON.stringify(b)
104}