Fix CSSLint errors on generated Vartheme BS4 Sub-theme

Thank you Yasmeen for reporting!

The right parameter set for CSSLint are in the following Drupal core Style lint file
https://git.drupalcode.org/project/drupal/-/blob/8.8.x/core/.stylelintrc...

We could manage ignoreFiles or unit-whitelist by adding the file .stylelintrc.json in our themes or modules

.eslintignore
https://git.drupalcode.org/project/drupal/-/blob/8.8.x/core/.eslintignore
.eslintrc.json
https://git.drupalcode.org/project/drupal/-/blob/8.8.x/core/.eslintrc.json

Having the fixes, and we may add the list of .stylelintrc.json, .eslintignore, .eslintrc.json to run the small command only by passing the list of files into the csslint command

#3143759: Add Default CSSLint, ESLint, Stylelint , and Yarn files in Vartheme BS4 and Vartheme Sub-theme

.title is too generic class it will affect the website

-  h2.title {
+  .title {
     margin: 0;
     padding: 0 0 15px;
     font-size: 2em;
@@ -28,7 +26,7 @@
     background: $body-bg;
     padding: 15px;
     overflow: hidden;
-    box-shadow: 0 0 3px 1px $box-shadow;
+    box-shadow: $box-shadow;
   }

Please make sure that you are using the latest Bootstrap 4.5.0 when you try to compile SASS.

As we had #3137834: Update [Bootstrap 4] library from 4.4.1 to 4.5.0

rm node_modules
npm install
gulp

More info in the issue

After
#3143759: Add Default CSSLint, ESLint, Stylelint , and Yarn files in Vartheme BS4 and Vartheme Sub-theme

We could run the csslint, stylelint, eslint as in
https://git.drupalcode.org/project/vartheme_bs4/-/blob/8.x-6.x/package.j...

rajab@vardot-dev:/var/www/html/products/vartheme_bs4$ csslint /var/www/html/products/vartheme_bs4

We may use the following too

rajab@vardot-dev:/var/www/html/products/vartheme_bs4$ yarn run lint:css

rajab@vardot-dev:/var/www/html/products/vartheme_bs4$ yarn run lint:core-js

or our development for the VARTHEME_BS4_SUBTHEME

rajab@vardot-dev:/var/www/html/products/vartheme_bs4/VARTHEME_BS4_SUBTHEME$ yarn run lint:css

rajab@vardot-dev:/var/www/html/products/vartheme_bs4/VARTHEME_BS4_SUBTHEME$ yarn run lint:core-js

In custom projects with custom themes

rajab@vardot-dev:/var/www/html/projects/themes/custom/MY_CUSTOM_THEME$ yarn run lint:css

rajab@vardot-dev:/var/www/html/projects/themes/custom/MY_CUSTOM_THEME$ yarn run lint:core-js

We could make use of yarn run lint:css --fix

The out come CSS for the title class is valid

 #auth-box .title {
  margin: 0;
  padding: 0 0 15px;
  font-size: 2em;
}

It is right on SACSS

#auth-box {
  padding: $navbar-brand-height 0 0;

  #the-logo {
    text-align: center;
    margin: 0;
    padding: 0 0 25px;
  }

  .title {
    margin: 0;
    padding: 0 0 15px;
    font-size: 2em;
  }

  #middle-part {
    border-radius: 3px;
    background: $body-bg;
    padding: 15px;
    overflow: hidden;
    box-shadow: $box-shadow;
  }

Committed Yasneen's patch as is
The logic is right in SASS and the CSS will work well
Thank you

For sure we will have one more optimization round with yarn lint:css and yarn lint:core-js
as we did #3143759: Add Default CSSLint, ESLint, Stylelint , and Yarn files in Vartheme BS4 and Vartheme Sub-theme
and Change records stylelint replacing csslint in core
#2866840: Use stylelint as opposed to csslint in DrupalCI