Skip to content

Commit

Permalink
refactor(class/variant): use @each mixin and update.property() fr…
Browse files Browse the repository at this point in the history 
…om variant module.
  • Loading branch information
@sciborrudnicki
sciborrudnicki committed Oct 1, 2023
1 parent a444e21 commit 1230281
Show file tree
Hide file tree
Showing 5 changed files with 39 additions and 83 deletions.
26 changes: 6 additions & 20 deletions class/variant/_variant.attribute.mixin.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,10 @@
@use '../../list/list.to-map.function' as *;
@use '../../selector/selector.class.function' as *;
@use '../../selector/selector.nest.function' as *;
@use '../../variant/update/update.property.function';

// Mixins.
@use '../../list/list.each.mixin' as *;
@use '../class.content.mixin' as class;

// Modules.
Expand Down Expand Up @@ -50,10 +52,10 @@
}
@if type-of($attribute-variant) == map {
@each $attribute, $variant in $attribute-variant {
@each $class in if(list.separator($class) == comma, $class, ($class,)) {
@include each($class) using($class) {
@if type-of($variant) == map {
// TODO? suffix for property
@each $attribute in if(list.separator($attribute) == comma, $attribute, ($attribute,)) {
@include each($attribute) using($attribute) {
@each $value-class, $value in $variant {
@include class.content(
values.join(
Expand All @@ -70,24 +72,8 @@
$function,
) {
$-property: $property or $class;
@if list.separator($-property) == comma {
$i: 1;
@each $base in $-property {
$-property: list.set-nth($-property, $i, values.join(
map.get($modifier, (property, name), null),
$base,
$attribute,
map.get($modifier, (property, attribute), null),
));
$i: $i + 1;
}
} @else {
$-property: values.join(
map.get($modifier, (property, name), null),
$-property,
$attribute,
map.get($modifier, (property, attribute), null),
);
@if $modifier {
$-property: update.property($-property, $modifier, $attribute);
}

$values: ($class, $-property, $attribute, $value-class, $value, ($value-class: $value));
Expand Down
30 changes: 6 additions & 24 deletions class/variant/_variant.class-value.mixin.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,10 @@
@use '../../list/list.to-map.function' as *;
@use '../../map/map.get.function';
@use '../../selector/selector.class.function' as *;
@use '../../variant/update/update.property.function';

// Mixins.
@use '../../list/list.each.mixin' as *;
@use '../class.content.mixin' as class;

// Modules.
Expand Down Expand Up @@ -40,8 +42,8 @@
}

// FEATURE: Works fine.
@each $value in if(list.separator($value) == comma, $value, ($value,)) {
@each $class in if(list.separator($class) == comma, $class, ($class,)) {
@include each($value) using($value) {
@include each($class) using($class) {
@include class.content(
values.join(
if(&, '&', ()),
Expand All @@ -56,28 +58,8 @@
) {
// Set property.
$-property: $property or $class;
@if list.separator($-property) == comma {
$i: 1;
@each $base in $-property {
$-property: list.set-nth(
$-property,
$i,
values.join(
(separator: space),
map.get($modifier, (property, name), null),
$base,
map.get($modifier, (property, attribute), null),
)
);
$i: $i + 1;
}
} @else {
$-property: values.join(
(separator: space),
map.get($modifier, (property, name), null),
$-property,
map.get($modifier, (property, attribute), null),
);
@if $modifier {
$-property: update.property($-property, $modifier);
}

// Set `$arguments` for `@content`.
Expand Down
17 changes: 10 additions & 7 deletions class/variant/_variant.combine.mixin.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,9 @@
// Functions.
@use '../../selector/selector.class.function' as *;

// Mixins.
@use '../../list/list.each.mixin' as *;

// Modules.
@use '../../values';

Expand All @@ -28,10 +31,10 @@
@each $value-class, $value in $value {
$-class: ();
$-value-class: ();
@each $class in if(list.separator($class) == comma, $class, ($class,)) {
@each $attribute in if(list.separator($attribute) == comma, $attribute, ($attribute,)) {
@include each($class) using($class) {
@include each($attribute) using($attribute) {
$-value-class: $value-class;
@each $value-class in if(list.separator($value-class) == comma, $value-class, ($value-class,)) {
@include each($value-class) using($value-class) {
$-class: list.append(
$-class,
meta.call(
Expand All @@ -57,8 +60,8 @@
} @else {
@each $value in $value {
$-class: ();
@each $class in if(list.separator($class) == comma, $class, ($class,)) {
@each $attribute in if(list.separator($attribute) == comma, $attribute, ($attribute,)) {
@include each($class) using($class) {
@include each($attribute) using($attribute) {
$-class: list.append(
$-class, meta.call(
$function,
Expand All @@ -81,9 +84,9 @@
}
}
} @else {
@each $value in $attribute-value {
@include each($attribute-value, false) using($value) {
$-class: ();
@each $class in if(list.separator($class) == comma, $class, ($class,)) {
@include each($class) using($class) {
$-class: list.append(
$-class,
meta.call(
Expand Down
18 changes: 9 additions & 9 deletions class/variant/_variant.mixin.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,22 +6,24 @@
@use '../../list/list.to-map.function' as *;
@use '../../selector/selector.class.function' as *;
@use '../../selector/selector.nest.function' as *;
@use '../../variant/update/update.property.function';

// Mixins.
@use '../../list/list.each.mixin' as *;
@use '../class.content.mixin' as class;

// Modules.
@use '../../function';
@use '../../map';
@use '../../values';
@use '../../variant/update/update.property.function';

// Status: DONE
// The `class.variant()` mixin sets class `$variant` with `$pseudo-class` translated with `$dictionary`, and called by `$function`.
// @param `$variant` Class variant with `$pseudo-class` called by `$function`.
// @param `$pseudo-class` Pseudo class for class `$variant`.
// @param `$dictionary` Dictionary to translate class `$variant`.
// @param `$function` The function to set class `$variant`.
// @param `$content-type`
// @param `$modifier` Modify class and property in returned content arguments.
@mixin variant(
$variant,
Expand Down Expand Up @@ -58,9 +60,9 @@
} @else if list.length($attribute) > 0 and function.has($attribute) {
$attribute: function.call-arglist($attribute...);
}
@each $class in if(list.separator($class) == comma, $class, ($class,)) {
@include each($class) using($class) {
@if type-of($variant) == map {
@each $attribute in if(list.separator($attribute) == comma, $attribute, ($attribute,)) {
@include each($attribute) using($attribute) {
@each $value-class, $value in $variant {
@include class.content(
values.join(
Expand Down Expand Up @@ -98,10 +100,8 @@
}
} @else {
// FEATURE: Works fine.
@each $variant in if(list.separator($variant) == comma, $variant, ($variant,)) {
$value: $variant;
@each $attribute in if(list.separator($attribute) == comma, $attribute, ($attribute,)) {
$value-class: $attribute;
@include each($variant) using($value) {
@include each($attribute) using($value-class) {
@include class.content(
values.join(
if(&, '&', ()),
Expand Down Expand Up @@ -141,8 +141,8 @@
} @else {
// FEATURE: Works fine.
// `variant.class-value()`
@each $value in if(list.separator($attribute-variant) == comma, $attribute-variant, ($attribute-variant,)) {
@each $class in if(list.separator($class) == comma, $class, ($class,)) {
@include each($attribute-variant) using($value) {
@include each($class) using($class) {
@include class.content(
values.join(
if(&, '&', ()),
Expand Down
31 changes: 8 additions & 23 deletions class/variant/_variant.property.mixin.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,10 @@
@use '../../list/list.to-map.function' as *;
@use '../../selector/selector.class.function' as *;
@use '../../selector/selector.nest.function' as *;
@use '../../variant/update/update.property.function';

// Mixins.
@use '../../list/list.each.mixin' as *;
@use '../class.content.mixin' as class;
@use './variant.class-value.mixin' as *;

Expand All @@ -22,6 +24,7 @@
// @param `$pseudo-class` Pseudo class for class `$variant`.
// @param `$dictionary` Dictionary to translate class `$variant`.
// @param `$function` The function to set class `$variant`.
// @param `$content-type`
// @param `$modifier`
@mixin property(
$variant,
Expand Down Expand Up @@ -51,10 +54,10 @@
@if type-of($class-value) == map {
@each $value-class, $value in $class-value {
@if not (type-of($value) == map) {
@each $class in if(list.separator($class) == comma, $class, ($class,)) {
@include each($class) using($class) {
// FEATURE: Works fine.
@each $value in if(list.separator($value) == comma, $value, ($value,)) {
@each $value-class in if(list.separator($value-class) == comma, $value-class, ($value-class,)) {
@include each($value) using($value) {
@include each($value-class) using($value-class) {
@include class.content(
values.join(
if(&, '&', ()),
Expand All @@ -69,26 +72,8 @@
$function
) {
$-property: $property or $class;
@if list.separator($-property) == comma {
$i: 1;
@each $base in $-property {
$-property: list.set-nth(
$-property,
$i,
values.join(
map.get($modifier, (property, name), null),
$base,
map.get($modifier, (property, attribute), null),
)
);
$i: $i + 1;
}
} @else {
$-property: values.join(
map.get($modifier, (property, name), null),
$-property,
map.get($modifier, (property, attribute), null),
);
@if $modifier {
$-property: update.property($-property, $modifier);
}

// values to pass into the @content
Expand Down

0 comments on commit 1230281

Please sign in to comment.