Replace stylelint-config-airbnb with stylelint-config-twbs-bootstrap

Author: tkrotoff

.stylelintrc.js

@@ -3,24 +3,15 @@
 /** @type {Partial<import('stylelint').Configuration>} */
 const config = {
   extends: [
-    // As of 2020/03/18, stylelint-config-airbnb is still at v0.0.0
-    // Is this future proof?
-    // https://github.com/airbnb/css/pull/56
-    'stylelint-config-airbnb',
+    // /!\ Order matters: the next one overrides rules from the previous one
 
-    'stylelint-config-recommended-scss'
-  ],
+    // Includes stylelint-config-recommended-scss and stylelint-config-standard
+    'stylelint-config-twbs-bootstrap/scss',
 
-  rules: {
-    // Conflicts with Prettier
-    'string-quotes': null,
-    'number-leading-zero': null,
+    'stylelint-prettier/recommended'
+  ],
 
-    'rule-empty-line-before': null,
-    'at-rule-empty-line-before': null,
-    'scss/at-extend-no-missing-placeholder': null,
-    'order/order': null
-  }
+  rules: {}
 };
 
 module.exports = config;

examples/Bootstrap4/bootstrap-spinner.scss

@@ -5,22 +5,24 @@
   display: none;
 }
 
-@function calcInputRightPadding($rightElementWidth) {
+@function calc-input-right-padding($right-element-width) {
   @return calc(
-    #{$rightElementWidth} - #{$input-border-width} * 2 + #{$input-height-inner-quarter} * 2
+    #{$right-element-width} - #{$input-border-width} * 2 + #{$input-height-inner-quarter} * 2
   );
 }
 
-@function calcInputTopMargin($rightElementHeight) {
+@function calc-input-top-margin($right-element-width) {
   // Fix for IE, https://github.com/postcss/autoprefixer/issues/1153
   $input-height-without-calc-for-ie: str-replace($input-height, 'calc');
 
-  @return calc((#{$input-height-without-calc-for-ie} + #{$rightElementHeight}) / -2);
+  @return calc((#{$input-height-without-calc-for-ie} + #{$right-element-width}) / -2);
 }
 
+// stylelint-disable selector-no-qualifying-type
+
 input.is-pending {
   // Cannot use the same as the validation icons because .spinner-border is too big
-  padding-right: calcInputRightPadding($spinner-width);
+  padding-right: calc-input-right-padding($spinner-width);
 
   &.is-pending-sm {
     // Same as the validation icons, this is possible because .spinner-border-sm is small enough
@@ -39,11 +41,12 @@ input.is-pending {
     // https://github.com/twbs/bootstrap/blob/v4.3.1/scss/mixins/_forms.scss#L62
     margin-right: $input-height-inner-quarter;
 
-    margin-top: calcInputTopMargin($spinner-height);
+    // stylelint-disable-next-line order/properties-order
+    margin-top: calc-input-top-margin($spinner-height);
 
     &.spinner-border-sm,
     &.spinner-grow-sm {
-      margin-top: calcInputTopMargin($spinner-height-sm);
+      margin-top: calc-input-top-margin($spinner-height-sm);
     }
   }
 }

package.json

@@ -53,10 +53,9 @@
     "npm-run-all": "^4.1.5",
     "prettier": "^2.1.2",
     "stylelint": "^13.7.2",
-    "stylelint-config-airbnb": "^0.0.0",
-    "stylelint-config-recommended-scss": "^4.2.0",
-    "stylelint-order": "^4.1.0",
-    "stylelint-scss": "^3.18.0",
+    "stylelint-config-prettier": "^8.0.2",
+    "stylelint-config-twbs-bootstrap": "^2.1.0",
+    "stylelint-prettier": "^1.1.2",
     "typescript": "^4.0.3"
   }
 }

packages/react-form-with-constraints-bootstrap4/scss/bootstrap.scss

@@ -2,6 +2,7 @@
 // [.invalid-feedback doesn't show for .input-group with an invalid control](https://github.com/twbs/bootstrap/issues/23454)
 .valid-feedback,
 .invalid-feedback {
+  // stylelint-disable-next-line declaration-no-important
   display: block !important; // [Is there an opposite to display:none?](https://stackoverflow.com/a/37289654/990356)
 }