Merge remote-tracking branch 'refs/remotes/origin/main'

Author: richardtallent

__tests__/replaceCss.spec.ts

@@ -0,0 +1,10 @@
+import { describe, test, expect } from "vitest"
+import { replaceCss } from "../dist/esm/index.js"
+
+describe("Replace Css", () => {
+  test('It should inline external css and preserve other script attributes', () => {
+    const outputStyle = `<style rel="stylesheet"></style>`
+    expect(replaceCss(`<link rel="stylesheet" href="./foo.css">`, "foo.css", "")).toEqual(outputStyle)
+    expect(replaceCss(`<link rel="stylesheet" href="https://www.base.dir/path/foo.css">`, "foo.css", "")).toEqual(outputStyle)
+  })
+})

__tests__/replaceScript.spec.ts

@@ -5,12 +5,17 @@ describe("Replace Script", () => {
 	test("It should inline external scripts and preserve other script attributes", () => {
 		const outputMod = "<script module></script>"
 		expect(replaceScript(`<script module src="./foo.js"></script>`, "foo.js", "")).toEqual(outputMod)
+		expect(replaceScript(`<script module src="https://www.base.dir/path/foo.js"></script>`, "foo.js", "")).toEqual(outputMod)
 		expect(replaceScript(`<script src="./foo.js" module></script>`, "foo.js", "")).toEqual(outputMod)
+		expect(replaceScript(`<script src="https://www.base.dir/path/foo.js" module></script>`, "foo.js", "")).toEqual(outputMod)
 		const outAsync = "<script async module></script>"
 		expect(replaceScript(`<script async src="./foo.js" module></script>`, "foo.js", "")).toEqual(outAsync)
+		expect(replaceScript(`<script async src="https://www.base.dir/path/foo.js" module></script>`, "foo.js", "")).toEqual(outAsync)
 		expect(replaceScript(`<script src="./foo.js" async module></script>`, "foo.js", "")).toEqual(outAsync)
+		expect(replaceScript(`<script src="https://www.base.dir/path/foo.js" async module></script>`, "foo.js", "")).toEqual(outAsync)
 		const outCrossOrigin = `<script async type="module" crossorigin></script>`
 		expect(replaceScript(`<script async type="module" crossorigin src="/assets/foo.js"></script>`, "assets/foo.js", "")).toEqual(outCrossOrigin)
+		expect(replaceScript(`<script async type="module" crossorigin src="https://www.base.dir/path/assets/foo.js"></script>`, "assets/foo.js", "")).toEqual(outCrossOrigin)
 		const outPolyfill = `<script type="module">`
 		// Removing polyfill without minification
 		expect(replaceScript(`<script type="module" crossorigin>(function polyfill() {stuff here\nfoo})();`, "", "", true)).toEqual(outPolyfill)

src/index.ts

@@ -25,17 +25,17 @@ export type Config = {
 const defaultConfig = { useRecommendedBuildConfig: true, removeViteModuleLoader: false, deleteInlinedFiles: true }
 
 export function replaceScript(html: string, scriptFilename: string, scriptCode: string, removeViteModuleLoader = false): string {
-	const reScript = new RegExp(`<script([^>]*?) src="[./]*${scriptFilename}"([^>]*)></script>`)
+	const reScript = new RegExp(`<script([^>]*?) src="(.*)?${scriptFilename}"([^>]*)></script>`)
 	const preloadMarker = /"?__VITE_PRELOAD__"?/g
 	const newCode = scriptCode.replace(preloadMarker, "void 0").replace(/<(\/script>|!--)/g, '\\x3C$1')
-	const inlined = html.replace(reScript, (_, beforeSrc, afterSrc) => `<script${beforeSrc}${afterSrc}>${newCode.trim()}</script>`)
+	const inlined = html.replace(reScript, (_, beforeSrc, _base, afterSrc) => `<script${beforeSrc}${afterSrc}>${newCode.trim()}</script>`)
 	return removeViteModuleLoader ? _removeViteModuleLoader(inlined) : inlined
 }
 
 export function replaceCss(html: string, scriptFilename: string, scriptCode: string): string {
-	const reStyle = new RegExp(`<link([^>]*?) href="[./]*${scriptFilename}"([^>]*?)>`)
+	const reStyle = new RegExp(`<link([^>]*?) href="(.*)?${scriptFilename}"([^>]*?)>`)
 	const newCode = scriptCode.replace(`@charset "UTF-8";`, "")
-	const inlined = html.replace(reStyle, (_, beforeSrc, afterSrc) => `<style${beforeSrc}${afterSrc}>${newCode.trim()}</style>`);
+	const inlined = html.replace(reStyle, (_, beforeSrc, _base, afterSrc) => `<style${beforeSrc}${afterSrc}>${newCode.trim()}</style>`);
 	return inlined
 }