Skip to content

Commit

Permalink
✨ feat(_generator.scss): Add common class name field to utility api, …
Browse files Browse the repository at this point in the history 
…add new function to convert old class map to new class mapping for utility mixin
  • Loading branch information
@Spiderpig86
Spiderpig86 committed Jul 3, 2023
1 parent 4907381 commit 3b6d753
Show file tree
Hide file tree
Showing 2 changed files with 53 additions and 26 deletions.
38 changes: 32 additions & 6 deletions src/internal/_generator.scss
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
@use 'sass:list';
@use 'sass:map';
@use 'config';
@use 'size';
@use 'mixins';
Expand All @@ -12,6 +13,7 @@ $default-variant-delimiter: '\\:';
@mixin utility(
$prefix: $default-prefix,
$delimiter: $default-delimiter,
$common-class-name,
$class-value-pairs,
$variants: (),
$variant-delimiter: $default-variant-delimiter,
Expand All @@ -20,14 +22,21 @@ $default-variant-delimiter: '\\:';
) {
@include utility-with-body(
$prefix,
$common-class-name,
$class-value-pairs,
$variants,
$variant-delimiter,
$generate-viewports,
$override
)
using ($variant, $variant-delimiter, $prefix, $suffix, $key, $value, $override) {
using ($variant, $variant-delimiter, $prefix, $suffix, $common-class-name, $key, $value, $override) {
// TODO Handle portrait and landscape

$common-class: $common-class-name + $delimiter;
@if $common-class-name == '' {
$common-class: '';
}

@if $variant == 'dark' or $variant == 'light' {
$variant-prefix: '';
$variant-suffix: '';
Expand All @@ -41,7 +50,7 @@ $default-variant-delimiter: '\\:';
}

@media (prefers-color-scheme: #{$variant}) {
.#{$variant-prefix}#{$prefix}#{$key}#{$suffix-str} {
.#{$variant-prefix}#{$prefix}#{$common-class}#{$key}#{$suffix-str} {
@include mixins.explode-properties($value, $override);
}
}
Expand All @@ -58,7 +67,7 @@ $default-variant-delimiter: '\\:';
}

@media (prefers-reduced-motion: reduce) {
.#{$variant-prefix}#{$prefix}#{$key}#{$suffix-str} {
.#{$variant-prefix}#{$prefix}#{$common-class}#{$key}#{$suffix-str} {
@include mixins.explode-properties($value, $override);
}
}
Expand All @@ -75,7 +84,7 @@ $default-variant-delimiter: '\\:';
$suffix-str: $delimiter + $suffix;
}

.#{$variant-prefix}#{$prefix}#{$key}#{$suffix-str}#{$variant-suffix} {
.#{$variant-prefix}#{$prefix}#{$common-class}#{$key}#{$suffix-str}#{$variant-suffix} {
@include mixins.explode-properties($value, $override);
}
}
Expand All @@ -84,6 +93,7 @@ $default-variant-delimiter: '\\:';

@mixin utility-with-body(
$prefix: $default-prefix,
$common-class-name,
$class-value-pairs,
$variants: (),
$variant-delimiter: $default-variant-delimiter,
Expand All @@ -95,16 +105,32 @@ $default-variant-delimiter: '\\:';
@each $key, $value in $class-value-pairs {
@each $variant in $variants {
// No viewport
@content ($variant, $variant-delimiter, $prefix, '', $key, $value, $override);
@content ($variant, $variant-delimiter, $prefix, '', $common-class-name, $key, $value, $override);

// Generate classes with viewport
@if $generate-viewports == 'true' {
@each $suffix, $limit in config.$breakpoint-pairs {
@include size.screen-above($limit) {
@content ($variant, $variant-delimiter, $prefix, $suffix, $key, $value, $override);
@content ($variant, $variant-delimiter, $prefix, $suffix, $common-class-name, $key, $value, $override);
}
}
}
}
}
}

@function class-value-map-with-single-property($property, $property-values) {
$result: ();

@each $key, $value in $property-values {
$result: map.set(
$result,
$key,
(
$property: $value,
)
);
}

@return $result;
}
41 changes: 21 additions & 20 deletions tests/internal/_generator.spec.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@
@include assert {
@include output {
@include generator.utility(
$common-class-name: 'text',
$class-value-pairs: (
'blue': (
'color': blue,
Expand All @@ -24,117 +25,117 @@
);
}
@include expect {
.u-blue {
.u-text-blue {
color: blue !important;
}

@media screen and (min-width: 640px) {
.u-blue-sm {
.u-text-blue-sm {
color: blue !important;
}
}

@media screen and (min-width: 768px) {
.u-blue-md {
.u-text-blue-md {
color: blue !important;
}
}

@media screen and (min-width: 1024px) {
.u-blue-lg {
.u-text-blue-lg {
color: blue !important;
}
}

@media screen and (min-width: 1280px) {
.u-blue-xl {
.u-text-blue-xl {
color: blue !important;
}
}

.hover\:u-blue:hover {
.hover\:u-text-blue:hover {
color: blue !important;
}

@media screen and (min-width: 640px) {
.hover\:u-blue-sm:hover {
.hover\:u-text-blue-sm:hover {
color: blue !important;
}
}

@media screen and (min-width: 768px) {
.hover\:u-blue-md:hover {
.hover\:u-text-blue-md:hover {
color: blue !important;
}
}

@media screen and (min-width: 1024px) {
.hover\:u-blue-lg:hover {
.hover\:u-text-blue-lg:hover {
color: blue !important;
}
}

@media screen and (min-width: 1280px) {
.hover\:u-blue-xl:hover {
.hover\:u-text-blue-xl:hover {
color: blue !important;
}
}
@media (prefers-color-scheme: dark) {
.dark\:u-blue {
.dark\:u-text-blue {
color: blue !important;
}
}

@media screen and (min-width: 640px) and (prefers-color-scheme: dark) {
.dark\:u-blue-sm {
.dark\:u-text-blue-sm {
color: blue !important;
}
}

@media screen and (min-width: 768px) and (prefers-color-scheme: dark) {
.dark\:u-blue-md {
.dark\:u-text-blue-md {
color: blue !important;
}
}

@media screen and (min-width: 1024px) and (prefers-color-scheme: dark) {
.dark\:u-blue-lg {
.dark\:u-text-blue-lg {
color: blue !important;
}
}

@media screen and (min-width: 1280px) and (prefers-color-scheme: dark) {
.dark\:u-blue-xl {
.dark\:u-text-blue-xl {
color: blue !important;
}
}

@media (prefers-reduced-motion: reduce) {
.reduce-motion\:u-blue {
.reduce-motion\:u-text-blue {
color: blue !important;
}
}

@media screen and (min-width: 640px) and (prefers-reduced-motion: reduce) {
.reduce-motion\:u-blue-sm {
.reduce-motion\:u-text-blue-sm {
color: blue !important;
}
}

@media screen and (min-width: 768px) and (prefers-reduced-motion: reduce) {
.reduce-motion\:u-blue-md {
.reduce-motion\:u-text-blue-md {
color: blue !important;
}
}

@media screen and (min-width: 1024px) and (prefers-reduced-motion: reduce) {
.reduce-motion\:u-blue-lg {
.reduce-motion\:u-text-blue-lg {
color: blue !important;
}
}

@media screen and (min-width: 1280px) and (prefers-reduced-motion: reduce) {
.reduce-motion\:u-blue-xl {
.reduce-motion\:u-text-blue-xl {
color: blue !important;
}
}
Expand Down

0 comments on commit 3b6d753

Please sign in to comment.