fix(@clayui/css): Cadmin only generate Sass placeholders for specific…

… key names fix(@clayui/css): Cadmin variant generating loop shouldn't output anything when the value is c-unset/clay-unset
liferay · May 11, 2023 · f8f5fff · f8f5fff
1 parent dc601b0
commit f8f5fff
Show file tree

Hide file tree

Showing 15 changed files with 559 additions and 455 deletions.
diff --git a/packages/clay-css/src/scss/cadmin/components/_alerts.scss b/packages/clay-css/src/scss/cadmin/components/_alerts.scss
@@ -434,31 +434,33 @@
 // Alert Variants
 
 @each $color, $value in $cadmin-alert-palette {
-	$selector: if(
-		starts-with($color, '.') or
-			starts-with($color, '#') or
-			starts-with($color, '%'),
-		$color,
-		str-insert($color, '.alert-', 1)
-	);
-
-	@if (starts-with($color, '%') or map-get($value, extend)) {
-		#{$selector} {
-			@include clay-alert-variant($value);
-		}
-	} @else {
-		$placeholder: if(
-			starts-with($color, '.') or starts-with($color, '#'),
-			'%#{str-slice($color, 2)}',
-			'%alert-#{$color}'
+	@if not clay-is-map-unset($value) {
+		$selector: if(
+			starts-with($color, '.') or
+				starts-with($color, '#') or
+				starts-with($color, '%'),
+			$color,
+			str-insert($color, '.alert-', 1)
 		);
 
-		#{$placeholder} {
-			@include clay-alert-variant($value);
-		}
+		@if (starts-with($color, '%') or map-get($value, extend)) {
+			#{$selector} {
+				@include clay-alert-variant($value);
+			}
+		} @else if (starts-with($color, 'alert-')) {
+			$placeholder: '%alert-#{$color}';
 
-		#{$selector} {
-			@extend %alert-#{$color} !optional;
+			#{$placeholder} {
+				@include clay-alert-variant($value);
+			}
+
+			#{$selector} {
+				@extend %alert-#{$color} !optional;
+			}
+		} @else {
+			#{$selector} {
+				@include clay-alert-variant($value);
+			}
 		}
 	}
 }
diff --git a/packages/clay-css/src/scss/cadmin/components/_aspect-ratio.scss b/packages/clay-css/src/scss/cadmin/components/_aspect-ratio.scss
@@ -160,42 +160,47 @@
 
 // aspect-ratio-#-to-#
 
-@each $selector, $value in $cadmin-aspect-ratio-sizes {
-	$selector: if(
-		starts-with($selector, '.') or
-			starts-with($selector, '#') or
-			starts-with($selector, '%'),
-		$selector,
-		str-insert($selector, '.', 1)
-	);
-
-	@if (starts-with($selector, '%')) {
-		#{$selector} {
-			@include clay-aspect-ratio(
-				map-get($value, width),
-				map-get($value, height)
-			);
-		}
-	} @else if (map-get($value, extend)) {
-		#{$selector} {
-			@include clay-css($value);
-		}
-	} @else {
-		$placeholder: str-insert(
-			str-slice($selector, 2, str-length($selector)),
-			'%',
-			1
+@each $size, $value in $cadmin-aspect-ratio-sizes {
+	@if not clay-is-map-unset($value) {
+		$selector: if(
+			starts-with($size, '.') or
+				starts-with($size, '#') or
+				starts-with($size, '%'),
+			$size,
+			str-insert($size, '.', 1)
 		);
 
-		#{$placeholder} {
-			@include clay-aspect-ratio(
-				map-get($value, width),
-				map-get($value, height)
-			);
-		}
-
-		#{$selector} {
-			@extend #{$placeholder} !optional;
+		@if (starts-with($selector, '%')) {
+			#{$selector} {
+				@include clay-aspect-ratio(
+					map-get($value, width),
+					map-get($value, height)
+				);
+			}
+		} @else if (map-get($value, extend)) {
+			#{$selector} {
+				@include clay-css($value);
+			}
+		} @else if (starts-with($size, 'aspect-ratio-')) {
+			$placeholder: '%#{$size}';
+
+			#{$placeholder} {
+				@include clay-aspect-ratio(
+					map-get($value, width),
+					map-get($value, height)
+				);
+			}
+
+			#{$selector} {
+				@extend #{$placeholder} !optional;
+			}
+		} @else {
+			#{$selector} {
+				@include clay-aspect-ratio(
+					map-get($value, width),
+					map-get($value, height)
+				);
+			}
 		}
 	}
 }

diff --git a/packages/clay-css/src/scss/cadmin/components/_badges.scss b/packages/clay-css/src/scss/cadmin/components/_badges.scss
@@ -61,35 +61,49 @@
 // Badge Variants
 
 @each $color, $value in $cadmin-badge-palette {
-	$selector: if(
-		starts-with($color, '.') or
-			starts-with($color, '#') or
-			starts-with($color, '%'),
-		$color,
-		if(
-			starts-with($color, 'badge'),
-			str-insert($color, '.', 1),
-			str-insert($color, '.badge-', 1)
-		)
-	);
-
-	@if (starts-with($color, '%') or map-get($value, extend)) {
-		#{$selector} {
-			@include clay-badge-variant($value);
-		}
-	} @else {
-		$placeholder: if(
-			starts-with($color, '.') or starts-with($color, '#'),
-			'%#{str-slice($color, 2)}',
-			'%badge-#{$color}'
+	@if not clay-is-map-unset($value) {
+		$deprecated-keys: 'primary', 'secondary', 'success', 'info', 'warning',
+			'danger', 'dark', 'light';
+
+		$selector: if(
+			index($deprecated-keys, '#{$color}') != null,
+			str-insert($color, '.badge-', 1),
+			if
+				(
+					starts-with($color, 'badge'),
+					str-insert($color, '.', 1),
+					$color
+				)
 		);
 
-		#{$placeholder} {
-			@include clay-badge-variant($value);
-		}
-
-		#{$selector} {
-			@extend #{$placeholder} !optional;
+		@if (starts-with($color, '%') or map-get($value, extend)) {
+			#{$selector} {
+				@include clay-badge-variant($value);
+			}
+		} @else if
+			(
+				starts-with($color, 'badge') or
+					index($deprecated-keys, '#{$color}') !=
+					null
+			)
+		{
+			$placeholder: if(
+				starts-with($color, '.') or starts-with($color, '#'),
+				'%#{str-slice($color, 2)}',
+				'%badge-#{$color}'
+			);
+
+			#{$placeholder} {
+				@include clay-badge-variant($value);
+			}
+
+			#{$selector} {
+				@extend #{$placeholder} !optional;
+			}
+		} @else {
+			#{$selector} {
+				@include clay-badge-variant($value);
+			}
 		}
 	}
 }