add "namespace" to imported files

I need to add a base class to all rules for imported resources.

I have a project that use bootstrap less files to build an own theme.

I need to “namespace” all rules, to ensure, that the css rules only match in a subtree of document tree.

I tried to wrap all imports with the a base class like this:

 .my-base {
    @import boostrap.less
    @import my.less
}

but than, the “Parent Selectors” with “Changing selector order” makes problems.

Example:

rule in imported less file:

.menu {
  border-radius: 5px;
  .no-borderradius & {
    border-radius: 0;
  }
}

output after wrapping:

.my-base .menu {
  border-radius: 5px;
}
.no-borderradius .my-base .menu {
  border-radius: 0;
}

The second rule do not match anymore!

What I want as result is:

.my-base .menu {
  border-radius: 5px;
}
.my-base .no-borderradius .menu {
  border-radius: 0;
}

The only way I found is to run less two times and produce a temporary css file, that I import in second run like this:

 .my-base {
    @import (less) temp.css
}

But than I got wrong results for CSS calc function.

Input first run:

height: calc(~"100% - " 24px);

Result in temp.css:

height: calc(100% -  24px);

Result after wrapping:

height: calc(76%);

It would be nice, if there would be a way to handle this in one run.

May be with a special import option to prevent the “Changing selector order” of “Parent Selectors” to go outside an import or a global option for less that it can add a base class to all css rules after regular processing.

[seven-phases-max]

@mathieumg The label roughly means “the feature should not or cannot be implemented in the core, but can be supported via plugin”.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.