View difference between Paste ID: ggCMtuH2 and 7pSLi2K2

 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.
+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?
 =================================== */