Issue 1:
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:

Short description:

CSS properties are duplicated when @importing multiple times (nested @import).

Issues on LessCSS repo (all the same issue):

less/less.js#49

less/less.js#71

less/less.js#324

The pull request that would fix the issue for LessCSS:

less/less.js#431

How it effects Initializr when using responsive.less:

Here's a cut-and-paste from generated CSS from a standard bootstrap style.css

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;
}

The workaround:

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.

Thoughts?

Some people have reported their CSS files ballooning up to > 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.

Issue 2:
I've noticed this issue with the .btn style in buttons.less but it's probably a more general thing.

In 2.0 RC we had nested style definitions for pseudo-classes and related classes - e.g.

&:hover {}
&.info {}
}

This enabled me to re-apply those styles easily to other elements with mixins, for example:

.btn;
}

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.

In the 2.0 GA I see that these pseudo classes and related classes have been split into separate blocks like this:

.btn:hover {}
.btn.info {}

This has two negative impacts:

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.

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.

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.:

.btn-hover {//hover styles here}
.btn:hover { .btn-hover; }

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!