Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
stilren opened this issue Nov 23, 2016 · 13 comments · Fixed by #3649 · May be fixed by ITSecOps-404/aports#1
Closed

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

stilren opened this issue Nov 23, 2016 · 13 comments · Fixed by #3649 · May be fixed by ITSecOps-404/aports#1

Comments

@stilren
Copy link

stilren commented Nov 23, 2016

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

  3. Compile your less file

Current behavior

The css file contains many empty @media queries
image

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
Copy link
Contributor

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

@fredpalmer
Copy link

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

@seven-phases-max
Copy link
Member

seven-phases-max commented Jun 8, 2017

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
Copy link

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

@rjgotten
Copy link
Contributor

rjgotten commented Aug 21, 2017

@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
Copy link

garkin commented Nov 27, 2017

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
Copy link
Contributor

rjgotten commented Nov 27, 2017

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
Copy link

stale bot commented Mar 28, 2018

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.

@stale stale bot added the stale label Mar 28, 2018
@thatcher
Copy link

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

@matthew-dean
Copy link
Member

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

@jkufrin
Copy link

jkufrin commented May 29, 2018

I'm having the same issue.

@lukebanana
Copy link

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

@altcom-neil
Copy link

Bug still exists in latest version of less - 3.9.0

@MoonCoral MoonCoral mentioned this issue Sep 24, 2021
matthew-dean pushed a commit that referenced this issue Aug 20, 2022
* Tests for 2991

* Fix for 2991

* chore: add missing newline

Co-authored-by: Olivier Nicodemi <olivier.nicodemi@zinal-consulting.de>
Co-authored-by: Lei Chen <chenleicoder@foxmail.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.