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:

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

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

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

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

@rjgotten

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

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

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

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) {
}

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

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.

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

@thatcher

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

I'm having the same issue.

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

Bug still exists in latest version of less - 3.9.0

Fix #2991 (#3649)

Navigation Menu

Repository navigation

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

Installed product versions

Description

Steps to recreate

Current behavior

Expected behavior

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

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

Description

Installed product versions

Description

Steps to recreate

Current behavior

Expected behavior

Activity

rjgotten commented on Dec 31, 2016

fredpalmer commented on Jun 8, 2017

seven-phases-max commented on Jun 8, 2017

PonchoPowers commented on Aug 21, 2017

rjgotten commented on Aug 21, 2017

garkin commented on Nov 27, 2017

rjgotten commented on Nov 27, 2017

stale commented on Mar 28, 2018

thatcher commented on May 11, 2018

matthew-dean commented on May 11, 2018

jkufrin commented on May 29, 2018

lukebanana commented on Jun 20, 2018

altcom-neil commented on Jun 26, 2019

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions