<p dir="auto">The LessCSS bug has been around for years. It's easy to replicate and easy to work around. Many people have reported it to the LessCSS project, but the official LessCSS project seems largely uninterested in community development.  Issues go ignored and pull requests aren't accepted. Anyway, here's the issue:</p>
<h2 dir="auto">Short description:</h2>
<p dir="auto">CSS properties are duplicated when <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/importing/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/importing">@importing</a> multiple times (nested <a class="user-mention notranslate" data-hovercard-type="organization" data-hovercard-url="/orgs/import/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/import">@import</a>).</p>
<h2 dir="auto">Issues on LessCSS repo (all the same issue):</h2>
<p dir="auto"><a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="231168" data-permission-text="Title is private" data-url="https://github.com/less/less.js/issues/49" data-hovercard-type="issue" data-hovercard-url="/less/less.js/issues/49/hovercard" href="https://github.com/less/less.js/issues/49">less/less.js#49</a><br>
<a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="241752" data-permission-text="Title is private" data-url="https://github.com/less/less.js/issues/71" data-hovercard-type="issue" data-hovercard-url="/less/less.js/issues/71/hovercard" href="https://github.com/less/less.js/issues/71">less/less.js#71</a><br>
<a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="1261561" data-permission-text="Title is private" data-url="https://github.com/less/less.js/issues/324" data-hovercard-type="issue" data-hovercard-url="/less/less.js/issues/324/hovercard" href="https://github.com/less/less.js/issues/324">less/less.js#324</a></p>
<h2 dir="auto">The pull request that would fix the issue for LessCSS:</h2>
<p dir="auto"><a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="2015656" data-permission-text="Title is private" data-url="https://github.com/less/less.js/issues/431" data-hovercard-type="pull_request" data-hovercard-url="/less/less.js/pull/431/hovercard" href="https://github.com/less/less.js/pull/431">less/less.js#431</a></p>
<h2 dir="auto">How it effects Initializr when using responsive.less:</h2>
<p dir="auto">Here's a cut-and-paste from generated CSS from a standard bootstrap style.css</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="textarea {
font-family: &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif;
font-family: &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif;
font-size: 13px;
  font-weight: normal;
  line-height: 18px;
  font-size: 13px;
  font-weight: normal;
  line-height: 18px;
  font-family: &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif;
  font-family: &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif;
  font-size: 13px;
  font-weight: normal;
  line-height: 18px;
  font-size: 13px;
  font-weight: normal;
  line-height: 18px;
}"><pre class="notranslate"><code class="notranslate">textarea {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 13px;
  font-weight: normal;
  line-height: 18px;
  font-size: 13px;
  font-weight: normal;
  line-height: 18px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  font-weight: normal;
  line-height: 18px;
  font-size: 13px;
  font-weight: normal;
  line-height: 18px;
}
</code></pre></div>
<h2 dir="auto">The workaround:</h2>
<p dir="auto">Basically, completely avoid using an import of an import. For me, it meant essentially getting rid of bootstrap.less and responsive.less (and removing the includes of variables.less and mixins.less from responsive.less) and putting all includes in my main style.less file. Not the prettiest solution, but it works.</p>
<h2 dir="auto">Thoughts?</h2>
<p dir="auto">Some people have reported their CSS files ballooning up to &gt; 3mb mb because of all the duplicate rules generated. Before I go reorganizing the imports to avoid this issue for responsive.less, I thought I'd gather feedback/consensus and make sure this worth doing.</p>
<p dir="auto">I've noticed this issue with the .btn style in buttons.less but it's probably a more general thing.</p>
<p dir="auto">In 2.0 RC we had nested style definitions for pseudo-classes and related classes - e.g.</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content=" &amp;:hover {}
 &amp;.info {}
}
"><pre lang=".btn" class="notranslate"><code class="notranslate"> &amp;:hover {}
 &amp;.info {}
}

</code></pre></div>
<p dir="auto">This enabled me to re-apply those styles easily to other elements with mixins, for example:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content=" .btn;
}"><pre lang=".some-selector-for-buttons" class="notranslate"><code class="notranslate"> .btn;
}
</code></pre></div>
<p dir="auto">Which meant that all the items I'd targeted with that selector would get the .btn styles and the .btn:hover and .btn.info styles etc.</p>
<p dir="auto">In the 2.0 GA I see that these pseudo classes and related classes have been split into separate blocks like this:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content=".btn:hover {}
.btn.info {}
"><pre lang=".btn" class="notranslate"><code class="notranslate">.btn:hover {}
.btn.info {}

</code></pre></div>
<p dir="auto">This has two negative impacts:</p>
<ol dir="auto">
<li>I'm not able to mixin the pseudo class at all so have to duplicate the CSS styles from .btn:hover in my own code if I want to use those styles.</li>
<li>I can mixin the related class but I need to specifically do this for each related class, I don't get them all for free any more.</li>
</ol>
<p dir="auto">Was there a good reason behind this change? My first thought is that the nested structure provided better reuse of the LESS definitions. If that's a no-go for some reason, then factoring out the pseudo-class styles into a named class would at least allow for re-use of those styles without duplicating the definition. E.g.:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content=".btn-hover {//hover styles here}
.btn:hover { .btn-hover; }"><pre lang=".btn" class="notranslate"><code class="notranslate">.btn-hover {//hover styles here}
.btn:hover { .btn-hover; }
</code></pre></div>
<p dir="auto">I could just apply the btn class everywhere but I felt it was neater to select based on structure for parts of the app and leave the markup clean.. Thoughts on this issue appreciated!</p>