The urls are not being rewritten correctly inside multiple background images property with css variables

[ben-lau]

To reproduce:

I have a css variable that is used in the background-image property, but when I use the multiple background images property, none of the urls are rewritten correctly except the first statement.

here is my less code in ./style/rabbit/rabbitV1.less which import by ./style/rabbit/index.less:

/* ./style/rabbit/rabbitV1.less */
  #root {
    --bg-compose: url('../../asset/rabbit/bg-top.png') no-repeat top center 100% 68px,
      url('../../asset/rabbit/bg-middle.png') no-repeat 0px 67px 100% calc(100% - 67px - 67px),
      url('../../asset/rabbit/bg-bottom.png') no-repeat bottom center 100% 68px;
  }

here is my directory structure tree:

goodbud/
├─api.js
├─app.jsx
├─index.js
├─style
|   ├─index.less
|   ├─rabbit
|   |   ├─index.less
|   |   ├─rabbitV1.less
├─asset
|   ├─rabbit
|   |   ├─bg-bottom.png
|   |   ├─bg-middle.png
|   |   ├─bg-top.png
|   |   ├─bg.png
|   |   └toast-bg.svg

Current behavior:

The above less code will be transformed into this:

  #root {
    --bg-compose: url('../asset/rabbit/bg-top.png') no-repeat top center 100% 68px, /* only this url will be rewrite!!! */
      url('../../asset/rabbit/bg-middle.png') no-repeat 0px 67px 100% calc(100% - 67px - 67px),
      url('../../asset/rabbit/bg-bottom.png') no-repeat bottom center 100% 68px;
  }

Now only the first url will be converted correctly, the rest will just be output as-is.

Expected behavior:

  #root {
    --bg-compose: url('../asset/rabbit/bg-top.png') no-repeat top center 100% 68px, /*all urls should be rewritten */
      url('../asset/rabbit/bg-middle.png') no-repeat 0px 67px 100% calc(100% - 67px - 67px), /*all urls should be rewritten */
      url('../asset/rabbit/bg-bottom.png') no-repeat bottom center 100% 68px; /*all urls should be rewritten */
  }

long story short, I hope all the url will be transform.

I debug the transform process in less, I found only the first statement will be correctly identified as Expression, the rest will be identified as Quote.

• Use css variable as keywords

• Use background-image as keywords

Environment information:

• less version: 4.2.0
• nodejs version: 14.21.0
• operating system: macbook pro Apple M1

[matthew-dean]

@ben-lau

Does this work?

#root {
    @bg-compose: url('../../asset/rabbit/bg-top.png') no-repeat top center 100% 68px,
        url('../../asset/rabbit/bg-middle.png') no-repeat 0px 67px 100% calc(100% - 67px - 67px),
        url('../../asset/rabbit/bg-bottom.png') no-repeat bottom center 100% 68px;
     --bg-compose: @bg-compose;
  }

[ben-lau]

@matthew-dean Yes, it works, thanks and sorry for the late reply.