@import duplicates the css class wrapper sometimes

[billgsm]

Basically, I wanted to isolate an element of my DOM by telling bootstrap to get applied only on elements inside an element having the css class 'bootstrap'.

So the idea was to do it this way:

.bootstrap {
  @import "../../../node_modules/bootstrap/less/bootstrap.less";
}

Knowing that:

package.json

...
  "dependencies": {
    "bootstrap": "^3.3.7",
    "less": "^2.7.1"
  },

However, the generated css file is almost perfect except these lines where lessc duplicates the css class "wrapper":

button.bootstrap .close {
.bootstrap .bootstrap .dl-horizontal dd:before,
.bootstrap .bootstrap .dl-horizontal dd:after,
.bootstrap .bootstrap .container:before,
.bootstrap .bootstrap .container:after,
.bootstrap .bootstrap .container-fluid:before,
.bootstrap .bootstrap .container-fluid:after,
.bootstrap .bootstrap .row:before,
.bootstrap .bootstrap .row:after,
.bootstrap .bootstrap .form-horizontal .form-group:before,
.bootstrap .bootstrap .form-horizontal .form-group:after,
.bootstrap .bootstrap .btn-toolbar:before,
.bootstrap .bootstrap .btn-toolbar:after,
.bootstrap .bootstrap .btn-group-vertical > .btn-group:before,
.bootstrap .bootstrap .btn-group-vertical > .btn-group:after,
.bootstrap .bootstrap .nav:before,
.bootstrap .bootstrap .nav:after,
.bootstrap .bootstrap .navbar:before,
.bootstrap .bootstrap .navbar:after,
.bootstrap .bootstrap .navbar-header:before,
.bootstrap .bootstrap .navbar-header:after,
.bootstrap .bootstrap .navbar-collapse:before,
.bootstrap .bootstrap .navbar-collapse:after,
.bootstrap .bootstrap .pager:before,
.bootstrap .bootstrap .pager:after,
.bootstrap .bootstrap .panel-body:before,
.bootstrap .bootstrap .panel-body:after,
.bootstrap .bootstrap .modal-header:before,
.bootstrap .bootstrap .modal-header:after,
.bootstrap .bootstrap .modal-footer:before,
.bootstrap .bootstrap .modal-footer:after {
  content: " ";
  display: table;
}

....
button.bootstrap .close {
.bootstrap .bootstrap .dl-horizontal dd:after,
.bootstrap .bootstrap .container:after,
.bootstrap .bootstrap .container-fluid:after,
.bootstrap .bootstrap .row:after,
.bootstrap .bootstrap .form-horizontal .form-group:after,
.bootstrap .bootstrap .btn-toolbar:after,
.bootstrap .bootstrap .btn-group-vertical > .btn-group:after,
.bootstrap .bootstrap .nav:after,
.bootstrap .bootstrap .navbar:after,
.bootstrap .bootstrap .navbar-header:after,
.bootstrap .bootstrap .navbar-collapse:after,
.bootstrap .bootstrap .pager:after,
.bootstrap .bootstrap .panel-body:after,
.bootstrap .bootstrap .modal-header:after,
.bootstrap .bootstrap .modal-footer:after {
  clear: both;
}

And for some other lines it edit the selector this way:

select.bootstrap .input-sm {
    height: 30px;
    line-height: 30px;
}

textarea.bootstrap .input-sm,
select[multiple].bootstrap .input-sm {
    height: auto;
}

[seven-phases-max]

This is expected result, see #1850 (for other issues you'll have by using this namespacing trick with Bootstrap see also #2052).

[seven-phases-max]

Closing as expected behaviour (more details in #1850, #2052 etc.)