Extend from @import (reference) #1878

SomMeri · 2014-02-16T10:52:15Z

Selectors from file imported as (reference) can extend rulesets in the main file. I think that nothing from reference imported file should appear in the main file, unless main file asks for it (either by extend or mixin).

The file import-as-reference-extend.less contains one extend:

.unusedAndReference:extend(.mainRuleset) {
    unused-and: reference;
}

and main.less imports it as reference:

@import (reference) "import/import-as-reference-extend.less";
.mainRuleset {
    main: ruleset;
}

It is compiled into:

.mainRuleset,
.unusedAndReference {
  main: ruleset;
}

Expected result:

.mainRuleset{
  main: ruleset;
}

Tested on windowns node.js less-1.6.3.js

The text was updated successfully, but these errors were encountered:

matthew-dean · 2014-02-16T22:32:44Z

Agreed. (reference) is implied to be passive until "activated" by another call. I would classify this as a bug.

donaldpipowitch · 2014-02-17T07:53:29Z

Looks like this bug: #1851

SomMeri · 2014-02-17T09:42:47Z

I think they are slightly different. In this case of referenced file extends something in main file. The other issue is a problem with chaining references, e.g. test-b probably appears in the output cause it extends yet another hidden selector.

mark-casasoft · 2014-02-20T08:02:42Z

I have this exact same issue. When I have a file which is importing bootstrap by reference and the file is empty, I would expect no output yet due to the 'extend' keyword, all the files which use such an extend keyword (mostly to extend with the clearfix class), gets output as well!

casasoft · 2014-02-20T08:15:19Z

Exactly same issue!

chharvey · 2014-02-26T03:20:19Z

@markcsasar Similar to what's happening to me. It really screws with overridden properties.

LESS:

/* fileA.less */
.box-inline {
    display: inline;
    border: 1px solid black;
}
.box-inline-block {
    &:extend(.box-inline);
    display: inline-block;
    font-style: italic;
}
.box-block {
    &:extend(.box-inline-block);
    display: block;
    font-weight: bold;
}

/* fileB.less */
@import url('fileA.css');
@import (reference) url('fileA.less')
/* nothing here */

What I actually get for the CSS:

/* fileA.less */
.box-inline,
.box-inline-block,
.box-block {
    display: inline;
    border: 1px solid black;
}
.box-inline-block,
.box-block {
    display: inline-block;
    font-style: italic;
}
.box-block {
    display: block;
    font-weight: bold;
}

@import url('fileA.css');
/* fileB.less */
.box-inline-block,
.box-block {
    display: inline;
    border: 1px solid black;
}
.box-block {
    display: inline-block;
    font-style: italic;
}
/* nothing here */

Expected result for the CSS:

/* fileA.less */
.box-inline,
.box-inline-block,
.box-block {
    display: inline;
    border: 1px solid black;
}
.box-inline-block,
.box-block {
    display: inline-block;
    font-style: italic;
}
.box-block {
    display: block;
    font-weight: bold;
}

@import url('fileA.css');
/* fileB.less */
/* nothing here */

Now when I link fileB.css:

<html>
    <link rel="stylesheet" stylesheet="fileB.css"/>
    <div class="box-block">Hello, world.</div>
</html>

This is what div.box-block looks like:

~~display: inline; (fileA.css:5)~~
~~border: 1px solid black; (fileA.css:6)~~
~~display: inline-block; (fileA.css:10)~~
~~font-style: italic; (fileA.css:11)~~
~~display: block; (fileA.css:14)~~
font-weight: bold; (fileA.css:15)
~~display: inline; (fileB.css:5)~~
border: 1px solid black; (fileB.css:6)
display: inline-block; (fileB.css:9)
font-style: italic; (fileB.css:10)

And this is what div.box-block should look like:

~~display: inline; (fileA.css:5)~~
border: 1px solid black; (fileA.css:6)
~~display: inline-block; (fileA.css:10)~~
font-style: italic; (fileA.css:11)
display: block; (fileA.css:14)
font-weight: bold; (fileA.css:15)

calvinjuarez · 2014-02-27T21:46:54Z

For the sake of discussion, I'd like to ask, what would we expect from mixins defined in the referenced file that extend classes also within the referenced file?

For example, given these LESS files, the I'd expect the output to look like that CSS there at the bottom. Any fix for this bug should preserve this behavior, IMO.

prototype.less

.prototype {
  proporties: here;
  .child {
    child-proporties: here;
  }
}
.extends-prototype() {
  &:extend(.prototype);
  & &-child { &:extend(.prototype .child); }
}

main.less

@import (reference) 'prototype.less';

.instance {
  .extends-prototype();
}

main.css

.instance {
  proporties: here;
}
.instance .instance-child {
  child-proporties: here;
}

LordZardeck · 2014-02-27T23:55:12Z

I'm having the same issues here. If I try to import bootstrap by reference and don't actually have any less styles, I still get output, even though technically I shouldn't. Using less v1.7.0 and node v0.10.25.

