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

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:

https://github.com/madskristensen/WebCompiler/issues/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

Download bootstrap less files from http://getbootstrap.com/getting-started/#download
Create a less file with a reference import to bootstrap.less and use a mixin:
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; }

Nov 23 '16 09:11 stilren

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

Dec 31 '16 10:12 rjgotten

I can confirm (at least with BS3) this happens to me as well with latest BS3 and [email protected]

Jun 08 '17 16:06 fredpalmer

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

Jun 08 '17 16:06 seven-phases-max

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

Aug 21 '17 13:08 PonchoPowers

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

Aug 21 '17 18:08 rjgotten

This gist should be enough to reproduce it. Fails in both [email protected] and [email protected], 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) {
}

Nov 27 '17 04:11 garkin

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

Nov 27 '17 21:11 rjgotten

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.