SASS @extend inheritance - Duplicated output

Inheritance chain: Shape => Square => Circle

/* index.html =============== */
<div class="square"></div>
<div class="circle"></div>

/* style.scss =============== */
@import "square";
@import "circle";

/* _shape.scss ============== */
.shape {
  border: 10px solid silver;
}

/* _square.scss ============== */
@import "shape";
.square {
    @extend .shape;
    width: 100px;
    height: 100px;
}

/* _circle.scss ============== */
@import "square";
.circle {
    @extend .square;
    @include border-radius(9999px);
}

/* ||||||| OUTPUT |||||||||||| */

.shape, .square, .circle {
  border: 10px solid silver;
}

.square, .circle {
  width: 100px;
  height: 100px;
}

.shape, .square, .circle {           <==== Repeated
  border: 10px solid silver;         <==== Repeated
}                                    <==== Repeated

.square, .circle {                   <==== Repeated
  width: 100px;                      <==== Repeated
  height: 100px;                     <==== Repeated
}                                    <==== Repeated

.circle {
  -webkit-border-radius: 9999px;
     -moz-border-radius: 9999px;
          border-radius: 9999px;
}

/* ================================
When I remove @import "square"; in style.scss, the repetition disappears but I want to be able to explicitly import "square" too, to see that I can use this class, and not just "circle", for clarity.
What am I doing wrong here? Is it a known bug?
=================================== */