less.js icon indicating copy to clipboard operation
less.js copied to clipboard

Multiple scoped imports via (reference) fail

Open dankolz opened this issue 2 years ago • 1 comments

To reproduce:

.foo {
	@import (reference) "abc";
	.one {
		.two(); // defined in abc.less
	}
}

in another file

.bar {
	@import (reference) "abc";
	.three {
		.two(); // defined in abc.less
	}
}

Current behavior:

The second use of .two() fails with "NameError: .two is undefined in ..."

Expected behavior:

Both references should work.

Environment information:

I don't think the env matters here, but...

  • less version: 3 and 4
  • nodejs version: 18
  • operating system: Ubuntu 20.04

** Additional **

There is a workaround here by using:

	@import (multiple, reference) "abc";

The right behavior seems to me to be that the second reference should work because:

  1. The first reference is scoped, and therefor abc.less is not actually getting included twice, in the sense that duplicate css is being produced.
  2. It's a reference, and doesn't generate duplicate code anyway. Why not make the default 'multiple' to avoid the issue I had?
  3. Treating references in the manner suggested here seems to be the more typical way that compilers treat libraries.

If a change isn't made to the code, it seems like it may be worthwhile to put this info into the documentation somewhere.

dankolz avatar Jul 27 '23 14:07 dankolz

I don't disagree this is somewhat counter-intuitive, but it's consistent with the way that @import is defined. In other words, @import was defined first with a "single-call" kind of pattern, to avoid duplication. Then multiple was added to signal duplication. Then reference was added. (I could have the order of the last two flipped.)

In the future, this will likely be made more clear with more intuitive behavior with separate at-rules for including qualified rules vs including variables / mixins. See: https://github.com/less/less-meta/issues/39

matthew-dean avatar Oct 02 '23 17:10 matthew-dean