When setting both $input-focus-box-shadow and $input-box-shadow to none, Bootstrap generates invalid CSS.

[morganwahl]

Prerequisites

• I have searched for duplicate or closed issues
• I have validated any HTML to avoid common problems
• I have read the contributing guidelines

Describe the issue

If you set these Bootstrap Sass variables like so:

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

You end up with this invalid CSS:

.form-control:focus {
  ...
  box-shadow: none, none;
}

This isn't a problem for the appearance of the page, but it would be nice to generate valid CSS, so that automated tools that look for invalid CSS aren't raising errors.

I see the box-shadow mixin does issue a warning when there are multiple box shadows and one of them is "none". Could it also have some logic to just output a single "none" when all the shadow values are "none"?

Reduced test cases

Include this before the Bootstrap variables.

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

<input class="form-control"></input>

Put the focus in the input.

What operating system(s) are you seeing the problem on?

Linux

What browser(s) are you seeing the problem on?

No response

What version of Bootstrap are you using?

v5.3.1

[mdo]

Near as I can tell this doesn't happen for us? Demo of v5.3.5 at https://stackblitz.com/edit/stackblitz-starters-tmn8jqwf?file=src%2Fstyles.scss.

[julien-deramond]

In addition to setting the two Sass variables to none, we also need to set $enable-shadows: true, as shown in this example:
https://stackblitz.com/edit/stackblitz-starters-k7bg44bd?file=src%2Fstyles.scss.

This results in the following output:

Reopening the issue accordingly.