// @ts-check

/**
 * fonts.css points at /fonts/…, where the web app serves them. the blog and docs import
 * the same file but live under a base (/blog, /docs) with their own copy of the fonts
 * in public/fonts, so in their css the urls need that base in front. vite leaves
 * absolute urls in css alone, so this rewrites them once tailwind has inlined the file.
 *
 * @param {string} base the site's base, e.g. "/blog"
 * @returns {import("vite").Plugin}
 */
export const fontsBase = (base) => ({
	name: "tangled:fonts-base",
	enforce: "post",
	transform(code, id) {
		if (!id.split("?")[0].endsWith(".css") || !code.includes("/fonts/")) return;
		// in dev the css reaches here already wrapped in a js string, its quotes escaped
		return code.replace(/url\((\\?["']?)\/fonts\//g, `url($1${base.replace(/\/$/, "")}/fonts/`);
	}
});