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.

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

Broken url strings in CSS #7710

Closed
katzmo opened this issue Feb 14, 2022 · 3 comments · Fixed by #7718
Closed

Broken url strings in CSS #7710

katzmo opened this issue Feb 14, 2022 · 3 comments · Fixed by #7718

Comments

@katzmo
Copy link

katzmo commented Feb 14, 2022

🐛 bug report

Since @parcel/transformer-css-2.2.0 2.2.1 single quotes in CSS url() seem to be replaced with double quotes. This breaks url strings that contain double quotes.

🎛 Configuration (.babelrc, package.json, cli command)

No relevant config.

🤔 Expected Behavior

I’m expecting the following line to stay as is in the output CSS:

background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="32" height="24" viewBox="0 0 32 24"><polygon points="0,0 32,0 16,24" style="fill: rgb%2819, 80, 91%29"></polygon></svg>');`

😯 Current Behavior

From 2.2.0 2.2.1 on ' is changed to ", resulting in invalid CSS:

background-image: url("data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="32" height="24" viewBox="0 0 32 24"><polygon points="0,0 32,0 16,24" style="fill: rgb%2819, 80, 91%29"></polygon></svg>");`

💁 Possible Solution

Is there some config that would allow me turn this off again? I've experimented with transformer settings but no luck.

For now, pinning @parcel/transformer-css to 2.1.1 is a workaround:

  "resolutions": {
    "@parcel/transformer-css": "2.1.1"
  },

🔦 Context

There are no build errors but the resulting CSS is invalid and, in the above example, wouldn’t show the svg.

I cannot change the affected url string because it comes from a 3rd party dependency (foundation-sites).

💻 Code Sample

See example above.

🌍 Your Environment

Software Version(s)
Parcel 2.3.1
Node 14.17.4
Yarn 1.22.17
Operating System Ubuntu 21.10
@Shinyaigeek
Copy link
Contributor

simple reproduction
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>CSS Double</title>
  </head>
  <body>
    <h1>CSS Double</h1>
    <div class="background"></div>
    <style>
      .background {
        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="32" height="24" viewBox="0 0 32 24"><polygon points="0,0 32,0 16,24" style="fill: rgb%2819, 80, 91%29"></polygon></svg>');
        width: 100px;
        height: 100px;
      }
    </style>
  </body>
</html>

@mischnic
Copy link
Member

Related: #7564 and #7556

@katzmo
Copy link
Author

katzmo commented Feb 16, 2022

Thank you for looking into it!

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

Successfully merging a pull request may close this issue.

3 participants