In Dev, background image URIs are missing enclosed quotes

[bay-jacewhitten]

🐛 bug report

In Development, css property background uri's are missing their enclosing " " causing chrome to report invalid property value.

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

No Babelrc in project root (never needed one before), using Parcel stock / provided / built-in

{
  dev: parcel watch --no-content-hash --no-hmr ./src/index.js
  build: cross-env NODE_ENV=production parcel build --no-source-maps ./src/index.js
  
  Node : 16.13
  Parcel: 2.2.0 (was forced to upgrade from 2.0.1)
  Sass transformer : 2.2.0 (was forced to upgrade from 2.0.1)
  React: 17+
}

🤔 Expected Behavior

Property value output should be valid in inspector for background URI

😯 Current Behavior

Currently causes an invalid prop type and no longer renders the image in the DOM

💁 Possible Solution

🔦 Context

Spent two - three hours thinking I was doing something wrong syntax wise, package upgrade, etc. Even converted the scss file to a styled js file to make it show up. A soon as I added " data:... " to the inspected image, waalaa.

css =>

background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='20' width='20' viewBox='0 0 20 20' aria-hidden='true' focusable='false' class='bay-dropdown-svg'%3E%3Cpath d='M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z'%3E%3C/path%3E%3C/svg%3E");

Should be noted I did not see this issue when doing a production build output.

When using the sass transformer, in the development mode, enclosing quotes for the data URI should not be stripped or converted. If so they should respect the browser standard.

💻 Code Sample

🌍 Your Environment

Also, I was trying to use 2.0.1 on Parcel and Sass Transformer and was forced through build error I had to use 2.2.0. Was not a huge fan of that. Outside of that, I love what parcel does for me on the regular. Thanks guys!

@parcel/package-manager: Could not find module "@parcel/transformer-sass" satisfying ^2.2.0.

~/.../project-root/package.json:84:5
    83 |     "@babel/core": "^7.15.0",
  > 84 |     "@parcel/transformer-sass": "^2.0.1",
  >    |     ^^^^^^^^^^^^^^^^^^^^^^^^^^ Found this conflicting local requirement.
    85 |     "cross-env": "^7.0.3",

Software	Version(s)
Parcel	2.2.0
Node	16.13
npm/Yarn	Yarn 1.22.17
Operating System	OSX
Sass	1.44.0

[devongovett]

Possible regression in 2.2.0

[treechime]

Possible regression in 2.2.0

I was able to fix this by reverting to 2.1.1, so it would seem that way

[kai-dorschner-twinsity]

Same here, if I manually add double-quotes in compiled CSS it starts working again. Probably due to the new @parcel/css package that's being used now by default?

[Shinyaigeek]

Without a specification in .parcelrc, parcel-bundler do not use @parcel/css in the transformer-css in the current version (2.2.0) of parcel-bundler, and the optimizer-css which use @parcel/css should not normally be used in dev mode, so @parcel/css seems not to cause this issue.

I think a change in @parcel/transformer-css, transformer-css normally used, in developing @parcel/transformer-css-experimental, the experimtental transformer-css using @parcel/css, caused this issue.

If I come up with a good idea about how to fix this issue, I'll send a PR, but I'd be also happy if someone else could do it.

[jonka-blip]

Also, I was trying to use 2.0.1 on Parcel and Sass Transformer and was forced through build error I had to use 2.2.0. Was not a huge fan of that. Outside of that, I love what parcel does for me on the regular. Thanks guys!

It seems currently not possible to pin parcel to a fixed version. In my opinion this is something that needs to be addressed! Any thoughts on this? :)

[mischnic]

Also, I was trying to use 2.0.1 on Parcel and Sass Transformer and was forced through build error I had to use 2.2.0.

With this, it probably doesn't work (because you're not actually using 2.0.1 of Parcel but it has resolved to a newer version):

	"parcel": "^2.0.1",

but this should:

	"parcel": "2.0.1",
	"@parcel/transformer-sass": "2.0.1"

[jonka-blip]

	"parcel": "2.0.1",
	"@parcel/transformer-sass": "2.0.1"

Thats what I had, but in the package.js of @parcel/transformer-sass it has under dependencies ie "@parcel/plugin": "^2.0.1". This will install version 2.2.0 of that dependency. So inspite of me feeling assured that I had pinned something, my deployment broke as soon as 2.2.0 was released. And it can happen again anytime :/
Would be great if this could be addressed :)

[jonka-blip]

f53ffe7#diff-9b5b551583960c7d497c27aa39af32398b7e6f98c6745de0c8163d9a9c715f05L23