Skip to content

Commit 89f34e3

Browse files
sciborrudnickisciborrudnicki
committed
refactor(class.variant()): add $modifier argument to modify class and property.
1 parent c8c8f5b commit 89f34e3

File tree

1 file changed

+110
-7
lines changed

1 file changed

+110
-7
lines changed

‎class/variant/_variant.mixin.scss

Lines changed: 110 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212

1313
// Modules.
1414
@use '../../function';
15+
@use '../../map';
1516
@use '../../values';
1617

1718
// Status: DONE
@@ -20,6 +21,7 @@
2021
// @param `$pseudo-class` Pseudo class for class `$variant`.
2122
// @param `$dictionary` Dictionary to translate class `$variant`.
2223
// @param `$function` The function to set class `$variant`.
24+
// @param `$modifier`
2325
@mixin variant(
2426
$variant,
2527
$pseudo-class: (),
@@ -47,6 +49,7 @@
4749
}
4850
@if type-of($attribute-variant) == map {
4951
@each $attribute, $variant in $attribute-variant {
52+
// TODO: Remove in future.
5053
@if type-of($attribute) == map {
5154
@each $key, $value in $attribute {
5255
$attribute: nest($key, $value);
@@ -61,15 +64,46 @@
6164
@include class.content(
6265
values.join(
6366
if(&, '&', ()),
67+
map.get($modifier, (class, prefix), null),
6468
$class,
6569
$attribute,
66-
if(list.separator($value-class) == comma, ($value-class,), $value-class)
70+
map.get($modifier, (class, attribute), null),
71+
if(list.separator($value-class) == comma, ($value-class,), $value-class),
72+
map.get($modifier, (class, suffix), null),
6773
),
6874
$pseudo-class,
6975
$dictionary,
7076
$function,
7177
) {
72-
$values: ($class, $property or $class, $attribute, $value-class, $value, ($value-class: $value));
78+
// Set property.
79+
$-property: $property or $class;
80+
@if $modifier {
81+
@if list.separator($-property) == comma {
82+
$i: 1;
83+
@each $base in $-property {
84+
$-property: list.set-nth(
85+
$-property,
86+
$i,
87+
values.join(
88+
map.get($modifier, (property, name), null),
89+
$base,
90+
$attribute,
91+
map.get($modifier, (property, attribute), null),
92+
)
93+
);
94+
$i: $i + 1;
95+
}
96+
} @else {
97+
$-property: values.join(
98+
map.get($modifier, (property, name), null),
99+
$-property,
100+
$attribute,
101+
map.get($modifier, (property, attribute), null),
102+
);
103+
}
104+
}
105+
106+
$values: ($class, $-property, $attribute, $value-class, $value, ($value-class: $value));
73107
$content: if(
74108
$content-type == map,
75109
to-map($values, $content-keys...),
@@ -90,12 +124,45 @@
90124
@each $attribute in if(list.separator($attribute) == comma, $attribute, ($attribute,)) {
91125
$value-class: $attribute;
92126
@include class.content(
93-
values.join(if(&, '&', ()), $class, $value-class),
127+
values.join(
128+
if(&, '&', ()),
129+
map.get($modifier, (class, prefix), null),
130+
$class,
131+
map.get($modifier, (class, attribute), null),
132+
$value-class,
133+
map.get($modifier, (class, suffix), null),
134+
),
94135
$pseudo-class,
95136
$dictionary,
96137
$function,
97138
) {
98-
$values: ($class, $property or $class, null, $value-class, $value, ($value-class: $value));
139+
// Set property.
140+
$-property: $property or $class;
141+
@if $modifier {
142+
@if list.separator($-property) == comma {
143+
$i: 1;
144+
@each $base in $-property {
145+
$-property: list.set-nth(
146+
$-property,
147+
$i,
148+
values.join(
149+
map.get($modifier, (property, name), null),
150+
$base,
151+
map.get($modifier, (property, attribute), null),
152+
)
153+
);
154+
$i: $i + 1;
155+
}
156+
} @else {
157+
$-property: values.join(
158+
map.get($modifier, (property, name), null),
159+
$-property,
160+
map.get($modifier, (property, attribute), null),
161+
);
162+
}
163+
}
164+
165+
$values: ($class, $-property, null, $value-class, $value, ($value-class: $value));
99166
$arguments: if(
100167
$content-type == map,
101168
to-map($values, $content-keys...),
@@ -114,18 +181,54 @@
114181
}
115182
} @else {
116183
// FEATURE: Works fine.
184+
// `variant.class-value()`
117185
@each $value in if(list.separator($attribute-variant) == comma, $attribute-variant, ($attribute-variant,)) {
118186
@each $class in if(list.separator($class) == comma, $class, ($class,)) {
119187
@include class.content(
120-
values.join(if(&, '&', ()), $class),
188+
values.join(
189+
if(&, '&', ()),
190+
map.get($modifier, (class, prefix), null),
191+
$class,
192+
map.get($modifier, (class, attribute), null),
193+
map.get($modifier, (class, suffix), null),
194+
),
121195
$pseudo-class,
122196
$dictionary,
123197
$function
124198
) {
199+
// Set property.
200+
$-property: $property or $class;
201+
@if $modifier {
202+
@if list.separator($-property) == comma {
203+
$i: 1;
204+
@each $base in $-property {
205+
$-property: list.set-nth(
206+
$-property,
207+
$i,
208+
values.join(
209+
(separator: space),
210+
map.get($modifier, (property, name), null),
211+
$base,
212+
map.get($modifier, (property, attribute), null),
213+
)
214+
);
215+
$i: $i + 1;
216+
}
217+
} @else {
218+
$-property: values.join(
219+
(separator: space),
220+
map.get($modifier, (property, name), null),
221+
$-property,
222+
map.get($modifier, (property, attribute), null),
223+
);
224+
}
225+
}
226+
227+
// Set `$arguments` for `@content`.
125228
$arguments: if(
126229
$content-type == map,
127-
to-map(($class, $property or $class, $value), $content-keys...),
128-
values.combine((separator: comma), $class, $property or $class, $value)
230+
to-map(($class, $-property, $value), $content-keys...),
231+
values.combine((separator: comma), $class, $-property, $value)
129232
);
130233
@if type-of($arguments) == list {
131234
@content($arguments...);

0 commit comments

Comments
 (0)