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

CSS url() with space not escaped correctly with experimentalStaticExtraction #502

Closed
1 task
enricogallesio opened this issue Aug 5, 2022 · 2 comments · Fixed by #503
Closed
1 task
Assignees
Labels
- P2: has workaround Bug, but has workaround (priority)

Comments

@enricogallesio
Copy link

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 FredKSchott added - P3: minor bug An edge case that only affects very specific usage (priority) s1-small - P5: urgent Fix build-breaking bugs affecting most users, should be released ASAP (priority) and removed - P3: minor bug An edge case that only affects very specific usage (priority) labels Aug 5, 2022
@FredKSchott FredKSchott added - P2: has workaround Bug, but has workaround (priority) s2-medium and removed - P5: urgent Fix build-breaking bugs affecting most users, should be released ASAP (priority) s1-small labels Aug 5, 2022
@FredKSchott
Copy link
Member

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
Copy link
Member

bluwy commented Aug 15, 2022

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

@bluwy bluwy transferred this issue from withastro/astro Aug 15, 2022
@bluwy bluwy changed the title 🐛 BUG: CSS url() with space not escaped correctly with experimentalStaticExtraction Aug 15, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
- P2: has workaround Bug, but has workaround (priority)
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants