I tried to do this with bundleAsync() custom resolver but it seems to be ignored/omitted 😕

let { code } = await bundleAsync({
  resolver: {
    read(filePath) {
      if (filePath.startsWith("http")) {
        return `@import url("${filePath}");`;
        // NOTE: returning any other CSS works as expected e.g.
        // return `body { background: red; }`;
      }
      return fs.readFileSync(filePath, "utf8");
    },
    resolve(specifier, from) {
      if (specifier.startsWith("http")) {
        return specifier;
      }
      return path.resolve(path.dirname(from), specifier);
    },
  },
});

I ended up reverting to bundle() and just prepended the external imports 🤷‍♂️

function writeWithFonts(outputPath, code) {
  const fonts = `@import url("https://fonts.googleapis.com/css?family=Font+One");
@import url("https://fonts.googleapis.com/css2?family=Font+Two");`;

  return fs.writeFileSync(outputPath, `${fonts}\n\n${code}`, "utf8");
}

It'd be great if there was an alternative approach; I'd much prefer to maintain the input CSS as the source of truth.

Mark import as external #479

Description

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions