Sorry, but that’s not valid CSS syntax. All modern browsers will completely ignore that rule. I don’t think Parcel should be expected to implement Internet Explorer’s bugs.

I agree it would be better to not use this old hack any more but it’s a bit harsh that the css-transformer refuses to build any CSS that uses it. I’m not asking to implement IE bugs, I would just expect the css-transformer to do what any modern browser does: ignore it.

Sorry, but that’s not valid CSS syntax. All modern browsers will completely ignore that rule. I don’t think Parcel should be expected to implement Internet Explorer’s bugs. The @supports rule is specifically designed for detecting supported features and providing fallbacks.

I think the code linked in that issue could be rewritten just using @supports.

background-image: url("data:image/png;...");

@supports (background-image: url("data:image/svg+xml;utf8,<svg></svg>")) {
  background-image: url("data:image/svg+xml;utf8...");
}

Seems like what the @supports rule is for. I’m not sure we should support invalid CSS hacks like this.

Parcel 2.7.0 supports the errorRecovery option.

In https://github.com/parcel-bundler/parcel-css/commit/69cbcca901f771457644d2064583f8e4a2ab9db8 I implemented a new errorRecovery option which will ignore invalid rules and declarations rather than erroring (just like a browser would). They are omitted from the output, and a warning is emitted instead. Hopefully this allows people to work around issues in libraries more easily. Working on getting it released soon.

Maybe we can see about sending some PRs to these libraries to replace these old hacks…

I have the same error. It is reproducible when adding the following:

@-moz-document url-prefix("") {
    .ui-side-panel-scrollable-content {
        overflow-y: auto
    }
}

It gives the following error:

@parcel/transformer-css: Unexpected token QuotedString("")

@devongovett Is there a doc for errorRecovery option?

I did try to use in package.json but it does not seem to work.

@ vishaldodiya Try setting errorRecovery to true instead of false. Worked for me (though I got additional warnings as well compared to not using it).

You always have the power to take ownership of your dependencies. For example, you could fork it or use something like patch-package. Or you could build a custom Parcel plugin to do it like the one someone posted here: https://github.com/parcel-bundler/parcel-css/issues/39#issuecomment-1098078026.

I’m open to an opt-in mode where things are less strict, but it’s not as simple as just not erroring, we’d need to implement error recovery. My free time is limited though and it’s not my top priority. Luckily, there are lots of ways to work around things like this.

For finding syntax errors I’ll use a linter, e.g. stylelint or prettier. Usually, I only want to know about syntax errors in my own code though, not some other node packages.

Also ran into this issue with 3rd party css using @media screen and (min-width: 0\0) (an issue there was closed as “not a bug” with a reference to http://browserbu.gs/css-hacks/media-min-width-0-backslash-0/). I think whatever works for CSS should not cause any error in @parcel/transformer-css.