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

support images and fonts url() in css #788

Closed
wants to merge 7 commits into from
Closed

support images and fonts url() in css #788

wants to merge 7 commits into from

Conversation

Fil
Copy link
Contributor

@Fil Fil commented Feb 14, 2024

closes #786

here's an example application (which I wouldn't necessarily recommend!) with a background image from docs/assets/ and fonts saved in docs/fonts/:

:root {
  --serif: Cardo, serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  background-image: url("assets/paper-texture.jpeg");
}

@font-face {
  font-family: "Cardo";
  src: url("fonts/cardo.woff") format("woff");
  font-display: swap;
}

inline-css-images

You can also use static assets to modify the toggle or caret with the docs/toggle.svg file :

:root {
  --theme-toggle: url("toggle.svg");
}

The resources are inlined in text (for svg) base64 (for binary images and fonts), so use with some caution. Note that inlining fonts avoids FOUC, and the style.css is cached, so it's not necessarily bad. Just put these definitions at the bottom of stylesheet? The alternative is to use absolute URLs to an assets server. I'm working on saving these as assets.

@Fil Fil requested a review from mbostock February 14, 2024 13:17
Copy link
Member

@mbostock mbostock left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hmm, I do think we’ll want to figure out how to treat these as assets that get included in the build (and added to _file or _import and content-hashed so it can be immutably cached). We should be able to mark these as external and then add them to the build, rewrite the relative paths, somehow?

(hashes provided for free by esbuild)
@Fil Fil changed the title inline css images and fonts support images and fonts url() in css Feb 15, 2024
Fil added 4 commits February 15, 2024 18:18
this is in order to remove the misleading messages from esbuild, because the developer cannot mark these assets as external.
@Fil Fil requested a review from mbostock February 15, 2024 18:27
@Fil
Copy link
Contributor Author

Fil commented Mar 4, 2024

related #423

Copy link
Member

@mbostock mbostock left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should change this so that importing in CSS produces the same result as linking to a static asset in HTML (i.e., it goes in _file).

@Fil Fil closed this May 20, 2024
@Fil Fil deleted the fil/css-loaders branch May 20, 2024 17:52
Fil added a commit that referenced this pull request May 20, 2024
(This includes images and fonts using url().)

Using onResolve (as suggested in #786 (comment))

closes #786
supersedes #788
@Fil
Copy link
Contributor Author

Fil commented May 20, 2024

superseded by #1372 😓

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

Successfully merging this pull request may close these issues.

esbuild crashes when style.css contains @font-face definitions
2 participants