Less.js: A way to specify whether a list should use commas or spaces.

[calvinjuarez]

Per https://github.com/seanCodes/bootstrap-less-port/pull/13#discussion_r239613779

Currently, when pulling out all arguments as a list (using ...), the list is space-separated. It'd be nice to have a function that could force using a comma or force using a specified delimiter when outputting.

If this isn't suited to core Less, I could use some help understanding the best way to do this with a plugin.

[matthew-dean]

To clarify @calvinjuarez's post, Less will essentially change the "model" of what is considered the list based on how many members are in the list.

As in:

@breakpoints:
  small 600px,
  medium 800px,
  large 1200px;

Less considers that a list with 3 items, and each item is a list with 2 items. So, if you have an each(), you might do

each(@breakpoints, .(@set) {
  screen: extract(@set, 1);
  size: extract(@set, 2);
})

But say you change your original value to only hold one pair.

@breakpoints:
  small 600px;

In the developer's mind, only 2 sets have been deleted. But now Less treats this as a list with 2 items, not a list of 1 item, which contains a single list of 2 items. Therefore any functions / mixins etc relying on multiple pairs will now break.

I wasn't sure if this needs to be addressed in core or not, since it could just be a simple plugin.

[seven-phases-max]

Less will essentially change the "model" of what is considered the list based on how many members are in the list

Just to clarify - Less does not of course actually decide anything here (the behaviour is solely decided by the input code itself - not by the compiler). I.e. essentially it's just a fundamental flaw of the particular pattern ("using nested lists as maps") and not a language or compiler defect as such. Hence more classical maps like {small: 600px} are to be preferred in this case.

since it could just be a simple plugin.

Yep. In particular to comment https://github.com/seanCodes/bootstrap-less-port/pull/13#discussion_r239672064:

but the tree.Expression class doesn't seem to have a way to specify that the list output should be comma- or space-separated.

It should not. See https://github.com/less/less-docs/issues/446
(you can learn how to work with different list types in https://github.com/seven-phases-max/less-plugin-lists code-base for example).

[matthew-dean]

@seven-phases-max

Just to clarify - Less does not of course actually decide anything here (the behaviour is solely decided by the input code itself - not by the compiler). I.e. essentially it's just a fundamental flaw of the particular pattern ("using nested lists as maps") and not a language or compiler defect as such

That's a good perspective.

If there's nothing to change here, behaviorally, and @calvinjuarez is fine with it, I'm fine to close as a won't-change, and anything specific someone wants to do to handle this case sounds like maybe the @plugin route is indeed the way to go.

Sound good?

[calvinjuarez]

DRs as maps is _way_ better. Anyone coming here for maps should do that instead.

[matthew-dean]

@calvinjuarez That's a good point. There's no change in "interpretation" of lists of lists. It's a well-defined structure of key/value pairs.

[seven-phases-max]

DRs as maps is way better.

Just note that DR is not the only way to define a map and its has its issues if compared to other methods.

[matthew-dean]

@seven-phases-max

Right, if we address #3368 to evaluate the scope before returning a value, then the difference between rulesets as maps and lists as maps may be evaluation scope & order. That is, a list has no distinct "internal scope".

_Btw, unrelated, but sometimes it's easy to miss Github notifications, @seven-phases-max @calvinjuarez, if you have time to look at https://github.com/less/less.js/pull/3363, that would be great._