Nested import of bootstrap breaks form control validation

[ryleyb]

I use bootstrap nested in a a selector like this:

#app {
  @import "~bootstrap/scss/bootstrap.scss";
}

In 4.3.1, form control validation produced this CSS for invalid-feedback:

.was-validated #app .form-control:invalid ~ .invalid-feedback,
.was-validated #app .form-control:invalid ~ .invalid-tooltip, 
#app .form-control.is-invalid ~ .invalid-feedback,
#app .form-control.is-invalid ~ .invalid-tooltip {
  display: block;
}

In 4.4.0 it changed to this (and remains the same in 4.5.0):

.was-validated #app:invalid ~ .invalid-feedback,
.was-validated #app:invalid ~ .invalid-tooltip, 
#app.is-invalid ~ .invalid-feedback,
#app.is-invalid ~ .invalid-tooltip {
    display: block; 
}

I don't think either of these is particularly correct in the .was-validated area but this bit #app.is-invalid ~ .invalid-feedback is tripping me up, missing a space between #app and .is-invalid.

I think the original fix that made nesting work was #17352, and then possibly what broke it again was #29264 or #28447.

Relevant build versions:
-webpack 4 with recommended scss rules
-node 14
-node-sass 4.14

[mdo]

In general I despise the nested Sass rulesets in the validation mixin, but it was the easiest and sanest way forward at the time. I’m down to see it rewritten, though I don’t plan to focus on that myself anytime soon unfortunately.

Would be happy to review a PR!

[mdo]

Closing as stale—above comment still stands, though!