How can I use PostCSS to inline remote fonts referenced using `@import url()`?

Question

I have the following CSS file:

@import url("https://rsms.me/inter/inter.css");
@import url("https://fonts.googleapis.com/css2?family=Noto+Color+Emoji&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap");

And the following PostCSS config:

module.exports = {
  plugins: {
    "postcss-url": { url: "inline" },
    "postcss-import": {},
    "tailwindcss/nesting": "postcss-nested",
    "tailwindcss": {},
    "autoprefixer": {},
  },
};

However, it does not inline anything:

@import url("https://rsms.me/inter/inter.css");
@import url("https://fonts.googleapis.com/css2?family=Noto+Color+Emoji&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap");

How do I download and inline those fonts?

Answer 1

It's been a while since I asked, but the answer is to use this PostCSS plugin https://github.com/unlight/postcss-import-url by adding it after the import plugin

module.exports = {
  plugins: {
    "postcss-import": {},
    "postcss-import-url": { modernBrowser: true },
  },
};