diff options
author | Volpeon <git@volpeon.ink> | 2022-02-05 07:52:13 +0100 |
---|---|---|
committer | Volpeon <git@volpeon.ink> | 2022-02-05 07:52:13 +0100 |
commit | dd5f3c463fab336d694f426dcad11a1783590fc9 (patch) | |
tree | faebf738a9556eaa393371852ed86550d4adf66a /test/bem/_state.scss | |
parent | Fix errors from transition from node-sass to sass (diff) | |
download | iro-sass-dd5f3c463fab336d694f426dcad11a1783590fc9.tar.gz iro-sass-dd5f3c463fab336d694f426dcad11a1783590fc9.tar.bz2 iro-sass-dd5f3c463fab336d694f426dcad11a1783590fc9.zip |
Ported from import syntax to modules
Diffstat (limited to 'test/bem/_state.scss')
-rw-r--r-- | test/bem/_state.scss | 180 |
1 files changed, 180 insertions, 0 deletions
diff --git a/test/bem/_state.scss b/test/bem/_state.scss new file mode 100644 index 0000000..674da5f --- /dev/null +++ b/test/bem/_state.scss | |||
@@ -0,0 +1,180 @@ | |||
1 | // sass-lint:disable class-name-format force-element-nesting force-pseudo-nesting mixins-before-declarations | ||
2 | |||
3 | @use 'true' as *; | ||
4 | @use '../../src/bem'; | ||
5 | |||
6 | // | ||
7 | // Included test cases: | ||
8 | // - /// 1 /// - single block, single state | ||
9 | // - /// 2 /// - single element, single state | ||
10 | // - /// 3 /// - single block, multiple states | ||
11 | // - /// 4 /// - single element, multiple states | ||
12 | // - /// 5 /// - multiple elements, single state | ||
13 | // - /// 6 /// - multiple elements, multiple states | ||
14 | // | ||
15 | |||
16 | @include it('state') { | ||
17 | @include assert('single block, single state') { /// 1 /// | ||
18 | @include output { | ||
19 | @include bem.block('something') { | ||
20 | @include bem.is('active') { | ||
21 | font-size: 1.25em; | ||
22 | } | ||
23 | |||
24 | @include bem.has('state') { | ||
25 | font-size: 1.75em; | ||
26 | } | ||
27 | } | ||
28 | } | ||
29 | |||
30 | @include expect { | ||
31 | .something.is-active { | ||
32 | font-size: 1.25em; | ||
33 | } | ||
34 | |||
35 | .something.has-state { | ||
36 | font-size: 1.75em; | ||
37 | } | ||
38 | } | ||
39 | } | ||
40 | |||
41 | @include assert('single element, single state') { /// 2 /// | ||
42 | @include output { | ||
43 | @include bem.block('something') { | ||
44 | @include bem.elem('child') { | ||
45 | @include bem.is('active') { | ||
46 | font-size: 2.25em; | ||
47 | } | ||
48 | |||
49 | @include bem.has('state') { | ||
50 | font-size: 2.75em; | ||
51 | } | ||
52 | } | ||
53 | } | ||
54 | } | ||
55 | |||
56 | @include expect { | ||
57 | .something__child.is-active { | ||
58 | font-size: 2.25em; | ||
59 | } | ||
60 | |||
61 | .something__child.has-state { | ||
62 | font-size: 2.75em; | ||
63 | } | ||
64 | } | ||
65 | } | ||
66 | |||
67 | @include assert('single block, multiple states') { /// 3 /// | ||
68 | @include output { | ||
69 | @include bem.block('something') { | ||
70 | @include bem.is('active', 'primary') { | ||
71 | font-size: 1.25em; | ||
72 | } | ||
73 | |||
74 | @include bem.has('state', 'indicator') { | ||
75 | font-size: 1.75em; | ||
76 | } | ||
77 | } | ||
78 | } | ||
79 | |||
80 | @include expect { | ||
81 | .something.is-active, | ||
82 | .something.is-primary { | ||
83 | font-size: 1.25em; | ||
84 | } | ||
85 | |||
86 | .something.has-state, | ||
87 | .something.has-indicator { | ||
88 | font-size: 1.75em; | ||
89 | } | ||
90 | } | ||
91 | } | ||
92 | |||
93 | @include assert('single element, multiple states') { /// 4 /// | ||
94 | @include output { | ||
95 | @include bem.block('something') { | ||
96 | @include bem.elem('child') { | ||
97 | @include bem.is('active', 'primary') { | ||
98 | font-size: 2.25em; | ||
99 | } | ||
100 | |||
101 | @include bem.has('state', 'indicator') { | ||
102 | font-size: 2.75em; | ||
103 | } | ||
104 | } | ||
105 | } | ||
106 | } | ||
107 | |||
108 | @include expect { | ||
109 | .something__child.is-active, | ||
110 | .something__child.is-primary { | ||
111 | font-size: 2.25em; | ||
112 | } | ||
113 | |||
114 | .something__child.has-state, | ||
115 | .something__child.has-indicator { | ||
116 | font-size: 2.75em; | ||
117 | } | ||
118 | } | ||
119 | } | ||
120 | |||
121 | @include assert('multiple elements, single state') { /// 5 /// | ||
122 | @include output { | ||
123 | @include bem.block('something') { | ||
124 | @include bem.elem('child1', 'child2') { | ||
125 | @include bem.is('active') { | ||
126 | font-size: 2.25em; | ||
127 | } | ||
128 | |||
129 | @include bem.has('state') { | ||
130 | font-size: 2.75em; | ||
131 | } | ||
132 | } | ||
133 | } | ||
134 | } | ||
135 | |||
136 | @include expect { | ||
137 | .something__child1.is-active, | ||
138 | .something__child2.is-active { | ||
139 | font-size: 2.25em; | ||
140 | } | ||
141 | |||
142 | .something__child1.has-state, | ||
143 | .something__child2.has-state { | ||
144 | font-size: 2.75em; | ||
145 | } | ||
146 | } | ||
147 | } | ||
148 | |||
149 | @include assert('multiple elements, multiple states') { /// 6 /// | ||
150 | @include output { | ||
151 | @include bem.block('something') { | ||
152 | @include bem.elem('child1', 'child2') { | ||
153 | @include bem.is('active', 'primary') { | ||
154 | font-size: 2.25em; | ||
155 | } | ||
156 | |||
157 | @include bem.has('state', 'indicator') { | ||
158 | font-size: 2.75em; | ||
159 | } | ||
160 | } | ||
161 | } | ||
162 | } | ||
163 | |||
164 | @include expect { | ||
165 | .something__child1.is-active, | ||
166 | .something__child2.is-active, | ||
167 | .something__child1.is-primary, | ||
168 | .something__child2.is-primary { | ||
169 | font-size: 2.25em; | ||
170 | } | ||
171 | |||
172 | .something__child1.has-state, | ||
173 | .something__child2.has-state, | ||
174 | .something__child1.has-indicator, | ||
175 | .something__child2.has-indicator { | ||
176 | font-size: 2.75em; | ||
177 | } | ||
178 | } | ||
179 | } | ||
180 | } | ||