Skip to content

Commit

Permalink
refactor(class/variant): use values.join() and update spec.
Browse files Browse the repository at this point in the history
  • Loading branch information
@sciborrudnicki
sciborrudnicki committed Sep 24, 2023
1 parent 5afd3c2 commit 7d0c18e
Show file tree
Hide file tree
Showing 2 changed files with 77 additions and 20 deletions.
74 changes: 56 additions & 18 deletions class/variant/_variant.mixin.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,8 @@
$pseudo-class: (),
$dictionary: (),
$function: meta.get-function(class),
$content-type: list
$content-type: list,
$modifier: null
) {
@if type-of($variant) == map {
$content-keys: (
Expand All @@ -38,26 +39,47 @@
);
@each $class, $attribute-variant in $variant {
$property: null;
@if type-of($class) == map { @each $-class, $-property in $class { $class: $-class; $property: $-property; }}
@if type-of($class) == map {
@each $-class, $-property in $class {
$class: $-class;
$property: $-property;
}
}
@if type-of($attribute-variant) == map {
@each $attribute, $variant in $attribute-variant {
@if type-of($attribute) == map {
@each $key, $value in $attribute { $attribute: nest($key, $value); }
@each $key, $value in $attribute {
$attribute: nest($key, $value);
}
} @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,)) {
@if type-of($variant) == map {
@each $attribute in if(list.separator($attribute) == comma, $attribute, ($attribute,)) {
@each $value-class, $value in $variant {
@include class.content(values.combine((method: join), if(&, '&', ()), $class, $attribute, if(list.separator($value-class) == comma, ($value-class,), $value-class)), $pseudo-class, $dictionary, $function) {
$values: ($class, if($property, $property, $class), $attribute, $value-class, $value, ($value-class: $value));
@include class.content(
values.join(
if(&, '&', ()),
$class,
$attribute,
if(list.separator($value-class) == comma, ($value-class,), $value-class)
),
$pseudo-class,
$dictionary,
$function,
) {
$values: ($class, $property or $class, $attribute, $value-class, $value, ($value-class: $value));
$content: if(
$content-type == map,
to-map($values, $content-keys...),
values.combine((separator: comma), $values...)
);
@if type-of($content) == list { @content($content...); } @else { @content($content); }
@if type-of($content) == list {
@content($content...);
} @else {
@content($content);
}
}
}
}
Expand All @@ -67,14 +89,23 @@
$value: $variant;
@each $attribute in if(list.separator($attribute) == comma, $attribute, ($attribute,)) {
$value-class: $attribute;
@include class.content(values.combine((method: join), if(&, '&', ()), $class, $value-class), $pseudo-class, $dictionary, $function) {
$values: ($class, if($property, $property, $class), null, $value-class, $value, ($value-class: $value));
$content: if(
@include class.content(
values.join(if(&, '&', ()), $class, $value-class),
$pseudo-class,
$dictionary,
$function,
) {
$values: ($class, $property or $class, null, $value-class, $value, ($value-class: $value));
$arguments: if(
$content-type == map,
to-map($values, $content-keys...),
values.combine((separator: comma), $values...)
);
@if type-of($content) == list { @content($content...); } @else { @content($content); }
@if type-of($arguments) == list {
@content($arguments...);
} @else {
@content($arguments);
}
}
}
}
Expand All @@ -85,14 +116,21 @@
// FEATURE: Works fine.
@each $value in if(list.separator($attribute-variant) == comma, $attribute-variant, ($attribute-variant,)) {
@each $class in if(list.separator($class) == comma, $class, ($class,)) {
@each $value in if(list.separator($value) == comma, $value, ($value,)) {
@include class.content(values.combine((method: join), if(&, '&', ()), $class), $pseudo-class, $dictionary, $function) {
$content: if(
$content-type == map,
to-map(($class, $property or $class, $value), $content-keys...),
values.combine((separator: comma), $class, $property or $class, $value)
);
@if type-of($content) == list { @content($content...); } @else { @content($content); }
@include class.content(
values.join(if(&, '&', ()), $class),
$pseudo-class,
$dictionary,
$function
) {
$arguments: if(
$content-type == map,
to-map(($class, $property or $class, $value), $content-keys...),
values.combine((separator: comma), $class, $property or $class, $value)
);
@if type-of($arguments) == list {
@content($arguments...);
} @else {
@content($arguments);
}
}
}
Expand Down
23 changes: 21 additions & 2 deletions class/variant/_variant.mixin.spec.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,12 +6,29 @@
// Mixins.
@use 'variant.mixin' as *;

// @include variant(((color: (background, color)): primary dark)) using($resolved...) {

// @include variant((padding: unit 1), $content-type: map) using($resolved...) {
// @debug $resolved;

// width: auto;
// }


// @include variant((padding: unit 1, margin: unit 2), $content-type: map) using($resolved) {
// @debug $resolved;

// width: map.get($resolved, value);
// }


// @include variant(((padding, margin): (1: unit 1, 2: unit 2)), $content-type: map) using($resolved) {
// @debug $resolved;

// #{map.get($resolved, property)}: map.get($resolved, value);
// }



// @include variant((color: primary dark)) using($resolved...) {
// @debug $resolved;

Expand Down Expand Up @@ -53,7 +70,9 @@
// }

// Examples.
// @include variant((padding: unit 1)) using($property, $value) {
// @include variant((padding: unit 1)) using($class, $property, $value) {
// @debug $property, $value;

// #{$property}: #{$value};
// }
// .padding {
Expand Down

0 comments on commit 7d0c18e

Please sign in to comment.