Blacklist border-radius property (use mixin instead) (#27900)

Author: MartijnCuppens

.stylelintrc

@@ -261,7 +261,14 @@
       "fill",
       "stroke"
     ],
-    "property-blacklist": ["transition"],
+    "property-blacklist": [
+      "border-radius",
+      "border-top-left-radius",
+      "border-top-right-radius",
+      "border-bottom-right-radius",
+      "border-bottom-left-radius",
+      "transition"
+    ],
     "property-no-vendor-prefix": true,
     "rule-empty-line-before": null,
     "scss/at-function-named-arguments": "never",

scss/_card.scss

@@ -200,10 +200,12 @@
 
           .card-img-top,
           .card-header {
+            // stylelint-disable-next-line property-blacklist
             border-top-right-radius: 0;
           }
           .card-img-bottom,
           .card-footer {
+            // stylelint-disable-next-line property-blacklist
             border-bottom-right-radius: 0;
           }
         }
@@ -213,10 +215,12 @@
 
           .card-img-top,
           .card-header {
+            // stylelint-disable-next-line property-blacklist
             border-top-left-radius: 0;
           }
           .card-img-bottom,
           .card-footer {
+            // stylelint-disable-next-line property-blacklist
             border-bottom-left-radius: 0;
           }
         }
@@ -283,24 +287,22 @@
 
     &:not(:first-of-type) {
       .card-header:first-child {
-        border-radius: 0;
+        @include border-radius(0);
       }
 
       &:not(:last-of-type) {
         border-bottom: 0;
-        border-radius: 0;
+        @include border-radius(0);
       }
     }
 
     &:first-of-type {
       border-bottom: 0;
-      border-bottom-right-radius: 0;
-      border-bottom-left-radius: 0;
+      @include border-bottom-radius(0);
     }
 
     &:last-of-type {
-      border-top-left-radius: 0;
-      border-top-right-radius: 0;
+      @include border-top-radius(0);
     }
 
     .card-header {

scss/_custom-forms.scss

@@ -144,6 +144,7 @@
 
 .custom-radio {
   .custom-control-label::before {
+    // stylelint-disable-next-line property-blacklist
     border-radius: $custom-radio-indicator-border-radius;
   }
 
@@ -173,6 +174,7 @@
       left: -($custom-switch-width + $custom-control-gutter);
       width: $custom-switch-width;
       pointer-events: all;
+      // stylelint-disable-next-line property-blacklist
       border-radius: $custom-switch-indicator-border-radius;
     }
 
@@ -182,6 +184,7 @@
       width: $custom-switch-indicator-size;
       height: $custom-switch-indicator-size;
       background-color: $custom-control-indicator-border-color;
+      // stylelint-disable-next-line property-blacklist
       border-radius: $custom-switch-indicator-border-radius;
       @include transition(transform .15s ease-in-out, $custom-forms-transition);
     }
@@ -220,11 +223,7 @@
   background: $custom-select-background;
   background-color: $custom-select-bg;
   border: $custom-select-border-width solid $custom-select-border-color;
-  @if $enable-rounded {
-    border-radius: $custom-select-border-radius;
-  } @else {
-    border-radius: 0;
-  }
+  @include border-radius($custom-select-border-radius, 0);
   @include box-shadow($custom-select-box-shadow);
   appearance: none;
 

scss/_forms.scss

@@ -18,13 +18,7 @@
   border: $input-border-width solid $input-border-color;
 
   // Note: This has no effect on <select>s in some browsers, due to the limited stylability of `<select>`s in CSS.
-  @if $enable-rounded {
-    // Manually use the if/else instead of the mixin to account for iOS override
-    border-radius: $input-border-radius;
-  } @else {
-    // Otherwise undo the iOS default
-    border-radius: 0;
-  }
+  @include border-radius($input-border-radius, 0);
 
   @include box-shadow($input-box-shadow);
   @include transition($input-transition);

scss/_reboot.scss

