Multiple less files with variable interpolation is not compiling properly

[ArunaArivazhagan]

I have tried to compile 2 less files with Variable declaration using Parcel. Below trying to compile two Less file with variable interpolation approach like "@component-name: banner1;" and "@component-name: "banner2"; and then trying to compile the less and its compiling only the last imported less file.

Find the below git repo and test to replicate the issue.

Clone the below repo https://github.com/ArunaArivazhagan/parecelless from the root directory run "npm install " then run "npx lessc index.less" from the root directory. Once the build success go to theme/dist/theme.css It is compiling only the last imported less. it is not supporting two less import.

When i give same name in 2 files it is taking the last one.

Current Output:

Expected output:

[iChenLei]

Yah, I reproduce this issue on my local machine. It looks like less do something wrong when lookup less variable.

[ArunaArivazhagan]

@matthew-dean

Any updates on the above issue ?

[lumburr]

It's not a bug

1. The variable defined by index.less can be used by imported less.
2. The imported less variable can be used by index.less.
3. The imported less variable can be used by other imported less.

Here is our test case. path: less.js\packages\test-data\less_main\import-interpolation.less

@my_theme: "test";

@import "import/import-@{my_theme}-e.less";

@import "import/import-@{in}@{terpolation}.less";

@import "import/interpolation-vars.less";

path: less.js\packages\test-data\less_main\import\import-interpolation.less

@import (inline) "imports/logo.less";
@import "import-@{in}@{terpolation}2.less";

path: less.js\packages\test-data\less_main\import\interpolation-vars.less

@in: "in";
@terpolation: "terpolation";

// should be ignored because its already imported
// and it uses a variable from the parent scope
@import "import-@{my_theme}-e.less";

1. interpolation-vars.less can use variable from _main\import-interpolation.less.
2. _main\import-interpolation.less can use variable from interpolation-vars.less.
3. import\import-interpolation.less can use variable from interpolation-vars.less.

So the same variable declaration will be overwritten by the last.