From 5afd3c210a880284091709ee7136d38e15ef571d Mon Sep 17 00:00:00 2001 From: angularpackage Date: Sun, 24 Sep 2023 22:31:42 +0000 Subject: [PATCH] refactor(variant.combine()): use `values.join()`, use and update spec. --- class/variant/_variant.combine.mixin.scss | 51 ++++++++++++++++--- .../variant/_variant.combine.mixin.spec.scss | 34 ++++++------- 2 files changed, 61 insertions(+), 24 deletions(-) diff --git a/class/variant/_variant.combine.mixin.scss b/class/variant/_variant.combine.mixin.scss index d544b18..0cc2eb6 100644 --- a/class/variant/_variant.combine.mixin.scss +++ b/class/variant/_variant.combine.mixin.scss @@ -4,7 +4,9 @@ // Functions. @use '../../selector/selector.class.function' as *; -@use '../../values/values.combine.function' as *; + +// Modules. +@use '../../values'; // Status: REVIEW: // The `variant.combine()` mixin. @@ -30,11 +32,24 @@ @each $attribute in if(list.separator($attribute) == comma, $attribute, ($attribute,)) { $-value-class: $value-class; @each $value-class in if(list.separator($value-class) == comma, $value-class, ($value-class,)) { - $-class: list.append($-class, meta.call($function, combine((method: join), if(&, '&', ()), $class, $attribute, $value-class), $pseudo-class, $dictionary), $separator: comma); + $-class: list.append( + $-class, + meta.call( + $function, + values.join( + if(&, '&', ()), + $class, + $attribute, + $value-class + ), + $pseudo-class, + $dictionary + ), + $separator: comma + ); } } } - #{$-class} { @content($class, $attribute, $-value-class, $value); } @@ -44,11 +59,22 @@ $-class: (); @each $class in if(list.separator($class) == comma, $class, ($class,)) { @each $attribute in if(list.separator($attribute) == comma, $attribute, ($attribute,)) { - $-class: list.append($-class, meta.call($function, combine((method: join), if(&, '&', ()), $class, $attribute), $pseudo-class, $dictionary), $separator: comma); + $-class: list.append( + $-class, meta.call( + $function, + values.join( + if(&, '&', ()), + $class, + $attribute + ), + $pseudo-class, + $dictionary + ), + $separator: comma + ); } } } - #{$-class} { @content($class, $attribute, $value); } @@ -58,10 +84,21 @@ @each $value in $attribute-value { $-class: (); @each $class in if(list.separator($class) == comma, $class, ($class,)) { - $-class: list.append($-class, meta.call($function, combine((method: join), if(&, '&', ()), $class), $pseudo-class, $dictionary), $separator: comma); + $-class: list.append( + $-class, + meta.call( + $function, + values.join( + if(&, '&', ()), + $class + ), + $pseudo-class, + $dictionary + ), + $separator: comma + ); } } - #{$-class} { @content($class, $attribute-value); } diff --git a/class/variant/_variant.combine.mixin.spec.scss b/class/variant/_variant.combine.mixin.spec.scss index 61a46ca..1cd2c92 100644 --- a/class/variant/_variant.combine.mixin.spec.scss +++ b/class/variant/_variant.combine.mixin.spec.scss @@ -1,8 +1,8 @@ // Mixins. -@use 'class.variant-combine.mixin' as *; +@use 'variant.combine.mixin' as *; // Examples. -// @include variant-combine((padding: unit 1)) using($property, $value) { +// @include combine((padding: unit 1)) using($property, $value) { // @debug $property; // padding // @debug $value; // unit 1 @@ -12,7 +12,7 @@ // padding: unit 1; // } -// @include variant-combine((padding: (unit 1 unit 2))) using($property, $value) { +// @include combine((padding: (unit 1 unit 2))) using($property, $value) { // @debug $property; // padding // @debug $value; // unit 1 unit 2 @@ -22,7 +22,7 @@ // padding: unit 1 unit 2; // } -// @include variant-combine((padding: (unit 1, unit 2))) using($property, $value) { +// @include combine((padding: (unit 1, unit 2))) using($property, $value) { // @debug $property; // padding // @debug $value; // unit 1, unit 2 @@ -32,7 +32,7 @@ // padding: unit 1, unit 2; // } -// @include variant-combine((padding large: unit 1)) using($property, $value) { +// @include combine((padding large: unit 1)) using($property, $value) { // @debug $property; // padding large // @debug $value; // unit 1 @@ -42,7 +42,7 @@ // padding: unit 1; // } -// @include variant-combine((padding (small, large): unit 1)) using($property, $value) { +// @include combine((padding (small, large): unit 1)) using($property, $value) { // @debug $property; // padding (small, large) // @debug $value; // unit 1 @@ -52,7 +52,7 @@ // padding: unit 1; // } -// @include variant-combine(((outline, inline) padding: unit 1)) using($property, $value) { +// @include combine(((outline, inline) padding: unit 1)) using($property, $value) { // @debug $property; // (outline, inline) padding // @debug $value; // unit 1 @@ -62,14 +62,14 @@ // padding: unit 1; // } -// @include variant-combine((padding: (size one: unit 1))) using($property, $value-class, $value) { +// @include combine((padding: (size one: unit 1))) using($property, $value-class, $value) { // #{$property}: #{$value}; // } // .padding-size-one { // padding: unit 1; // } -// @include variant-combine((border: ((top left, top right): unit 1))) using($property, $side, $value) { +// @include combine((border: ((top left, top right): unit 1))) using($property, $side, $value) { // @debug $property; // padding // @debug $side; // top left, top right // @debug $value; // unit 1 @@ -80,14 +80,14 @@ // border: unit 1; // } -// @include variant-combine((padding: ((top, bottom): unit 1))) using($property, $value-class, $value) { +// @include combine((padding: ((top, bottom): unit 1))) using($property, $value-class, $value) { // #{$property}: #{$value}; // } // .padding-top, .padding-bottom { // padding: unit 1; // } -// @include variant-combine(((margin, padding): ((left, right): 0))) using($property, $side, $value) { +// @include combine(((margin, padding): ((left, right): 0))) using($property, $side, $value) { // @each $property in $property { // #{$property}: #{$value}; // } @@ -97,7 +97,7 @@ // padding: 0; // } -// @include variant-combine(((margin, padding): ((left): 0))) using($property, $side, $value) { +// @include combine(((margin, padding): ((left): 0))) using($property, $side, $value) { // @each $property in $property { // #{$property}: #{$value}; // } @@ -107,7 +107,7 @@ // padding: 0; // } -// @include variant-combine((margin: ((left, right): (0: 0)))) using($property, $side, $value-class, $value) { +// @include combine((margin: ((left, right): (0: 0)))) using($property, $side, $value-class, $value) { // @debug $property; // margin // @debug $side; // left, right // @debug $value-class; // 0 @@ -119,7 +119,7 @@ // cursor: grab; // } -// @include variant-combine(((margin, padding): ((left, right): ((xs, xl): 0)))) using($property, $side, $value-class, $value) { +// @include combine(((margin, padding): ((left, right): ((xs, xl): 0)))) using($property, $side, $value-class, $value) { // @debug $property; // margin, padding // @debug $side; // left, right // @debug $value-class; // xs, xl @@ -131,15 +131,15 @@ // margin: 0; // } -// @include variant-combine((padding: ((top, bottom): ((size one, size two): unit 1, size two: unit 2)))) using($property, $side, $value-class, $value) { +// @include combine((padding: ((top, bottom): ((size one, size two): unit 1, size two: unit 2)))) using($property, $side, $value-class, $value) { // font: 100; // } -// @include variant-combine(((padding, margin): ((top, right, bottom, left): (size one: unit 1)))) using($property, $side, $value-class, $value) { +// @include combine(((padding, margin): ((top, right, bottom, left): (size one: unit 1)))) using($property, $side, $value-class, $value) { // padding: #{$value}; // } -// @include variant-combine(((padding, border): ((right bottom, left top, ): (2: unit 2, 3: unit 3)))) using($resolved...) { +// @include combine(((padding, border): ((right bottom, left top, ): (2: unit 2, 3: unit 3)))) using($resolved...) { // @debug $resolved; // font-size: 1; // }