Skip to content

fix: url() with variable or relative path in sass/scss is broken (fixes #7651)#8765

Closed
frankyeyq wants to merge 2 commits intovitejs:mainfrom
frankyeyq:dev
Closed

fix: url() with variable or relative path in sass/scss is broken (fixes #7651)#8765
frankyeyq wants to merge 2 commits intovitejs:mainfrom
frankyeyq:dev

Conversation

@frankyeyq
Copy link

@frankyeyq frankyeyq commented Jun 24, 2022

Description

fixes #7651

Additional context


What is the purpose of this pull request?

  • Bug fix
  • New Feature
  • Documentation update
  • Other

Before submitting the PR, please make sure you do the following

  • Read the Contributing Guidelines.
  • Read the Pull Request Guidelines and follow the Commit Convention.
  • Check that there isn't already a PR that solves the problem the same way to avoid creating a duplicate.
  • Provide a description in this PR that addresses what the PR is solving, or reference the issue that it solves (e.g. fixes #123).
  • Ideally, include relevant tests that fail without this PR but pass with it.

@netlify
Copy link

netlify bot commented Jun 24, 2022

Deploy Preview for vite-docs-main canceled.

Name Link
🔨 Latest commit cb947be
🔍 Latest deploy log https://app.netlify.com/sites/vite-docs-main/deploys/62b5ccc926346d00093cb0a9

@frankyeyq frankyeyq changed the title fix(css):url() with variable or relative path in sass/scss is broken …(fix:#7651) fix:url() with variable or relative path in sass/scss is broken …(fix:#7651) Jun 24, 2022
@frankyeyq frankyeyq changed the title fix:url() with variable or relative path in sass/scss is broken …(fix:#7651) fix: url() with variable or relative path in sass/scss is broken …(fix:#7651) Jun 24, 2022
Copy link
Member

@sapphi-red sapphi-red left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you for the PR. Could you add a test for this?


if (hasUrls) {
rebased = await rewriteCssUrls(rebased || content, rebaseFn)
rebased = await rewriteCssUrls(rebased || content, rebaseFn, file)
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe we could pass variablePrefix($, @) from rebaseUrls is called instead of file name? It will remove many conditions.

(inLess && rawUrl.startsWith('@')) ||
((inSass || inScss) && rawUrl.startsWith('$'))
) {
return `url('${rawUrl}')`
Copy link
Member

@sapphi-red sapphi-red Jun 25, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
return `url('${rawUrl}')`
return `url(${rawUrl})`

I think rawUrl include quotes if needed.

@sapphi-red sapphi-red added feat: css p3-minor-bug An edge case that only affects very specific usage (priority) needs test labels Jun 25, 2022
@sapphi-red sapphi-red changed the title fix: url() with variable or relative path in sass/scss is broken …(fix:#7651) fix: url() with variable or relative path in sass/scss is broken (fixes #7651) Jun 25, 2022
@makroxyz
Copy link

Any news on this PR?

@andyexeter
Copy link

Is there anything I can do to help get this PR merged?

I'd love to migrate our projects over from Webpack to Vite, but this is a real blocker for us.

@bluwy
Copy link
Member

bluwy commented Aug 15, 2022

We need tests for this. Feel free to send another PR that supersedes this with tests!

@ioan-cristea
Copy link

Any news?

@andyexeter
Copy link

I tried implementing this into a new PR with tests but a load of other seemingly unrelated tests started failing because of it.

This is out of my area of expertise so not something I'm going to be able to help with unfortunately.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

feat: css needs test p3-minor-bug An edge case that only affects very specific usage (priority)

Projects

None yet

Development

Successfully merging this pull request may close these issues.

url() with variable or relative path in sass/scss is broken

6 participants