whisker-css 0.3.0

Type-safe CSS builder for Whisker. Mirrors the Lynx CSS surface.
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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126

//! Flexbox properties.

use crate::css::Css;
use crate::keyword::{
    AlignContent, AlignItems, AlignSelf, FlexDirection, FlexWrap, JustifyContent,
};
use crate::value::FlexBasis;

impl Css {
    /// Sets `flex-direction`. Lynx default: `row`.
    /// <https://lynxjs.org/api/css/properties/flex-direction>
    pub fn flex_direction(self, v: FlexDirection) -> Self {
        self.push("flex-direction", v)
    }

    /// Sets `flex-wrap`. Lynx default: `nowrap`.
    /// <https://lynxjs.org/api/css/properties/flex-wrap>
    pub fn flex_wrap(self, v: FlexWrap) -> Self {
        self.push("flex-wrap", v)
    }

    /// Sets `flex-grow`. Lynx default: `0`. Negative values are
    /// clamped to zero.
    /// <https://lynxjs.org/api/css/properties/flex-grow>
    pub fn flex_grow(self, v: f32) -> Self {
        self.push_raw("flex-grow", crate::to_css::number_to_string(v))
    }

    /// Sets `flex-shrink`. Lynx default: `1`. Negative values are
    /// clamped to zero.
    /// <https://lynxjs.org/api/css/properties/flex-shrink>
    pub fn flex_shrink(self, v: f32) -> Self {
        self.push_raw("flex-shrink", crate::to_css::number_to_string(v))
    }

    /// Sets `flex-basis`. Lynx default: `auto`.
    /// <https://lynxjs.org/api/css/properties/flex-basis>
    pub fn flex_basis(self, v: impl Into<FlexBasis>) -> Self {
        self.push("flex-basis", v.into())
    }

    /// Sets `justify-content` — main-axis distribution.
    /// <https://lynxjs.org/api/css/properties/justify-content>
    pub fn justify_content(self, v: JustifyContent) -> Self {
        self.push("justify-content", v)
    }

    /// Sets `align-items` — cross-axis alignment for all items.
    /// <https://lynxjs.org/api/css/properties/align-items>
    pub fn align_items(self, v: AlignItems) -> Self {
        self.push("align-items", v)
    }

    /// Sets `align-self` — cross-axis alignment for this item only.
    /// <https://lynxjs.org/api/css/properties/align-self>
    pub fn align_self(self, v: AlignSelf) -> Self {
        self.push("align-self", v)
    }

    /// Sets `align-content` — cross-axis distribution of wrapped lines.
    /// <https://lynxjs.org/api/css/properties/align-content>
    pub fn align_content(self, v: AlignContent) -> Self {
        self.push("align-content", v)
    }

    /// Sets `order` — controls layout order among flex/grid siblings.
    /// <https://lynxjs.org/api/css/properties/order>
    pub fn order(self, v: i32) -> Self {
        self.push_raw("order", v.to_string())
    }
}

#[cfg(test)]
mod tests {
    use crate::ext::*;
    use crate::keyword::*;
    use crate::value::FlexBasis;
    use crate::Css;

    #[test]
    fn flex_direction_and_wrap() {
        let s = Css::new()
            .flex_direction(FlexDirection::Column)
            .flex_wrap(FlexWrap::Wrap);
        assert_eq!(s.to_string(), "flex-direction: column; flex-wrap: wrap;");
    }

    #[test]
    fn flex_grow_shrink_basis() {
        let s = Css::new()
            .flex_grow(1.0)
            .flex_shrink(0.5)
            .flex_basis(FlexBasis::Auto);
        assert_eq!(
            s.to_string(),
            "flex-grow: 1; flex-shrink: 0.5; flex-basis: auto;"
        );
    }

    #[test]
    fn flex_basis_length_and_content() {
        let s = Css::new().flex_basis(px(100));
        assert_eq!(s.to_string(), "flex-basis: 100px;");
        let s = Css::new().flex_basis(FlexBasis::Content);
        assert_eq!(s.to_string(), "flex-basis: content;");
    }

    #[test]
    fn alignment_set() {
        let s = Css::new()
            .justify_content(JustifyContent::SpaceBetween)
            .align_items(AlignItems::Center)
            .align_self(AlignSelf::Stretch)
            .align_content(AlignContent::SpaceAround);
        assert_eq!(
            s.to_string(),
            "justify-content: space-between; align-items: center; align-self: stretch; align-content: space-around;"
        );
    }

    #[test]
    fn order_negative_allowed() {
        let s = Css::new().order(-1);
        assert_eq!(s.to_string(), "order: -1;");
    }
}