diff --git a/packages/styles/src/functions/_string.scss b/packages/styles/src/functions/_string.scss index 1c79f06f99..9ecc0b1665 100644 --- a/packages/styles/src/functions/_string.scss +++ b/packages/styles/src/functions/_string.scss @@ -1,12 +1,17 @@ @use 'sass:string'; -@function replace($string, $term, $replacement: '') { +@function contains($string, $term) { + $index: string.index($string, $term); + @return if($index == null, false, true); +} + +@function replace($string, $term, $replacement) { $index: string.index($string, $term); @if $index { $before: string.slice($string, 1, $index - 1); $after: string.slice($string, $index + string.length($term)); - @return $before + $replacement + replace($after, $term, $replacement); + @return $before + $replacement + $after; } @return $string; diff --git a/packages/styles/src/utilities/index.scss b/packages/styles/src/utilities/index.scss index 4faeb72b77..0f3278d183 100644 --- a/packages/styles/src/utilities/index.scss +++ b/packages/styles/src/utilities/index.scss @@ -16,13 +16,15 @@ $prefixes: map.get($classesConfig, prefixes); @each $key, $value in $tokens { - $suffix: string.replace($key, 'post-utility-#{$group}'); + @if (string.contains($key, 'post-utility-#{$group}')) { + $suffix: string.replace($key, 'post-utility-#{$group}', ''); - @each $prefix, $properties in $prefixes { - @if $responsive { - @include generate-responsive-utilities($properties, $value, $prefix, $suffix); - } @else { - @include generate-utilities($properties, $value, $prefix, $suffix); + @each $prefix, $properties in $prefixes { + @if $responsive { + @include generate-responsive-utilities($properties, $value, $prefix, $suffix); + } @else { + @include generate-utilities($properties, $value, $prefix, $suffix); + } } } } diff --git a/packages/styles/tests/functions/string.test.scss b/packages/styles/tests/functions/string.test.scss index 2247cf29a6..2eee309474 100644 --- a/packages/styles/tests/functions/string.test.scss +++ b/packages/styles/tests/functions/string.test.scss @@ -3,6 +3,18 @@ $paragraph: "I think Ruth's dog is cuter than your dog!"; +// it should return true if the term is found +@include jest.equal( + true, + string.contains($paragraph, 'dog') +); + +// it should return false if the term is not found +@include jest.equal( + false, + string.contains($paragraph, 'cat') +); + // it should replace a term by another @include jest.equal( 'I think my dog is cuter than your dog!',