vertigo 0.11.4

Reactive Real-DOM library with SSR for Rust
Documentation 
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

use crate::css;

use super::utils::*;

// Make crate available by its name for css macro
use crate as vertigo;

#[test]
fn test_media() {
    let value = css! {"
        color: red;
        @media screen and (min-width: 600px) {
            color: white;
            background-color: blue;
        };
        background-color: black;
    "};

    assert_eq!(
        get_s(&value),
        "color: red;\n@media screen and (min-width: 600px) { color: white; background-color: blue; };\nbackground-color: black;"
    )
}

#[test]
fn test_media_with_params() {
    let param_inner = "blue";
    let param_outer = "black";
    let value = css! {"
        color: red;
        @media screen and (min-width: 600px) {
            color: white;
            background-color: {param_inner};
        };
        background-color: {param_outer};
    "};

    assert_eq!(
        get_d(&value),
        "color: red;\n@media screen and (min-width: 600px) { color: white; background-color: blue; };\nbackground-color: black;"
    )
}

#[test]
fn test_media_with_pseudo() {
    let value = css! {"
        color: red;
        @media (30em <= width <= 50em) {
            :nth-last-of-type(2) {
                background-color: blue;
            };
        };
    "};

    assert_eq!(
        get_s(&value),
        "color: red;\n@media (30em <= width <= 50em) { :nth-last-of-type(2) { background-color: blue; }; };"
    )
}

#[test]
fn test_doubled() {
    let value = css! {"
        width: 40px;

        @media only screen and (max-width: 1000px) {
            color: red;
        };

        @media print {
            color: black;
        };
    "};

    assert_eq!(
        get_s(&value),
        "width: 40px;\n@media only screen and (max-width: 1000px) { color: red; };\n@media print { color: black; };"
    )
}