less / less.js

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

Can not find variable when a variable be created in plugin. #4241

Open bestlyg opened 8 months ago

bestlyg commented 8 months ago

To reproduce:

I want to define a variable in plugin. It will insert @x: 33px to current scope.

module.exports = class LessPluginBestMixin {
    install(less, pluginManager, functions) {
        functions.add("x", () => {
            return new less.tree.Declaration(
                "@x",
                new less.tree.Value(new less.tree.Keyword("33px"))
            );
        });
        functions.add("define_var", (key) => {});
    }
};

When I write the code to a less file:

@plugin "the-plugin-path";

div {
    x();
    width: @x;
}

It works and return the css code:

div {
    width: 33px;
}

But when I write the code to a less file:

@plugin "the-plugin-path";

@a: 1px;

div {
    height: @a;
    x();
    width: @x;
}

It not works and return a error cause can not find the variable of @x.

I had tried debug the source code of less and I found the code:

image

The height need read this variable and execute the function of variable and be cached. It lead to the function of variable can not run again when the width read the @x.

I changed the code that will clear the cache when the function return a Declaration.

I tried to fix the code. URL

Current behavior:

Expected behavior:

Environment information:

Vijay-948 commented 8 months ago

can you assign me I will try this

bestlyg commented 8 months ago

can you assign me I will try this

I've tried to fix it. URL