@media print triggers extend missing?

[bassjobsen]

I found:

@media print {}
.test {
color: red;
}
p {
&:extend(.test);
}

generates:

extend ' .test' has no matches

related:

twbs/bootstrap#15792
http://stackoverflow.com/questions/28450144/bootstrap-bootswatch-theme-with-less-how-to-compile
http://stackoverflow.com/questions/28475730/compiling-bootstrap-less-shows-errors-warnings

[seven-phases-max]

I cant' reproduce your results with current lessc version.
Both:

@media print {}

.test {
    color: red;
}

p {
    &:extend(.test);
}

and (assuming previous example was a typo):

@media print {
    .test {
        color: red;
    }

    p {
        &:extend(.test);
    }
}

compile as expected. Any extra details?

As of twbs/bootstrap#15792 - I'll try test it and report what can be wrong with that (Honestly I did not compile latest Bootstrap versions with the latest Less versions yet).

[seven-phases-max]

twbs/bootstrap#15792

Tested. bootstrap-3.3.2 with less v2.4.0 and v2.3.1 (node v0.10.36, Windows). Everything compiled as expected.

[bassjobsen]

nope it's not a typo

my error.less file:

@media print {
  color: green;
}
.test,
p {
  color: red;
}

then:

lessc error.less

the above works well, but when i set a destination file:

lessc error.less css.less

The output on the console shows:

extend ' .test' has no matches

lessc -v
lessc 2.4.0 (Less Compiler) [JavaScript]

and

node -v
v0.10.36

Running on ubuntu

[realtebo]

Same problem, any solution?

I can't use recess due to this output, because recess consider it as errors

[bassjobsen]

@seven-phases-max i found this "issue" for versions 2.3.0, 2.3.1 and 2.4.0

@realtebo are you able to set the --silent option? Otherwise you should use v2.2.0 for now

[bassjobsen]

possible the following code, in extend-visitor.js ,runs even when no extend has been found inside the media query:

visitMediaOut: function (mediaNode) {
    var lastIndex = this.allExtendsStack.length - 1;
    this.checkExtendsForNonMatched(this.allExtendsStack[lastIndex]);
    this.allExtendsStack.length = lastIndex;
},</strike>

[seven-phases-max]

@bassjobsen Ah, I see it now (sorry, I have missed the fact you never get a warning w/o output file specified).

[clarabstract]

It appears to be any sort of @ directives. It's also consistently triggered when using the in-browser compiler - e.g.:

@media screen {
}

.foo {
  content: 'test';
}
.bar {
  &:extend(.foo);
}

Console output:

 Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check http://xhr.spec.whatwg.org/.
less.js:772 extend ' .bar' has no matches
less.js:767 rendered http://localhost:4000/test.less successfully.
less.js:767 css for http://localhost:4000/test.less generated in 16ms
less.js:767 less has finished. css generated in 17ms

Without @media, as expected:

 Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check http://xhr.spec.whatwg.org/.
less.js:767 rendered http://localhost:4000/test.less successfully.
less.js:767 css for http://localhost:4000/test.less generated in 14ms
less.js:767 less has finished. css generated in 15ms

@font-face, @keyframes and @-webkit-keyframes all trigger this behavior.

Output is actually correct in all cases.

Bit of a problem just because it obscures valid warnings during development.

[a00andos]

Im seeing this problem aswell.

[rab1]

When compiling twitter bootstrap, with less.js gives following error

extend ' .clearfix' has no matches
less.min.js:13 extend ' .btn-xs' has no matches
less.min.js:13 extend ' .btn-sm' has no matches
less.min.js:13 extend ' .btn-lg' has no matches
(6) less.min.js:13 extend ' .clearfix' has no matches
less.min.js:13 extend ' .img-responsive' has no matches
(2) less.min.js:13 extend ' .clearfix' has no matches
less.min.js:13 extend ' .img-responsive' has no matches
less.min.js:13 rendered http://localhost:8888/less/bootstrap.less successfully.

[realtebo]

I've the same problem of @rab1
I need a clean output beacuse recess will not do its work if less output is not empty!

[steven-pribilinskiy]

Latest Bootstrap 3.3.2, latest in-browser less.js 2.4.0
options { env: "development", logLevel: 2 } leads to following output

[steven-pribilinskiy]

I've found that it's not just about @media that triggers the error
Following code will result in extend ' .a' has no matches error

@font-face {}
.a {}
.b:extend(.a) {}

no errors without @font-face

[lukeapage]

fixed with this commit and referenced incorrectly

95441fa

will release soon

[romaroid]

I had this mistake "extend ' .clearfix' has no matches"

less v 2.5.0 on windows/mac

.clearfix() {
  &:before,
  &:after {
    content: " "; // 1
    display: table; // 2
  }
  &:after {
    clear: both;
  }
}

.holder {
  width: 32px;
  &:extend(.clearfix);
}

But after some time in bootstrap less (file utilities.less) I found this

.clearfix {
.clearfix();
}

Now it works

[lukeapage]

@romaroid yes extend doesn't match mixins yet, so it was a valid warning until you added the extra code.