Can't extend, if I import a less file from within a class, because class is written twice in output

[donaldpipowitch]

I have the following two less files.

// fileA.less
.test-hello {
  color: red;
}

.test-world {
  &:extend(.test-hello all);
}

// fileB.less
.theme {
   @import "fileA";
}

What I would expect, if I compile fileB.less:

.theme .test-hello,
.theme .test-world {
  color: red;
}

What I get:

.theme .test-hello,
.theme .theme .test-world {
  color: red;
}

[seven-phases-max]

Well, the problem is that the code is equivalent to:

.theme {
    .test-hello {
      color: red;
    }

    .test-world {
      &:extend(.test-hello all);
    }
}

And that way the duplicated .theme in the CSS output is expected (by definition of all) as .theme .test-world replaces .test-hello in .theme .test-hello.

Indeed, this may become quite bad issue when namespaces become used wider (if extend would respect the scope the expected result can be achieved just with &:extend(.test-hello);, but it 's too late to change this... It looks like a new keyword (like that for example) is the only solution).

[donaldpipowitch]

It's sad that this can only be fixed by introducing a new keyword, but a solution is a solution and better than nothing 👍

[lukeapage]

Its a difficult one. If extend merged the first part of the selector you
wouldn't get duplication, but I struggle to see how it could work without
extending the keywords. We did create extend with keywords for this
purpose, we just need to decide what the most flexible extension is. It
would be good to create a new word that had some of the behavior of all..
that way you wouldn't need 2 words..

[donaldpipowitch]

I don't know if it is worth to create a new issue for this bug, because it is based on the same technology limitations, so I will add it here:

If you use & as a placeholder it will be placed before the wrapping class.

// fileA.less
.test-hello {
  color: red;
  .test-world & {
    color: green;
  }
}

// fileB.less
.theme {
   @import "fileA";
}

What I would expect, if I compile fileB.less:

.theme .test-hello {
  color: red;
}

.theme .test-world .test-hello {
  color: green;
}

What I get:

.theme .test-hello {
  color: red;
}

.test-world .theme .test-hello {
  color: green;
}

However this can be avoided if I write a more verbose selector without using &.

[lukeapage]

@donaldpipowitch thats the same issue

[seven-phases-max]

If you use & as a placeholder it will be placed before the wrapping class.

Not a bug. & represents complete set of parent selectors not only the closest one (see Parent Selectors, #9, #127, #1075, #1158 etc.)

[lukeapage]

Closing as dupe