Skip to content
GitLab
Closed
Issue created by Administrator@rootContributor

[v5] Warnings and invalid CSS properties with enabled shadows but set to none

Created by: filkris

Operating System: Windows 10 Browser: Version 87.0.4280.88 (Official Build) (64-bit)

Compiling the Bootstrap v5.0.0beta1 with enabled shadows, but setting some of variables to none produces warnings followed by setting invalid CSS properties (Example: box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075), none;).

Compiler warnings:

WARNING: The keyword 'none' must be used as a single argument.
    node_modules\bootstrap\scss\mixins\_box-shadow.scss 10:9   box-shadow()
    node_modules\bootstrap\scss\forms\_form-control.scss 40:7  @import
    node_modules\bootstrap\scss\_forms.scss 3:9                @import
    resources\sass\app.scss 23:9                               root stylesheet

WARNING: The keyword 'none' must be used as a single argument.
    node_modules\bootstrap\scss\mixins\_box-shadow.scss 10:9  box-shadow()
    node_modules\bootstrap\scss\_buttons.scss 40:7            @import
    resources\sass\app.scss 24:9                              root stylesheet

WARNING: The keyword 'none' must be used as a single argument.
    node_modules\bootstrap\scss\mixins\_box-shadow.scss 10:9  box-shadow()
    node_modules\bootstrap\scss\mixins\_buttons.scss 37:7     button-variant()
    node_modules\bootstrap\scss\_buttons.scss 60:5            @import
    resources\sass\app.scss 24:9                              root stylesheet

WARNING: The keyword 'none' must be used as a single argument.
    node_modules\bootstrap\scss\mixins\_box-shadow.scss 10:9  box-shadow()
    node_modules\bootstrap\scss\mixins\_buttons.scss 57:9     button-variant()
    node_modules\bootstrap\scss\_buttons.scss 60:5            @import
    resources\sass\app.scss 24:9                              root stylesheet

WARNING: The keyword 'none' must be used as a single argument.
    node_modules\bootstrap\scss\mixins\_box-shadow.scss 10:9  box-shadow()
    node_modules\bootstrap\scss\mixins\_buttons.scss 107:9    button-outline-variant()
    node_modules\bootstrap\scss\_buttons.scss 66:5            @import
    resources\sass\app.scss 24:9                              root stylesheet

WARNING: The keyword 'none' must be used as a single argument.
    node_modules\bootstrap\scss\mixins\_box-shadow.scss 10:9   box-shadow()   
    node_modules\bootstrap\scss\forms\_form-control.scss 40:7  @import        
    node_modules\bootstrap\scss\_forms.scss 3:9                @import        
    resources\sass\app.scss 23:9                               root stylesheet

WARNING: The keyword 'none' must be used as a single argument.
    node_modules\bootstrap\scss\mixins\_box-shadow.scss 10:9  box-shadow()
    node_modules\bootstrap\scss\forms\_form-select.scss 30:7  @import     
    node_modules\bootstrap\scss\_forms.scss 4:9               @import     
    resources\sass\app.scss 23:9                              root stylesheet

Then we have tried to detect any of calls to the mixin by doing the following search:

Searching 79 files for "@include box-shadow("

bootstrapv5\node_modules\bootstrap\scss\_button-group.scss:
  101:   @include box-shadow($btn-active-box-shadow);
  105:     @include box-shadow(none);

bootstrapv5\node_modules\bootstrap\scss\_buttons.scss:
   37:     @include box-shadow($btn-active-box-shadow);
   40:       @include box-shadow($btn-focus-box-shadow, $btn-active-box-shadow);
   49:     @include box-shadow(none);

bootstrapv5\node_modules\bootstrap\scss\_dropdown.scss:
   34:   @include box-shadow($dropdown-box-shadow);
  201:   @include box-shadow($dropdown-dark-box-shadow);

bootstrapv5\node_modules\bootstrap\scss\_images.scss:
   19:   @include box-shadow($thumbnail-box-shadow);

bootstrapv5\node_modules\bootstrap\scss\_modal.scss:
   90:   @include box-shadow($modal-content-box-shadow-xs);
  188:     @include box-shadow($modal-content-box-shadow-sm-up);

bootstrapv5\node_modules\bootstrap\scss\_popover.scss:
   18:   @include box-shadow($popover-box-shadow);

bootstrapv5\node_modules\bootstrap\scss\_progress.scss:
   15:   @include box-shadow($progress-box-shadow);

bootstrapv5\node_modules\bootstrap\scss\forms\_form-control.scss:
   22:   @include box-shadow($input-box-shadow);
   40:       @include box-shadow($input-box-shadow, $input-focus-box-shadow);

bootstrapv5\node_modules\bootstrap\scss\forms\_form-range.scss:
   34:     @include box-shadow($form-range-thumb-box-shadow);
   51:     @include box-shadow($form-range-track-box-shadow);
   60:     @include box-shadow($form-range-thumb-box-shadow);
   77:     @include box-shadow($form-range-track-box-shadow);

bootstrapv5\node_modules\bootstrap\scss\forms\_form-select.scss:
   23:   @include box-shadow($form-select-box-shadow);
   30:       @include box-shadow($form-select-box-shadow, $form-select-focus-box-shadow);

bootstrapv5\node_modules\bootstrap\scss\mixins\_buttons.scss:
   23:   @include box-shadow($btn-box-shadow);
   37:       @include box-shadow($btn-box-shadow, 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5));
   57:         @include box-shadow($btn-active-box-shadow, 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5));
  107:         @include box-shadow($btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($color, .5));

24 matches across 11 files

From the results, we can see the following variables can not be set to none:

$input-box-shadow: none;
$input-focus-box-shadow: none;

$btn-box-shadow: none;
$btn-focus-box-shadow: none;
$btn-active-box-shadow: none;

$form-select-box-shadow: none;
$form-select-focus-box-shadow: none;

Please, can you confirm the same behavior?