CSS url() with space not escaped correctly with experimentalStaticExtraction

[enricogallesio]

What version of astro are you using?

1.0.0-rc.6

Are you using an SSR adapter? If so, which one?

none

What package manager are you using?

npm

What operating system are you using?

Linux

Describe the Bug

Not sure if this can be considered a bug or deserves further investigation, but when using background-image: url();

if the filename contains a non escaped space character, for example: background-image: url('/filename spaced.jpg'); AND the file exists with that same filename or it is starting with that same filename until the space, astro gives no error in dev but gives an error in build

11:47:22 [build] Building static entrypoints...
[@astrojs/rollup-plugin-build-css-minify] Transform failed with 1 error:
<stdin>:1:202: ERROR: Expected ")" to end URL token
 error   Transform failed with 1 error:
  <stdin>:1:202: ERROR: Expected ")" to end URL token
  File:
    <stdin>
  Code:
      1623 |   }).join("");
    > 1624 |   let error = new Error(`${text}${summary}`);
           |               ^
      1625 |   error.errors = errors;
      1626 |   error.warnings = warnings;
      1627 |   return error;

this can be reproduced adding the above background-image in the index.astro file in the astro basic template, adding also an image file in /public and running build. Not sure if the codesandbox example attached helps.

The error in build can be obviously avoided be removing spaces in filenames (and path i guess) or properly escaping that.

Link to Minimal Reproducible Example

https://codesandbox.io/s/sharp-babycat-v01ttb?file=/src/pages/index.astro

Participation

• [ ] I am willing to submit a pull request for this issue.

[FredKSchott]

I think this got labelled accidentally, removing @bholmesdev but still curious what could be causing this. I don't think we touch url(), which makes me think this may be a Vite bug? Would love any help triaging to find out where this issue is coming from in the codebase.

[bluwy]

I tracked down to a bug in the Astro compiler where it's not correctly extracting url() that contains a space. In the repro dev mode, you can see that the image doesn't load too. Fixing this might also fix build.

Here's a minimal repro with the compiler only: https://stackblitz.com/edit/node-rtghop?file=index.js