title: Magento 2: Less :extend() not adding the mixin
body: <p>I'm encountering an issue where I'm attempting to apply <code>.lib-clearfix()</code> to an class by using an extend. The issue is the extend itself does work, but the extend will not apply the mixin. The relevant files and css below:</p>
  
  <p>{theme-path}/web/css/source/<strong>_sources.less</strong></p>
  
  <pre><code>@import '_variables.less';
  @import (reference) '_extends.less';
  @import '_typography.less';
  @import '_layout.less';
  </code></pre>
  
  <p>{theme-path}/web/css/source/<strong>_extends.less</strong></p>
  
  <pre><code>@abs-add-clearfix: {
      .lib-clearfix();
  };
  
  .abs-add-clearfix {
      @abs-add-clearfix();
  }
  </code></pre>
  
  <p>lib/web/css/source/lib/<strong>_utilities.less</strong></p>
  
  <pre><code>.lib-clearfix() {
      &amp;:before,
      &amp;:after {
          content: '';
          display: table;
      }
      &amp;:after {
          clear: both;
      }
  }
  </code></pre>
  
  <p>{theme-path}/{Module}/web/css/source/<strong>_module.css</strong></p>
  
  <pre><code>&amp; when (@media-common = true) {
    .header.panel:extend(.abs-add-clearfix) {
      ...
    }
  }
  </code></pre>
  
  <p><code>.header.panel</code>, as written does not render the <code>.lib-clearfix()</code> styles. However, if in <code>_module.less</code> I alter <code>header.panel</code> to --</p>
  
  <pre><code>.header.panel {
    .lib-clearfix();
  }
  </code></pre>
  
  <p>-- it works as intended; the clearfix styles are applied. To test whether the extend was even being parsed, I altered <code>@abs-add-clearfix</code> to and reverted the <code>.header.panel</code> css.</p>
  
  <p><strong>LESS</strong></p>
  
  <pre><code>@abs-add-clearfix: {
    color: blue;
  };
  
  .abs-add-clearfix {
      @abs-add-clearfix();
  }
  
  .header.panel:extend(.abs-add-clearfix) {
    ...
  }
  </code></pre>
  
  <p><strong>Output</strong></p>
  
  <pre><code>.header.panel {
    color: blue;
  }
  </code></pre>
  
  <p>So, I fail to understand why calling <code>.lib-clearfix()</code> through an extend fails, though other css within that extend apply correctly, and why calling <code>.lib-clearfix()</code> within the <code>.header.panel</code> selector succeeds where the extend failed.</p>
  
  <p>Can someone help me understand what is going on here?</p>