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

[tim-arnold]

Prerequisites

• [X] I have searched for duplicate or closed issues
• [X] I have validated any HTML to avoid common problems
• [X] 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[bot]]

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....

[eripe]

This problem can be caused of an old minifier or a minifier that does not support Bootstrap latest things. Try to use another minifier. Using an extension, like Web Compiler in VS did work as well as CleanCss: https://github.com/clean-css/clean-css/ and or in my case: https://www.npmjs.com/package/gulp-clean-css that is based on cleancss. Before I used cssnano and that npm caused this issue.

[micron]

Changing my CSS optimizer from css-nano to clean-css helped.