LESS compiler magically adds unwanted classes to my selector - css

Question

This is the important part of my LESS file:
input.ng-invalid {
color: #e74c3c;
border-color: #e74c3c;
}
It compiles into this:
input.ng-invalid .form-control {
color: #e74c3c;
border-color: #e74c3c;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
http://plnkr.co/edit/118uS4RciQYVPa5KH6oU
The form-control class is from Bootstrap and wouldn't break the selector if LESS didn't insert a space (input.ng-invalid.form-control works just fine)
The problem is that the browser is looking for the children of input with the class form-control. Apparently, there are no childrens of input in my HTML.
Is there a setting in bootstrap's LESS files that binds the form-control class to every input?

Answer 1

I've taken a look at the zip package you provided and there your input.ng-invalid is defined as (selfmade.less:L97):
input.ng-invalid {
.form-control-validation(#brand-danger; #brand-danger);
}
which is expected to compile to what you actually get (i.e. appending nested classes defined within .form-control-validation). This is just what this mixin is supposed to do.
-
Is there a setting in bootstrap's LESS files that binds the form-control class to every input?
I can't see any (at least in Bootstrap 3.1.1), so I can only suggest the following trick:
.danger_ {
.form-control-validation
(#brand-danger, #brand-danger);
}
input.ng-invalid.form-control
:extend(.danger_ .form-control all) {}
which will compile to this css (assuming bs-3.1.1).
-
Alternatively there's .has-error class which you can extend the same way:
input.ng-invalid.form-control
:extend(.has-error .form-control all) {}
and get a bit more compact output but with slightly different colours (#state-danger-text instead of #brand-danger).

Answer 2

This is not really an answer, but an investigation of your problem which doesn't fit in the comments box. I did't go through your set of less files since I don't have a 7z uncompressor here, but maybe I can give you some ideas to help you fix the problem or hack it.
One way of obtaining a contextual relationship like this:
input.ng-invalid .form-control { ... }
Is having a block like this somewhere in your Less files:
input.ng-invalid {
...
.form-control { ... }
...
}
Now that association might happen through a mixin so you probably won't find that exact pattern above, but you might find want to discover where .form-control is declared (a mixin, perhaps).
Now if you want this:
input.ng-invalid.form-control { ...}
and you a block like the one I showed above, you can add a & before the .form-control selector so that instead of obtaining a contextual relationship from the nesting blocks, you add a class. The & represents the selectors from the parent block. It would be something like:
input.ng-invalid {
...
&.form-control { ... }
...
}
See if you discover where .form-control is defined and try it out.
(Be aware that if other parts of your code use this mixin or selector, they may not work as before - this was just an analysis of a possible solution using Less and not the Bootstrap framework; add a bootstrap tag to your question and you might attract some Bootstrap specialists who might have a better solution.)