Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Closed
ben-lau opened this issue Aug 17, 2023 · 2 comments · May be fixed by #4214
Closed

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

ben-lau opened this issue Aug 17, 2023 · 2 comments · May be fixed by #4214
Labels
bug

Comments

@ben-lau
Copy link

ben-lau commented Aug 17, 2023

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
    image

  • Use background-image as keywords
    image

Environment information:

  • less version: 4.2.0
  • nodejs version: 14.21.0
  • operating system: macbook pro Apple M1
@ben-lau ben-lau added the bug label Aug 17, 2023
@puckowski puckowski mentioned this issue Aug 20, 2023
Open
3 tasks
@matthew-dean
Copy link
Member

@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
Copy link
Author

ben-lau commented Dec 4, 2023

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

@ben-lau ben-lau closed this as completed Dec 4, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(issue:4211) parse entities in comma list puckowski/less.js
2 participants
@matthew-dean @ben-lau