Empty @media queries generated when compiling less file with (reference) to bootstrap

[stilren]

This bug was originally reported to WebCompiler but was stated to be a bug with the node-less module. Please refer to original bug report for more information:

madskristensen/WebCompiler#269

Installed product versions

• Visual Studio: 2015 Professional
• Web Compiler extension: 1.11.319
• Bootstrap less 3.3.7

Description

Empty @media queries generated when compiling less file with (reference) to bootstrap

Steps to recreate

1. Download bootstrap less files from http://getbootstrap.com/getting-started/#download

2. Create a less file with a reference import to bootstrap.less and use a mixin:
   

3. Compile your less file

Current behavior

The css file contains many empty @media queries

Expected behavior

The css file should not contain empty @media queries
.mybutton { padding: 1px 1px; font-size: 1px; line-height: 1px; border-radius: 1px; }

[rjgotten]

Does this reproduce when using @import (reference) with any sheet containing media queries in general, or is it a Bootstrap-specific thing?

[fredpalmer]

I can confirm (at least with BS3) this happens to me as well with latest BS3 and less@2.7.2

[seven-phases-max]

As @rjgotten mentioned, it's better to have a minimal example not involving any huge external framework (if there's issue with empty media queries).
Bootstrap itself is not written to be imported with any (reference) option in mind so expecting or not expecting something from above snippet is not quite applicable at all (after all this is not Bootstrap issue tracker).

[PonchoPowers]

This is nothing to do with Bootstrap, any referenced files should not be adding CSS to the output in this manner.

[rjgotten]

@Matthew-Bonner
Then give a minimal reproducing case. No-one is going to want to thrawl through acres of Bootstrap code to find the lines that cause those empty media statements to be generated.

Providing a terse reproduction is common etiquette when filing a bug.

[garkin]

This gist should be enough to reproduce it.
Fails in both less@2.7.3 and less@3.0.0-pre.4, node v8.9.1

// referenced.less
.referenced {
    // line comment is enough to reproduce it
    @media (hover) { 
        // sezam
    }
    // repeat to prove point
    @media (hover) { 
        // sezam
    }
    // but block comment is not, huh
    @media (hover) { 
        /* salabim */
    }
    // following block does not output, needs line comment
    @media (hover) { 
        color: #000000;
    }
}
// needs to be nested to fail
@media (hover) { 
    // sezam
}

// index.less
@import (reference) "./referenced.less";

Run: lessc index.less out.css

// out.css
@media (hover) {
}@media (hover) {
}

[rjgotten]

Then the problem is probably not with @media queries, but with the treatment of single-line (Less) comments inside @media queries. Now developers will know where to look. :-)

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[thatcher]

This is still an issue for me. Any progress? I dont use bootstrap.

[matthew-dean]

@thatcher I marked it as up-for-grabs.

[jkufrin]

I'm having the same issue.

[lukebanana]

I too have this issue, using Webpack 4 and less-loader.

[altcom-neil]

Bug still exists in latest version of less - 3.9.0