less / less.js

Less. The dynamic stylesheet language.
http://lesscss.org
Apache License 2.0
17k stars 3.41k forks source link

String colors are not transformed correctly to native less colors using less.tree.Color from a custom plugin #3683

Closed happyhunter7 closed 2 years ago

happyhunter7 commented 2 years ago

To reproduce: I created a super simple plugin (getColor) that accepts an argument and returns the color of that argument. Everything works fine (The css is generated correctly and the plugin work)

But IF I'm trying to use the value (the color) returned by the plugin in some functions like fade(...) or other built-in Less functions it throws an error:

Error evaluating function `fade`: Argument cannot be evaluated to a color

Thats how I'm using it in Less file

@plugin "getColor";

@primary: getColor('primary');

.selector {
  // without fade works perfect and will output #cccccc
  color: getColor('primary');

  // This line throw the ERROR
  background: fade(@primary, 10%);
}

Thats the plugin file content // ./getColor.js

const colors = {
 'primary': '#ccc'
};
module.exports = {
   install: (less, _ , functions) => {
     functions.add('getColor', (arg) => {
       var originalColor = colors[arg.value];
        var preparedColor = originalColor.replace('#', '');
        return less.tree.Color(preparedColor, 1, originalColor );
      });
   }
}

Current behavior:

Throws and error and say that the color is not valid only when used in built-in functions like fade(...). But if to use the result of the plugin function without fade() the resulted CSS will be correct and the output too thats strange)

Expected behavior:

Environment information:

Being hones I spent already 2 days understanding how I should return something from a plugin firstly I encountered this error when I was returning the raw value directly as a string "#ccc" That also doesn't work....Then I noticed somewhere in docs that I need to return these values using less.tree.Color but that also doesn't work...pls help(

happyhunter7 commented 2 years ago

Ended up using modifyVars feature and now it works)))

koralarts commented 2 years ago

A bit late but for anyone who's still looking for a solution for this, you need to construct a new Color instance.

return new less.tree.Color(preparedColor, 1, originalColor);