Description
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:
lessversion: 4.2.0nodejsversion: 14.21.0operating system: macbook pro Apple M1