variable lookup in a selector

[keturn]

In a selector, how do I look up a value from a map or namespace?

Everything I've tried so far has failed with "Unrecognized Input" in the playground.

[copy of sample code here, since less-preview links haven't been loading content their encoded content for me.]

@fruity: .drupe, .berry;
@veggie: .leafy, .squash;

/* using a var in a selector works fine: */
div :is(@{fruity}) {
  color: red;
}

/* various methods of defining key/value collections… */
.my-mixin() {
  @fruityVar: .drupe, .berry;
  @veggieVar: .leafy, .squash;
  fruityProp: e(".drupe, .berry");
  veggieProp: e(".leafy, .squash");
}

@my-ruleset: {
  @fruityVar: .drupe, .berry;
  @veggieVar: .leafy, .squash;
  fruityProp: e(".drupe, .berry");
  veggieProp: e(".leafy, .squash");
}

#my-ns() {
  @fruityVar: .drupe, .berry;
  @veggieVar: .leafy, .squash;
}

/* lookup syntaxes work fine in property values: */
div {
  --mix-var: .my-mixin()[@fruityVar];
  --mix-prop: .my-mixin()[fruityProp];
  --mix-prop-dollar: .my-mixin[$veggieProp];
  --rs-var: @my-ruleset[@fruityVar];
  --rs-prop: @my-ruleset[veggieProp];
  --rs-prop-dollar: @my-ruleset[$veggieProp];
  --ns-var: #my-ns[@fruityVar];
}

/* but how to lookup in a selector? */
/* "Unrecognised input":
div :is(.my-mixin()[@veggieVar]) {
  color: green;
}
*/

[dosubot[bot]]

Hey @keturn! I'm Dosu, a bot here to help you with bug fixes, answer questions, and guide you on becoming a contributor. Feel free to ask me anything while waiting for a human maintainer to assist you.

To perform a lookup from a map or namespace in a selector in Less, you can use the NamespaceValue class, which allows you to access values using a map-like syntax. However, it seems that using this directly in a selector might not be straightforward due to the limitations of Less's syntax for selectors.

Here's an example of how you can use map or namespace lookups in Less:

#colors() {
  primary: blue;
  secondary: green;
}

.button {
  color: #colors[primary];
  border: 1px solid #colors[secondary];
}

This compiles to:

.button {
  color: blue;
  border: 1px solid green;
}

However, when it comes to using these lookups directly in selectors, Less might not support this syntax directly. Instead, you can assign the result of the lookup to a variable and then use that variable in your selector. Here's a workaround:

@fruity: .drupe, .berry;

#my-ns() {
  @fruityVar: .drupe, .berry;
}

@fruitySelector: #my-ns[@fruityVar];

div :is(@{fruitySelector}) {
  color: red;
}

This approach involves storing the result of the lookup in a variable and then using that variable in the selector. This should help you avoid the "Unrecognized Input" error you're encountering ^[1][2].

To continue talking to Dosu, mention @dosu.

[keturn]

Thanks bot. I see your workaround, and it does work, but it's cumbersome enough that it makes me hesitate to encapsulate my values in a namespace at all.