--#{$prefix}form-invalid-border-color is compiling as border: 1px solid...

[tim-arnold]

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

We are using Bootstrap via NPM. When compiling the CSS for our theme, there seems to be something going wrong with the form valid/invalid rules originating in "node_modules/bootstrap/scss/_reboot.scss":

--#{$prefix}form-valid-color: #{$form-valid-color};
--#{$prefix}form-valid-border-color: #{$form-valid-border-color};
--#{$prefix}form-invalid-color: #{$form-invalid-color};
--#{$prefix}form-invalid-border-color: #{$form-invalid-border-color};

When that compiles, we see the first three compile in the ":root" rules correctly with the "--bs-" prefix. But the last one simply compiles as "border." That same block in the compiled "styles.css" file is:

--bs-form-valid-color: #198754;
--bs-form-valid-border-color: #198754;
--bs-form-invalid-color: #dc3545;
border: 1px solid #dc3545;

If I edit that _root.scss file in the node_modules to remove the last "form-invalid-border-color" rule then the same thing happens with the "valid" border color rule and we get a play border rule with the valid (green) color instead.

You can see it here: https://nirhealth.org/ (I've added an inline rule to remove the border that would otherwise show up on the HTML element).

Reduced test cases

Inspect the HTML element on https://nirhealth.org. No border is visible, but you will see it in the list of ":root" styles.

Locked package.json to v5.2.3 and the issue resolved. Bumping up to v5.3.0 and any after brings it back.

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

macOS

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

Chrome, Safari, Firefox

What version of Bootstrap are you using?

v5.3.3

[julien-deramond]

Hi @tim-arnold
In your website, we can notice the following:

:root,[data-bs-theme=light] {
  /* ... */
  --bs-form-invalid-color:#dc3545;
  border:1px solid #dc3545
}

[data-bs-theme=dark] {
  /* ... */
  --bs-form-invalid-color:#ea868f;
  --bs-form-invalid-border-color:#ea868f
}

Both are built the same way, based respectively on $form-feedback-invalid-color for the basic/light mode, and $form-invalid-border-color-dark for the dark mode.

I tried different updates of these values in a dedicated project, and it seems to work pretty well. Maybe there's an error with the way the values are updated on your side when trying to customize Bootstrap Sass values. I notice, that border:1px solid #dc3545 doesn't have any ";" at the end, for instance, that could show that there's something weird in the customization.

Could you share more elements relative to your customization, the corresponding Sass part for instance that you update?

Locked package.json to v5.2.3 and the issue resolved. Bumping up to v5.3.0 and any after brings it back.

FYI, these CSS variables didn't exist in v5.2.3.

[github-actions]

As the issue was labeled with awaiting-reply, but there has been no response in 14 days, this issue will be closed. If you have any questions, you can comment/reply.

[wecode-swiss-bruno]

Got exactly the same problem....