@@ -297,6 +297,7 @@ label {
 //
 // Details at https://github.com/twbs/bootstrap/issues/24093
 button {
+  // stylelint-disable-next-line property-blacklist
   border-radius: 0;
 }
 

scss/_spinners.scss

@@ -13,6 +13,7 @@
   vertical-align: text-bottom;
   border: $spinner-border-width solid currentColor;
   border-right-color: transparent;
+  // stylelint-disable-next-line property-blacklist
   border-radius: 50%;
   animation: spinner-border .75s linear infinite;
 }
@@ -42,6 +43,7 @@
   height: $spinner-height;
   vertical-align: text-bottom;
   background-color: currentColor;
+  // stylelint-disable-next-line property-blacklist
   border-radius: 50%;
   opacity: 0;
   animation: spinner-grow .75s linear infinite;

scss/mixins/_border-radius.scss

@@ -1,9 +1,13 @@
+// stylelint-disable property-blacklist
 // Single side border-radius
 
-@mixin border-radius($radius: $border-radius) {
+@mixin border-radius($radius: $border-radius, $fallback-border-radius: false) {
   @if $enable-rounded {
     border-radius: $radius;
   }
+  @else if $fallback-border-radius != false {
+    border-radius: $fallback-border-radius;
+  }
 }
 
 @mixin border-top-radius($radius) {

scss/mixins/_buttons.scss

@@ -103,9 +103,5 @@
   font-size: $font-size;
   line-height: $line-height;
   // Manually declare to provide an override to the browser default
-  @if $enable-rounded {
-    border-radius: $border-radius;
-  } @else {
-    border-radius: 0;
-  }
+  @include border-radius($border-radius, 0);
 }

scss/utilities/_borders.scss

@@ -1,4 +1,4 @@
-// stylelint-disable declaration-no-important
+// stylelint-disable property-blacklist, declaration-no-important
 
 //
 // Border

site/docs/4.2/assets/scss/_ads.scss

@@ -23,7 +23,7 @@
 
   @include media-breakpoint-up(sm) {
     max-width: 330px;
-    border-radius: 4px;
+    @include border-radius(4px);
   }
 }
 

site/docs/4.2/assets/scss/_brand.scss

@@ -10,7 +10,7 @@
   overflow: hidden;
   color: $bd-purple;
   background-color: #f9f9f9;
-  border-radius: .25rem;
+  @include border-radius;
 
   .inverse {
     color: $white;
@@ -79,7 +79,7 @@
   height: 4rem;
   margin-right: .25rem;
   margin-left: .25rem;
-  border-radius: .25rem;
+  @include border-radius;
 
   @include media-breakpoint-up(md) {
     width: 6rem;

site/docs/4.2/assets/scss/_callouts.scss

@@ -8,7 +8,7 @@
   margin-bottom: 1.25rem;
   border: 1px solid #eee;
   border-left-width: .25rem;
-  border-radius: .25rem;
+  @include border-radius;
 
   h4 {
     margin-top: 0;
@@ -20,7 +20,7 @@
   }
 
   code {
-    border-radius: .25rem;
+    @include border-radius;
   }
 
   + .bd-callout {

site/docs/4.2/assets/scss/_clipboard-js.scss

@@ -28,7 +28,7 @@
   cursor: pointer;
   background-color: transparent;
   border: 0;
-  border-radius: .25rem;
+  @include border-radius;
 
   &:hover {
     color: $white;

site/docs/4.2/assets/scss/_component-examples.scss

@@ -87,22 +87,22 @@
   height: 3rem;
   margin-bottom: .5rem;
   background-color: lighten($blue, 50%);
-  border-radius: .25rem;
+  @include border-radius;
 }
 
 .bd-example-container-sidebar {
   float: right;
   width: 4rem;
   height: 8rem;
   background-color: lighten($blue, 25%);
-  border-radius: .25rem;
+  @include border-radius;
 }
 
 .bd-example-container-body {
   height: 8rem;
   margin-right: 4.5rem;
   background-color: lighten($bd-purple, 25%);
-  border-radius: .25rem;
+  @include border-radius;
 }
 
 .bd-example-container-fluid {