encre_css/plugins/transform/
mod.rs

1//! Transform utilities
2pub mod rotate;
3pub mod scale;
4pub mod skew;
5pub mod transform_origin;
6pub mod transform_type;
7pub mod translate;
8
9const CSS_TRANSFORM: &str = "transform: translate(var(--en-translate-x), var(--en-translate-y)) rotate(var(--en-rotate)) skewX(var(--en-skew-x)) skewY(var(--en-skew-y)) scaleX(var(--en-scale-x)) scaleY(var(--en-scale-y));";
10
11#[cfg(test)]
12mod tests {
13    use crate::{generate, utils::testing::base_config};
14
15    use pretty_assertions::assert_eq;
16
17    #[test]
18    fn rotate() {
19        assert_eq!(generate(["rotate-20"], &base_config()), ".rotate-20 {
20  --en-rotate: 20deg;
21  transform: translate(var(--en-translate-x), var(--en-translate-y)) rotate(var(--en-rotate)) skewX(var(--en-skew-x)) skewY(var(--en-skew-y)) scaleX(var(--en-scale-x)) scaleY(var(--en-scale-y));
22}");
23        assert_eq!(
24            generate(["rotate-[1.25turn]"], &base_config()),
25            r".rotate-\[1\.25turn\] {
26  --en-rotate: 1.25turn;
27  transform: translate(var(--en-translate-x), var(--en-translate-y)) rotate(var(--en-rotate)) skewX(var(--en-skew-x)) skewY(var(--en-skew-y)) scaleX(var(--en-scale-x)) scaleY(var(--en-scale-y));
28}"
29        );
30    }
31
32    #[test]
33    fn scale() {
34        assert_eq!(generate(["scale-150"], &base_config()), ".scale-150 {
35  --en-scale-x: 1.5;
36  --en-scale-y: 1.5;
37  transform: translate(var(--en-translate-x), var(--en-translate-y)) rotate(var(--en-rotate)) skewX(var(--en-skew-x)) skewY(var(--en-skew-y)) scaleX(var(--en-scale-x)) scaleY(var(--en-scale-y));
38}");
39        assert_eq!(generate(["scale-x-20"], &base_config()), ".scale-x-20 {
40  --en-scale-x: 0.2;
41  transform: translate(var(--en-translate-x), var(--en-translate-y)) rotate(var(--en-rotate)) skewX(var(--en-skew-x)) skewY(var(--en-skew-y)) scaleX(var(--en-scale-x)) scaleY(var(--en-scale-y));
42}");
43        assert_eq!(generate(["scale-y-45"], &base_config()), ".scale-y-45 {
44  --en-scale-y: 0.45;
45  transform: translate(var(--en-translate-x), var(--en-translate-y)) rotate(var(--en-rotate)) skewX(var(--en-skew-x)) skewY(var(--en-skew-y)) scaleX(var(--en-scale-x)) scaleY(var(--en-scale-y));
46}");
47    }
48
49    #[test]
50    fn skew() {
51        assert_eq!(generate(["skew-x-20"], &base_config()), ".skew-x-20 {
52  --en-skew-x: 20deg;
53  transform: translate(var(--en-translate-x), var(--en-translate-y)) rotate(var(--en-rotate)) skewX(var(--en-skew-x)) skewY(var(--en-skew-y)) scaleX(var(--en-scale-x)) scaleY(var(--en-scale-y));
54}");
55        assert_eq!(generate(["skew-y-20"], &base_config()), ".skew-y-20 {
56  --en-skew-y: 20deg;
57  transform: translate(var(--en-translate-x), var(--en-translate-y)) rotate(var(--en-rotate)) skewX(var(--en-skew-x)) skewY(var(--en-skew-y)) scaleX(var(--en-scale-x)) scaleY(var(--en-scale-y));
58}");
59        assert_eq!(
60            generate(["skew-x-[1.25turn]"], &base_config()),
61            r".skew-x-\[1\.25turn\] {
62  --en-skew-x: 1.25turn;
63  transform: translate(var(--en-translate-x), var(--en-translate-y)) rotate(var(--en-rotate)) skewX(var(--en-skew-x)) skewY(var(--en-skew-y)) scaleX(var(--en-scale-x)) scaleY(var(--en-scale-y));
64}"
65        );
66        assert_eq!(
67            generate(["skew-y-[1.25turn]"], &base_config()),
68            r".skew-y-\[1\.25turn\] {
69  --en-skew-y: 1.25turn;
70  transform: translate(var(--en-translate-x), var(--en-translate-y)) rotate(var(--en-rotate)) skewX(var(--en-skew-x)) skewY(var(--en-skew-y)) scaleX(var(--en-scale-x)) scaleY(var(--en-scale-y));
71}"
72        );
73    }
74
75    #[test]
76    fn translate() {
77        assert_eq!(generate(["translate-x-20"], &base_config()), ".translate-x-20 {
78  --en-translate-x: 5rem;
79  transform: translate(var(--en-translate-x), var(--en-translate-y)) rotate(var(--en-rotate)) skewX(var(--en-skew-x)) skewY(var(--en-skew-y)) scaleX(var(--en-scale-x)) scaleY(var(--en-scale-y));
80}");
81        assert_eq!(generate(["-translate-x-full"], &base_config()), ".-translate-x-full {
82  --en-translate-x: -100%;
83  transform: translate(var(--en-translate-x), var(--en-translate-y)) rotate(var(--en-rotate)) skewX(var(--en-skew-x)) skewY(var(--en-skew-y)) scaleX(var(--en-scale-x)) scaleY(var(--en-scale-y));
84}");
85        assert_eq!(generate(["-translate-x-20"], &base_config()), ".-translate-x-20 {
86  --en-translate-x: -5rem;
87  transform: translate(var(--en-translate-x), var(--en-translate-y)) rotate(var(--en-rotate)) skewX(var(--en-skew-x)) skewY(var(--en-skew-y)) scaleX(var(--en-scale-x)) scaleY(var(--en-scale-y));
88}");
89        assert_eq!(generate(["translate-y-20"], &base_config()), ".translate-y-20 {
90  --en-translate-y: 5rem;
91  transform: translate(var(--en-translate-x), var(--en-translate-y)) rotate(var(--en-rotate)) skewX(var(--en-skew-x)) skewY(var(--en-skew-y)) scaleX(var(--en-scale-x)) scaleY(var(--en-scale-y));
92}");
93        assert_eq!(generate(["translate-x-auto"], &base_config()), ".translate-x-auto {
94  --en-translate-x: auto;
95  transform: translate(var(--en-translate-x), var(--en-translate-y)) rotate(var(--en-rotate)) skewX(var(--en-skew-x)) skewY(var(--en-skew-y)) scaleX(var(--en-scale-x)) scaleY(var(--en-scale-y));
96}");
97        assert_eq!(generate(["translate-y-full"], &base_config()), ".translate-y-full {
98  --en-translate-y: 100%;
99  transform: translate(var(--en-translate-x), var(--en-translate-y)) rotate(var(--en-rotate)) skewX(var(--en-skew-x)) skewY(var(--en-skew-y)) scaleX(var(--en-scale-x)) scaleY(var(--en-scale-y));
100}");
101        assert_eq!(
102            generate(["translate-x-[1.25%]"], &base_config()),
103            r".translate-x-\[1\.25\%\] {
104  --en-translate-x: 1.25%;
105  transform: translate(var(--en-translate-x), var(--en-translate-y)) rotate(var(--en-rotate)) skewX(var(--en-skew-x)) skewY(var(--en-skew-y)) scaleX(var(--en-scale-x)) scaleY(var(--en-scale-y));
106}"
107        );
108        assert_eq!(
109            generate(["translate-y-[10px]"], &base_config()),
110            r".translate-y-\[10px\] {
111  --en-translate-y: 10px;
112  transform: translate(var(--en-translate-x), var(--en-translate-y)) rotate(var(--en-rotate)) skewX(var(--en-skew-x)) skewY(var(--en-skew-y)) scaleX(var(--en-scale-x)) scaleY(var(--en-scale-y));
113}"
114        );
115    }
116
117    #[test]
118    fn transform_origin() {
119        assert_eq!(
120            generate(["origin-center"], &base_config()),
121            ".origin-center {
122  transform-origin: center;
123}"
124        );
125        assert_eq!(
126            generate(["origin-[bottom_right_60px]"], &base_config()),
127            r".origin-\[bottom_right_60px\] {
128  transform-origin: bottom right 60px;
129}"
130        );
131        assert_eq!(
132            generate(["origin-[-100%_40%]"], &base_config()),
133            r".origin-\[-100\%_40\%\] {
134  transform-origin: -100% 40%;
135}"
136        );
137    }
138
139    #[test]
140    fn transform_type() {
141        assert_eq!(generate(["transform-gpu"], &base_config()), ".transform-gpu {
142  transform: translate3d(var(--en-translate-x), var(--en-translate-y), 0) rotate(var(--en-rotate)) skewX(var(--en-skew-x)) skewY(var(--en-skew-y)) scaleX(var(--en-scale-x)) scaleY(var(--en-scale-y));
143}");
144        assert_eq!(
145            generate(["transform-none"], &base_config()),
146            ".transform-none {
147  transform: none;
148}"
149        );
150    }
151}
encre_css/plugins/transform/mod.rs

encre_css/plugins/transform/
mod.rs