`@import (reference)` still not working! see [issue #1878 on less.js](less/less.js#1878)

JLLeitschuh · 2015-07-01T21:21:27Z

1+ Even if there was a work around that would be great.

hybopressthemes · 2015-07-11T01:41:28Z

+1

I am facing same issue. Please make it a priority, its been 1+ years since it was first reported here.

As we use automation tools to generate css and also minify etc. So its passed onto users, and not only it adds extra bytes but also confuses users if they have a look at css files. (I know I can manually clean it up, but why should I, if I have already invested so much in automation).

Hopefully it gets solved soon, or at-least provide hack until you fix it in core..

matthew-dean · 2015-09-02T02:25:23Z

I just ran into a variant of this bug, in which a class that extended another class ended up in the resulting CSS, even though BOTH classes were behind an @import (reference) call. Meaning, just the presence of an :extend seems to break the (reference) feature, and there's no way to "hide" the rulesets that use extend.

alexkrauss · 2015-09-07T23:25:59Z

We are running into this in a highly modular setup, with particularly bad consequences:

Many components. Each component foo has its own less file foo.less
Everything is packaged together in the end using webpack.
Most of these component styles import basic library material: @import (reference) '../base-styles'
The library material makes frequent use of extend
Thus we get large parts of the library duplicated, which leads to prohibitively large bundles even for just a few pages.

So, this is just to emphasize the importance of this issue :-).

- refactored how import reference works - refactored to-css-visitor (this is side product, it was getting complicated) - fixes issues less#1851, less#1896, less#1878, less#2716, less#1968, less#2162 (same as less#1896)

SomMeri · 2015-12-07T11:58:49Z

This should be fixed by #2729 .

mohammed-softordi · 2016-01-27T06:13:01Z

@SomMeri thanks you work, is this merge released? I am having the same problem with the latest release (2.5.1).

seven-phases-max · 2016-01-27T07:44:14Z

@mohammed-softordi You can find if the changes were released by comparing the PR merge date (Nov 20, 2015 in this case) to the releases date in the Changelog (the latest release is 2.5.3 of 2015-09-25).

SomMeri · 2016-01-27T13:38:10Z

@mohammed-softordi No it was not released yet. That pull request was finished last December while last release was in September.

mohammed-softordi · 2016-01-27T15:25:34Z

@seven-phases-max @SomMeri thanks, it would be really great if you could release the fix but, no pressure :-)

matthew-dean added the Bug label Feb 16, 2014

lukeapage added the Medium Priority label Feb 23, 2014

This was referenced Feb 28, 2014

(reference) imports broken #1633

Closed

Extend within (reference) imported files. #1851

Open

chharvey pushed a commit to chharvey/chharvey.github.io that referenced this issue Mar 23, 2014

upgraded to Less 1.7.0

e2b18a2

`@import (reference)` still not working! see [issue #1878 on less.js](less/less.js#1878)

seven-phases-max mentioned this issue Apr 23, 2014

When using an @import (reference), mixins that contain an & selector get added to the compiled output improperly #1968

Closed

dmitry-kulikov mentioned this issue Oct 24, 2014

Output from @import (reference) triggered by :extend() and .mixin oyejorge/less.php#178

Open

matthew-dean added high priority and removed medium priority labels Sep 2, 2015

SomMeri self-assigned this Oct 11, 2015

SomMeri mentioned this issue Nov 20, 2015

Fixing import by reference #2729

Merged

SomMeri closed this as completed Dec 7, 2015

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Extend from @import (reference) #1878

Extend from @import (reference) #1878

SomMeri commented Feb 16, 2014

matthew-dean commented Feb 16, 2014

donaldpipowitch commented Feb 17, 2014

SomMeri commented Feb 17, 2014

mark-casasoft commented Feb 20, 2014

casasoft commented Feb 20, 2014

chharvey commented Feb 26, 2014

calvinjuarez commented Feb 27, 2014

LordZardeck commented Feb 27, 2014

JLLeitschuh commented Jul 1, 2015

hybopressthemes commented Jul 11, 2015

matthew-dean commented Sep 2, 2015

alexkrauss commented Sep 7, 2015

SomMeri commented Dec 7, 2015

mohammed-softordi commented Jan 27, 2016

seven-phases-max commented Jan 27, 2016

SomMeri commented Jan 27, 2016

mohammed-softordi commented Jan 27, 2016

Extend from @import (reference) #1878

Extend from @import (reference) #1878

Comments

SomMeri commented Feb 16, 2014

matthew-dean commented Feb 16, 2014

donaldpipowitch commented Feb 17, 2014

SomMeri commented Feb 17, 2014

mark-casasoft commented Feb 20, 2014

casasoft commented Feb 20, 2014

chharvey commented Feb 26, 2014

calvinjuarez commented Feb 27, 2014

prototype.less

main.less

main.css

LordZardeck commented Feb 27, 2014

JLLeitschuh commented Jul 1, 2015

hybopressthemes commented Jul 11, 2015

matthew-dean commented Sep 2, 2015

alexkrauss commented Sep 7, 2015

SomMeri commented Dec 7, 2015

mohammed-softordi commented Jan 27, 2016

seven-phases-max commented Jan 27, 2016

SomMeri commented Jan 27, 2016

mohammed-softordi commented Jan 27, 2016